Merge pull request #92 from umbraco/bugfix/web-test-runner-registration

Bugfix/web test runner registration

src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml

@@ -33,3 +33,18 @@ jobs:
     - run: npm run build
     - run: sudo npx playwright install-deps
     - run: npm test
+    # Uncommented since the github-actions-report-lcov also generates a html report
+    # - name: Upload Code Coverage reports
+    #   uses: actions/upload-artifact@v2
+    #   if: always()
+    #   with:
+    #     name: code-coverage
+    #     path: coverage/
+    #     retention-days: 30
+    - name: Report code coverage
+      uses: zgosalvez/github-actions-report-lcov@v1
+      with:
+        coverage-files: coverage/lcov.info
+        artifact-name: code-coverage-report
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        working-directory: ./

src/Umbraco.Web.UI.Client/src/auth/login/login.element.ts

@@ -79,7 +79,7 @@ export default class UmbLogin extends LitElement {
 					<uui-form>
 						<form id="LoginForm" name="login" @submit="${this._handleSubmit}">
 							<uui-form-layout-item>
-								<uui-label for="email" slot="label" required>Email</uui-label>
+								<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
 								<uui-input
 									type="email"
 									id="email"
@@ -90,7 +90,7 @@ export default class UmbLogin extends LitElement {
 							</uui-form-layout-item>
 
 							<uui-form-layout-item>
-								<uui-label for="password" slot="label" required>Password</uui-label>
+								<uui-label id="passwordLabel" for="password" slot="label" required>Password</uui-label>
 								<uui-input-password
 									id="password"
 									name="password"

src/Umbraco.Web.UI.Client/src/auth/login/login.test.ts

@@ -0,0 +1,20 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { defaultA11yConfig } from '../../core/helpers/chai';
+import UmbLogin from './login.element';
+
+describe('UmbLogin', () => {
+	let element: UmbLogin;
+
+	beforeEach(async () => {
+		element = await fixture(html`<umb-login></umb-login>`);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbLogin);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).to.be.accessible(defaultA11yConfig);
+	});
+});

src/Umbraco.Web.UI.Client/src/core/context/context-provider.element.test.ts

@@ -0,0 +1,40 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { UmbContextConsumerMixin } from './context-consumer.mixin';
+import { UmbContextProviderElement } from './context-provider.element';
+
+@customElement('umb-context-test')
+export class ContextTestElement extends UmbContextConsumerMixin(LitElement) {
+	public value: string | null = null;
+	constructor() {
+		super();
+		this.consumeContext('test-context', (value) => {
+			this.value = value;
+		});
+	}
+}
+
+describe('UmbContextProvider', () => {
+	let element: UmbContextProviderElement;
+	let consumer: ContextTestElement;
+	const contextValue = 'test-value';
+
+	beforeEach(async () => {
+		element = await fixture(
+			html` <umb-context-provider key="test-context" .value=${contextValue}>
+				<umb-context-test></umb-context-test>
+			</umb-context-provider>`
+		);
+		consumer = element.getElementsByTagName('umb-context-test')[0] as ContextTestElement;
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbContextProviderElement);
+	});
+
+	it('provides the context', () => {
+		expect(consumer.value).to.equal(contextValue);
+	});
+});

src/Umbraco.Web.UI.Client/src/core/context/context-provider.element.ts

