From a4655244eeafc93d3f673b73abf44f06c0987d10 Mon Sep 17 00:00:00 2001
From: Dave Lockhart <dlockhart@users.noreply.github.com>
Date: Thu, 12 Oct 2023 11:40:46 -0400
Subject: [PATCH 1/2] feat: switch to d2l-test-runner and new vdiffs

---
 src/create.js                                 |  8 +++---
 .../test-unit/templates/configured/_README.md |  2 +-
 .../templates/configured/_element.test.js     |  2 +-
 .../templates/configured/_package.json        |  8 ++----
 .../templates/static/.github/workflows/ci.yml |  4 +--
 src/generators/test-vdiff/index.js            | 24 ++++++++++++++++
 .../test-vdiff/templates/_README.md           | 10 +++++++
 .../test-vdiff/templates/_element.vdiff.js    | 11 ++++++++
 .../test-vdiff/templates/_gitignore           |  1 +
 .../templates/configured/_package.json        |  5 ++++
 .../static/.github/workflows/vdiff.yml        | 20 +++++++++++++
 src/generators/test-visual-diff/index.js      | 26 -----------------
 .../test-visual-diff/templates/_README.md     | 25 -----------------
 .../templates/_element.visual-diff.html       | 17 -----------
 .../templates/_element.visual-diff.js         | 28 -------------------
 .../test-visual-diff/templates/_gitignore     |  2 --
 .../static/.github/workflows/visual-diff.yml  | 21 --------------
 17 files changed, 82 insertions(+), 132 deletions(-)
 create mode 100644 src/generators/test-vdiff/index.js
 create mode 100644 src/generators/test-vdiff/templates/_README.md
 create mode 100644 src/generators/test-vdiff/templates/_element.vdiff.js
 create mode 100644 src/generators/test-vdiff/templates/_gitignore
 create mode 100644 src/generators/test-vdiff/templates/configured/_package.json
 create mode 100644 src/generators/test-vdiff/templates/static/.github/workflows/vdiff.yml
 delete mode 100644 src/generators/test-visual-diff/index.js
 delete mode 100644 src/generators/test-visual-diff/templates/_README.md
 delete mode 100644 src/generators/test-visual-diff/templates/_element.visual-diff.html
 delete mode 100644 src/generators/test-visual-diff/templates/_element.visual-diff.js
 delete mode 100644 src/generators/test-visual-diff/templates/_gitignore
 delete mode 100644 src/generators/test-visual-diff/templates/static/.github/workflows/visual-diff.yml

diff --git a/src/create.js b/src/create.js
index c721cfd..39436f5 100755
--- a/src/create.js
+++ b/src/create.js
@@ -8,7 +8,7 @@ import { run as setupElement } from './generators/wc-lit-element/index.js';
 import { run as setupLocalization } from './generators/localization/index.js';
 import { run as setupRelease } from './generators/release/index.js';
 import { run as setupTestUnit } from './generators/test-unit/index.js';
