visual diffing

.github/workflows/visual-diff.yml

@@ -29,6 +29,9 @@ jobs:
   visual-diff:
     # The type of runner that the job will run on
     runs-on: windows-latest
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
@@ -51,20 +54,20 @@ jobs:
         run: npx playwright install
 
       # Take images
-      - name: Take screenshots for comparison [push|main]
+      - name: Take screenshots for baseline [push|main]
         if: ${{ github.event_name == 'push' && github.ref_name == 'main' }}
         id: 'visual_diff_all'
         run: npm run screenshots:all
 
-      # On pushes to main, upload images for comparison against pull_request runs
-      - name: Upload comparison screenshots [push|main]
+      # On pushes to main, upload images for baseline against pull_request runs
+      - name: Upload baseline screenshots [push|main]
         if: ${{ github.event_name == 'push' && github.ref_name == 'main' }}
         uses: actions/upload-artifact@v4
         with:
-          name: visual_diff_comparison_shapshots
+          name: visual_diff_baseline_shapshots
           path: ./integration/visual-diff/screenshots/updated
 
-      # On pull requests into main, download images for comparison
+      # On pull requests into main, download images for baseline
       - name: Take screenshots [pull_request]
         if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }}
         id: 'visual_diff_light'
@@ -78,9 +81,50 @@ jobs:
           name: visual_diff_pull_request_shapshots-${{ github.sha }}
           path: ./integration/visual-diff/screenshots/updated
 
-      - name: Download comparison screenshots [pull_request]
+      - name: Download baseline screenshots [pull_request]
         if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }}
         uses: actions/upload-artifact@v4
         with:
