Skip to content

Commit

Permalink
Theme: Improve .qunit-test.fail and expected/actual diff colors
Browse files Browse the repository at this point in the history
* Fix huge color contrast issue with the dark red background
  behind similarly dark colors, especially in `.counts`.

* Remove white padding between test item edge and assert list
  assertion green/red shading. Instead, add some border-spacing
  to the assert item table.

* Adjust various colors slightly to comply with WCAG guidelines.
  https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

* Fix broken `.qunit-test.pass .test-expected { color: #999; }`
  override which was only applicable to passing "todo" tests as no
  other passing tests have failing assertions under them. This was
  meant to mute the colors of these failures to avoid distraction.
  However the CSS cascade has changed over time such that these
  styles no longer applied.

  This is likely masked by the fact that passing tests (including
  passing todos) are collapsed by default, so there's very little
  attention to these anyway.

  Restore these overrides, and extend them to the "diff" and
  "source" lines as well.

Easy way to identify color usage:

```
$ git grep '#[0-9A-F][0-9A-F]*' src/core/qunit.css | sed 's/^.*\(#[0-9A-F]*\).*/\1/' | sort | uniq -c
```

Ref #1774.
Closes #1803.
  • Loading branch information
Krinkle authored Dec 21, 2024
1 parent 27655d7 commit ef73ecb
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 47 deletions.
46 changes: 46 additions & 0 deletions demos/qunit-fail.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QUnit</title>
<link rel="stylesheet" href="../src/core/qunit.css">
</head>
<body>
<div id="qunit"></div>
<script src="../qunit/qunit.js"></script>
<script>
QUnit.config.collapse = false;
QUnit.test('apple', function (assert) {
assert.true(true, 'stem');
assert.true(true, 'skin');
});
QUnit.test('banana', function (assert) {
assert.true(true, 'foo');
var sentence = 'This is actual.';
assert.equal(sentence, 'This is expected.', 'example sentence');
assert.true(true, 'bar');
assert.true(true, 'baz');
});
QUnit.test('sauerkraut', function (assert) {
assert.true(true, 'acid rock');
assert.true(true, 'kraut rock');
});
QUnit.test.todo('Käsesuppe', function (assert) {
assert.true(true, 'foo');
var sentence = 'This is actual.';
assert.equal(sentence, 'This is expected.', 'example sentence');
assert.true(true, 'bar');
assert.true(true, 'baz');
});
QUnit.test('dampfnudel', function (assert) {
assert.true(true, 'stream');
assert.true(true, 'bun');
});
QUnit.test.skip('Kassler');
QUnit.test('pumpernickel', function (assert) {
assert.true(true, 'stream');
assert.true(true, 'bun');
});
</script>
</body>
</html>
76 changes: 38 additions & 38 deletions src/core/qunit.css
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ body {
padding: 13px;

color: #C2CCD1;
background-color: #0D3349;
background-color: #1C1E24;

display: flex;
flex-flow: row wrap;
Expand Down Expand Up @@ -91,11 +91,11 @@ body {
}
#qunit-banner.qunit-pass {
background-image: none;
background-color: #C6E746;
background-color: #64CF06;
}
#qunit-banner.qunit-fail {
background-image: none;
background-color: #EE5757;
background-color: #EC4242;
}

#qunit-toolbar {
Expand Down Expand Up @@ -227,7 +227,7 @@ body {
border: 1px solid #AAA;
border-top-color: transparent;
border-radius: 0 0 .25em .25em;
color: #0D3349;
color: #333;
background-color: #F5F5F5;
z-index: 99;
max-height: min(80vh, 700px);
Expand Down Expand Up @@ -264,11 +264,9 @@ body {
#qunit-modulefilter-dropdown-list .clickable.checked {
font-weight: bold;
background-color: #E2F0F7;
color: #0D3349;
}
#qunit-modulefilter-dropdown .clickable:hover {
background-color: #FFF;
color: #444;
}

/** Test Result */
Expand Down Expand Up @@ -309,7 +307,11 @@ body {
display: none;
}

