Skip to content

Commit

Permalink
feat: highlight browser failures (#5222)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@mark-wiemer
mark-wiemer authored Oct 29, 2024
1 parent 97af04f commit 8ff4845
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 30 deletions.
51 changes: 38 additions & 13 deletions lib/reporters/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,12 @@ var Date = global.Date;
exports = module.exports = HTML;

/**
* Stats template.
* Stats template: Result, progress, passes, failures, and duration.
*/

var statsTemplate =
'<ul id="mocha-stats">' +
'<li class="result"></li>' +
'<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>' +
'<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
'<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
Expand All @@ -62,18 +63,35 @@ function HTML(runner, options) {
var stats = this.stats;
var stat = fragment(statsTemplate);
var items = stat.getElementsByTagName('li');
var passes = items[1].getElementsByTagName('em')[0];
var passesLink = items[1].getElementsByTagName('a')[0];
var failures = items[2].getElementsByTagName('em')[0];
var failuresLink = items[2].getElementsByTagName('a')[0];
var duration = items[3].getElementsByTagName('em')[0];
const resultIndex = 0;
const progressIndex = 1;
const passesIndex = 2;
const failuresIndex = 3;
const durationIndex = 4;
/** Stat item containing the root suite pass or fail indicator (hasFailures ? '✖' : '✓') */
var resultIndicator = items[resultIndex];
/** Passes text and count */
const passesStat = items[passesIndex];
/** Stat item containing the pass count (not the word, just the number) */
const passesCount = passesStat.getElementsByTagName('em')[0];
/** Stat item linking to filter to show only passing tests */
const passesLink = passesStat.getElementsByTagName('a')[0];
/** Failures text and count */
const failuresStat = items[failuresIndex];
/** Stat item containing the failure count (not the word, just the number) */
const failuresCount = failuresStat.getElementsByTagName('em')[0];
/** Stat item linking to filter to show only failing tests */
const failuresLink = failuresStat.getElementsByTagName('a')[0];
/** Stat item linking to the duration time (not the word or unit, just the number) */
var duration = items[durationIndex].getElementsByTagName('em')[0];
var report = fragment('<ul id="mocha-report"></ul>');
var stack = [report];
var progressText = items[0].getElementsByTagName('div')[0];
var progressBar = items[0].getElementsByTagName('progress')[0];
var progressText = items[progressIndex].getElementsByTagName('div')[0];
var progressBar = items[progressIndex].getElementsByTagName('progress')[0];
var progressRing = [
items[0].getElementsByClassName('ring-flatlight')[0],
items[0].getElementsByClassName('ring-highlight')[0]];
items[progressIndex].getElementsByClassName('ring-flatlight')[0],
items[progressIndex].getElementsByClassName('ring-highlight')[0]
];
var progressRingRadius = null; // computed CSS unavailable now, so set later
var root = document.getElementById('mocha');

Expand Down Expand Up @@ -127,6 +145,10 @@ function HTML(runner, options) {

runner.on(EVENT_SUITE_END, function (suite) {
if (suite.root) {
if (stats.failures === 0) {
text(resultIndicator, '✓');
stat.className += ' pass';
}
updateStats();
return;
}
Expand All @@ -147,6 +169,10 @@ function HTML(runner, options) {
});

runner.on(EVENT_TEST_FAIL, function (test) {
// Update stat items
text(resultIndicator, '✖');
stat.className += ' fail';

var el = fragment(
'<li class="test fail"><h2>%e <a href="%e" class="replay">' +
playIcon +
Expand Down Expand Up @@ -219,7 +245,6 @@ function HTML(runner, options) {
}

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

// update stats
var ms = new Date() - stats.start;
text(passes, stats.passes);
text(failures, stats.failures);
text(passesCount, stats.passes);
text(failuresCount, stats.failures);
text(duration, (ms / 1000).toFixed(2));
}
}
Expand Down
58 changes: 41 additions & 17 deletions mocha.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
:root {
--mocha-color: #000;
--mocha-bg-color: #fff;
--mocha-pass-icon-color: #00d6b2;
--mocha-pass-color: #fff;
--mocha-pass-shadow-color: rgba(0,0,0,.2);
--mocha-pass-mediump-color: #c09853;
--mocha-pass-slow-color: #b94a48;
--mocha-test-pass-color: #007f6a;
--mocha-test-pass-duration-color: #fff;
--mocha-test-pass-shadow-color: rgba(0,0,0, 0.2);
--mocha-test-pass-mediump-color: #c09853;
--mocha-test-pass-slow-color: #b94a48;
--mocha-test-pending-color: #0b97c4;
--mocha-test-pending-icon-color: #0b97c4;
--mocha-test-fail-color: #c00;
Expand Down Expand Up @@ -38,11 +38,11 @@
:root {
--mocha-color: #fff;
--mocha-bg-color: #222;
--mocha-pass-icon-color: #00d6b2;
--mocha-pass-color: #222;
--mocha-pass-shadow-color: rgba(255,255,255,.2);
--mocha-pass-mediump-color: #f1be67;
--mocha-pass-slow-color: #f49896;
--mocha-test-pass-color: #00d6b2;
--mocha-test-pass-duration-color: #222;
--mocha-test-pass-shadow-color: rgba(255, 255, 255, 0.2);
--mocha-test-pass-mediump-color: #f1be67;
--mocha-test-pass-slow-color: #f49896;
--mocha-test-pending-color: #0b97c4;
--mocha-test-pending-icon-color: #0b97c4;
--mocha-test-fail-color: #f44;
Expand Down Expand Up @@ -141,11 +141,11 @@ body {
}

#mocha .test.pass.medium .duration {
background: var(--mocha-pass-mediump-color);
background: var(--mocha-test-pass-mediump-color);
}

#mocha .test.pass.slow .duration {
background: var(--mocha-pass-slow-color);
background: var(--mocha-test-pass-slow-color);
}

#mocha .test.pass::before {
Expand All @@ -154,17 +154,17 @@ body {
display: block;
float: left;
margin-right: 5px;
color: var(--mocha-pass-icon-color);
color: var(--mocha-test-pass-color);
}

#mocha .test.pass .duration {
font-size: 9px;
margin-left: 5px;
padding: 2px 5px;
color: var(--mocha-pass-color);
-webkit-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
-moz-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
color: var(--mocha-test-pass-duration-color);
-webkit-box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
-moz-box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
Expand Down Expand Up @@ -344,6 +344,30 @@ body {
z-index: 1;
}

#mocha-stats.fail li.result {
color: var(--mocha-test-fail-color);
}

#mocha-stats.fail li.failures {
color: var(--mocha-test-fail-color);
}

#mocha-stats.fail li.failures em {
color: var(--mocha-test-fail-color);
}

#mocha-stats.pass li.result {
color: var(--mocha-test-pass-color);
}

#mocha-stats.pass li.passes {
color: var(--mocha-test-pass-color);
}

#mocha-stats.pass li.passes em {
color: var(--mocha-test-pass-color);
}

#mocha-stats .progress-contain {
float: right;
padding: 0;
Expand Down

0 comments on commit 8ff4845

Please sign in to comment.