Merge pull request #293 from umbraco/v1/feature/a11y-tests

iOvergaard · web-flow · commit b412ec2894b1 · 2022-08-10T13:50:56.000+02:00
V1/feature/a11y tests
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,9 +73,9 @@
     "@types/chai": "4.3.3",
     "@typescript-eslint/eslint-plugin": "5.32.0",
     "@typescript-eslint/parser": "5.30.7",
-    "@web/dev-server-esbuild": "0.3.1",
+    "@web/dev-server-esbuild": "0.3.2",
     "@web/test-runner": "0.14.0",
-    "@web/test-runner-playwright": "0.8.9",
+    "@web/test-runner-playwright": "0.8.10",
     "autoprefixer": "10.4.7",
     "babel-loader": "8.2.5",
     "chromatic": "6.7.1",
diff --git a/packages/uui-button/lib/uui-button.test.ts b/packages/uui-button/lib/uui-button.test.ts
@@ -1,12 +1,18 @@
+import '.';
+
 import {
-  html,
-  fixture,
+  elementUpdated,
   expect,
+  fixture,
+  html,
   oneEvent,
-  elementUpdated,
 } from '@open-wc/testing';
+import {
+  InterfaceColorValues,
+  InterfaceLookValues,
+} from '@umbraco-ui/uui-base/lib/types';
+
 import { UUIButtonElement } from './uui-button.element';
-import '.';
 
 describe('UuiButton', () => {
   let formElement: HTMLFormElement;
@@ -35,8 +41,23 @@ describe('UuiButton', () => {
   });
 
   it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible();
-  });
+    for (const color of InterfaceColorValues) {
+      for (const look of InterfaceLookValues) {
+        for (const disabled of [true, false]) {
+          element = await fixture(
+            html` <uui-button
+              label="Continue"
+              .disabled=${disabled}
+              .look=${look}
+              .color=${color}>
+              Continue
+            </uui-button>`
+          );
+          await expect(element).to.be.accessible();
+        }
+      }
+    }
+  }).timeout(30000);
 
   describe('properties', () => {
     it('has a label property', () => {
diff --git a/packages/uui-table/lib/uui-table.test.ts b/packages/uui-table/lib/uui-table.test.ts
@@ -1,8 +1,10 @@
-import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
-import { UUITableElement } from './uui-table.element';
-import { UUITableRowElement } from './uui-table-row.element';
+import '.';
+
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+
 import { UUITableCellElement } from './uui-table-cell.element';
-import './index';
+import { UUITableRowElement } from './uui-table-row.element';
+import { UUITableElement } from './uui-table.element';
 
 describe('UuiTable', () => {
   let table: UUITableElement;
@@ -28,7 +30,7 @@ describe('UuiTable', () => {
           <uui-table-row>
             <uui-table-cell>Hello 3</uui-table-cell>
             <uui-table-cell>Hello 3</uui-table-cell>
-            <uui-table-cell>Hello 3</uui-table-cell>
+            <uui-table-cell>Hello long text 3</uui-table-cell>
           </uui-table-row>
         </uui-table>
       `
@@ -48,7 +50,8 @@ describe('UuiTable', () => {
       ?.assignedElements()[2] as UUITableCellElement;
     cell.setAttribute('clip-text', 'true');
     await elementUpdated(cell);
-    expect(cell.title).to.equal('Hello 3');
+    expect(cell).to.have.attribute('title', 'Hello long text 3');
+    expect(cell.title).to.equal('Hello long text 3');
   });
 
   it('ROW: Adds selected attribute when clicked', async () => {
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
@@ -12,6 +12,9 @@ export default {
   ],
   testRunnerHtml: testFramework =>
     `<html>
+      <head>
+        <link rel="stylesheet" href="/packages/uui-css/dist/uui-css.css">
+      </head>
       <body>
         <script type="module" src="${testFramework}"></script>
         <script type="module">
