@brightspace-ui/testing 0.29.1 → 0.30.0

package/bin/d2l-test-runner.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import commandLineArgs from 'command-line-args';
+import { execSync } from 'node:child_process';
 import process from 'node:process';
 import { runner } from '../src/server/cli/test-runner.js';
 
@@ -21,8 +22,20 @@ if (cli.subcommand === 'vdiff') {
 	} else if (vdiff.subcommand === 'migrate') {
 		const { migrate } = await import('../src/server/cli/vdiff/migrate.js');
 		await migrate.start(vdiff._unknown);
+	} else if (vdiff.subcommand === 'migrate-local') {
+
+		const { pattern = './**' } = commandLineArgs({ name: 'pattern', type: String, defaultOption: true }, { partial: true, argv: vdiff._unknown || [] });
+
+		stdout.write('\nInstalling @brightspace-ui/visual-diff\n');
+		execSync('npm install @brightspace-ui/visual-diff@14  --no-save');
+		stdout.write(`\nRunning existing tests for pattern '${pattern}/*.visual-diff.js'\n`);
+		execSync(`npx mocha '${pattern}/*.visual-diff.js' -t 10000 --golden`);
+		stdout.write('\nTest run complete.\n');
+
+		const { migrate } = await import('../src/server/cli/vdiff/migrate.js');
+		await migrate.start(vdiff._unknown, true);
 	} else {
-		stdout.write(`\nfatal: unknown subcomamnd: ${vdiff.subcommand}\n`);
+		stdout.write(`\nfatal: unknown subcommand: ${vdiff.subcommand}\n`);
 	}
 } else {
 	runTests();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",

package/src/browser/vdiff.js

@@ -19,6 +19,13 @@ mocha.setup({
 });
 /* eslint-enable */
 
+function findTarget(elem) {
+	if (!elem.shadowRoot) return elem;
+	const nestedTarget = elem.shadowRoot.querySelector('.vdiff-target');
+	if (!nestedTarget) return elem;
+	return findTarget(nestedTarget);
+}
+
 async function ScreenshotAndCompare(opts) {
 
 	if (window.d2lTest) {
@@ -27,7 +34,11 @@ async function ScreenshotAndCompare(opts) {
 	}
 
 	const name = this.test.fullTitle();
-	const rect = this.elem === document ? null : this.elem.getBoundingClientRect();
+	let rect = null;
+	if (this.elem !== document) {
+		const target = findTarget(this.elem);
+		rect = target.getBoundingClientRect();
+	}
 	const slowDuration = this.test.slow();
 	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, rect, slowDuration, opts });
 	if (result.resizeRequired) {

package/src/server/cli/test-runner.js

@@ -163,6 +163,10 @@ async function getTestRunnerOptions(argv = []) {
 				{
 					example: 'vdiff migrate [directory]',
 					desc: 'Migrate from @brightspace-ui/visual-diff. Restrict which goldens are migrated with a directory glob.'
+				},
+				{
+					example: 'vdiff migrate-local [directory]',
+					desc: 'Generate goldens with @brightspace-ui/visual-diff for local comparison while migrating tests. Restrict which goldens are generated with a directory glob.'
 				}]
 			}
 		]);

package/src/server/cli/vdiff/migrate.js

@@ -6,9 +6,11 @@ import { glob } from 'glob';
 import { PATHS } from '../../visual-diff-plugin.js';
 import { stdout } from 'node:process';
 
-async function start(argv = []) {
+async function start(argv = [], local = false) {
 	const { pattern = './**' } = commandLineArgs({ name: 'pattern', type: String, defaultOption: true }, { partial: true, argv });
-	const oldSuffix = 'screenshots/ci/golden';
+	const oldSuffix = local ? 'screenshots/golden' : 'screenshots/ci/golden';
+
+	stdout.write(`\nMigrating goldens for pattern '${pattern}/${oldSuffix}'\n`);
 	const dirs = await glob(`${pattern}/${oldSuffix}`, { ignore: 'node_modules/**', posix: true });
 	let fileCount = 0;
 
@@ -30,12 +32,17 @@ async function start(argv = []) {
 				.replace(/^d2l-/, '')
 				.replace(new RegExp(`^${dirName}-`), '');
 
-			const newDir = dir.replace(`${oldSuffix}/${dirName}`, `${PATHS.GOLDEN}/${dirName}/chromium`);
+			const newDir = local ?
+				`${PATHS.VDIFF_ROOT}/${dir.replace(`${oldSuffix}/${dirName}`, `${dirName}/${PATHS.GOLDEN}/chromium`)}` :
+				dir.replace(`${oldSuffix}/${dirName}`, `${PATHS.GOLDEN}/${dirName}/chromium`);
 
 			await mkdir(newDir, { recursive: true });
 			return rename(file, join(newDir, newName));
 		}));
-		return rm(normalize(join(dir, '..', '..')), { recursive: true });
+
+		if (!local) {
+			return rm(normalize(join(dir, '..', '..')), { recursive: true });
+		}
 	}));
 
 	stdout.write(`\nMigrated ${fileCount} ${fileCount === 1 ? 'golden' : 'goldens'} found in ${dirs.length} test ${dirs.length === 1 ? 'directory' : 'directories'}\n`);

package/src/server/report/app.js

@@ -182,12 +182,14 @@ class App extends LitElement {
 	}
 	_handleNextClick() {
 		this._updateSearchParams(this._next);
+		this._scrollToTop();
 	}
 	_handleOverlayChange(e) {
 		this._overlay = e.target.checked;
 	}
 	_handlePrevClick() {
 		this._updateSearchParams(this._prev);
+		this._scrollToTop();
 	}
 	_renderError(message, source) {
 		return html`<div class="padding"><p>${message}: <b>${source}</b>.</p></div>`;
@@ -325,7 +327,7 @@ class App extends LitElement {
 		if (tabs.length < 2) return nothing;
 		return renderTabButtons('browser results', tabs, index => {
 			this._selectedBrowserIndex = index;
-			this.shadowRoot.querySelector('.tab-panels').scrollTo(0, 0);
+			this._scrollToTop();
 			this.requestUpdate();
 		});
 	}
@@ -410,6 +412,9 @@ class App extends LitElement {
 		`;
 
 	}
+	_scrollToTop() {
+		this.shadowRoot.querySelector('.tab-panels').scrollTo(0, 0);
+	}
 	_updateFiles() {
 
 		const files = [];

package/src/server/wtr-config.js

@@ -196,6 +196,7 @@ export class WTRConfig {
 		config.groups.forEach(g => g.browsers = this.getBrowsers(g.browsers));
 
 		if (open || watch) {
+			config.testsFinishTimeout = 15 * 60 * 1000;
 			config.plugins ??= [];
 			const currentPattern = files || config.groups.find(g => g.name === group)?.files;