Skip to content

Commit 8ff4845

Browse files
mark-wiemermark-wiemer
authored
feat: highlight browser failures (#5222)
* Format html.js * Remove newlines between JSDoc comments and their symbols * (temp) update template.html to run tests * Color the stat result icon and text based on root suite result * (temp) add template fail and template pass * On first test fail, add fail indicator to stats * Remove extra newline * Format mocha.css with Prettier * Make pass icon color accessible * Cleanup mocha.css var names * Restore template to main * Remove thirteen-year-old comment 440e38c * Revert "Format html.js" This reverts commit 8552a91. * Revert "Restore template to main" This reverts commit 854ab12. * Color passes and failures count as well * Cleanup stats variables to consts * Fix stats not updating on root suite end * Revert "Remove extra newline" This reverts commit 27a7958. * Restore newlines :( * Restore newlines for real * Reapply "Remove extra newline" This reverts commit c43bffe. * Revert "Format mocha.css with Prettier" This reverts commit 0898ed5. * indent to 5, not 6 chars in mocha.css * Re-add newline in mocha.css * Reapply "Restore template to main" This reverts commit 714ee15.
1 parent 97af04f commit 8ff4845

File tree

2 files changed

+79
-30
lines changed

2 files changed

+79
-30
lines changed

‎lib/reporters/html.js‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,12 @@ var Date = global.Date;
3232
exports = module.exports = HTML;
3333

3434
/**
35-
* Stats template.
35+
* Stats template: Result, progress, passes, failures, and duration.
3636
*/
3737

3838
var statsTemplate =
3939
'<ul id="mocha-stats">' +
40+
'<li class="result"></li>' +
4041
'<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-flatlight" stroke-dasharray="100%,0%"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></li>' +
4142
'<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
4243
'<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
@@ -62,18 +63,35 @@ function HTML(runner, options) {
6263
var stats = this.stats;
6364
var stat = fragment(statsTemplate);
6465
var items = stat.getElementsByTagName('li');
65-
var passes = items[1].getElementsByTagName('em')[0];
66-
var passesLink = items[1].getElementsByTagName('a')[0];
67-
var failures = items[2].getElementsByTagName('em')[0];
68-
var failuresLink = items[2].getElementsByTagName('a')[0];
69-
var duration = items[3].getElementsByTagName('em')[0];
66+
const resultIndex = 0;
67+
const progressIndex = 1;
68+
const passesIndex = 2;
69+
const failuresIndex = 3;
70+
const durationIndex = 4;
71+
/** Stat item containing the root suite pass or fail indicator (hasFailures ? '✖' : '✓') */
72+
var resultIndicator = items[resultIndex];
73+
/** Passes text and count */
74+
const passesStat = items[passesIndex];
75+
/** Stat item containing the pass count (not the word, just the number) */
76+
const passesCount = passesStat.getElementsByTagName('em')[0];
77+
/** Stat item linking to filter to show only passing tests */
78+
const passesLink = passesStat.getElementsByTagName('a')[0];
79+
/** Failures text and count */
80+
const failuresStat = items[failuresIndex];
81+
/** Stat item containing the failure count (not the word, just the number) */
82+
const failuresCount = failuresStat.getElementsByTagName('em')[0];
83+
/** Stat item linking to filter to show only failing tests */
84+
const failuresLink = failuresStat.getElementsByTagName('a')[0];
85+
/** Stat item linking to the duration time (not the word or unit, just the number) */
86+
var duration = items[durationIndex].getElementsByTagName('em')[0];
7087
var report = fragment('<ul id="mocha-report"></ul>');
7188
var stack = [report];
72-
var progressText = items[0].getElementsByTagName('div')[0];
73-
var progressBar = items[0].getElementsByTagName('progress')[0];
89+
var progressText = items[progressIndex].getElementsByTagName('div')[0];
90+
var progressBar = items[progressIndex].getElementsByTagName('progress')[0];
7491
var progressRing = [
75-
items[0].getElementsByClassName('ring-flatlight')[0],
76-
items[0].getElementsByClassName('ring-highlight')[0]];
92+
items[progressIndex].getElementsByClassName('ring-flatlight')[0],
93+
items[progressIndex].getElementsByClassName('ring-highlight')[0]
94+
];
7795
var progressRingRadius = null; // computed CSS unavailable now, so set later
7896
var root = document.getElementById('mocha');
7997

@@ -127,6 +145,10 @@ function HTML(runner, options) {
127145

128146
runner.on(EVENT_SUITE_END, function (suite) {
129147
if (suite.root) {
148+
if (stats.failures === 0) {
149+
text(resultIndicator, '✓');
150+
stat.className += ' pass';
151+
}
130152
updateStats();
131153
return;
132154
}
@@ -147,6 +169,10 @@ function HTML(runner, options) {
147169
});
148170

149171
runner.on(EVENT_TEST_FAIL, function (test) {
172+
// Update stat items
173+
text(resultIndicator, '✖');
174+
stat.className += ' fail';
175+
150176
var el = fragment(
151177
'<li class="test fail"><h2>%e <a href="%e" class="replay">' +
152178
playIcon +
@@ -219,7 +245,6 @@ function HTML(runner, options) {
219245
}
220246

221247
function updateStats() {
222-
// TODO: add to stats
223248
var percent = ((stats.tests / runner.total) * 100) | 0;
224249
progressBar.value = percent;
225250
if (progressText) {
@@ -245,8 +270,8 @@ function HTML(runner, options) {
245270

246271
// update stats
247272
var ms = new Date() - stats.start;
248-
text(passes, stats.passes);
249-
text(failures, stats.failures);
273+
text(passesCount, stats.passes);
274+
text(failuresCount, stats.failures);
250275
text(duration, (ms / 1000).toFixed(2));
251276
}
252277
}

‎mocha.css‎

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
:root {
44
--mocha-color: #000;
55
--mocha-bg-color: #fff;
6-
--mocha-pass-icon-color: #00d6b2;
7-
--mocha-pass-color: #fff;
8-
--mocha-pass-shadow-color: rgba(0,0,0,.2);
9-
--mocha-pass-mediump-color: #c09853;
10-
--mocha-pass-slow-color: #b94a48;
6+
--mocha-test-pass-color: #007f6a;
7+
--mocha-test-pass-duration-color: #fff;
8+
--mocha-test-pass-shadow-color: rgba(0,0,0, 0.2);
9+
--mocha-test-pass-mediump-color: #c09853;
10+
--mocha-test-pass-slow-color: #b94a48;
1111
--mocha-test-pending-color: #0b97c4;
1212
--mocha-test-pending-icon-color: #0b97c4;
1313
--mocha-test-fail-color: #c00;
@@ -38,11 +38,11 @@
3838
:root {
3939
--mocha-color: #fff;
4040
--mocha-bg-color: #222;
41-
--mocha-pass-icon-color: #00d6b2;
42-
--mocha-pass-color: #222;
43-
--mocha-pass-shadow-color: rgba(255,255,255,.2);
44-
--mocha-pass-mediump-color: #f1be67;
45-
--mocha-pass-slow-color: #f49896;
41+
--mocha-test-pass-color: #00d6b2;
42+
--mocha-test-pass-duration-color: #222;
43+
--mocha-test-pass-shadow-color: rgba(255, 255, 255, 0.2);
44+
--mocha-test-pass-mediump-color: #f1be67;
45+
--mocha-test-pass-slow-color: #f49896;
4646
--mocha-test-pending-color: #0b97c4;
4747
--mocha-test-pending-icon-color: #0b97c4;
4848
--mocha-test-fail-color: #f44;
@@ -141,11 +141,11 @@ body {
141141
}
142142

143143
#mocha .test.pass.medium .duration {
144-
background: var(--mocha-pass-mediump-color);
144+
background: var(--mocha-test-pass-mediump-color);
145145
}
146146

147147
#mocha .test.pass.slow .duration {
148-
background: var(--mocha-pass-slow-color);
148+
background: var(--mocha-test-pass-slow-color);
149149
}
150150

151151
#mocha .test.pass::before {
@@ -154,17 +154,17 @@ body {
154154
display: block;
155155
float: left;
156156
margin-right: 5px;
157-
color: var(--mocha-pass-icon-color);
157+
color: var(--mocha-test-pass-color);
158158
}
159159

160160
#mocha .test.pass .duration {
161161
font-size: 9px;
162162
margin-left: 5px;
163163
padding: 2px 5px;
164-
color: var(--mocha-pass-color);
165-
-webkit-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
166-
-moz-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
167-
box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
164+
color: var(--mocha-test-pass-duration-color);
165+
-webkit-box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
166+
-moz-box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
167+
box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
168168
-webkit-border-radius: 5px;
169169
-moz-border-radius: 5px;
170170
-ms-border-radius: 5px;
@@ -344,6 +344,30 @@ body {
344344
z-index: 1;
345345
}
346346

347+
#mocha-stats.fail li.result {
348+
color: var(--mocha-test-fail-color);
349+
}
350+
351+
#mocha-stats.fail li.failures {
352+
color: var(--mocha-test-fail-color);
353+
}
354+
355+
#mocha-stats.fail li.failures em {
356+
color: var(--mocha-test-fail-color);
357+
}
358+
359+
#mocha-stats.pass li.result {
360+
color: var(--mocha-test-pass-color);
361+
}
362+
363+
#mocha-stats.pass li.passes {
364+
color: var(--mocha-test-pass-color);
365+
}
366+
367+
#mocha-stats.pass li.passes em {
368+
color: var(--mocha-test-pass-color);
369+
}
370+
347371
#mocha-stats .progress-contain {
348372
float: right;
349373
padding: 0;

0 commit comments

Comments
 (0)