-          name: visual_diff_comparison_shapshots
-          path: ./integration/visual-diff/screenshots/comparison
+          name: visual_diff_baseline_shapshots
+          path: ./integration/visual-diff/screenshots/baseline
+
+      - name: Download baseline screenshots [pull_request]
+        if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual_diff_baseline_shapshots
+          path: ./integration/visual-diff/screenshots/baseline
+
+        # populate ./integration/visual-diff/screenshots/ with the contents of the diff site
+      - name: Compare Screenshots and Generate Site
+        run: npm run compare -w @microsoft/atlas-integration
+
+      # Ready for Parcel to build the thing
+      - name: Build diff report site
+        run: npm run build-report -w @microsoft/atlas-integration
+
+      # Temporarily upload screenshots for pull requests, just to verify they are as we'd expect
+      - name: Upload report folder [pull_request]
+        if: ${{ github.event_name == 'pull_request' && github.base_ref == 'main' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual-diff-screenshots-${{ github.event.number }}
+          path: ./integration/dist
+
+      - name: Run GH Action Script
+        run: npm run action -w @microsoft/atlas-integration
+
+      # # Pages setup and upload
+      # - name: Setup Pages
+      #   uses: actions/configure-pages@v5
+
+      # - name: Upload artifact
+      #   uses: actions/upload-pages-artifact@v3
+      #   with:
+      #     name: github-pages
+      #     # Upload entire repository
+      #     path: './integration/visual-diff/screenshots/'
+
+      # - name: Deploy to GitHub Pages
+      #   id: deployment
+      #   uses: actions/deploy-pages@v4

css/src/components/button.scss

@@ -27,6 +27,8 @@ $button-icon-spacing: 0.375em !default;
 $button-font-weight: $weight-semibold !default;
 
 .button {
+	font-size: 50px;
+
 	@include control;
 	@include unselectable;
 

integration/package.json

@@ -4,9 +4,10 @@
 	"private": true,
 	"description": "",
 	"scripts": {
+		"action": "wireit",
 		"codegen": "playwright codegen localhost:1111",
-		"compare": "node \"./tasks/dist/compare.js\" ",
-		"compile-tasks": "tsc -p \"./tasks/tsconfig.json\"",
+		"compare": "wireit",
+		"compile-tasks": "wireit",
 		"test": "playwright test --config=integration-tests.config.ts",
 		"test:debug": "playwright test --debug --config=integration-tests.config.ts",
 		"screenshots:all": "cross-env FULL_DIFF=true playwright test --config=visual-diff.config.ts",
@@ -18,21 +19,41 @@
 		"serve-report": "parcel \"./visual-diff/screenshots/*.html\" --port 7777 --open Chrome --no-cache",
 		"build-report": "parcel build \"./visual-diff/screenshots/*.html\""
 	},
+	"wireit": {
+		"compare": {
+			"command": "node \"./tasks/dist/compare.js\" ",
+			"dependencies": [
+				"compile-tasks"
+			]
+		},
+		"compile-tasks": {
+			"command": "tsc -p \"./tasks/tsconfig.json\""
+		},
+		"action": {
+			"command": "node \"./tasks/dist/action.js\" ",
+			"dependencies": [
+				"compile-tasks"
+			]
+		}
+	},
 	"author": "Microsoft Corporation",
 	"license": "ISC",
 	"devDependencies": {
+		"@actions/core": "1.11.1",
 		"@axe-core/playwright": "^4.7.3",
 		"@playwright/test": "^1.35.1",
 		"@types/normalize-path": "^3.0.0",
 		"@types/pixelmatch": "^5.2.4",
+		"@types/fs-extra": "^11.0.4",
 		"@types/pngjs": "6.0.1",
 		"cross-env": "^7.0.3",
 		"execa": "^7.1.1",
 		"fs-extra": "^11.1.1",
-		"glob": "^10.3.1",
+		"glob": "^11.0.0",
 		"normalize-path": "^3.0.0",
 		"parcel": "^2.12.0",
 		"pixelmatch": "^5.3.0",
-		"pngjs": "^7.0.0"
+		"pngjs": "^7.0.0",
+		"wireit": "0.14.9"
 	}
 }

integration/tasks/action.ts

@@ -0,0 +1,6 @@
+// https://github.com/actions/toolkit/tree/main
+//https://github.com/actions/toolkit/tree/main/packages/artifact
+// https://www.npmjs.com/package/@actions/github
+import * as core from '@actions/core';
+
+core.notice('Something happened that you might want to know about.', {});

integration/tasks/compare.ts

@@ -1,18 +1,17 @@
 // @ts-check
 
-import { emptyDir, ensureDir, readFile, writeFile, writeJSON } from 'fs-extra';
+import { emptyDir, ensureDir, PathLike, readFile, writeFile, writeJSON } from 'fs-extra';
 import { basename, dirname, join, resolve, sep } from 'path';
 import * as pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
-import { promisify } from 'util';
 import {
 	baselineDirectory,
 	diffDirectory,
 	screenshotsOutputDir,
 	screenshotsRoot
 } from './locations';
 import { generateHtmlReport } from './report';
-export const glob = promisify(require('glob'));
+import { glob } from 'glob';
 
 export const diffExt = '.diff.png';
 /**
@@ -84,12 +83,13 @@ async function compare(
 		emptyDir(outDir)
 	]);
 
-	const sourceMap = sourceKeys.reduce(
-		(m: { set: (arg0: any, arg1: string) => any }, f: any) => m.set(f, join(sourceDir, f)),
+	const sourceMap: Map<string, string> = sourceKeys.reduce(
+		(m: Map<string, string>, f: any) => m.set(f, join(sourceDir, f)),
 		new Map()
 	);
-	const targetMap = targetKeys.reduce(
-		(m: { set: (arg0: any, arg1: string) => any }, f: any) => m.set(f, join(targetDir, f)),
+
+	const targetMap: Map<string, string> = targetKeys.reduce(
+		(m: Map<string, string>, f: any) => m.set(f, join(targetDir, f)),
 		new Map()
 	);
 	const manifest: VisualDiffReportManifest = [];
@@ -100,12 +100,12 @@ async function compare(
 			continue;
 		}
 
-		const targetFilename = targetMap.get(key);
+		const targetFilename = targetMap.get(key) || '';
 		const [source, target] = await Promise.all([
 			readFile(sourceFilename),
-			readFile(targetFilename)
+			readFile(targetFilename as PathLike)
 		]);
-		const diff = await compareBuffers(source, target);
+		const diff = await compareBuffers(source, target as Buffer);
 
 		if (diff.pixelCount === 0) {
 			continue;

integration/tasks/tsconfig.json

@@ -2,6 +2,7 @@
 	"$schema": "https://json.schemastore.org/tsconfig",
 	"compilerOptions": {
 		/*NOTE: This file is used only for linting. */
+		"skipLibCheck": true,
 		/* Basic Options */
 		"target": "es2021",
 		"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,