handle case where golden doesn't exist yet

BrightspaceUI · Jul 20, 2023 · d95dae8 · d95dae8
1 parent 0f0be39
commit d95dae8
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 32 deletions.
diff --git a/src/server/report/icons.js b/src/server/report/icons.js
diff --git a/src/server/report/result.js b/src/server/report/result.js
@@ -1,6 +1,6 @@
 import { css, html, nothing } from 'lit';
 import { FILTER_STATUS, FULL_MODE, LAYOUTS, renderEmpty, renderStatusText, STATUS_TYPE } from './common.js';
-import { ICON_BROWSERS, ICON_TADA } from './icons.js';
+import { ICON_BROWSERS, ICON_NO_GOLDEN, ICON_TADA } from './icons.js';
 
 export const RESULT_STYLE = css`
 	.result-browser {
@@ -77,18 +77,19 @@ export const RESULT_STYLE = css`
 		color: #90989d;
 		font-size: 0.8rem;
 	}
-	.result-no-changes {
+	.result-graphic {
 		align-items: center;
 		display: flex;
 		flex-direction: column;
 		gap: 20px;
 		min-width: 210px;
 	}
-	.result-no-changes > p {
-		color: #6e7477;
+	.result-graphic > p {
+		color: #90989d;
 		font-size: 1.1rem;
 		font-weight: bold;
 		margin: 0;
+		text-align: center;
 	}
 	.result-test-name {
 		align-items: center;
@@ -113,40 +114,43 @@ function renderResult(resultData, options) {
 		`;
 	}
 
-	const renderPart = (label, partInfo, noChanges, overlay) => {
-		const img = noChanges ? html`
-			<div class="result-no-changes padding">
-				${ICON_TADA}
-				<p>Hooray! No changes here.</p>
-			</div>
-		` : html`<div class="result-diff-container"><img src="../${partInfo.path}" loading="lazy" alt="">${overlay}</div>`;
+	const renderPart = (label, partInfo, overlay) => {
 		return html`
 			<div class="result-part">
 				<div class="result-part-info">
 					<div class="result-part-info-spacer"></div>
 					<div class="result-part-info-name">${label}</div>
 					<div class="result-part-info-size">(${partInfo.width} x ${partInfo.height})</div>
 				</div>
-				${img}
+				<div class="result-diff-container"><img src="../${partInfo.path}" loading="lazy" alt="">${overlay}</div>
 			</div>
 		`;
 	};
 
-	const overlay = (options.showOverlay && !resultData.passed) ?
+	const goldenExists = (resultData.info.golden !== undefined);
+
+	const overlay = (goldenExists && options.showOverlay && !resultData.passed) ?
 		html`<div class="result-overlay"><img src="../${resultData.info.diff}" loading="lazy" alt=""></div>` : nothing;
 
+	const goldenPart = !goldenExists ?
+		html`<div class="result-graphic padding">${ICON_NO_GOLDEN}<p>No golden exists for this test... yet.</p></div>` :
+		renderPart('golden', resultData.info.golden, options.layout === LAYOUTS.SPLIT.value ? undefined : overlay);
+
 	if (options.layout === LAYOUTS.SPLIT.value) {
+		const newPart = resultData.passed ?
+			html`<div class="result-graphic padding">${ICON_TADA}<p>Hooray! No changes here.</p></div>` :
+			renderPart('new', resultData.info.new, overlay);
 		return html`
 			<div class="result-split">
-				${ renderPart('golden', resultData.info.golden, false, undefined) }
+				${goldenPart}
 				<div class="result-split-divider"></div>
-				${ renderPart('new', resultData.info.new, resultData.passed, overlay) }
+				${newPart}
 			</div>`;
 	} else if (options.layout === LAYOUTS.FULL.value) {
 		if (options.fullMode === FULL_MODE.GOLDEN.value) {
-			return renderPart('golden', resultData.info.golden, false, overlay);
+			return goldenPart;
 		} else {
-			return renderPart('new', resultData.info.new, false, overlay);
+			return renderPart('new', resultData.info.new, overlay);
 		}
 	}
 

diff --git a/src/server/visual-diff-plugin.js b/src/server/visual-diff-plugin.js
@@ -192,37 +192,38 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 					path: updateGoldens ? goldenFileName : screenshotFileName
 				});
 
+				if (updateGoldens) {
+					return { pass: true };
+				}
+
 				const rootLength = join(rootDir, PATHS.VDIFF_ROOT).length + 1;
+
+				const screenshotImage = PNG.sync.read(await readFile(screenshotFileName));
 				setTestInfo(session, payload.name, {
 					slowDuration: payload.slowDuration,
-					golden: {
-						path: goldenFileName.substring(rootLength)
-					},
 					new: {
-						path: passFileName.substring(rootLength)
+						height: screenshotImage.height,
+						path: passFileName.substring(rootLength),
+						width: screenshotImage.width
 					}
 				});
 
-				if (updateGoldens) {
-					return { pass: true };
-				}
-
 				const goldenExists = await checkFileExists(goldenFileName);
 				if (!goldenExists) {
+					setTestInfo(session, payload.name, {
+						new: {
+							path: `${screenshotFile.substring(rootLength)}.png`
+						}
+					});
 					return { pass: false, message: 'No golden exists. Use the "--golden" CLI flag to re-run and re-generate goldens.' };
 				}
 
-				const screenshotImage = PNG.sync.read(await readFile(screenshotFileName));
 				const goldenImage = PNG.sync.read(await readFile(goldenFileName));
-
 				setTestInfo(session, payload.name, {
 					golden: {
 						height: goldenImage.height,
+						path: goldenFileName.substring(rootLength),
 						width: goldenImage.width
-					},
-					new: {
-						height: screenshotImage.height,
-						width: screenshotImage.width
 					}
 				});