@brightspace-ui/testing 1.38.2 → 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.2",
+  "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

@@ -67,6 +67,35 @@ function getResizedPng(xName, yName, original, newSize) {
 	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 = [];
 	[ 'top', 'center', 'bottom' ].forEach(y => {
@@ -150,151 +179,124 @@ 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'
-				};
+			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);
-					return await page.screenshot({ path, ...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 };
+			}
 
-				const screenshotFileBuffer = await takeScreenshot();
+			const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
 
-				if (updateGoldens) {
-					return { pass: true };
+			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 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.' };
 				}
 
-				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
+				const goldenFileBuffer = await readFile(goldenFileName);
+				const goldenImage = PNG.sync.read(goldenFileBuffer);
+				infoManager.set({
+					golden: {
+						height: goldenImage.height,
+						path: goldenFileName.substring(rootLength),
+						width: goldenImage.width
+					}
+				});
 
-				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
-						}
-					});
+				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 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.' };
+					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 {
+					const { screenshot, golden, diff, pixelsDiff } = await getBestResizePng(screenshotImage, goldenImage);
 
-					const goldenFileBuffer = await readFile(goldenFileName);
-					const goldenImage = PNG.sync.read(goldenFileBuffer);
+					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: {
-							height: goldenImage.height,
-							path: goldenFileName.substring(rootLength),
-							width: goldenImage.width
-						}
+							path: `${screenshotFile.substring(rootLength)}-resized-golden.png`
+						},
+						new: {
+							path: `${screenshotFile.substring(rootLength)}-resized-screenshot.png`
+						},
+						pixelsDiff
 					});
 
-					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 {
-						return { resizeRequired: true };
-					}
+					return { pass: false, message: `Images are not the same size. When resized, ${pixelsDiff} pixels are different.` };
 				}
-				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));
-
-				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;
-					}
-				}
-
-				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: bestPixelsDiff
-				});
-
-				return { pass: false, message: `Images are not the same size. When resized, ${bestPixelsDiff} pixels are different.` };
 			}
-
+			return await runCompareTest();
 		}
 	};
 }