DEV: Add dark theme support to QUnit (#19014)

app/assets/javascripts/discourse/ember-cli-build.js

@@ -138,7 +138,11 @@ module.exports = function (defaults) {
       return mergeTrees([
         tests,
         testHelpers,
-        discourseScss(`${discourseRoot}/app/assets/stylesheets`, "testem.scss"),
+        discourseScss(`${discourseRoot}/app/assets/stylesheets`, "qunit.scss"),
+        discourseScss(
+          `${discourseRoot}/app/assets/stylesheets`,
+          "qunit-custom.scss"
+        ),
       ]);
     } else {
       return mergeTrees([tests, testHelpers]);

app/assets/javascripts/discourse/lib/discourse-scss.js

@@ -3,7 +3,7 @@ const sass = require("sass");
 const fs = require("fs");
 const concat = require("broccoli-concat");
 
-let built = false;
+let builtSet = new Set();
 
 class DiscourseScss extends Plugin {
   constructor(inputNodes, inputFile, options) {
@@ -16,14 +16,14 @@ class DiscourseScss extends Plugin {
   }
 
   build() {
+    let file = this.inputPaths[0] + "/" + this.inputFile;
+
     // We could get fancy eventually and do this based on whether the css changes
     // but this is just used for tests right now.
-    if (built) {
+    if (builtSet.has(file)) {
       return;
     }
 
-    let file = this.inputPaths[0] + "/" + this.inputFile;
-
     let deprecationCount = 0;
     let result = sass.renderSync({
       file,
@@ -51,7 +51,8 @@ class DiscourseScss extends Plugin {
       `${this.outputPath}/` + this.inputFile.replace(".scss", ".css"),
       result.css
     );
-    built = true;
+
+    builtSet.add(file);
   }
 }
 

app/assets/javascripts/discourse/public/assets/scripts/discourse-test-listen-boot.js

@@ -1,30 +1 @@
-document.body.insertAdjacentHTML(
-  "afterbegin",
-  `
-  <style>
-    #ember-testing-container {
-      position: fixed;
-      background: white;
-      bottom: 0;
-      right: 0;
-      width: 640px;
-      height: 384px;
-      overflow: auto;
-      z-index: 9999;
-      border: 1px solid #ccc;
-      transform: translateZ(0);
-      box-sizing: border-box;
-      max-height: 100vh;
-    }
-
-    #ember-testing {
-      width: 200%;
-      height: 200%;
-      transform: scale(0.5);
-      transform-origin: top left;
-    }
-  </style>
-  `
-);
-
 require("discourse/tests/test-boot-ember-cli");

app/assets/javascripts/discourse/tests/index.html

@@ -8,12 +8,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta property="og:title" content="Discourse Tests" />
     <meta property="og:url" content="{{rootURL}}" />
+    <meta name="color-scheme" content="light dark">
 
     {{content-for "head"}} {{content-for "test-head"}}
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
     <link rel="stylesheet" href="{{rootURL}}assets/test-support.css" />
-    <link rel="stylesheet" href="{{rootURL}}assets/testem.css" />
+    <link rel="stylesheet" href="{{rootURL}}assets/qunit.css" />
+    <link rel="stylesheet" href="{{rootURL}}assets/qunit-custom.css" />
 
     {{content-for "head-footer"}} {{content-for "test-head-footer"}}
 
@@ -24,9 +26,6 @@
         -o-transition: none !important;
         transition: none !important;
       }
-      #ember-testing {
-        background-color: white;
-      }
       #qunit-fixture {
         position: absolute;
         top: -10000px;

app/assets/stylesheets/qunit-custom.scss

@@ -0,0 +1,139 @@
+#ember-testing-container {
+  position: fixed;
+  background: #fff;
+  bottom: 0;
+  right: 0;
+  width: 640px;
+  height: 384px;
+  overflow: auto;
+  z-index: 9999;
+  border: 1px solid #ccc;
+  transform: translateZ(0);
+  box-sizing: border-box;
+  max-height: 100vh;
+}
+
+#ember-testing {
+  background-color: #fff;
+}
+
+.discourse-root {
+  background: var(--secondary);
+}
+
+#ember-testing {
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: top left;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: #222;
+  }
+
+  #qunit-banner.qunit-pass {
+    background-color: #92b01e;
+  }
+
+  #qunit-banner.qunit-fail {
+    background-color: #7e2121;
+  }
+
+  #qunit-testrunner-toolbar {
+    background: #1b1b1b;
+    color: #90ac2d;
+  }
+
+  #qunit-testrunner-toolbar button {
+    background-color: #222;
+    border-color: #444;
+    color: #f8f8f8;
+  }
+
+  #qunit-filter-input,
+  #qunit-urlconfig-qunit_single_plugin {
+    background-color: var(--primary);
+    border: 1px solid var(--secondary-medium);
+    color: var(--secondary);
+  }
+
+  #qunit-filteredTest {
+    background-color: #90ac2d;
+    color: #366097;
+  }
+
+  #qunit-testresult {
+    background-color: #366097;
+    border-color: #000;
+    color: #e2f0f7;
+  }
+
+  #qunit-testresult a {
+    color: #7eb0f2;
+  }
+
+  #qunit-tests b.counts {
+    color: #ddd;
+  }
+
+  #qunit-tests b.failed {
+    color: #ff7777;
+  }
+
+  #qunit-tests b.passed {
+    color: #90ac2d;
+  }
+
+  #qunit-tests .pass {
+    background-color: #0c3f59;
+    border-color: #000;
+    color: #edeff5;
+  }
+
+  #qunit-tests .pass .test-name {
+    color: #7eb0f2;
+  }
+
+  #qunit-tests .fail {
+    background-color: #7e2121;
+    color: #ddd;
+  }
+
+  ol.qunit-assert-list > li > table > tbody,
+  tr.test-expected,
+  tr.test-actual,
+  tr.test-source {
+    border-color: #333;
+  }
+
+  #qunit-tests li {
+    border-color: #333;
+  }
+
+  #qunit-tests li li.pass {
+    background-color: #222;
+    border-color: #92b01e;
+    color: #90ac2d;
+  }
+
+  #qunit-tests li li.fail {
+    background-color: #222;
+    border-color: #7e2121;
+    color: #ff7777;
+  }
+
+  .qunit-assert-list {
+    background-color: #222;
+  }
+
+  #ember-testing-container {
+    background-color: #000;
+    border-color: #444;
+  }
+
+  #ember-testing {
+    background: #000;
+  }
+}

