test: add snapshots to test report

swiiny · Jan 10, 2025 · b713f4c · b713f4c
1 parent 1da5a16
commit b713f4c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/tests/templates.desktop.spec.ts b/tests/templates.desktop.spec.ts
@@ -37,7 +37,7 @@ templates.forEach(({ name, path: templatePath, port }) => {
 			if (serverProcess) serverProcess.kill();
 		});
 
-		test(`renders ${name} template and matches expectation`, async ({ page }) => {
+		test(`renders ${name} template and matches expectation`, async ({ page }, testInfo) => {
 			await page.goto(`http://localhost:${port}`); // Use unique port for each template
 
 			await page.waitForLoadState('networkidle');
@@ -79,6 +79,15 @@ templates.forEach(({ name, path: templatePath, port }) => {
 				{ threshold: 0.1 }
 			);
 
+			testInfo.attach(`desktop-${formattedName}-template-actual.png`, {
+				path: actualScreenshotPath,
+				contentType: 'image/png'
+			});
+			testInfo.attach(`desktop-${formattedName}-template-diff.png`, {
+				path: diffScreenshotPath,
+				contentType: 'image/png'
+			});
+
 			writeFileSync(diffScreenshotPath, PNG.sync.write(diffImage));
 			expect(mismatchedPixels).toBeLessThanOrEqual(100);
 		});

diff --git a/tests/templates.mobile.spec.ts b/tests/templates.mobile.spec.ts
@@ -37,7 +37,7 @@ templates.forEach(({ name, path: templatePath, port }) => {
 			if (serverProcess) serverProcess.kill();
 		});
 
-		test(`renders ${name} template correctly on mobile`, async ({ page }) => {
+		test(`renders ${name} template correctly on mobile`, async ({ page }, testInfo) => {
 			await page.goto(`http://localhost:${port}`);
 			await page.waitForLoadState('networkidle');
 			await page.waitForTimeout(1000);
@@ -75,6 +75,17 @@ templates.forEach(({ name, path: templatePath, port }) => {
 			);
 
 			writeFileSync(diffScreenshotPath, PNG.sync.write(diffImage));
+
+			// Attach screenshots to the report
+			testInfo.attach(`desktop-${formattedName}-template-actual.png`, {
+				path: actualScreenshotPath,
+				contentType: 'image/png'
+			});
+			testInfo.attach(`desktop-${formattedName}-template-diff.png`, {
+				path: diffScreenshotPath,
+				contentType: 'image/png'
+			});
+
 			expect(mismatchedPixels).toBeLessThanOrEqual(100);
 		});