@brightspace-ui/testing 1.38.0 → 1.38.2

package/package.json

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

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

@@ -0,0 +1,30 @@
+const testInfoMap = new Map();
+
+export class TestInfoManager {
+	constructor(session, fullTitle) {
+		this.key = `${session.browser.name.toLowerCase()}|${session.testFile}|${fullTitle}`;
+	}
+	get() {
+		return testInfoMap.get(this.key);
+	}
+
+	set(testInfo) {
+		if (testInfoMap.has(this.key)) {
+			const info = this.get();
+			testInfo.slowDuration = info.slowDuration;
+
+			if (info.golden || testInfo.golden) {
+				testInfo.golden = { ...info.golden, ...testInfo.golden };
+			}
+			if (info.new || testInfo.new) {
+				testInfo.new = { ...info.new, ...testInfo.new };
+			}
+			testInfo.diff = testInfo.diff || info.diff;
+		}
+		testInfoMap.set(this.key, testInfo);
+	}
+}
+
+export function getTestInfo(session, fullTitle) {
+	return new TestInfoManager(session, fullTitle).get();
+}

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

@@ -4,6 +4,7 @@ import { env } from 'node:process';
 import { PATHS } from './paths.js';
 import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
+import { TestInfoManager } from './visual-diff-info.js';
 
 const isCI = !!env['CI'];
 const DEFAULT_TOLERANCE = 0; // TODO: Support tolerance override?
@@ -50,24 +51,31 @@ async function clearDiffPaths(dir) {
 	}
 }
 
