Skip to content

feat: highlight browser failures #5222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Oct 29, 2024
Merged

feat: highlight browser failures #5222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
8552a91
Format html.js
mark-wiemer Oct 10, 2024
341d614
Remove newlines between JSDoc comments and their symbols
mark-wiemer Oct 10, 2024
a5fa3a5
(temp) update template.html to run tests
mark-wiemer Oct 10, 2024
48e982b
Color the stat result icon and text based on root suite result
mark-wiemer Oct 10, 2024
33b49fd
(temp) add template fail and template pass
mark-wiemer Oct 10, 2024
6edb10b
On first test fail, add fail indicator to stats
mark-wiemer Oct 10, 2024
27a7958
Remove extra newline
mark-wiemer Oct 10, 2024
0898ed5
Format mocha.css with Prettier
mark-wiemer Oct 10, 2024
85e1bfd
Make pass icon color accessible
mark-wiemer Oct 10, 2024
e34cd2a
Cleanup mocha.css var names
mark-wiemer Oct 10, 2024
854ab12
Restore template to main
mark-wiemer Oct 10, 2024
aa3ede9
Remove thirteen-year-old comment
mark-wiemer Oct 10, 2024
8a36f0d
Revert "Format html.js"
mark-wiemer Oct 11, 2024
714ee15
Revert "Restore template to main"
mark-wiemer Oct 11, 2024
57d43be
Color passes and failures count as well
mark-wiemer Oct 11, 2024
7e54f59
Cleanup stats variables to consts
mark-wiemer Oct 11, 2024
dc3e5be
Fix stats not updating on root suite end
mark-wiemer Oct 11, 2024
c43bffe
Revert "Remove extra newline"
mark-wiemer Oct 11, 2024
23a93d1
Restore newlines :(
mark-wiemer Oct 11, 2024
1ca55ca
Restore newlines for real
mark-wiemer Oct 11, 2024
2782f68
Reapply "Remove extra newline"
mark-wiemer Oct 11, 2024
b77f0b0
Revert "Format mocha.css with Prettier"
mark-wiemer Oct 11, 2024
a58d751
indent to 5, not 6 chars in mocha.css
mark-wiemer Oct 11, 2024
5bbe2e0
Re-add newline in mocha.css
mark-wiemer Oct 11, 2024
1bcd627
Reapply "Restore template to main"
mark-wiemer Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 38 additions & 13 deletions lib/reporters/html.js
View file
Open in desktop
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
Open in desktop
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
Loading