Added accessibility test for ingest node pipelines (#84983)

* Added accessibility test for ingest node pipelines empty state.

* Added accessibility test for detail view and list view and added helpers to keep the test class clean.

* Added the rest of the tests for a11y for ingest node pipelines and updated some test subjects to aid the testing.

* Fixed the spacing issues.

* Update config.ts

Uncommitted other test files.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx

@@ -81,7 +81,7 @@ export const AddProcessorForm: FunctionComponent<Props> = ({
           <EuiFlexGroup gutterSize="xs">
             <EuiFlexItem>
               <div>
-                <EuiTitle size="m">
+                <EuiTitle size="m" data-test-subj="configurePipelineHeader">
                   <h2>{getFlyoutTitle(isOnFailure)}</h2>
                 </EuiTitle>
               </div>

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx

@@ -46,6 +46,7 @@ export const EmptyList: FunctionComponent = () => {
           }
           actions={
             <EuiButton
+              data-test-subj="emptyStateCreatePipelineButton"
               {...reactRouterNavigate(history, getCreatePath())}
               iconType="plusInCircle"
               fill

x-pack/test/accessibility/apps/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// This function clears all pipelines to ensure that there in an empty state before starting each test.
+export async function deleteAllPipelines(client: any, logger: any) {
+  const pipelines = await client.ingest.getPipeline();
+  const pipeLineIds = Object.keys(pipelines.body);
+  await logger.debug(pipelines);
+  if (pipeLineIds.length > 0) {
+    pipeLineIds.forEach(async (newId: any) => {
+      await client.ingest.deletePipeline({ id: newId });
+    });
+  }
+}
+
+export async function putSamplePipeline(client: any) {
+  return await client.ingest.putPipeline({
+    id: 'testPipeline',
+    body: {
+      description: 'describe pipeline',
+      version: 123,
+      processors: [
+        {
+          set: {
+            field: 'foo',
+            value: 'bar',
+          },
+        },
+      ],
+    },
+  });
+}

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

@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { deleteAllPipelines, putSamplePipeline } from './helpers';
+export default function ({ getService, getPageObjects }: any) {
+  const { common } = getPageObjects(['common']);
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const esClient = getService('es');
+  const log = getService('log');
+  const a11y = getService('a11y'); /* this is the wrapping service around axe */
+
+  describe('Ingest Node Pipelines', async () => {
+    before(async () => {
+      await putSamplePipeline(esClient);
+      await common.navigateToApp('ingestPipelines');
+    });
+
+    it('List View', async () => {
+      await retry.waitFor('Ingest Node Pipelines page to be visible', async () => {
+        await common.navigateToApp('ingestPipelines');
+        return testSubjects.exists('pipelineDetailsLink') ? true : false;
+      });
+      await a11y.testAppSnapshot();
+    });
+
+    it('List View', async () => {
+      await testSubjects.click('pipelineDetailsLink');
+      await retry.waitFor('testPipeline detail panel to be visible', async () => {
+        if (!testSubjects.isDisplayed('pipelineDetails')) {
+          await testSubjects.click('pipelineDetailsLink');
+        }
+        return testSubjects.isDisplayed('pipelineDetails') ? true : false;
+      });
+      await a11y.testAppSnapshot();
+    });
+
+    it('Empty State Home View', async () => {
+      await deleteAllPipelines(esClient, log);
+      await common.navigateToApp('ingestPipelines');
+      await retry.waitFor('Create New Pipeline Title to be visible', async () => {
+        return testSubjects.exists('title') ? true : false;
+      }); /* confirm you're on the correct page and that it's loaded */
+      await a11y.testAppSnapshot(); /* this expects that there are no failures found by axe */
+    });
+
+    it('Create Pipeline Wizard', async () => {
+      await testSubjects.click('emptyStateCreatePipelineButton');
+      await retry.waitFor('Create pipeline page one to be visible', async () => {
+        return testSubjects.isDisplayed('pageTitle') ? true : false;
+      });
+      await a11y.testAppSnapshot();
+      await testSubjects.click('addProcessorButton');
+      await retry.waitFor('Configure Pipeline flyout to be visible', async () => {
+        return testSubjects.isDisplayed('configurePipelineHeader') ? true : false;
+      });
+      await a11y.testAppSnapshot();
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -26,6 +26,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/users'),
       require.resolve('./apps/roles'),
       require.resolve('./apps/kibana_overview'),
+      require.resolve('./apps/ingest_node_pipelines'),
     ],
 
     pageObjects,

x-pack/test/functional/page_objects/ingest_pipelines_page.ts

@@ -17,6 +17,10 @@ export function IngestPipelinesPageProvider({ getService, getPageObjects }: FtrP
       return await testSubjects.getVisibleText('appTitle');
     },
 
+    async emptyStateHeaderText() {
+      return await testSubjects.getVisibleText('title');
+    },
+
     async createNewPipeline({
       name,
       description,