feat: add test reporting to component generation

README.md

@@ -23,12 +23,13 @@ npm init @brightspace-ui
 * Unit tests with cross-browser testing
 * Continuous Integration using GitHub Actions
 * Dependabot
-* Publish to NPM
+* [GitHub Release and publish to NPM*](#semantic-release)
 
 ### Optional
 
 * Localization
-* Visual diff testing*
+* [Visual diff testing*](#visual-diff-testing)
+* [Test reporting*](#test-reporting)
 
 \* Some additional setup required (see below)
 
@@ -44,6 +45,13 @@ In order for the release workflow to automatically update the version, the repo
 
 Learn more in the [action docs](https://github.com/BrightspaceUI/actions/blob/main/docs/release-token.md).
 
+### Test Reporting
+
+In order test reports to be submitted, the repo needs to be configured with `AWS_*` tokens with the correct permissions.
+
+Learn more in the [action docs](https://github.com/Brightspace/test-reporting-action?tab=readme-ov-file#set-up).
+
+
 ## Developing and Contributing
 
 TODO:

package.json

@@ -20,6 +20,7 @@
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "dependencies": {
+    "deepmerge": "^4",
     "prompts": "^2"
   },
   "devDependencies": {

src/create.js

@@ -8,8 +8,9 @@ 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 setupStaticSite } from './generators/static-site/index.js';
+import { run as setupTestReporting } from './generators/test-reporting/index.js';
 import { run as setupTestUnitAxe } from './generators/test-unit-axe/index.js';
-import { run as setupTestVdiff } from './generators/test-vdiff/index.js';
+import { run as setupTestVDiff } from './generators/test-vdiff/index.js';
 
 const generatorTypes = {
 	component: 'component',
@@ -78,7 +79,7 @@ async function getGeneratorType() {
 }
 
 async function getComponentOptions() {
-	const questions = [
+	let templateData = await prompts([
 		{
 			type: 'text',
 			name: 'hyphenatedName',
@@ -121,12 +122,45 @@ async function getComponentOptions() {
 				{ title: 'No', value: false }
 			]
 		},
-	];
-	return await prompts(questions, {
+		{
+			type: 'select',
+			name: 'testReporting',
+			message: 'Would you like test reporting set up?',
+			choices: [
+				{ title: 'Yes', value: true },
+				{ title: 'No', value: false }
+			]
+		}
+	], {
 		onCancel: () => {
 			process.exit();
 		},
 	});
+
+	if (templateData.testReporting) {
+		const testReportingTemplateData = await prompts([
+			{
+				type: 'text',
+				name: 'testReportingTool',
+				message: 'What is your components tool based on the taxonomy in https://expanse.desire2learn.com/pages/source/source.html'
+			}, {
+				type: 'text',
+				name: 'testReportingExperience',
+				message: 'What is your components experience based on the taxonomy in https://expanse.desire2learn.com/pages/source/source.html'
+			},
+		], {
+			onCancel: () => {
+				process.exit();
+			},
+		});
+
+		templateData = {
+			...templateData,
+			...testReportingTemplateData
+		};
+	}
+
+	return templateData;
 }
 
 async function executeComponentGenerator() {
@@ -148,12 +182,12 @@ async function executeComponentGenerator() {
 
 	setupDefaultContent(options);
 	setupElement(options);
+	if (options.testReporting) setupTestReporting(options);
 	setupTestUnitAxe(options);
-	if (options.vdiff) setupTestVdiff(options);
+	if (options.vdiff) setupTestVDiff(options);
 	setupDemo(options);
 	if (options.localization) setupLocalization(options);
 	setupRelease(options);
-
 }
 
 async function executeStaticSiteGenerator() {

src/generators/demo/index.js

@@ -1,4 +1,4 @@
-import { copyFile, getDestinationPath, mergeJSON, mergeText, replaceText } from '../../helper.js';
+import { copyFile, getDestinationPath, mergeJSON, mergeText, replaceText, sortJSONMembers } from '../../helper.js';
 
 export function run(templateData) {
 	mergeJSON(
@@ -15,4 +15,5 @@ export function run(templateData) {
 		`${getDestinationPath(templateData.hyphenatedName)}/demo/index.html`
 	);
 	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/demo/index.html`, templateData);
+	sortJSONMembers(`${getDestinationPath(templateData.hyphenatedName)}/package.json`, ['dependencies', 'devDependencies']);
 }

src/generators/test-reporting/index.js

@@ -0,0 +1,19 @@
+import { copyFile, getDestinationPath, mergeText, replaceText } from '../../helper.js';
+
+export function run(templateData) {
+	templateData = {
+		...templateData,
+		testReportingTool: templateData.testReportingTool?.trim() || 'Unknown',
+		testReportingExperience: templateData.testReportingExperience?.trim() || 'Unknown'
+	};
+
+	mergeText(
+		`${__dirname}/templates/configured/_gitignore`,
+		`${getDestinationPath(templateData.hyphenatedName)}/.gitignore`
+	);
+	copyFile(
+		`${__dirname}/templates/configured/_d2l-test-reporting.config.json`,
+		`${getDestinationPath(templateData.hyphenatedName)}/d2l-test-reporting.config.json`
+	);
+	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/d2l-test-reporting.config.json`, templateData);
+}

src/generators/test-reporting/templates/configured/_d2l-test-reporting.config.json

@@ -0,0 +1,4 @@
+{
+  "tool": "<%= testReportingTool %>",
+  "experience": "<%= testReportingExperience %>"
+}

src/generators/test-reporting/templates/configured/_gitignore

@@ -0,0 +1 @@
+d2l-test-report.json

src/generators/test-unit-axe/index.js

@@ -1,4 +1,4 @@
-import { copyFile, copyFilesInDir, getDestinationPath, mergeJSON, mergeText, replaceText } from '../../helper.js';
+import { copyFile, getDestinationPath, mergeJSON, mergeText, replaceText, sortJSONMembers } from '../../helper.js';
 
 export function run(templateData) {
 	mergeJSON(
@@ -17,6 +17,24 @@ export function run(templateData) {
 		`${__dirname}/templates/configured/_element.axe.js`,
 		`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.axe.js`
 	);
+
+	if (templateData.testReporting) {
+		mergeJSON(
+			`${__dirname}/templates/configured/_d2l-test-reporting.config.json`,
+			`${getDestinationPath(templateData.hyphenatedName)}/d2l-test-reporting.config.json`
+		);
+		copyFile(
+			`${__dirname}/templates/static/.github/workflows/ci-test-reporting.yml`,
+			`${getDestinationPath(templateData.hyphenatedName)}/.github/workflows/ci.yml`
+		);
+	} else {
+		copyFile(
+			`${__dirname}/templates/static/.github/workflows/ci.yml`,
+			`${getDestinationPath(templateData.hyphenatedName)}/.github/workflows/ci.yml`
+		);
+	}
+
 	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.test.js`, templateData);
-	copyFilesInDir(`${__dirname}/templates/static`, getDestinationPath(templateData.hyphenatedName));
+	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.axe.js`, templateData);
+	sortJSONMembers(`${getDestinationPath(templateData.hyphenatedName)}/package.json`, ['dependencies', 'devDependencies']);
 }

src/generators/test-unit-axe/templates/configured/_d2l-test-reporting.config.json

@@ -0,0 +1,12 @@
+{
+  "overrides": [
+    {
+      "pattern": "**/test/*.test.js",
+      "type": "UI Unit"
+    },
+    {
+      "pattern": "**/test/*.axe.js",
+      "type": "UI Accessibility"
+    }
+  ]
+}

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

@@ -1,7 +1,7 @@
 import '../<%= hyphenatedName %>.js';
 import { expect, fixture, html } from '@brightspace-ui/testing';
 
-describe('<%= className %>', () => {
+describe('<%= tagName %>', () => {
 
 	describe('accessibility', () => {
 		it('should pass all aXe tests', async() => {

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

@@ -1,7 +1,7 @@
 import '../<%= hyphenatedName %>.js';
 import { runConstructor } from '@brightspace-ui/testing';
 
-describe('<%= className %>', () => {
+describe('<%= tagName %>', () => {
 
 	describe('constructor', () => {
 		it('should construct', () => {

src/generators/test-unit-axe/templates/static/.github/workflows/ci-test-reporting.yml

@@ -0,0 +1,46 @@
+name: CI
+on: pull_request
+jobs:
+  test:
+    name: Test
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: Brightspace/third-party-actions@actions/checkout
+      - name: Setup node
+        uses: Brightspace/third-party-actions@actions/setup-node
+        with:
+          node-version-file: .nvmrc
+      - name: Install dependencies
+        run: npm install
+      - name: Lint (JavaScript)
+        run: npm run lint:eslint
+      - name: Lint (CSS)
+        run: npm run lint:style
+      - name: Accessibility tests
+        id: at
+        run: npm run test:axe
+      - name: Upload test report
+        if: >
+          always() &&
+          github.triggering_actor != 'dependabot[bot]' &&
+          (steps.at.outcome == 'failure' || steps.at.outcome == 'success')
+        uses: Brightspace/test-reporting-action@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 }}
+      - name: Unit tests
+        id: ut
+        run: npm run test:unit
+      - name: Upload test report
+        if: >
+          always() &&
+          github.triggering_actor != 'dependabot[bot]' &&
+          (steps.ut.outcome == 'failure' || steps.ut.outcome == 'success')
+        uses: Brightspace/test-reporting-action@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 }}

src/generators/test-vdiff/index.js

@@ -1,4 +1,4 @@
-import { copyFile, copyFilesInDir, getDestinationPath, mergeJSON, mergeText, replaceText } from '../../helper.js';
+import { copyFile, getDestinationPath, mergeJSON, mergeText, replaceText, sortJSONMembers } from '../../helper.js';
 
 export function run(templateData) {
 	mergeJSON(
@@ -20,5 +20,21 @@ export function run(templateData) {
 	);
 	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/test/${templateData.hyphenatedName}.vdiff.js`, templateData);
 
-	copyFilesInDir(`${__dirname}/templates/static`, getDestinationPath(templateData.hyphenatedName));
+	if (templateData.testReporting) {
+		mergeJSON(
+			`${__dirname}/templates/configured/_d2l-test-reporting.config.json`,
+			`${getDestinationPath(templateData.hyphenatedName)}/d2l-test-reporting.config.json`
+		);
+		copyFile(
+			`${__dirname}/templates/static/.github/workflows/vdiff-test-reporting.yml`,
+			`${getDestinationPath(templateData.hyphenatedName)}/.github/workflows/vdiff.yml`
+		);
+	} else {
+		copyFile(
+			`${__dirname}/templates/static/.github/workflows/vdiff.yml`,
+			`${getDestinationPath(templateData.hyphenatedName)}/.github/workflows/vdiff.yml`
+		);
+	}
+
+	sortJSONMembers(`${getDestinationPath(templateData.hyphenatedName)}/package.json`, ['dependencies', 'devDependencies']);
 }

src/generators/test-vdiff/templates/configured/_d2l-test-reporting.config.json

@@ -0,0 +1,8 @@
+{
+  "overrides": [
+    {
+      "pattern": "**/test/*.vdiff.js",
+      "type": "UI Visual Diff"
+    }
+  ]
+}

src/generators/test-vdiff/templates/static/.github/workflows/vdiff-test-reporting.yml

@@ -0,0 +1,27 @@
+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 }}
+      - name: Upload test report
+        if: failure() || success()
+        uses: Brightspace/test-reporting-action@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 }}

src/generators/wc-lit-element/index.js

@@ -1,4 +1,4 @@
-import { copyFile, copyFilesInDir, getDestinationPath, mergeJSON, replaceText } from '../../helper.js';
+import { copyFile, copyFilesInDir, getDestinationPath, mergeJSON, replaceText, sortJSONMembers } from '../../helper.js';
 
 export function run(templateData) {
 	mergeJSON(
@@ -20,4 +20,5 @@ export function run(templateData) {
 	replaceText(`${getDestinationPath(templateData.hyphenatedName)}/${templateData.hyphenatedName}.js`, templateDataElement);
 
 	copyFilesInDir(`${__dirname}/templates/static`, getDestinationPath(templateData.hyphenatedName));
+	sortJSONMembers(`${getDestinationPath(templateData.hyphenatedName)}/package.json`, ['dependencies', 'devDependencies']);
 }