@brightspace-ui/testing 1.19.0 → 1.21.0

package/README.md

@@ -4,7 +4,7 @@
 
 Testing utilities which are specifically designed and configured for Brightspace UI components and applications.
 
-> **Migrating from `@open-wc/testing` and/or `@brightspace-ui/visual-diff`?**
+> **Migrating from `@open-wc/testing`/`@web/test-runner`?**
 > Refer to the [Migration Guide](docs/migration-guide.md) for help migrating a repo to `@brightspace-ui/testing`.
 
 Install from NPM:
@@ -479,6 +479,7 @@ Vdiff tests are written [just like other tests](#writing-tests), and the same ut
 Use the asynchronous `.to.be.golden()` Chai assertion to take a vdiff snapshot and [compare it against its golden](#generating-the-goldens).
 
 ```javascript
+import './my-elem.js';
 import { fixture, html } from '@brightspace-ui/testing';
 
 describe('my-elem', () => {

package/bin/d2l-test-runner.js

@@ -1,6 +1,5 @@
 #!/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';
 
@@ -19,21 +18,6 @@ if (cli.subcommand === 'vdiff') {
 	} else if (vdiff.subcommand === 'report') {
 		const { report } = await import('../src/server/cli/vdiff/report.js');
 		await report.start();
-	} 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 subcommand: ${vdiff.subcommand}\n`);
 	}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",

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