app/assets/stylesheets/qunit.scss

@@ -0,0 +1,12 @@
+// Styles for Ember CLI test environment
+
+:root {
+  --font-family: "Arial";
+}
+
+@import "common/foundation/colors";
+@import "common/foundation/variables";
+@import "common/foundation/mixins";
+@import "desktop";
+@import "color_definitions";
+@import "admin";

app/assets/stylesheets/testem.scss

@@ -1,27 +0,0 @@
-// styles for Ember CLI testem environment
-
-:root {
-  --font-family: "Arial";
-}
-
-$primary: #222222 !default;
-$secondary: #ffffff !default;
-$tertiary: #0088cc !default;
-$quaternary: #e45735 !default;
-$header_background: #ffffff !default;
-$header_primary: #333333 !default;
-$highlight: #ffff4d !default;
-$danger: #e45735 !default;
-$success: #009900 !default;
-$love: #fa6c8d !default;
-
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
-@import "desktop";
-@import "color_definitions";
-@import "admin";
-
-#ember-testing-container {
-  box-sizing: border-box;
-  max-height: 100vh;
-}

app/views/qunit/theme.html.erb

@@ -3,6 +3,8 @@
   <head>
     <title>Theme QUnit Test Runner</title>
     <%= discourse_color_scheme_stylesheets %>
+    <meta name="color-scheme" content="light dark">
+
     <%- if !@suggested_themes %>
       <%= preload_script "locales/#{I18n.locale}" %>
       <%= preload_script "vendor" %>
@@ -24,10 +26,12 @@
       <meta property="og:url" content="">
       <meta name="discourse/config/environment" content="<%=u discourse_config_environment(testing: true) %>" />
 
-      <%= discourse_stylesheet_link_tag(:desktop, theme_id: nil) %>
       <style>
-        <%= File.read("#{Rails.root}/app/assets/javascripts/node_modules/qunit/qunit/qunit.css") %>
+        <%= File.read("#{Rails.root}/app/assets/javascripts/node_modules/qunit/qunit/qunit.css").html_safe %>
       </style>
+
+      <%= discourse_stylesheet_link_tag(:desktop, theme_id: nil) %>
+      <%= discourse_stylesheet_link_tag("qunit-custom", theme_id: nil) %>
     <%- else %>
       <style>
         html {