test(components): add basic a11y tests

bpmn-io · Jan 20, 2022 · a2fc275 · a2fc275
1 parent 0bdd6a9
commit a2fc275
Show file tree

Hide file tree

Showing 14 changed files with 316 additions and 13 deletions.
diff --git a/test/spec/components/Checkbox.spec.js b/test/spec/components/Checkbox.spec.js
@@ -9,8 +9,9 @@ import {
 } from 'min-dom';
 
 import {
-  insertCoreStyles,
-  clickInput
+  clickInput,
+  expectNoViolations,
+  insertCoreStyles
 } from 'test/TestHelper';
 
 import {
@@ -206,6 +207,23 @@ describe('<Checkbox>', function() {
 
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const { container: node } = createCheckbox({
+        container,
+        label: 'foo'
+      });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
 
 

diff --git a/test/spec/components/Collapsible.spec.js b/test/spec/components/Collapsible.spec.js
@@ -11,7 +11,8 @@ import {
 } from 'min-dom';
 
 import {
-  insertCoreStyles,
+  expectNoViolations,
+  insertCoreStyles
 } from 'test/TestHelper';
 
 import Collapsible from 'src/components/entries/Collapsible';
@@ -142,6 +143,23 @@ describe('<Collapsible>', function() {
     expect(removeEntry).to.not.exist;
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const { container: node } = createCollapsible({
+        container: parentContainer,
+        label: 'foo'
+      });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
 
 

diff --git a/test/spec/components/DropdownButton.spec.js b/test/spec/components/DropdownButton.spec.js
@@ -2,6 +2,8 @@ import {
   render
 } from '@testing-library/preact/pure';
 
+import axe from 'axe-core';
+
 import TestContainer from 'mocha-test-container-support';
 
 import {
@@ -216,4 +218,29 @@ describe('<DropdownButton>', function() {
       expect(spy).to.have.been.calledOnce;
     });
   });
+
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const menuItems = [
+        { entry: 'Click me' }
+      ];
+
+      const { container: node } = render(
+        <DropdownButton menuItems={ menuItems }>Click</DropdownButton>, { container });
+
+      // when
+      const results = await axe.run(node, {
+        runOnly: [ 'best-practice', 'wcag2a', 'wcag2aa' ]
+      });
+
+      // then
+      expect(results.passes).to.be.not.empty;
+      expect(results.violations).to.be.empty;
+    });
+
+  });
 });
diff --git a/test/spec/components/Group.spec.js b/test/spec/components/Group.spec.js
@@ -11,6 +11,7 @@ import {
 } from 'min-dom';
 
 import {
+  expectNoViolations,
   insertCoreStyles
 } from 'test/TestHelper';
 
@@ -177,6 +178,23 @@ describe('<Group>', function() {
 
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const { container: node } = createGroup({
+        container,
+        label: 'foo'
+      });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
 
 

diff --git a/test/spec/components/Header.spec.js b/test/spec/components/Header.spec.js
@@ -9,6 +9,7 @@ import {
 } from 'min-dom';
 
 import {
+  expectNoViolations,
   insertCoreStyles
 } from 'test/TestHelper';
 
@@ -141,4 +142,24 @@ describe('<Header>', function() {
     expect(iconNode).to.exist;
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const provider = {
+        getElementLabel: () => 'name',
+        getTypeLabel: () => 'type',
+        getElementIcon: () => 'icon'
+      };
+
+      const { container: node } = render(<Header headerProvider={ provider } />, { container });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
diff --git a/test/spec/components/HeaderButton.spec.js b/test/spec/components/HeaderButton.spec.js
@@ -9,6 +9,7 @@ import {
 } from 'min-dom';
 
 import {
+  expectNoViolations,
   insertCoreStyles
 } from 'test/TestHelper';
 
@@ -36,4 +37,19 @@ describe('<HeaderButton>', function() {
     // then
     expect(headerButtonNode).to.exist;
   });
+
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const { container: node } = render(<HeaderButton>foo</HeaderButton>, { container });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
diff --git a/test/spec/components/List.spec.js b/test/spec/components/List.spec.js
@@ -14,6 +14,7 @@ import {
 } from 'min-dom';
 
 import {
+  expectNoViolations,
   insertCoreStyles
 } from 'test/TestHelper';
 
@@ -26,6 +27,8 @@ const noopElement = {
   type: 'foo'
 };
 
+const noop = () => {};
+
 
 describe('<List>', function() {
 
@@ -937,6 +940,40 @@ describe('<List>', function() {
 
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const items = [
+        {
+          id: 'item-1',
+          label: 'Item 1'
+        },
+        {
+          id: 'item-2',
+          label: 'Item 2'
+        },
+        {
+          id: 'item-3',
+          label: 'Item 3'
+        }
+      ];
+
+      const { container: node } = createListEntry({
+        container: parentContainer,
+        items,
+        onAdd: noop,
+        onRemove: noop
+      });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
 
 

diff --git a/test/spec/components/ListGroup.spec.js b/test/spec/components/ListGroup.spec.js
@@ -14,6 +14,7 @@ import {
 } from 'min-dom';
 
 import {
+  expectNoViolations,
   insertCoreStyles
 } from 'test/TestHelper';
 
@@ -26,6 +27,8 @@ const noopElement = {
   type: 'foo'
 };
 
+const noop = () => {};
+
 
 describe('<ListGroup>', function() {
 
@@ -1036,6 +1039,44 @@ describe('<ListGroup>', function() {
 
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const items = [
+        {
+          id: 'item-1',
+          label: 'Item 1',
+          remove: noop
+        },
+        {
+          id: 'item-2',
+          label: 'Item 2',
+          remove: noop
+        },
+        {
+          id: 'item-3',
+          label: 'Item 3',
+          remove: noop
+        }
+      ];
+
+      const add = noop;
+
+      const { container: node } = createListGroup({
+        container: parentContainer,
+        items,
+        add
+      });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
 
 

diff --git a/test/spec/components/ListItem.spec.js b/test/spec/components/ListItem.spec.js
@@ -10,6 +10,7 @@ import {
 } from 'min-dom';
 
 import {
+  expectNoViolations,
   insertCoreStyles,
 } from 'test/TestHelper';
 
@@ -119,6 +120,22 @@ describe('<ListItem>', function() {
 
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const { container: node } = createListItem({
+        container: parentContainer
+      });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });
 
 

diff --git a/test/spec/components/NumberField.spec.js b/test/spec/components/NumberField.spec.js
@@ -9,8 +9,9 @@ import {
 } from 'min-dom';
 
 import {
-  insertCoreStyles,
-  changeInput
+  changeInput,
+  expectNoViolations,
+  insertCoreStyles
 } from 'test/TestHelper';
 
 import NumberField, { isEdited } from 'src/components/entries/NumberField';
@@ -290,6 +291,23 @@ describe('<NumberField>', function() {
 
   });
 
+
+  describe('a11y', function() {
+
+    it('should have no violations', async function() {
+
+      // given
+      const { container: node } = createNumberField({
+        container,
+        label: 'foo'
+      });
+
+      // then
+      await expectNoViolations(node);
+    });
+
+  });
+
 });