Skip to content

Commit

Permalink
Add skip buttons (#90)
Browse files Browse the repository at this point in the history
* Add skip buttons

* Disable skip button while running
  • Loading branch information
bearfriend authored Jul 26, 2023
1 parent 6e4271f commit 70c5837
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 16 deletions.
6 changes: 4 additions & 2 deletions src/browser/vdiff.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import { executeServerCommand } from '@web/test-runner-commands';

let test;

/* eslint-disable no-undef, no-invalid-this */
chai.Assertion.addMethod('golden', function(...args) {
return ScreenshotAndCompare.call({ test, elem: this._obj }, ...args); // eslint-disable-line no-invalid-this
return ScreenshotAndCompare.call({ test, elem: this._obj }, ...args);
});
mocha.setup({ // eslint-disable-line no-undef
mocha.setup({
rootHooks: {
beforeEach() {
test = this.currentTest;
}
}
});
/* eslint-enable */

async function ScreenshotAndCompare(opts) {
const name = this.test.fullTitle();
Expand Down
85 changes: 71 additions & 14 deletions src/server/pause.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,33 @@ const controls = `
#d2l-test-controls [hidden] {
display: none !important;
}
body {
margin-top: 70px;
}
#d2l-test-controls #start, #run {
display: flex;
gap: 1em;
font-size: 18px;
#d2l-test-controls {
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0 0 5px rgba(0,0,0,.5);
font-size: 20px;
font-family: 'Lato', sans-serif;
padding: 1em;
padding: .85em;
background: #fff;
color: #222;
margin: calc(-30px + -8px) calc(-30px + -8px) calc(30px + 8px);
}
#d2l-test-controls #start,
#d2l-test-controls #run {
display: flex;
gap: 0.65em;
flex-wrap: wrap;
align-items: center;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}
#d2l-test-controls #start {
font-size: 24px;
font-size: 22px;
height: 600px;
flex-direction: column;
justify-content: center;
Expand All @@ -31,7 +41,11 @@ const controls = `
}
#d2l-test-controls #test-name {
font-size: 0.9em;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#d2l-test-controls button {
Expand All @@ -41,11 +55,11 @@ const controls = `
border-radius: .3em;
border-style: none;
font-weight: 700;
font-size: .9em;
font-size: .7em;
margin: 0;
min-height: calc(2em + 2px);
outline: none;
padding: .55em 1.5em;
padding: calc(.55em * 1.43) calc(1.5em * 1.43);
text-align: center;
line-height: 1em;
cursor: pointer;
Expand All @@ -56,15 +70,28 @@ const controls = `
background-color: #006fbf;
}
#d2l-test-controls button:focus {
#d2l-test-controls button.subtle {
color: #006fbf;
background-color: transparent;
}
#d2l-test-controls button.subtle:focus,
#d2l-test-controls button.subtle:hover {
color: #004489;
background-color: #e3e9f1;
}
#d2l-test-controls button:focus,
#d2l-test-controls button:hover {
background-color: #cdd5dc;
}
#d2l-test-controls button:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #006fbf;
}
#d2l-test-controls button.primary:focus {
#d2l-test-controls button.primary:focus,
#d2l-test-controls button.primary:hover {
background-color: #004489;
}
Expand All @@ -77,17 +104,24 @@ const controls = `
<div id="start">
<span>.${window.__WTR_CONFIG__.testFile.split('?')[0]}</span>
<button id="start-button" class="primary">Start</button>
<button id="skip-all-button" class="subtle">Skip</button>
</div>
<div id="run" hidden>
<button id="run-button" class="primary">Run</button>
<span id="test-name"></span>
<button id="skip-button" class="subtle">Skip</button>
<button id="run-all-button">Run All</button>
</div>
</div>
`;

document.body.insertAdjacentHTML('afterBegin', controls);

document.querySelector('#skip-all-button').addEventListener('click', skipAll);

const skipBtn = document.querySelector('#skip-button');
skipBtn.addEventListener('click', skip);

const startBtn = document.querySelector('#start-button');
startBtn.addEventListener('click', start);

Expand All @@ -99,18 +133,28 @@ runBtn.addEventListener('click', run);

const testName = document.querySelector('#test-name');

beforeEach(async function() { // eslint-disable-line no-undef
/* eslint-disable no-undef, no-invalid-this */
let currentTest;
beforeEach(async function() {
const fixture = new Promise(r => test.update = r);
const currentTest = this.currentTest; // eslint-disable-line no-invalid-this

currentTest = this.currentTest;

if (test.skipAll) this.test.parent.ctx.skip();

setTimeout(async() => {
await fixture;

testName.innerText = currentTest.fullTitle();

if (test.pause) {
runBtn.disabled = false;
skipBtn.disabled = false;
runBtn.focus();
}
});
});
/* eslint-enable */

function start() {
document.querySelector('#start').hidden = true;
Expand All @@ -120,6 +164,7 @@ function start() {

function run() {
runBtn.disabled = true;
skipBtn.disabled = true;
test.run();
}

Expand All @@ -129,5 +174,17 @@ function runAll() {
run();
}

function skip() {
run();
try {
currentTest.skip();
} catch (e) { null; }
}

function skipAll() {
test.skipAll = true;
test.start();
}

await test.pause;
test.pause = new Promise(r => test.run = r);

0 comments on commit 70c5837

Please sign in to comment.