Merge pull request #1166 from IgnaceMaes/use-qunit-theme-ember

feat: introduce `theme` config and add `qunit-theme-ember` as option

addon/README.md

@@ -189,6 +189,13 @@ module.exports = function (defaults) {
            * removes the CSS for the test-container (where the app and components are rendered to)
            */
           disableContainerStyles: true,
+          /**
+           * default: 'qunit-default'
+           * options: 'qunit-default' | 'ember'
+           * 
+           * Sets the theme for the Web UI of the test runner. Use a different value to disable loading any theme, allowing you to provide your own external one.
+           */
+          theme: 'qunit-default',
         },
       },
     },

addon/package.json

@@ -43,7 +43,8 @@
   "dependencies": {
     "@embroider/addon-shim": "^1.8.6",
     "@embroider/macros": "^1.13.1",
-    "ember-cli-test-loader": "^3.1.0"
+    "ember-cli-test-loader": "^3.1.0",
+    "qunit-theme-ember": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

addon/src/index.js

@@ -1,12 +1,27 @@
 /* globals Testem */
-import 'qunit/qunit/qunit.css';
-
 import { macroCondition, getOwnConfig, importSync } from '@embroider/macros';
 
+/**
+ * Load qunit-default theme by default, if no custom theme is specified.
+ */
+if (
+  macroCondition(
+    getOwnConfig()?.theme === undefined ||
+      getOwnConfig()?.theme === 'qunit-default' ||
+      getOwnConfig()?.theme === 'ember'
+  )
+) {
+  importSync('qunit/qunit/qunit.css');
+}
+
 if (macroCondition(!getOwnConfig()?.disableContainerStyles)) {
   importSync('./test-container-styles.css');
 }
 
+if (macroCondition(getOwnConfig()?.theme === 'ember')) {
+  importSync('qunit-theme-ember/qunit.css');
+}
+
 export { default as QUnitAdapter, nonTestDoneCallback } from './adapter';
 export { loadTests } from './test-loader';
 

test-buildtime-options-app/ember-cli-build.js

@@ -11,6 +11,7 @@ module.exports = function (defaults) {
       setConfig: {
         'ember-qunit': {
           disableContainerStyles: true,
+          theme: 'qunit-default',
         },
       },
     },

test-buildtime-options-app/tests/unit/theme-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { assert as debugAssert } from '@ember/debug';
+
+module('theme', function () {
+  function style(element) {
+    return window.getComputedStyle(element);
+  }
+
+  test('the qunit-default themes are present when used', async function (assert) {
+    let qunitHeader = document.getElementById('qunit-header');
+
+    debugAssert(`#qunit-header must exist`, qunitHeader);
+
+    // Defaults
+    assert.strictEqual(style(qunitHeader).backgroundColor, 'rgb(13, 51, 73)');
+  });
+});