feat: switch to d2l-test-runner and new vdiffs

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);

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
 ```

src/generators/test-unit/templates/configured/_element.test.js

@@ -1,6 +1,5 @@
 import '../<%= hyphenatedName %>.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import { runConstructor } from '@brightspace-ui/core/tools/constructor-test-helper.js';
+import { expect, fixture, html, runConstructor } from '@brightspace-ui/testing';
 
 describe('<%= className %>', () => {
 

src/generators/test-unit/templates/configured/_package.json

@@ -1,14 +1,9 @@
 {
   "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"
-  },
-  "dependencies": {
-    "@brightspace-ui/core": "^2"
+    "test": "npm run lint && npm run test:unit",
+    "test:unit": "d2l-test-runner"
   },
   "devDependencies": {
-    "@open-wc/testing": "^3",
-    "@web/test-runner": "^0.17"
+    "@brightspace-ui/testing": "^1"
   }
 }

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

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));
+}

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
+```

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();
+	});
+
+});

src/generators/test-vdiff/templates/_gitignore

@@ -0,0 +1 @@
+.vdiff/

src/generators/test-vdiff/templates/configured/_package.json

@@ -0,0 +1,5 @@
+{
+  "scripts": {
+    "test:vdiff": "d2l-test-runner vdiff"
+  }
+}

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 }}