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

This commit is contained in:
Jarek Radosz 2022-11-17 18:44:44 +01:00 committed by GitHub
parent 59f1d01381
commit 4cbb811988
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 171 additions and 68 deletions

View File

@ -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]);

View File

@ -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);
}
}

View File

@ -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");

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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";

View File

@ -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;
}

View File

@ -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 {