[Enterprise Search] Set up automated a11y tests (#106765) (#106886)

* Set up a11y test/config

* Add product card checks

* Add setup guide checks

* Add documentation

Co-authored-by: Constance <[email protected]>

x-pack/plugins/enterprise_search/README.md

@@ -67,3 +67,5 @@ sh jest.sh public/applications/shared/flash_messages/flash_messages_logic.test.t
 ### E2E tests
 
 See [our functional test runner README](../../test/functional_enterprise_search).
+
+Our automated accessibility tests can be found in [x-pack/test/accessibility/apps](../../test/accessibility/apps/enterprise_search.ts).

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx

@@ -80,6 +80,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({ product, image }) => {
           {config.host ? LAUNCH_BUTTON_TEXT : SETUP_BUTTON_TEXT}
         </EuiButtonTo>
       }
+      data-test-subj={`${product.ID}ProductCard`}
     />
   );
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/setup_guide/setup_guide_cta.tsx

@@ -17,7 +17,12 @@ import CtaImage from './assets/getting_started.png';
 import './setup_guide_cta.scss';
 
 export const SetupGuideCta: React.FC = () => (
-  <EuiPanelTo to="/setup_guide" paddingSize="l" className="enterpriseSearchSetupCta">
+  <EuiPanelTo
+    to="/setup_guide"
+    paddingSize="l"
+    className="enterpriseSearchSetupCta"
+    data-test-subj="setupGuideLink"
+  >
     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
       <EuiFlexItem className="enterpriseSearchSetupCta__text">
         <EuiTitle size="s">

x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.tsx

@@ -53,7 +53,7 @@ export const SetupGuideLayout: React.FC<Props> = ({
   const cloudDeploymentLink = cloud.deploymentUrl || '';
 
   return (
-    <EuiPage className="setupGuide">
+    <EuiPage className="setupGuide" data-test-subj="setupGuide">
       <EuiPageSideBar className="setupGuide__sidebar">
         <EuiText color="subdued" size="s">
           <strong>{SETUP_GUIDE_TITLE}</strong>

x-pack/test/accessibility/apps/enterprise_search.ts

@@ -0,0 +1,80 @@
+/*
+ * 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 { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const a11y = getService('a11y');
+  const esArchiver = getService('esArchiver');
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const { common } = getPageObjects(['common']);
+
+  describe('Enterprise Search', () => {
+    // NOTE: These accessibility tests currently only run against Enterprise Search in Kibana
+    // without a sidecar Enterprise Search service/host configured, and as such only test
+    // the basic setup guides and not the full application(s)
+    before(async () => {
+      await esArchiver.load('x-pack/test/functional/es_archives/empty_kibana');
+    });
+
+    describe('Overview', () => {
+      before(async () => {
+        await common.navigateToApp('enterprise_search/overview');
+      });
+
+      it('loads a landing page with product cards', async function () {
+        await retry.waitFor(
+          'AS product card visible',
+          async () => await testSubjects.exists('appSearchProductCard')
+        );
+        await retry.waitFor(
+          'WS product card visible',
+          async () => await testSubjects.exists('workplaceSearchProductCard')
+        );
+        await a11y.testAppSnapshot();
+      });
+
+      it('loads a setup guide', async function () {
+        await testSubjects.click('setupGuideLink');
+        await retry.waitFor(
+          'setup guide visible',
+          async () => await testSubjects.exists('setupGuide')
+        );
+        await a11y.testAppSnapshot();
+      });
+    });
+
+    describe('App Search', () => {
+      before(async () => {
+        await common.navigateToApp('enterprise_search/app_search');
+      });
+
+      it('loads a setup guide', async function () {
+        await retry.waitFor(
+          'setup guide visible',
+          async () => await testSubjects.exists('setupGuide')
+        );
+        await a11y.testAppSnapshot();
+      });
+    });
+
+    describe('Workplace Search', () => {
+      before(async () => {
+        await common.navigateToApp('enterprise_search/workplace_search');
+      });
+
+      it('loads a setup guide', async function () {
+        await retry.waitFor(
+          'setup guide visible',
+          async () => await testSubjects.exists('setupGuide')
+        );
+        await a11y.testAppSnapshot();
+      });
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -38,6 +38,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/ml_embeddables_in_dashboard'),
       require.resolve('./apps/remote_clusters'),
       require.resolve('./apps/reporting'),
+      require.resolve('./apps/enterprise_search'),
     ],
 
     pageObjects,