@@ -10,7 +10,7 @@ export class UmbContextProviderElement extends UmbContextProviderMixin(LitElemen
 	 * @required
 	 */
 	@property({ type: Object })
-	value!: unknown;
+	value: unknown;
 
 	/**
 	 * The key to provide to the context.

src/Umbraco.Web.UI.Client/src/core/helpers/chai.ts

@@ -0,0 +1,3 @@
+export const defaultA11yConfig = {
+	ignoredRules: ['color-contrast'],
+};

src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.test.ts

@@ -1,8 +1,10 @@
 import { assert, expect } from '@open-wc/testing';
 import { validate as uuidValidate } from 'uuid';
+
 import { UmbNotificationHandler } from './notification-handler';
+
 import type { UmbNotificationDefaultData } from './layouts/default';
-import type { UmbNotificationOptions } from './';
+import type { UmbNotificationOptions } from '.';
 
 describe('UCPNotificationHandler', () => {
 	let notificationHandler: UmbNotificationHandler;

src/Umbraco.Web.UI.Client/src/core/services/notification/notifications.service.test.ts

@@ -1,5 +1,6 @@
 import { expect } from '@open-wc/testing';
-import { UmbNotificationService, UmbNotificationHandler } from './';
+
+import { UmbNotificationHandler, UmbNotificationService } from '.';
 
 describe('UCPNotificationService', () => {
 	let notificationService: UmbNotificationService;

src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts

@@ -1,6 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { Subscription } from 'rxjs';
+
 import { UmbContextConsumerMixin } from '../core/context';
 import { UmbInstallerContext } from './installer-context';
 
@@ -111,7 +112,7 @@ export class UmbInstallerUser extends UmbContextConsumerMixin(LitElement) {
 			<uui-form>
 				<form id="LoginForm" name="login" @submit="${this._handleSubmit}">
 					<uui-form-layout-item>
-						<uui-label for="name" slot="label" required>Name</uui-label>
+						<uui-label id="nameLabel" for="name" slot="label" required>Name</uui-label>
 						<uui-input
 							type="text"
 							id="name"
@@ -123,7 +124,7 @@ export class UmbInstallerUser extends UmbContextConsumerMixin(LitElement) {
 					</uui-form-layout-item>
 
 					<uui-form-layout-item>
-						<uui-label for="email" slot="label" required>Email</uui-label>
+						<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
 						<uui-input
 							type="email"
 							id="email"
@@ -135,7 +136,7 @@ export class UmbInstallerUser extends UmbContextConsumerMixin(LitElement) {
 					</uui-form-layout-item>
 
 					<uui-form-layout-item>
-						<uui-label for="password" slot="label" required>Password</uui-label>
+						<uui-label id="passwordLabel" for="password" slot="label" required>Password</uui-label>
 						<uui-input-password
 							id="password"
 							name="password"

src/Umbraco.Web.UI.Client/src/installer/installer.test.ts

@@ -1,4 +1,8 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import '.';
+
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { defaultA11yConfig } from '../core/helpers/chai';
 import { UmbInstallerConsent } from './installer-consent.element';
 import { UmbInstallerDatabase } from './installer-database.element';
 import { UmbInstallerInstalling } from './installer-installing.element';
@@ -13,12 +17,12 @@ describe('UmbInstaller', () => {
 		element = await fixture(html`<umb-installer></umb-installer>`);
 	});
 
-	it('is defined with its own instance', async () => {
+	it('is defined with its own instance', () => {
 		expect(element).to.be.instanceOf(UmbInstaller);
 	});
 
 	it('passes the a11y audit', async () => {
-		expect(element).shadowDom.to.be.accessible();
+		await expect(element).to.be.accessible(defaultA11yConfig);
 	});
 });
 
@@ -29,12 +33,12 @@ describe('UmbInstallerLayout', () => {
 		element = await fixture(html`<umb-installer-layout></umb-installer-layout>`);
 	});
 
-	it('is defined with its own instance', async () => {
+	it('is defined with its own instance', () => {
 		expect(element).to.be.instanceOf(UmbInstallerLayout);
 	});
 
 	it('passes the a11y audit', async () => {
-		expect(element).shadowDom.to.be.accessible();
+		await expect(element).to.be.accessible(defaultA11yConfig);
 	});
 });
 
@@ -45,12 +49,12 @@ describe('UmbInstallerUser', () => {
 		element = await fixture(html`<umb-installer-user></umb-installer-user>`);
 	});
 
-	it('is defined with its own instance', async () => {
+	it('is defined with its own instance', () => {
 		expect(element).to.be.instanceOf(UmbInstallerUser);
 	});
 
 	it('passes the a11y audit', async () => {
-		expect(element).shadowDom.to.be.accessible();
+		await expect(element).to.be.accessible(defaultA11yConfig);
 	});
 });
 
@@ -61,12 +65,12 @@ describe('UmbInstallerConsent', () => {
 		element = await fixture(html`<umb-installer-consent></umb-installer-consent>`);
 	});
 
-	it('is defined with its own instance', async () => {
+	it('is defined with its own instance', () => {
 		expect(element).to.be.instanceOf(UmbInstallerConsent);
 	});
 
 	it('passes the a11y audit', async () => {
-		expect(element).shadowDom.to.be.accessible();
+		await expect(element).to.be.accessible(defaultA11yConfig);
 	});
 });
 
@@ -77,12 +81,12 @@ describe('UmbInstallerDatabase', () => {
 		element = await fixture(html`<umb-installer-database></umb-installer-database>`);
 	});
 
-	it('is defined with its own instance', async () => {
+	it('is defined with its own instance', () => {
 		expect(element).to.be.instanceOf(UmbInstallerDatabase);
 	});
 
 	it('passes the a11y audit', async () => {
-		expect(element).shadowDom.to.be.accessible();
+		await expect(element).to.be.accessible(defaultA11yConfig);
 	});
 });
 
@@ -93,11 +97,11 @@ describe('UmbInstallerInstalling', () => {
 		element = await fixture(html`<umb-installer-installing></umb-installer-installing>`);
 	});
 
-	it('is defined with its own instance', async () => {
+	it('is defined with its own instance', () => {
 		expect(element).to.be.instanceOf(UmbInstallerInstalling);
 	});
 
 	it('passes the a11y audit', async () => {
-		expect(element).shadowDom.to.be.accessible();
+		await expect(element).to.be.accessible(defaultA11yConfig);
 	});
 });

src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.test.ts

@@ -0,0 +1,20 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { defaultA11yConfig } from '../core/helpers/chai';
+import { UmbUpgraderView } from './upgrader-view.element';
+
+describe('UmbUpgraderView', () => {
+	let element: UmbUpgraderView;
+
+	beforeEach(async () => {
+		element = await fixture(html`<umb-upgrader-view></umb-upgrader-view>`);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbUpgraderView);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).to.be.accessible(defaultA11yConfig);
+	});
+});

src/Umbraco.Web.UI.Client/src/upgrader/upgrader.test.ts

@@ -12,8 +12,4 @@ describe('UmbUpgrader', () => {
 	it('is defined with its own instance', () => {
 		expect(element).to.be.instanceOf(UmbUpgrader);
 	});
-
-	it('passes the a11y audit', () => {
-		expect(element).shadowDom.to.be.accessible();
-	});
 });

src/Umbraco.Web.UI.Client/web-test-runner.config.mjs

@@ -10,12 +10,17 @@ export default {
     playwrightLauncher({ product: 'firefox' }),
     playwrightLauncher({ product: 'webkit' }),
   ],
+	coverageConfig: {
+		reporters: ['lcovonly', 'text-summary'],
+	},
   testRunnerHtml: (testFramework) =>
     `<html>
       <body>
         <script type="module" src="${testFramework}"></script>
-                <script type="module">
-          import 'element-internals-polyfill';
+        <script type="module">
+					import 'element-internals-polyfill';
+					import '@umbraco-ui/uui';
+					import 'router-slot';
         </script>
       </body>
     </html>`,