From 98e36aa036e33f798ad3ff51b2f1fdb8a925b4b3 Mon Sep 17 00:00:00 2001
From: Stef Schenkelaars <stef.schenkelaars@gmail.com>
Date: Thu, 2 Dec 2021 13:25:31 +0100
Subject: [PATCH] test: add test helper for accessibility

As proposed in #22343, the components can be automatically validated
for accessibility. This adds a test helper that runs Axe to check
for accessibility violations.
---
 components/affix/__tests__/Affix.test.tsx |  2 ++
 components/alert/__tests__/index.test.tsx |  2 ++
 package.json                              |  2 ++
 tests/setupAfterEnv.ts                    |  2 ++
 tests/shared/accessibilityTest.tsx        | 15 +++++++++++++++
 typings/jest.d.ts                         |  1 +
 6 files changed, 24 insertions(+)
 create mode 100644 tests/shared/accessibilityTest.tsx

diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx
index 1bf228375705..e67833cbbb8d 100644
--- a/components/affix/__tests__/Affix.test.tsx
+++ b/components/affix/__tests__/Affix.test.tsx
@@ -4,6 +4,7 @@ import Affix, { AffixProps, AffixState } from '..';
 import { getObserverEntities } from '../utils';
 import Button from '../../button';
 import rtlTest from '../../../tests/shared/rtlTest';
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import { sleep } from '../../../tests/utils';
 
 const events: Partial<Record<keyof HTMLElementEventMap, (ev: Partial<Event>) => void>> = {};
@@ -53,6 +54,7 @@ class AffixMounter extends React.Component<{
 
 describe('Affix Render', () => {
   rtlTest(Affix);
+  accessibilityTest(Affix);
 
   const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
   let affixMounterWrapper: ReactWrapper<unknown, unknown, AffixMounter>;
diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
index 038985c21a3f..e27eeb2c5c35 100644
--- a/components/alert/__tests__/index.test.tsx
+++ b/components/alert/__tests__/index.test.tsx
@@ -5,12 +5,14 @@ import Button from '../../button';
 import Tooltip from '../../tooltip';
 import Popconfirm from '../../popconfirm';
 import rtlTest from '../../../tests/shared/rtlTest';
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import { sleep } from '../../../tests/utils';
 
 const { ErrorBoundary } = Alert;
 
 describe('Alert', () => {
   rtlTest(Alert);
+  accessibilityTest(Alert);
 
   beforeAll(() => {
     jest.useFakeTimers();
diff --git a/package.json b/package.json
index baefdaab13ab..5a95f00b1a59 100644
--- a/package.json
+++ b/package.json
@@ -166,6 +166,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/gtag.js": "^0.0.8",
     "@types/jest": "^27.0.0",
+    "@types/jest-axe": "^3.5.3",
     "@types/jest-environment-puppeteer": "^4.4.0",
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
@@ -225,6 +226,7 @@
     "intersection-observer": "^0.12.0",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^27.0.3",
+    "jest-axe": "^5.0.1",
     "jest-image-snapshot": "^4.5.1",
     "jest-puppeteer": "^6.0.0",
     "jquery": "^3.4.1",
diff --git a/tests/setupAfterEnv.ts b/tests/setupAfterEnv.ts
index f88f29fed296..797743d9c3b2 100644
--- a/tests/setupAfterEnv.ts
+++ b/tests/setupAfterEnv.ts
@@ -1,5 +1,7 @@
+import { toHaveNoViolations } from 'jest-axe';
 import toMatchRenderedSnapshot from './matchers/rendered-snapshot';
 
+expect.extend(toHaveNoViolations);
 expect.extend({
   toMatchRenderedSnapshot,
 });
diff --git a/tests/shared/accessibilityTest.tsx b/tests/shared/accessibilityTest.tsx
new file mode 100644
index 000000000000..87b49ff15c44
--- /dev/null
+++ b/tests/shared/accessibilityTest.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { axe } from 'jest-axe';
+
+// eslint-disable-next-line jest/no-export
+export default function accessibilityTest(Component: React.ComponentType) {
+  describe(`accessibility`, () => {
+    it(`component does not have any violations`, async () => {
+      jest.useRealTimers();
+      const wrapper = mount(<Component />);
+      const results = await axe(wrapper.getDOMNode());
+      expect(results).toHaveNoViolations();
+    });
+  });
+}
diff --git a/typings/jest.d.ts b/typings/jest.d.ts
index e2022de6bfea..3cf01d83df03 100644
--- a/typings/jest.d.ts
+++ b/typings/jest.d.ts
@@ -1,5 +1,6 @@
 declare namespace jest {
   interface Matchers<R> {
     toMatchRenderedSnapshot(): R;
+    toHaveNoViolations(): R;
   }
 }