+function getResizedPng(xName, yName, original, newSize) {
+	const xOffsets = {
+		left: 0,
+		center: Math.floor((newSize.width - original.width) / 2),
+		right: newSize.width - original.width
+	};
+	const yOffsets = {
+		top: 0,
+		center: Math.floor((newSize.height - original.height) / 2),
+		bottom: newSize.height - original.height
+	};
+	const resized = new PNG(newSize);
+	PNG.bitblt(original, resized, 0, 0, original.width, original.height, xOffsets[xName], yOffsets[yName]);
+	return resized;
+}
+
 async function createComparisonPNGs(original, newSize) {
 	const resizedPNGs = [];
-	[
-		{ name: 'top', coord: 0 },
-		{ name: 'center', coord: Math.floor((newSize.height - original.height) / 2) },
-		{ name: 'bottom', coord: newSize.height - original.height }
-	].forEach(y => {
-		[
-			{ name: 'left', coord: 0 },
-			{ name: 'center', coord: Math.floor((newSize.width - original.width) / 2) },
-			{ name: 'right', coord: newSize.width - original.width }
-		].forEach(x => { // TODO: position added for reports, remove/adjust as needed
+	[ 'top', 'center', 'bottom' ].forEach(y => {
+		['left', 'center', 'right'].forEach(x => {
 			if (original.width === newSize.width && original.height === newSize.height) {
-				resizedPNGs.push({ png: original, position: `${y.name}-${x.name}` });
+				resizedPNGs.push({ png: original, position: `${y}-${x}` });
 			} else {
-				const resized = new PNG(newSize);
-				PNG.bitblt(original, resized, 0, 0, original.width, original.height, x.coord, y.coord);
-				resizedPNGs.push({ png: resized, position: `${y.name}-${x.name}` });
+				const resized = getResizedPng(x, y, original, newSize);
+				resizedPNGs.push({ png: resized, position: `${y}-${x}` });
 			}
 		});
 	});
@@ -75,6 +83,14 @@ async function createComparisonPNGs(original, newSize) {
 	return resizedPNGs;
 }
 
+function getPixelsDiff(screenshotImage, goldenImage) {
+	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 }
+	);
+	return { diff, pixelsDiff };
+}
+
 async function tryMoveFile(srcFileName, destFileName) {
 	await mkdir(dirname(destFileName), { recursive: true });
 	try {
@@ -105,29 +121,6 @@ function extractTestPartsFromName(name) {
 	};
 }
 
-const testInfoMap = new Map();
-export function getTestInfo(session, fullTitle) {
-	return testInfoMap.get(getTestInfoKey(session, fullTitle));
-}
-function getTestInfoKey(session, fullTitle) {
-	return `${session.browser.name.toLowerCase()}|${session.testFile}|${fullTitle}`;
-}
-function setTestInfo(session, fullTitle, testInfo) {
-	const key = getTestInfoKey(session, fullTitle);
-	if (testInfoMap.has(key)) {
-		const info = testInfoMap.get(key);
-		testInfo.slowDuration = info.slowDuration;
-		if (info.golden || testInfo.golden) {
-			testInfo.golden = { ...info.golden, ...testInfo.golden };
-		}
-		if (info.new || testInfo.new) {
-			testInfo.new = { ...info.new, ...testInfo.new };
-		}
-		testInfo.diff = testInfo.diff || info.diff;
-	}
-	testInfoMap.set(key, testInfo);
-}
-
 export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 	let currentRun = 0,
 		rootDir;
@@ -142,6 +135,7 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 			await clearAllDirs(updateGoldens, join(rootDir, PATHS.VDIFF_ROOT));
 		},
 		async executeCommand({ command, payload, session }) {
+			const infoManager = new TestInfoManager(session, payload.name);
 
 			if (session.browser.type !== 'playwright') {
 				throw new Error('Visual-diff is only supported for browser type Playwright.');
@@ -172,15 +166,19 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 				}
 
 				const screenshotOpts = {
-					animations: 'disabled',
-					path: updateGoldens ? goldenFileName : screenshotFileName
+					animations: 'disabled'
 				};
 
 				if (payload.fullPage) screenshotOpts.fullPage = true;
 				if (payload.rect) screenshotOpts.clip = payload.rect;
 
-				const page = session.browser.getPage(session.id);
-				await page.screenshot(screenshotOpts);
+				async function takeScreenshot() {
+					const path = updateGoldens ? goldenFileName : screenshotFileName;
+					const page = session.browser.getPage(session.id);
+					return await page.screenshot({ path, ...screenshotOpts });
+				}
+
+				const screenshotFileBuffer = await takeScreenshot();
 
 				if (updateGoldens) {
 					return { pass: true };
@@ -188,77 +186,72 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 
 				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
 
-				const screenshotFileBuffer = await readFile(screenshotFileName);
-				const screenshotImage = PNG.sync.read(screenshotFileBuffer);
-				setTestInfo(session, payload.name, {
-					slowDuration: payload.slowDuration,
-					new: {
-						height: screenshotImage.height,
-						path: passFileName.substring(rootLength),
-						width: screenshotImage.width
-					}
-				});
-
-				const goldenExists = await checkFileExists(goldenFileName);
-				if (!goldenExists) {
-					setTestInfo(session, payload.name, {
+				async function runCompareTest() {
+					const screenshotImage = PNG.sync.read(screenshotFileBuffer);
+					infoManager.set({
+						slowDuration: payload.slowDuration,
 						new: {
-							path: `${screenshotFile.substring(rootLength)}.png`
+							height: screenshotImage.height,
+							path: screenshotFileName.substring(rootLength),
+							width: screenshotImage.width
 						}
 					});
-					return { pass: false, message: 'No golden exists. Use the "--golden" CLI flag to re-run and re-generate goldens.' };
-				}
 
-				const goldenFileBuffer = await readFile(goldenFileName);
-				const goldenImage = PNG.sync.read(goldenFileBuffer);
-				setTestInfo(session, payload.name, {
-					golden: {
-						height: goldenImage.height,
-						path: goldenFileName.substring(rootLength),
-						width: goldenImage.width
+					const goldenExists = await checkFileExists(goldenFileName);
+					if (!goldenExists) {
+						return { pass: false, message: 'No golden exists. Use the "--golden" CLI flag to re-run and re-generate goldens.' };
 					}
-				});
 
-				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 goldenFileBuffer = await readFile(goldenFileName);
+					const goldenImage = PNG.sync.read(goldenFileBuffer);
+					infoManager.set({
+						golden: {
+							height: goldenImage.height,
+							path: goldenFileName.substring(rootLength),
+							width: goldenImage.width
+						}
+					});
 
-					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 }
-					);
-
-					if (pixelsDiff !== 0) {
-						setTestInfo(session, payload.name, {
-							diff: `${screenshotFile.substring(rootLength)}-diff.png`,
-							new: {
-								path: `${screenshotFile.substring(rootLength)}.png`
-							},
-							pixelsDiff
-						});
-						await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(diff));
-						return { pass: false, message: `Image does not match golden. ${pixelsDiff} pixels are different.` };
+					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.' };
+							infoManager.set({
+								new: {
+									path: passFileName.substring(rootLength)
+								}
+							});
+							return { pass: true };
+						}
+
+						const { diff, pixelsDiff } = getPixelsDiff(screenshotImage, goldenImage);
+
+						if (pixelsDiff !== 0) {
+							infoManager.set({
+								diff: `${screenshotFile.substring(rootLength)}-diff.png`,
+								pixelsDiff
+							});
+							await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(diff));
+							return { pass: false, message: `Image does not match golden. ${pixelsDiff} pixels are different.` };
+						} else {
+							infoManager.set({
+								golden: {
+									byteSize: goldenSize
+								},
+								new: {
+									byteSize: screenshotSize
+								},
+								pixelsDiff
+							});
+							return { pass: false, message: 'Image diff is clean but the images do not have the same bytes.' };
+						}
 					} else {
-						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.' };
+						return { resizeRequired: true };
 					}
-				} else {
-					return { resizeRequired: true };
 				}
+				return await runCompareTest();
 			} else if (command === 'brightspace-visual-diff-compare-resize') {
 				const screenshotImage = PNG.sync.read(await readFile(screenshotFileName));
 				const goldenImage = PNG.sync.read(await readFile(goldenFileName));
@@ -272,17 +265,14 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 
 				let bestIndex = -1;
 				let bestDiffImage = null;
-				let pixelsDiff = Number.MAX_SAFE_INTEGER;
+				let bestPixelsDiff = Number.MAX_SAFE_INTEGER;
 				for (let i = 0; i < newScreenshots.length; i++) {
-					const currentDiff = new PNG(newSize);
-					const currentPixelsDiff = pixelmatch(
-						newScreenshots[i].png.data, newGoldens[i].png.data, currentDiff.data, currentDiff.width, currentDiff.height, { diffMask: true, threshold: DEFAULT_TOLERANCE }
-					);
+					const { diff, pixelsDiff } = getPixelsDiff(newScreenshots[i].png, newGoldens[i].png);
 
-					if (currentPixelsDiff < pixelsDiff) {
+					if (pixelsDiff < bestPixelsDiff) {
 						bestIndex = i;
-						bestDiffImage = currentDiff;
-						pixelsDiff = currentPixelsDiff;
+						bestDiffImage = diff;
+						bestPixelsDiff = pixelsDiff;
 					}
 				}
 
@@ -291,7 +281,7 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 				await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(bestDiffImage));
 
 				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
-				setTestInfo(session, payload.name, {
+				infoManager.set({
 					diff: `${screenshotFile.substring(rootLength)}-diff.png`,
 					golden: {
 						path: `${screenshotFile.substring(rootLength)}-resized-golden.png`
@@ -299,10 +289,10 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 					new: {
 						path: `${screenshotFile.substring(rootLength)}-resized-screenshot.png`
 					},
-					pixelsDiff
+					pixelsDiff: bestPixelsDiff
 				});
 
-				return { pass: false, message: `Images are not the same size. When resized, ${pixelsDiff} pixels are different.` };
+				return { pass: false, message: `Images are not the same size. When resized, ${bestPixelsDiff} pixels are different.` };
 			}
 
 		}

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

@@ -4,7 +4,7 @@ import { dirname, join } from 'node:path';
 import { env } from 'node:process';
 import { execSync } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
-import { getTestInfo } from './visual-diff-plugin.js';
+import { getTestInfo } from './visual-diff-info.js';
 import { PATHS } from './paths.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));