diff --git a/src/browser/fixture.js b/src/browser/fixture.js index 4818e34f..b57f55c5 100644 --- a/src/browser/fixture.js +++ b/src/browser/fixture.js @@ -51,5 +51,18 @@ export async function fixture(element, opts = {}) { await Promise.all([reset(opts), document.fonts.ready]); const elem = await wcFixture(element); await waitForElem(elem, opts.awaitLoadingComplete); + + await pause(); return elem; } + +async function pause() { + const test = window.d2lTest || {}; + + test.update?.(); + + if (test.pause) { + await test.pause; + if (test.pause) test.pause = new Promise(r => test.run = r); + } +} diff --git a/src/server/headed-mode-plugin.js b/src/server/headed-mode-plugin.js index 35916cba..2a371d1d 100644 --- a/src/server/headed-mode-plugin.js +++ b/src/server/headed-mode-plugin.js @@ -1,3 +1,4 @@ +import { dirname, join } from 'node:path'; import { globSync } from 'glob'; export function headedMode({ open, watch, pattern }) { @@ -8,7 +9,8 @@ export function headedMode({ open, watch, pattern }) { name: 'brightspace-headed-mode', async transform(context) { if ((watch || open) && files.includes(context.path.slice(1))) { - return `debugger;\n${context.body}`; + const pausePath = join(dirname(import.meta.url), 'pause.js').replace('file:', ''); + return `debugger;\nimport '${pausePath}'\n${context.body}`; } } }; diff --git a/src/server/pause.js b/src/server/pause.js new file mode 100644 index 00000000..8a9f20fa --- /dev/null +++ b/src/server/pause.js @@ -0,0 +1,133 @@ +const test = window.d2lTest = {}; +test.pause = new Promise(r => test.start = r); + +const controls = ` + +
+
+ .${window.__WTR_CONFIG__.testFile.split('?')[0]} + +
+ +
+`; + +document.body.insertAdjacentHTML('afterBegin', controls); + +const startBtn = document.querySelector('#start-button'); +startBtn.addEventListener('click', start); + +const runAllBtn = document.querySelector('#run-all-button'); +runAllBtn.addEventListener('click', runAll); + +const runBtn = document.querySelector('#run-button'); +runBtn.addEventListener('click', run); + +const testName = document.querySelector('#test-name'); + +beforeEach(async function() { // eslint-disable-line no-undef + const fixture = new Promise(r => test.update = r); + const currentTest = this.currentTest; // eslint-disable-line no-invalid-this + setTimeout(async() => { + await fixture; + testName.innerText = currentTest.fullTitle(); + if (test.pause) { + runBtn.disabled = false; + runBtn.focus(); + } + }); +}); + +function start() { + document.querySelector('#start').hidden = true; + document.querySelector('#run').hidden = false; + test.start(); +} + +function run() { + runBtn.disabled = true; + test.run(); +} + +function runAll() { + runAllBtn.disabled = true; + test.pause = null; + run(); +} + +await test.pause; +test.pause = new Promise(r => test.run = r);