@@ -159,14 +159,6 @@ async function getTestRunnerOptions(argv = []) {
 				{
 					example: 'vdiff golden',
 					desc: 'Generate new golden screenshots'
-				},
-				{
-					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/report/app.js

@@ -121,7 +121,7 @@ class App extends LitElement {
 	constructor() {
 		super();
 		this._filterBrowsers = data.browsers.map(b => b.name);
-		this._filterStatus = data.numFailed > 0 ? FILTER_STATUS.FAILED : FILTER_STATUS.ALL;
+		this._filterStatus = data.numFailed > 0 ? FILTER_STATUS.FAILED : (data.numByteDiff > 0 ? FILTER_STATUS.BYTEDIFF : FILTER_STATUS.ALL);
 		this._fullMode = FULL_MODE.GOLDEN.value;
 		this._layout = LAYOUTS.SPLIT.value;
 		this._overlay = true;
@@ -146,7 +146,10 @@ class App extends LitElement {
 			}
 			if (searchParams.has('status')) {
 				let filterStatus = searchParams.get('status');
-				if (filterStatus === FILTER_STATUS.FAILED && data.numFailed === 0) filterStatus = FILTER_STATUS.ALL;
+				if (filterStatus === FILTER_STATUS.FAILED && data.numFailed === 0 ||
+					filterStatus === FILTER_STATUS.BYTEDIFF && data.numByteDiff === 0) {
+					filterStatus = FILTER_STATUS.ALL;
+				}
 				this._filterStatus = filterStatus;
 			}
 			if (searchParams.has('browsers')) {
@@ -198,7 +201,8 @@ class App extends LitElement {
 
 		const statusFilters = [
 			{ name: FILTER_STATUS.FAILED, count: data.numFailed },
-			{ name: FILTER_STATUS.PASSED, count: data.numTests - data.numFailed },
+			{ name: FILTER_STATUS.BYTEDIFF, count: data.numByteDiff },
+			{ name: FILTER_STATUS.PASSED, count: data.numTests - data.numFailed - data.numByteDiff },
 			{ name: FILTER_STATUS.ALL, count: data.numTests }
 		];
 
@@ -434,7 +438,8 @@ class App extends LitElement {
 					if (this._filterBrowsers.includes(r.name) &&
 						(this._filterStatus === FILTER_STATUS.ALL ||
 						r.passed && this._filterStatus === FILTER_STATUS.PASSED ||
-						!r.passed && this._filterStatus === FILTER_STATUS.FAILED)) numStatusMatch++;
+						r.bytediff && this._filterStatus === FILTER_STATUS.BYTEDIFF ||
+						!r.bytediff && !r.passed && this._filterStatus === FILTER_STATUS.FAILED)) numStatusMatch++;
 				});
 				if (numStatusMatch > 0) {
 					if (lookingForNextTest) {

package/src/server/report/common.js

@@ -77,7 +77,8 @@ export const COMMON_STYLE = css`
 export const FILTER_STATUS = {
 	ALL: 'All',
 	PASSED: 'Passed',
-	FAILED: 'Failed'
+	FAILED: 'Failed',
+	BYTEDIFF: 'Byte Diff'
 };
 
 export const FULL_MODE = {

package/src/server/report/result.js

@@ -175,7 +175,7 @@ function renderResult(resultData, options) {
 		let newPart;
 		if (resultData.passed) {
 			newPart = html`<div class="result-graphic padding">${ICON_TADA}<p>Hooray! No changes here.</p></div>`;
-		} else if (!resultData.info.diff && resultData.info.pixelsDiff === 0) {
+		} else if (resultData.bytediff) {
 			newPart = html`<div class="result-graphic padding">${ICON_BYTES}
 				<p>No pixels have changed, but the bytes are different.</p>
 				<p class="details">

package/src/server/visual-diff-reporter.js

@@ -27,6 +27,7 @@ function createData(rootDir, updateGoldens, sessions) {
 			const prevBrowser = metadata.browsers?.find(b => b.name === browserName);
 			browsers.set(browserName, {
 				name: browserName,
+				numByteDiff: 0,
 				numFailed: 0,
 				version: parseInt(s.browser.browser.version()),
 				previousVersion: prevBrowser?.version
@@ -36,14 +37,14 @@ function createData(rootDir, updateGoldens, sessions) {
 
 		const fileName = s.testFile.substring(rootDir.length + 1);
 		if (!files.has(fileName)) {
-			files.set(fileName, { name: fileName, numFailed: 0, tests: new Map() });
+			files.set(fileName, { name: fileName, numByteDiff: 0, numFailed: 0, tests: new Map() });
 		}
 		const fileData = files.get(fileName);
 		flattenResults(s, browserData, fileData);
 
 	});
 
-	let numTests = 0, numFailed = 0;
+	let numTests = 0, numFailed = 0, numByteDiff = 0;
 	files.forEach(f => {
 		numTests += f.tests.size;
 		f.tests.forEach(t => {
@@ -51,6 +52,10 @@ function createData(rootDir, updateGoldens, sessions) {
 				f.numFailed++;
 				numFailed++;
 			}
+			if (t.numByteDiff > 0) {
+				f.numByteDiff++;
+				numByteDiff++;
+			}
 		});
 	});
 
@@ -61,7 +66,7 @@ function createData(rootDir, updateGoldens, sessions) {
 		writeFileSync(metadataPath, `${JSON.stringify(metadata, undefined, '\t')}\n`);
 	}
 
-	return { browsers, files, numFailed, numTests };
+	return { browsers, files, numByteDiff, numFailed, numTests };
 
 }
 
@@ -79,20 +84,28 @@ function flattenResults(session, browserData, fileData) {
 			if (!fileData.tests.has(testName)) {
 				fileData.tests.set(testName, {
 					name: testName,
+					numByteDiff: 0,
 					numFailed: 0,
 					results: []
 				});
 			}
 			const testData = fileData.tests.get(testName);
+			const bytediff = !t.passed && !info.diff && info.pixelsDiff === 0;
 			if (!t.passed) {
-				browserData.numFailed++;
-				testData.numFailed++;
+				if (bytediff) {
+					browserData.numByteDiff++;
+					testData.numByteDiff++;
+				} else {
+					browserData.numFailed++;
+					testData.numFailed++;
+				}
 			}
 			testData.results.push({
 				name: browserData.name,
 				duration: t.duration,
 				error: t.error?.message,
 				passed: t.passed,
+				bytediff,
 				info: info
 			});
 		});

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

@@ -1,53 +0,0 @@
-#!/usr/bin/env node
-import { appendFile, mkdir, readFile, rename, rm } from 'node:fs/promises';
-import { join, normalize, parse } from 'node:path';
-import commandLineArgs from 'command-line-args';
-import { glob } from 'glob';
-import { PATHS } from '../../paths.js';
-import { stdout } from 'node:process';
-
-async function start(argv = [], local = false) {
-	const { pattern = './**' } = commandLineArgs({ name: 'pattern', type: String, defaultOption: true }, { partial: true, argv });
-	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;
-
-	const gitignore = await readFile('.gitignore', { encoding: 'UTF8' }).catch(() => '');
-	if (!new RegExp(`${PATHS.VDIFF_ROOT}/(\n|$)`).test(gitignore)) {
-		const newline = gitignore.endsWith('\n') ? '' : '\n';
-		await appendFile('.gitignore', `${newline}${PATHS.VDIFF_ROOT}/\n`);
-	}
-
-	await Promise.all(dirs.map(async dir => {
-		const files = await glob(`${dir}/*/*.png`, { posix: true });
-
-		await Promise.all(files.map(async file => {
-			fileCount += 1;
-			const { base: name, dir } = parse(file);
-			const dirName = parse(dir).name;
-
-			const newName = name
-				.replace(/^d2l-/, '')
-				.replace(new RegExp(`^${dirName}-`), '');
-
-			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));
-		}));
-
-		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`);
-}
-
-export const migrate = {
-	start
-};