diff --git a/demos/qunit-fail.html b/demos/qunit-fail.html
new file mode 100644
index 000000000..1818e2bb1
--- /dev/null
+++ b/demos/qunit-fail.html
@@ -0,0 +1,46 @@
+
+
+
+
+ QUnit
+
+
+
+
+
+
+
+
diff --git a/src/core/qunit.css b/src/core/qunit.css
index 7024d4198..9bd458beb 100644
--- a/src/core/qunit.css
+++ b/src/core/qunit.css
@@ -49,7 +49,7 @@ body {
padding: 13px;
color: #C2CCD1;
- background-color: #0D3349;
+ background-color: #1C1E24;
display: flex;
flex-flow: row wrap;
@@ -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 {
@@ -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);
@@ -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 */
@@ -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;
}
@@ -323,7 +325,7 @@ body {
}
.qunit-test a:hover,
.qunit-test a:focus {
- color: #0D3349;
+ color: #333;
}
.qunit-test .runtime {
@@ -334,9 +336,9 @@ body {
.qunit-assert-list {
margin-top: 0.5em;
- padding: 0.5em;
background-color: #FFF;
+ color: #333;
}
.qunit-collapsed {
@@ -348,21 +350,18 @@ 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 {
@@ -370,30 +369,29 @@ body {
}
.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;
@@ -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 */
@@ -450,7 +449,7 @@ body {
/** Test output: Skipped */
.qunit-test.skipped {
- background-color: #EBECE9;
+ background-color: #EEE;
}
.qunit-test .qunit-todo-label,
@@ -458,14 +457,15 @@ body {
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 */
diff --git a/src/core/reporters/HtmlReporter.js b/src/core/reporters/HtmlReporter.js
index 49a1540ae..0d96e7b5e 100644
--- a/src/core/reporters/HtmlReporter.js
+++ b/src/core/reporters/HtmlReporter.js
@@ -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;
@@ -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');