Jest axe a11y testing

package.json

@@ -571,6 +571,7 @@
     "@types/inquirer": "^7.3.1",
     "@types/intl-relativeformat": "^2.1.0",
     "@types/jest": "^26.0.22",
+    "@types/jest-axe": "^3.5.3",
     "@types/jest-specific-snapshot": "^0.5.5",
     "@types/joi": "^17.2.3",
     "@types/jquery": "^3.3.31",
@@ -821,6 +822,7 @@
     "is-glob": "^4.0.1",
     "is-path-inside": "^3.0.2",
     "jest": "^26.6.3",
+    "jest-axe": "^5.0.0",
     "jest-canvas-mock": "^2.3.1",
     "jest-circus": "^26.6.3",
     "jest-cli": "^26.6.3",

packages/kbn-test-jest-helpers/BUILD.bazel

@@ -34,6 +34,7 @@ NPM_MODULE_EXTRA_FILES = [
 RUNTIME_DEPS = [
     "//packages/kbn-dev-utils",
     "//packages/kbn-i18n-react",
+    "//packages/kbn-test",
     "//packages/kbn-std",
     "//packages/kbn-utils",
     "@npm//@elastic/elasticsearch",
@@ -51,6 +52,7 @@ RUNTIME_DEPS = [
     "@npm//he",
     "@npm//history",
     "@npm//jest",
+    "@npm//jest-axe",
     "@npm//jest-cli",
     "@npm//jest-snapshot",
     "@npm//jest-styled-components",
@@ -76,9 +78,11 @@ TYPES_DEPS = [
   "//packages/kbn-dev-utils:npm_module_types",
   "//packages/kbn-i18n-react:npm_module_types",
   "//packages/kbn-std:npm_module_types",
+  "//packages/kbn-test:npm_module_types",
   "//packages/kbn-utils:npm_module_types",
   "@npm//@elastic/elasticsearch",
   "@npm//axios",
+  "@npm//axe-core",
   "@npm//elastic-apm-node",
   "@npm//del",
   "@npm//exit-hook",
@@ -96,6 +100,7 @@ TYPES_DEPS = [
   "@npm//@types/he",
   "@npm//@types/history",
   "@npm//@types/jest",
+  "@npm//@types/jest-axe",
   "@npm//@types/joi",
   "@npm//@types/lodash",
   "@npm//@types/mustache",

packages/kbn-test-jest-helpers/src/axe_helpers.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { configureAxe } from 'jest-axe';
+import { Result } from 'axe-core';
+import { AXE_OPTIONS, AXE_CONFIG } from '@kbn/test';
+import { ReactWrapper } from './testbed/types';
+
+const axeRunner = configureAxe({ globalOptions: { ...AXE_CONFIG } });
+
+/**
+ * Function to test if a component doesn't have a11y violations from axe automated testing
+ * @param component
+ */
+export const expectToBeAccessible = async (component: ReactWrapper): Promise<void> => {
+  const violations = await getA11yViolations(component);
+  expect(violations).toHaveLength(0);
+};
+
+/**
+ * Returns a11y violations as found by axe testing
+ * @param component
+ */
+export const getA11yViolations = async (component: ReactWrapper): Promise<Result[]> => {
+  const axeResults = await axeRunner(component.html(), {
+    ...AXE_OPTIONS,
+    resultTypes: ['violations'],
+  });
+  return axeResults.violations;
+};

packages/kbn-test-jest-helpers/src/index.ts

@@ -24,6 +24,8 @@ export * from './stub_web_worker';
 
 export * from './testbed';
 
+export * from './axe_helpers';
+
 export const nextTick = () => new Promise((res) => process.nextTick(res));
 
 export const delay = (time = 0) => new Promise((resolve) => setTimeout(resolve, time));

packages/kbn-test-jest-helpers/src/testbed/types.ts

@@ -30,7 +30,7 @@ export interface EuiTableMetaData {
 }
 
 export interface TestBed<T = string> {
-  /** The comonent under test */
+  /** The component under test */
   component: ReactWrapper;
   /**
    * Pass it a `data-test-subj` and it will return true if it exists or false if it does not exist.

packages/kbn-test/BUILD.bazel

@@ -86,6 +86,7 @@ TYPES_DEPS = [
   "@npm//@elastic/elasticsearch",
   "@npm//@jest/console",
   "@npm//@jest/reporters",
+  "@npm//axe-core",
   "@npm//axios",
   "@npm//elastic-apm-node",
   "@npm//del",

packages/kbn-test/src/index.ts

@@ -69,3 +69,5 @@ export { runJest } from './jest/run';
 export * from './kbn_archiver_cli';
 
 export * from './kbn_client';
+
+export { AXE_CONFIG, AXE_OPTIONS } from './a11y/config';

test/accessibility/services/a11y/a11y.ts

@@ -8,9 +8,9 @@
 
 import chalk from 'chalk';
 import testSubjectToCss from '@kbn/test-subj-selector';
+import { AXE_CONFIG, AXE_OPTIONS } from '@kbn/test';
 
 import { FtrService } from '../../ftr_provider_context';
-import { AXE_CONFIG, AXE_OPTIONS } from './constants';
 import { AxeReport, printResult } from './axe_report';
 // @ts-ignore JS that is run in browser as is
 import { analyzeWithAxe, analyzeWithAxeWithClient } from './analyze_with_axe';

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -7,10 +7,7 @@
 import 'cypress-real-events/support';
 import { Interception } from 'cypress/types/net-stubbing';
 import 'cypress-axe';
-import {
-  AXE_CONFIG,
-  AXE_OPTIONS,
-} from 'test/accessibility/services/a11y/constants';
+import { AXE_CONFIG, AXE_OPTIONS } from '@kbn/test';
 
 Cypress.Commands.add('loginAsReadOnlyUser', () => {
   cy.loginAs({ username: 'apm_read_user', password: 'changeme' });

x-pack/plugins/enterprise_search/public/applications/shared/cypress/commands.ts

@@ -38,9 +38,11 @@ export const login = ({
  * Cypress setup/helpers
  */
 
+// eslint complains this should be in `dependencies` and not `devDependencies`, but these tests should only run on dev
 // eslint-disable-next-line import/no-extraneous-dependencies
-import 'cypress-axe'; // eslint complains this should be in `dependencies` and not `devDependencies`, but these tests should only run on dev
-import { AXE_CONFIG, AXE_OPTIONS } from 'test/accessibility/services/a11y/constants';
+import 'cypress-axe';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { AXE_CONFIG, AXE_OPTIONS } from '@kbn/test';
 
 const axeConfig = {
   ...AXE_CONFIG,

x-pack/plugins/index_management/__jest__/a11y/indices_tab.a11y.test.ts

@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act } from 'react-dom/test-utils';
+// import { expectToBeAccessible } from '@kbn/test-jest-helpers';
+import { getA11yViolations } from '@kbn/test-jest-helpers';
+import { IndicesTestBed, setup } from '../client_integration/home/indices_tab.helpers';
+import {
+  indexMappings,
+  indexSettings,
+  indexStats,
+  setupEnvironment,
+} from '../client_integration/helpers';
+import {
+  createDataStreamBackingIndex,
+  createNonDataStreamIndex,
+} from '../client_integration/home/data_streams_tab.helpers';
+
+describe('A11y Indices tab', () => {
+  let testBed: IndicesTestBed;
+  let httpSetup: ReturnType<typeof setupEnvironment>['httpSetup'];
+  let httpRequestsMockHelpers: ReturnType<typeof setupEnvironment>['httpRequestsMockHelpers'];
+
+  beforeEach(() => {
+    const mockEnvironment = setupEnvironment();
+    httpRequestsMockHelpers = mockEnvironment.httpRequestsMockHelpers;
+    httpSetup = mockEnvironment.httpSetup;
+  });
+
+  it('when there are no indices', async () => {
+    httpRequestsMockHelpers.setLoadIndicesResponse([]);
+    await act(async () => {
+      testBed = await setup(httpSetup);
+    });
+    const { component } = testBed;
+    component.update();
+    // this is expected to fail and needs to be updated when EUI 52.0.0 is available in Kibana
+    // await expectToBeAccessible(component);
+    // until then check that only 1 expected violation is found
+    const violations = await getA11yViolations(component);
+    expect(violations).toHaveLength(1);
+    const { id } = violations[0];
+    expect(id).toEqual('aria-allowed-attr');
+  });
+
+  it('when there are indices', async () => {
+    httpRequestsMockHelpers.setLoadIndicesResponse([
+      createNonDataStreamIndex('non-data-stream-test-index'),
+      createDataStreamBackingIndex('data-stream-test-index', 'test-data-stream'),
+    ]);
+    await act(async () => {
+      testBed = await setup(httpSetup);
+    });
+    const { component } = testBed;
+    component.update();
+    // this is expected to fail and needs to be updated when EUI 52.0.0 is available in Kibana
+    // await expectToBeAccessible(component);
+    // until then check that only 1 expected violation is found
+    const violations = await getA11yViolations(component);
+    expect(violations).toHaveLength(1);
+    const { id } = violations[0];
+    expect(id).toEqual('aria-allowed-attr');
+  });
+
+  describe('index details flyout', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadIndicesResponse([
+        createNonDataStreamIndex('non-data-stream-test-index'),
+      ]);
+      httpRequestsMockHelpers.setLoadIndexSettingsResponse(indexSettings);
+      httpRequestsMockHelpers.setLoadIndexMappingResponse(indexMappings);
+      httpRequestsMockHelpers.setLoadIndexStatsResponse(indexStats);
+      await act(async () => {
+        testBed = await setup(httpSetup);
+      });
+      const { component, find } = testBed;
+      component.update();
+      find('indexTableIndexNameLink').at(0).simulate('click');
+      component.update();
+    });
+
+    it('summary tab', async () => {
+      const { component, find } = testBed;
+      expect(find('detailPanelTabSelected').text()).toEqual('Summary');
+      // this is expected to fail and needs to be updated when EUI 52.0.0 is available in Kibana
+      // await expectToBeAccessible(component);
+      // until then check that only 1 expected violation is found
+      const violations = await getA11yViolations(component);
+      expect(violations).toHaveLength(1);
+      const { id } = violations[0];
+      expect(id).toEqual('aria-allowed-attr');
+    });
+    ['settings', 'mappings', 'stats'].forEach((tab) => {
+      it(`${tab} tab`, async () => {
+        const { component, find, actions } = testBed;
+        await actions.selectIndexDetailsTab(tab as 'settings');
+        expect(find('detailPanelTabSelected').text().toLowerCase()).toEqual(tab);
+        // this is expected to fail and needs to be updated when EUI 52.0.0 is available in Kibana
+        // await expectToBeAccessible(component);
+        // until then check that only 1 expected violation is found
+        const violations = await getA11yViolations(component);
+        expect(violations).toHaveLength(1);
+        const { id } = violations[0];
+        expect(id).toEqual('aria-allowed-attr');
+      });
+    });
+
+    it('edit settings tab', async () => {
+      const { component, find, actions } = testBed;
+      await actions.selectIndexDetailsTab('edit_settings');
+      expect(find('detailPanelTabSelected').text()).toEqual('Edit settings');
+      // this is expected to fail and needs to be updated when EUI 52.0.0 is available in Kibana
+      // await expectToBeAccessible(component);
+      // until then check that only 1 expected violation is found
+      const violations = await getA11yViolations(component);
+      expect(violations).toHaveLength(1);
+      const { id } = violations[0];
+      expect(id).toEqual('aria-allowed-attr');
+    });
+  });
+});

x-pack/plugins/index_management/__jest__/client_integration/helpers/fixtures.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const indexSettings = {
+  settings: { index: { number_of_shards: '1' } },
+  defaults: { index: { flush_after_merge: '512mb' } },
+};
+
+export const indexMappings = {
+  mappings: {
+    dynamic: 'strict',
+    properties: {
+      '@timestamp': {
+        type: 'date',
+      },
+    },
+  },
+};
+
+export const indexStats = {
+  _shards: {
+    total: 1,
+    successful: 1,
+    failed: 0,
+  },
+  stats: {
+    uuid: 'test-uuid',
+    health: 'green',
+    status: 'open',
+    primaries: {
+      docs: {
+        count: 0,
+        deleted: 0,
+      },
+    },
+    total: {
+      docs: {
+        count: 0,
+        deleted: 0,
+      },
+    },
+  },
+};

x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts

@@ -94,11 +94,14 @@ const registerHttpRequestMockHelpers = (
   const setCreateTemplateResponse = (response?: HttpResponse, error?: ResponseError) =>
     mockResponse('POST', `${API_BASE_PATH}/index_templates`, response, error);
 
-  const setUpdateTemplateResponse = (
-    templateId: string,
-    response?: HttpResponse,
-    error?: ResponseError
-  ) => mockResponse('PUT', `${API_BASE_PATH}/index_templates/${templateId}`, response, error);
+  const setLoadIndexSettingsResponse = (response?: HttpResponse, error?: ResponseError) =>
+    mockResponse('GET', `${API_BASE_PATH}/settings/:name`, response, error);
+
+  const setLoadIndexMappingResponse = (response?: HttpResponse, error?: ResponseError) =>
+    mockResponse('GET', `${API_BASE_PATH}/mapping/:name`, response, error);
+
+  const setLoadIndexStatsResponse = (response?: HttpResponse, error?: ResponseError) =>
+    mockResponse('GET', `${API_BASE_PATH}/stats/:name`, response, error);
 
   const setUpdateIndexSettingsResponse = (
     indexName: string,
@@ -128,7 +131,9 @@ const registerHttpRequestMockHelpers = (
     setDeleteTemplateResponse,
     setLoadTemplateResponse,
     setCreateTemplateResponse,
-    setUpdateTemplateResponse,
+    setLoadIndexSettingsResponse,
+    setLoadIndexMappingResponse,
+    setLoadIndexStatsResponse,
     setUpdateIndexSettingsResponse,
     setSimulateTemplateResponse,
     setLoadComponentTemplatesResponse,

x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts

@@ -18,3 +18,5 @@ export {
 } from './setup_environment';
 
 export type { TestSubjects } from './test_subjects';
+
+export * from './fixtures';

x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts

@@ -62,4 +62,5 @@ export type TestSubjects =
   | 'unfreezeIndexMenuButton'
   | 'updateEditIndexSettingsButton'
   | 'updateIndexSettingsErrorCallout'
-  | 'viewButton';
+  | 'viewButton'
+  | 'detailPanelTabSelected';