mirror of
https://github.com/discourse/discourse.git
synced 2024-11-26 11:13:38 +08:00
DEV: Add dark theme support to QUnit (#19014)
This commit is contained in:
Jarek Radosz
GitHub
parent
59f1d01381
commit
4cbb811988
|
|
@ -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]);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
139
app/assets/stylesheets/qunit-custom.scss
Normal file
139
app/assets/stylesheets/qunit-custom.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
12
app/assets/stylesheets/qunit.scss
Normal file
12
app/assets/stylesheets/qunit.scss
Normal 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";
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user