@brightspace-ui/testing 1.12.3 → 1.13.1

package/package.json

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

package/src/server/report/result.js

@@ -177,7 +177,7 @@ function renderResult(resultData, options) {
 			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) {
 			newPart = html`<div class="result-graphic padding">${ICON_BYTES}
-				<p>No pixels have changed, but the byte size is different.</p>
+				<p>No pixels have changed, but the bytes are different.</p>
 				<p class="details">
 					Golden size: ${resultData.info.golden.byteSize} bytes<br />
 					New size: ${resultData.info.new.byteSize} bytes

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

@@ -197,7 +197,8 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 
 				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
 
-				const screenshotImage = PNG.sync.read(await readFile(screenshotFileName));
+				const screenshotFileBuffer = await readFile(screenshotFileName);
+				const screenshotImage = PNG.sync.read(screenshotFileBuffer);
 				setTestInfo(session, payload.name, {
 					slowDuration: payload.slowDuration,
 					new: {
@@ -217,7 +218,8 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 					return { pass: false, message: 'No golden exists. Use the "--golden" CLI flag to re-run and re-generate goldens.' };
 				}
 
-				const goldenImage = PNG.sync.read(await readFile(goldenFileName));
+				const goldenFileBuffer = await readFile(goldenFileName);
+				const goldenImage = PNG.sync.read(goldenFileBuffer);
 				setTestInfo(session, payload.name, {
 					golden: {
 						height: goldenImage.height,
@@ -227,6 +229,14 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 				});
 
 				if (screenshotImage.width === goldenImage.width && screenshotImage.height === goldenImage.height) {
+					const goldenSize = (await stat(goldenFileName)).size;
+					const screenshotSize = (await stat(screenshotFileName)).size;
+					if (goldenSize === screenshotSize && screenshotFileBuffer.equals(goldenFileBuffer)) {
+						const success = await tryMoveFile(screenshotFileName, passFileName);
+						if (!success) return { pass: false, message: 'Problem moving file to "pass" directory.' };
+						return { pass: true };
+					}
+
 					const diff = new PNG({ width: screenshotImage.width, height: screenshotImage.height });
 					const pixelsDiff = pixelmatch(
 						screenshotImage.data, goldenImage.data, diff.data, screenshotImage.width, screenshotImage.height, { diffMask: true, threshold: DEFAULT_TOLERANCE }
@@ -243,25 +253,17 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 						await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(diff));
 						return { pass: false, message: `Image does not match golden. ${pixelsDiff} pixels are different.` };
 					} else {
-						const goldenSize = (await stat(goldenFileName)).size;
-						const screenshotSize = (await stat(screenshotFileName)).size;
-						if (goldenSize !== screenshotSize) {
-							setTestInfo(session, payload.name, {
-								golden: {
-									byteSize: goldenSize
-								},
-								new: {
-									path: `${screenshotFile.substring(rootLength)}.png`,
-									byteSize: screenshotSize
-								},
-								pixelsDiff
-							});
-							return { pass: false, message: 'Image diff is clean but the images do not have the same byte size.' };
-						} else {
-							const success = await tryMoveFile(screenshotFileName, passFileName);
-							if (!success) return { pass: false, message: 'Problem moving file to "pass" directory.' };
-							return { pass: true };
-						}
+						setTestInfo(session, payload.name, {
+							golden: {
+								byteSize: goldenSize
+							},
+							new: {
+								path: `${screenshotFile.substring(rootLength)}.png`,
+								byteSize: screenshotSize
+							},
+							pixelsDiff
+						});
+						return { pass: false, message: 'Image diff is clean but the images do not have the same bytes.' };
 					}
 				} else {
 					return { resizeRequired: true };

package/src/server/wtr-config.js

@@ -5,8 +5,6 @@ import { visualDiff } from './visual-diff-plugin.js';
 import { visualDiffReporter } from './visual-diff-reporter.js';
 
 const DEFAULT_PATTERN = type => `./test/**/*.${type}.js`;
-const ALLOWED_BROWSERS = ['chrome', 'chromium', 'firefox', 'safari', 'webkit'];
-const DEFAULT_BROWSERS = ['chromium', 'firefox', 'webkit'];
 const BROWSER_MAP = {
 	chrome: 'chromium',
 	chromium: 'chromium',
@@ -14,6 +12,8 @@ const BROWSER_MAP = {
 	safari: 'webkit',
 	webkit: 'webkit'
 };
+const ALLOWED_BROWSERS = Object.keys(BROWSER_MAP);
+const DEFAULT_BROWSERS = [...new Set(Object.values(BROWSER_MAP))];
 const TIMEZONE = '{"name":"Canada - Toronto","identifier":"America/Toronto"}';
 const FONT_ASSETS = 'https://s.brightspace.com/lib/fonts/0.6.0/assets/';
 const SUPPRESS_RESIZE_OBSERVER_ERRORS = `
@@ -71,7 +71,7 @@ export class WTRConfig {
 		return {
 			name: 'vdiff',
 			files: this.#pattern,
-			browsers: ['chrome'],
+			browsers: [BROWSER_MAP.chrome],
 			testRunnerHtml: testFramework =>
 				`<!DOCTYPE html>
 				<html lang="en" data-timezone='${TIMEZONE}'>
@@ -249,18 +249,19 @@ export class WTRConfig {
 	}
 
 	getBrowsers(browsers) {
-		browsers = (this.#requestedBrowsers || browsers || DEFAULT_BROWSERS).map(b => BROWSER_MAP[b] || 'chromium');
+		browsers = (this.#requestedBrowsers || browsers || DEFAULT_BROWSERS).map(b => BROWSER_MAP[b] || BROWSER_MAP.chrome);
 
 		if (!Array.isArray(browsers)) throw new TypeError('browsers must be an array');
 
 		return [...new Set(browsers)].map((b) => playwrightLauncher({
-			concurrency: b === 'firefox' || this.#cliArgs.open ? 1 : undefined, // focus in Firefox unreliable if concurrency > 1 (https://github.com/modernweb-dev/web/issues/238)
+			concurrency: b === BROWSER_MAP.firefox || this.#cliArgs.open ? 1 : undefined, // focus in Firefox unreliable if concurrency > 1 (https://github.com/modernweb-dev/web/issues/238)
 			product: b,
 			createBrowserContext: ({ browser }) => browser.newContext({ deviceScaleFactor: 2, reducedMotion: 'reduce' }),
 			launchOptions: {
 				headless: !this.#cliArgs.open,
 				devtools: false,
-				slowMo: this.#cliArgs.slowmo || 0
+				slowMo: this.#cliArgs.slowmo || 0,
+				args: b === BROWSER_MAP.chrome ? ['--disable-gpu-rasterization'] : []
 			}
 		}));
 	}