@brightspace-ui/testing 1.38.1 → 1.38.3

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.3",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",

package/src/browser/vdiff.js

@@ -90,11 +90,8 @@ async function ScreenshotAndCompare(opts = {}) {
 	}
 	const slowDuration = this.test.slow();
 
-	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, fullPage, rect, slowDuration });
-	if (result.resizeRequired) {
-		this.test.timeout(0);
-		result = await executeServerCommand('brightspace-visual-diff-compare-resize', { name });
-	}
+	this.test.timeout(0);
+	const result = await executeServerCommand('brightspace-visual-diff-compare', { name, fullPage, rect, slowDuration });
 
 	if (window.d2lTest) document.documentElement.classList.remove('screenshot');
 

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

@@ -51,24 +51,60 @@ 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 getBestResizePng(screenshotImage, goldenImage) {
+	const newWidth = Math.max(screenshotImage.width, goldenImage.width);
+	const newHeight = Math.max(screenshotImage.height, goldenImage.height);
+	const newSize = { width: newWidth, height: newHeight };
+
+	const newScreenshots = await createComparisonPNGs(screenshotImage, newSize);
+	const newGoldens = await createComparisonPNGs(goldenImage, newSize);
+
+	let bestIndex = -1;
+	let bestDiffImage = null;
+	let bestPixelsDiff = Number.MAX_SAFE_INTEGER;
+	for (let i = 0; i < newScreenshots.length; i++) {
+		const { diff, pixelsDiff } = getPixelsDiff(newScreenshots[i].png, newGoldens[i].png);
+
+		if (pixelsDiff < bestPixelsDiff) {
+			bestIndex = i;
+			bestDiffImage = diff;
+			bestPixelsDiff = pixelsDiff;
+		}
+	}
+
+	return {
+		screenshot: newScreenshots[bestIndex],
+		golden: newGoldens[bestIndex],
+		diff: bestDiffImage,
+		pixelsDiff: bestPixelsDiff
+	};
+}
+
 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 +112,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 {
@@ -135,39 +179,43 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 			const screenshotFile = join(newPath, PATHS.FAIL, browser, newName);
 			const screenshotFileName = `${screenshotFile}.png`;
 
-			if (command === 'brightspace-visual-diff-compare') {
-				if (!isCI) { // CI will be a fresh .vdiff folder each time and only one run
-					if (session.testRun !== currentRun) {
-						currentRun = session.testRun;
-						clearedDirs.clear();
-					}
+			if (command !== 'brightspace-visual-diff-compare') return;
+			if (!isCI) { // CI will be a fresh .vdiff folder each time and only one run
+				if (session.testRun !== currentRun) {
+					currentRun = session.testRun;
+					clearedDirs.clear();
+				}
 
-					if (runSubset || currentRun > 0) {
-						if (!clearedDirs.has(newPath)) {
-							clearedDirs.set(newPath, clearDir(updateGoldens, newPath));
-						}
-						await clearedDirs.get(newPath);
+				if (runSubset || currentRun > 0) {
+					if (!clearedDirs.has(newPath)) {
+						clearedDirs.set(newPath, clearDir(updateGoldens, newPath));
 					}
+					await clearedDirs.get(newPath);
 				}
+			}
 
-				const screenshotOpts = {
-					animations: 'disabled',
-					path: updateGoldens ? goldenFileName : screenshotFileName
-				};
+			const screenshotOpts = {
+				animations: 'disabled'
+			};
 
-				if (payload.fullPage) screenshotOpts.fullPage = true;
-				if (payload.rect) screenshotOpts.clip = payload.rect;
+			if (payload.fullPage) screenshotOpts.fullPage = true;
+			if (payload.rect) screenshotOpts.clip = payload.rect;
 
+			async function takeScreenshot() {
+				const path = updateGoldens ? goldenFileName : screenshotFileName;
 				const page = session.browser.getPage(session.id);
-				await page.screenshot(screenshotOpts);
+				return await page.screenshot({ path, ...screenshotOpts });
+			}
 
-				if (updateGoldens) {
-					return { pass: true };
-				}
+			const screenshotFileBuffer = await takeScreenshot();
 
-				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
+			if (updateGoldens) {
+				return { pass: true };
+			}
+
+			const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
 
-				const screenshotFileBuffer = await readFile(screenshotFileName);
+			async function runCompareTest() {
 				const screenshotImage = PNG.sync.read(screenshotFileBuffer);
 				infoManager.set({
 					slowDuration: payload.slowDuration,
@@ -207,10 +255,7 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 						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 }
-					);
+					const { diff, pixelsDiff } = getPixelsDiff(screenshotImage, goldenImage);
 
 					if (pixelsDiff !== 0) {
 						infoManager.set({
@@ -232,54 +277,26 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 						return { pass: false, message: 'Image diff is clean but the images do not have the same bytes.' };
 					}
 				} else {
-					return { resizeRequired: true };
-				}
-			} else if (command === 'brightspace-visual-diff-compare-resize') {
-				const screenshotImage = PNG.sync.read(await readFile(screenshotFileName));
-				const goldenImage = PNG.sync.read(await readFile(goldenFileName));
-
-				const newWidth = Math.max(screenshotImage.width, goldenImage.width);
-				const newHeight = Math.max(screenshotImage.height, goldenImage.height);
-				const newSize = { width: newWidth, height: newHeight };
-
-				const newScreenshots = await createComparisonPNGs(screenshotImage, newSize);
-				const newGoldens = await createComparisonPNGs(goldenImage, newSize);
-
-				let bestIndex = -1;
-				let bestDiffImage = null;
-				let pixelsDiff = 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 }
-					);
-
-					if (currentPixelsDiff < pixelsDiff) {
-						bestIndex = i;
-						bestDiffImage = currentDiff;
-						pixelsDiff = currentPixelsDiff;
-					}
+					const { screenshot, golden, diff, pixelsDiff } = await getBestResizePng(screenshotImage, goldenImage);
+
+					await writeFile(`${screenshotFile}-resized-screenshot.png`, PNG.sync.write(screenshot.png));
+					await writeFile(`${screenshotFile}-resized-golden.png`, PNG.sync.write(golden.png));
+					await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(diff));
+					infoManager.set({
+						diff: `${screenshotFile.substring(rootLength)}-diff.png`,
+						golden: {
+							path: `${screenshotFile.substring(rootLength)}-resized-golden.png`
+						},
+						new: {
+							path: `${screenshotFile.substring(rootLength)}-resized-screenshot.png`
+						},
+						pixelsDiff
+					});
+
+					return { pass: false, message: `Images are not the same size. When resized, ${pixelsDiff} pixels are different.` };
 				}
-
-				await writeFile(`${screenshotFile}-resized-screenshot.png`, PNG.sync.write(newScreenshots[bestIndex].png));
-				await writeFile(`${screenshotFile}-resized-golden.png`, PNG.sync.write(newGoldens[bestIndex].png));
-				await writeFile(`${screenshotFile}-diff.png`, PNG.sync.write(bestDiffImage));
-
-				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
-				infoManager.set({
-					diff: `${screenshotFile.substring(rootLength)}-diff.png`,
-					golden: {
-						path: `${screenshotFile.substring(rootLength)}-resized-golden.png`
-					},
-					new: {
-						path: `${screenshotFile.substring(rootLength)}-resized-screenshot.png`
-					},
-					pixelsDiff
-				});
-
-				return { pass: false, message: `Images are not the same size. When resized, ${pixelsDiff} pixels are different.` };
 			}
-
+			return await runCompareTest();
 		}
 	};
 }