Add skip buttons (#90)

* Add skip buttons

* Disable skip button while running

src/browser/vdiff.js

@@ -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();

src/server/pause.js

@@ -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;
@@ -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 {
@@ -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;
@@ -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;
 		}
 
@@ -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);
 
@@ -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;
@@ -120,6 +164,7 @@ function start() {
 
 function run() {
 	runBtn.disabled = true;
+	skipBtn.disabled = true;
 	test.run();
 }
 
@@ -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);