-import { run as setupTestVisualDiff } from './generators/test-visual-diff/index.js';
+import { run as setupTestVdiff } from './generators/test-vdiff/index.js';
 
 function getClassName(hyphenatedName) {
 	const hyphenRemoved = hyphenatedName.replace(/-([a-z])/g, (g) => { return g[1].toUpperCase(); });
@@ -43,8 +43,8 @@ async function getOptions() {
 		},
 		{
 			type: 'select',
-			name: 'visualDiff',
-			message: 'Would you like visual-diff tests set up?',
+			name: 'vdiff',
+			message: 'Would you like vdiff tests set up?',
 			choices: [
 				{ title: 'Yes', value: true },
 				{ title: 'No', value: false }
@@ -87,7 +87,7 @@ async function executeGenerator() {
 	setupDefaultContent(options);
 	setupElement(options);
 	setupTestUnit(options);
-	if (options.visualDiff) setupTestVisualDiff(options);
+	if (options.vdiff) setupTestVdiff(options);
 	setupDemo(options);
 	if (options.localization) setupLocalization(options);
 	setupRelease(options);
diff --git a/src/generators/test-unit/templates/configured/_README.md b/src/generators/test-unit/templates/configured/_README.md
index e3a661f..3387832 100644
--- a/src/generators/test-unit/templates/configured/_README.md
+++ b/src/generators/test-unit/templates/configured/_README.md
@@ -17,5 +17,5 @@ npm run lint:eslint
 npm run lint:style
 
 # unit tests
-npm run test:headless
+npm run test:unit
 ```
diff --git a/src/generators/test-unit/templates/configured/_element.test.js b/src/generators/test-unit/templates/configured/_element.test.js
index 4b05054..30c8cc4 100644
--- a/src/generators/test-unit/templates/configured/_element.test.js
+++ b/src/generators/test-unit/templates/configured/_element.test.js
@@ -1,5 +1,5 @@
 import '../<%= hyphenatedName %>.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html } from '@brightspace-ui/testing';
 import { runConstructor } from '@brightspace-ui/core/tools/constructor-test-helper.js';
 
 describe('<%= className %>', () => {
diff --git a/src/generators/test-unit/templates/configured/_package.json b/src/generators/test-unit/templates/configured/_package.json
index 7c367ca..3fcc49a 100644
--- a/src/generators/test-unit/templates/configured/_package.json
+++ b/src/generators/test-unit/templates/configured/_package.json
@@ -1,14 +1,12 @@
 {
   "scripts": {
-    "test": "npm run lint && npm run test:headless",
-    "test:headless": "web-test-runner --files \"./test/**/*.test.js\" --node-resolve",
-    "test:headless:watch": "web-test-runner --files \"./test/**/*.test.js\" --node-resolve --watch"
+    "test": "npm run lint && npm run test:unit",
+    "test:unit": "d2l-test-runner"
   },
   "dependencies": {
     "@brightspace-ui/core": "^2"
   },
   "devDependencies": {
-    "@open-wc/testing": "^3",
-    "@web/test-runner": "^0.17"
+    "@brightspace-ui/testing": "^1"
   }
 }
diff --git a/src/generators/test-unit/templates/static/.github/workflows/ci.yml b/src/generators/test-unit/templates/static/.github/workflows/ci.yml
index fffcf50..a3eb408 100644
--- a/src/generators/test-unit/templates/static/.github/workflows/ci.yml
+++ b/src/generators/test-unit/templates/static/.github/workflows/ci.yml
@@ -19,5 +19,5 @@ jobs:
         run: npm run lint:eslint
       - name: Lint (CSS)
         run: npm run lint:style
-      - name: Unit Tests (cross-browser)
-        run: npx web-test-runner --files "./test/**/*.test.js" --node-resolve --playwright --browsers chromium firefox webkit
+      - name: Unit Tests
+        run: npm run test:unit
diff --git a/src/generators/test-vdiff/index.js b/src/generators/test-vdiff/index.js
new file mode 100644
index 0000000..273f515
--- /dev/null
+++ b/src/generators/test-vdiff/index.js
@@ -0,0 +1,24 @@
+import { copyFile, copyFilesInDir, getDestinationPath, mergeJSON, mergeText, replaceText } from '../../helper.js';
+
+export function run(templateData) {
+	mergeJSON(
+		`${__dirname}/templates/configured/_package.json`,
+		`${getDestinationPath(templateData.hyphenatedName)}/package.json`
+	);
+	mergeText(
+		`${__dirname}/templates/_README.md`,
+		`${getDestinationPath(templateData.hyphenatedName)}/README.md`
+	);
+	mergeText(
+		`${__dirname}/templates/_gitignore`,
+		`${getDestinationPath(templateData.hyphenatedName)}/.gitignore`
+	);
+
+	copyFile(
+		`${__dirname}/templates/_element.vdiff.js`,
+		`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.vdiff.js`
+	);
+	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.vdiff.js`, templateData);
+
+	copyFilesInDir(`${__dirname}/templates/static`, getDestinationPath(templateData.hyphenatedName));
+}
diff --git a/src/generators/test-vdiff/templates/_README.md b/src/generators/test-vdiff/templates/_README.md
new file mode 100644
index 0000000..78e14c1
--- /dev/null
+++ b/src/generators/test-vdiff/templates/_README.md
@@ -0,0 +1,10 @@
+
+This repo uses [@brightspace-ui/testing](https://github.com/BrightspaceUI/testing)'s vdiff command to perform visual regression testing:
+
+```shell
+# vdiff
+npm run test:vdiff
+
+# re-generate goldens
+npm run test:vdiff golden
+```
diff --git a/src/generators/test-vdiff/templates/_element.vdiff.js b/src/generators/test-vdiff/templates/_element.vdiff.js
new file mode 100644
index 0000000..1be86f5
--- /dev/null
+++ b/src/generators/test-vdiff/templates/_element.vdiff.js
@@ -0,0 +1,11 @@
+import '../<%= hyphenatedName %>.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+describe('<%= tagName %>', () => {
+
+	it('default', async() => {
+		const elem = await fixture(html`<<%= tagName %>></<%= tagName %>>`);
+		await expect(elem).to.be.golden();
+	});
+
+});
diff --git a/src/generators/test-vdiff/templates/_gitignore b/src/generators/test-vdiff/templates/_gitignore
new file mode 100644
index 0000000..8414dff
--- /dev/null
+++ b/src/generators/test-vdiff/templates/_gitignore
@@ -0,0 +1 @@
+.vdiff/
diff --git a/src/generators/test-vdiff/templates/configured/_package.json b/src/generators/test-vdiff/templates/configured/_package.json
new file mode 100644
index 0000000..820893e
--- /dev/null
+++ b/src/generators/test-vdiff/templates/configured/_package.json
@@ -0,0 +1,5 @@
+{
+  "scripts": {
+    "test:vdiff": "d2l-test-runner vdiff"
+  }
+}
diff --git a/src/generators/test-vdiff/templates/static/.github/workflows/vdiff.yml b/src/generators/test-vdiff/templates/static/.github/workflows/vdiff.yml
new file mode 100644
index 0000000..9d2836c
--- /dev/null
+++ b/src/generators/test-vdiff/templates/static/.github/workflows/vdiff.yml
@@ -0,0 +1,20 @@
+name: vdiff
+on: pull_request
+jobs:
+  vdiff:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - uses: Brightspace/third-party-actions@actions/checkout
+      - uses: Brightspace/third-party-actions@actions/setup-node
+        with:
+          node-version-file: .nvmrc
+      - name: Install Dependencies
+        run: npm install
+      - name: vdiff Tests
+        uses: BrightspaceUI/actions/vdiff@main
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-session-token: ${{ secrets.AWS_SESSION_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/generators/test-visual-diff/index.js b/src/generators/test-visual-diff/index.js
deleted file mode 100644
index cd379c8..0000000
--- a/src/generators/test-visual-diff/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { copyFile, copyFilesInDir, getDestinationPath, mergeText, replaceText } from '../../helper.js';
-
-export function run(templateData) {
-	mergeText(
-		`${__dirname}/templates/_README.md`,
-		`${getDestinationPath(templateData.hyphenatedName)}/README.md`
-	);
-	mergeText(
-		`${__dirname}/templates/_gitignore`,
-		`${getDestinationPath(templateData.hyphenatedName)}/.gitignore`
-	);
-
-	copyFile(
-		`${__dirname}/templates/_element.visual-diff.js`,
-		`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.visual-diff.js`
-	);
-	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.visual-diff.js`, templateData);
-
-	copyFile(
-		`${__dirname}/templates/_element.visual-diff.html`,
-		`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.visual-diff.html`
-	);
-	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.visual-diff.html`, templateData);
-
-	copyFilesInDir(`${__dirname}/templates/static`, getDestinationPath(templateData.hyphenatedName));
-}
diff --git a/src/generators/test-visual-diff/templates/_README.md b/src/generators/test-visual-diff/templates/_README.md
deleted file mode 100644
index e106678..0000000
--- a/src/generators/test-visual-diff/templates/_README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-
-### Visual Diff Testing
-
-This repo uses the [@brightspace-ui/visual-diff utility](https://github.com/BrightspaceUI/visual-diff/) to compare current snapshots against a set of golden snapshots stored in source control.
-
-The golden snapshots in source control must be updated by the [visual-diff GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/visual-diff).  If a pull request results in visual differences, a draft pull request with the new goldens will automatically be opened against its branch.
-
-To run the tests locally to help troubleshoot or develop new tests, first install these dependencies:
-
-```shell
-npm install @brightspace-ui/visual-diff@X  --no-save
-```
-
-Replace `X` with [the current version](https://github.com/BrightspaceUI/actions/tree/main/visual-diff#current-dependency-versions) the action is using.
-
-Then run the tests:
-
-```shell
-# run visual-diff tests
-npx mocha './test/**/*.visual-diff.js' -t 10000
-# subset of visual-diff tests:
-npx mocha './test/**/*.visual-diff.js' -t 10000 -g some-pattern
-# update visual-diff goldens
-npx mocha './test/**/*.visual-diff.js' -t 10000 --golden
-```
diff --git a/src/generators/test-visual-diff/templates/_element.visual-diff.html b/src/generators/test-visual-diff/templates/_element.visual-diff.html
deleted file mode 100644
index 57922fc..0000000
--- a/src/generators/test-visual-diff/templates/_element.visual-diff.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<script type="module">
-			import '@brightspace-ui/core/components/typography/typography.js';
-			import '../<%= hyphenatedName %>.js';
-		</script>
-		<title><%= tagName %> visual-diff tests</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-	</head>
-	<body class="d2l-typography">
-		<div>
-			<<%= tagName %> id="default"></<%= tagName %>>
-		</div>
-	</body>
-</html>
diff --git a/src/generators/test-visual-diff/templates/_element.visual-diff.js b/src/generators/test-visual-diff/templates/_element.visual-diff.js
deleted file mode 100644
index ae1f7d7..0000000
--- a/src/generators/test-visual-diff/templates/_element.visual-diff.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import puppeteer from 'puppeteer';
-import { VisualDiff } from '@brightspace-ui/visual-diff';
-
-describe('<%= tagName %>', () => {
-
-	const visualDiff = new VisualDiff('<%= hyphenatedName %>', import.meta.url);
-
-	let browser, page;
-
-	before(async() => {
-		browser = await puppeteer.launch();
-		page = await visualDiff.createPage(browser);
-		await page.goto(`${visualDiff.getBaseUrl()}/test/<%= hyphenatedName %>.visual-diff.html`, { waitUntil: ['networkidle0', 'load'] });
-		await page.bringToFront();
-	});
-
-	beforeEach(async() => {
-		await visualDiff.resetFocus(page);
-	});
-
-	after(async() => await browser.close());
-
-	it('passes visual-diff comparison', async function() {
-		const rect = await visualDiff.getRect(page, '#default');
-		await visualDiff.screenshotAndCompare(page, this.test.fullTitle(), { clip: rect });
-	});
-
-});
diff --git a/src/generators/test-visual-diff/templates/_gitignore b/src/generators/test-visual-diff/templates/_gitignore
deleted file mode 100644
index 14b1c49..0000000
--- a/src/generators/test-visual-diff/templates/_gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-test/screenshots/current/
-test/screenshots/golden/
diff --git a/src/generators/test-visual-diff/templates/static/.github/workflows/visual-diff.yml b/src/generators/test-visual-diff/templates/static/.github/workflows/visual-diff.yml
deleted file mode 100644
index 05270ec..0000000
--- a/src/generators/test-visual-diff/templates/static/.github/workflows/visual-diff.yml
+++ /dev/null
@@ -1,21 +0,0 @@
-name: Visual Diff
-on: pull_request
-jobs:
-  build:
-    name: Visual Diff
-    timeout-minutes: 10
-    runs-on: ubuntu-latest
-    steps:
-      - uses: Brightspace/third-party-actions@actions/checkout
-      - uses: Brightspace/third-party-actions@actions/setup-node
-        with:
-          node-version-file: .nvmrc
-      - name: Install Dependencies
-        run: npm install
-      - name: Visual Diff Tests
-        uses: BrightspaceUI/actions/visual-diff@main
-        with:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_SESSION_TOKEN: ${{ secrets.AWS_SESSION_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From a6e4b737ec7e2fd8672984a322383d20d3d67ebc Mon Sep 17 00:00:00 2001
From: Dave Lockhart <dlockhart@users.noreply.github.com>
Date: Thu, 12 Oct 2023 16:33:59 -0400
Subject: [PATCH 2/2] Use runConstructor from testing

---
 src/generators/test-unit/templates/configured/_element.test.js | 3 +--
 src/generators/test-unit/templates/configured/_package.json    | 3 ---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/generators/test-unit/templates/configured/_element.test.js b/src/generators/test-unit/templates/configured/_element.test.js
index 30c8cc4..802996a 100644
--- a/src/generators/test-unit/templates/configured/_element.test.js
+++ b/src/generators/test-unit/templates/configured/_element.test.js
@@ -1,6 +1,5 @@
 import '../<%= hyphenatedName %>.js';
-import { expect, fixture, html } from '@brightspace-ui/testing';
-import { runConstructor } from '@brightspace-ui/core/tools/constructor-test-helper.js';
+import { expect, fixture, html, runConstructor } from '@brightspace-ui/testing';
 
 describe('<%= className %>', () => {
 
diff --git a/src/generators/test-unit/templates/configured/_package.json b/src/generators/test-unit/templates/configured/_package.json
index 3fcc49a..c70cd58 100644
--- a/src/generators/test-unit/templates/configured/_package.json
+++ b/src/generators/test-unit/templates/configured/_package.json
@@ -3,9 +3,6 @@
     "test": "npm run lint && npm run test:unit",
     "test:unit": "d2l-test-runner"
   },
-  "dependencies": {
-    "@brightspace-ui/core": "^2"
-  },
   "devDependencies": {
     "@brightspace-ui/testing": "^1"
   }