.qunit-test:not(.skipped) .qunit-test-name {
/**
* Clicking test name toggles `.qunit-assert-list` and `.qunit-source`.
* Note that skipped tests only have `.qunit-source`.
*/
.qunit-test .qunit-test-name {
cursor: pointer;
}

Expand All @@ -323,7 +325,7 @@ body {
}
.qunit-test a:hover,
.qunit-test a:focus {
color: #0D3349;
color: #333;
}

.qunit-test .runtime {
Expand All @@ -334,9 +336,9 @@ body {

.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;

background-color: #FFF;
color: #333;
}

.qunit-collapsed {
Expand All @@ -348,52 +350,48 @@ body {
}

.qunit-assert-list li {
padding: 5px;
background-color: #FFF;
padding: 0.5em 5px;
border-bottom: none;
list-style-position: inside;
}

.qunit-assert-list table {
border-collapse: collapse;
margin-top: 0.2em;
border-spacing: 0.5em;
}

.qunit-assert-list th {
text-align: right;
vertical-align: top;
padding: 0 0.5em 0 0;
}

.qunit-assert-listt td {
vertical-align: top;
}

.qunit-assert-list pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}

.qunit-assert-list del {
color: #374E0C;
background-color: #E0F2BE;
color: #00740E;
background-color: #D9F9E3;
text-decoration: none;
}

.qunit-assert-list ins {
color: #500;
background-color: #FFCACA;
color: #710909;
background-color: #FFD8E1;
text-decoration: none;
}

/** Test output: Counts */

.qunit-test .counts {
color: #0D3349;
color: #333;
}
.qunit-test .passed {
color: #5E740B;
color: #00740E;
}
.qunit-test .failed {
color: #710909;
Expand All @@ -411,33 +409,34 @@ body {
}

.qunit-assert-list .pass {
color: #3C510C;
background-color: #FFF;
border-left: 10px solid #C6E746;
border-left: 10px solid #64CF06;
}

.qunit-test.pass .test-actual,
.qunit-test.pass .test-expected { color: #999; }

.qunit-test.pass .qunit-assert-list .fail,
.qunit-test.pass .qunit-assert-list .fail .test-actual,
.qunit-test.pass .qunit-assert-list .fail .test-expected,
.qunit-test.pass .qunit-assert-list .fail .test-diff,
.qunit-test.pass .qunit-assert-list .fail .test-source {
color: #366097;
}

/** Test output: Failing */

.qunit-test.fail {
color: #000;
background-color: #EE5757;
background-color: #FFD8E1;
}

.qunit-assert-list .fail {
color: #710909;
background-color: #FFF;
border-left: 10px solid #EE5757;
border-left: 10px solid #EC4242;
white-space: pre;
}
.qunit-assert-list .fail .test-actual {
color: #EE5757;
color: #EC4242;
}
.qunit-assert-list .fail .test-expected {
color: #008000;
color: #00740E;
}

/** Test output: Aborted */
Expand All @@ -450,22 +449,23 @@ body {
/** Test output: Skipped */

.qunit-test.skipped {
background-color: #EBECE9;
background-color: #EEE;
}

.qunit-test .qunit-todo-label,
.qunit-test .qunit-skipped-label {
background-color: #F4FF77;
display: inline-block;
font-style: normal;
color: #366097;
line-height: 1.8em;
padding: 0 0.5em;
margin: -0.4em 0 -0.4em 0;
color: #333;
/* Match and consume the 0.4em padding-top/bottom from `.qunit-test` */
padding: 0.4em 0.5em;
margin: -0.4em 0;
}

.qunit-test .qunit-todo-label {
background-color: #EEE;
background-color: #2F68DA;
color: #FFF;
}

/** Fixture */
Expand Down
17 changes: 8 additions & 9 deletions src/core/reporters/HtmlReporter.js
Original file line number Diff line number Diff line change
Expand Up @@ -980,11 +980,6 @@ export default class HtmlReporter {
}
}
}
if (status !== 'skipped') {
DOM.on(testTitle, 'click', function () {
DOM.toggleClass(assertList, 'qunit-collapsed');
});
}

let good = details.passed;
let bad = details.failed;
Expand All @@ -999,14 +994,18 @@ export default class HtmlReporter {
if (status === 'skipped') {
DOM.addClass(testItem, 'skipped');

let skipped = document.createElement('em');
skipped.className = 'qunit-skipped-label';
skipped.textContent = 'skipped';
testItem.insertBefore(skipped, testTitle);
const skippedLabel = document.createElement('em');
skippedLabel.className = 'qunit-skipped-label';
skippedLabel.textContent = 'skipped';
testItem.insertBefore(skippedLabel, testTitle);
testItem.insertBefore(document.createTextNode(' '), testTitle);
} else {
DOM.addClass(testItem, testPassed ? 'pass' : 'fail');

DOM.on(testTitle, 'click', function () {
DOM.toggleClass(assertList, 'qunit-collapsed');
});

if (details.todo) {
// Add label both for status=todo (passing) and for status=failed on a todo test.
DOM.addClass(testItem, 'todo');
Expand Down

0 comments on commit ef73ecb

Please sign in to comment.