@brightspace-ui/testing 1.38.1 → 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.1",
+  "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-plugin.js

@@ -51,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}` });
 			}
 		});
 	});
@@ -76,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 {
@@ -151,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 };
@@ -167,73 +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);
-				infoManager.set({
-					slowDuration: payload.slowDuration,
-					new: {
-						height: screenshotImage.height,
-						path: screenshotFileName.substring(rootLength),
-						width: screenshotImage.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.' };
-				}
+				async function runCompareTest() {
+					const screenshotImage = PNG.sync.read(screenshotFileBuffer);
+					infoManager.set({
+						slowDuration: payload.slowDuration,
+						new: {
+							height: screenshotImage.height,
+							path: screenshotFileName.substring(rootLength),
+							width: screenshotImage.width
+						}
+					});
 
-				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 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.' };
-						infoManager.set({
-							new: {
-								path: passFileName.substring(rootLength)
-							}
-						});
-						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
+						}
+					});
+
+					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 = 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) {
-						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.` };
+						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 {
-						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.' };
+						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));
@@ -247,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;
 					}
 				}
 
@@ -274,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.` };
 			}
 
 		}