draft search profiler accessibility tests (elastic#62357)

* draft search profiler accessibility tests

* added the search profiler test , data test subjects

* unskipped the test

* added another test to open-close the shard details dropdown

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details.tsx

@@ -44,6 +44,7 @@ export const ShardDetails = ({ index, shard, operations }: Props) => {
           <EuiLink
             className="prfDevTool__profileTree__shardDetails"
             onClick={() => setShardVisibility(!shardVisibility)}
+            data-test-subj="openCloseShardDetails"
           >
             <EuiIcon type={shardVisibility ? 'arrowDown' : 'arrowRight'} />[{shard.id[0]}][
             {shard.id[2]}]

x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details_tree_node.tsx

@@ -94,6 +94,7 @@ export const ShardDetailsTreeNode = ({ operation, index, shard }: Props) => {
             </EuiCodeBlock>
             <EuiLink
               type="button"
+              data-test-subj="viewShardDetails"
               onClick={() => highlight({ indexName: index.name, operation, shard })}
             >
               {i18n.translate('xpack.searchProfiler.profileTree.body.viewDetailsLabel', {

x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs.tsx

@@ -24,6 +24,7 @@ export const SearchProfilerTabs = ({ activeTab, activateTab, has }: Props) => {
   return (
     <EuiTabs>
       <EuiTab
+        data-test-subj="queryProfileTab"
         isSelected={activeTab === 'searches'}
         disabled={!has.searches}
         onClick={() => activateTab('searches')}
@@ -33,6 +34,7 @@ export const SearchProfilerTabs = ({ activeTab, activateTab, has }: Props) => {
         })}
       </EuiTab>
       <EuiTab
+        data-test-subj="aggregationProfileTab"
         isSelected={activeTab === 'aggregations'}
         disabled={!has.aggregations}
         onClick={() => activateTab('aggregations')}

x-pack/plugins/searchprofiler/public/application/containers/profile_query_editor.tsx

@@ -120,7 +120,12 @@ export const ProfileQueryEditor = memo(() => {
             <EuiSpacer size="s" />
           </EuiFlexItem>
           <EuiFlexItem grow={5}>
-            <EuiButton fill disabled={!licenseEnabled} onClick={() => handleProfileClick()}>
+            <EuiButton
+              data-test-subj="profileButton"
+              fill
+              disabled={!licenseEnabled}
+              onClick={() => handleProfileClick()}
+            >
               <EuiText>
                 {i18n.translate('xpack.searchProfiler.formProfileButtonLabel', {
                   defaultMessage: 'Profile',

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

@@ -0,0 +1,93 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['common', 'security']);
+  const testSubjects = getService('testSubjects');
+  const aceEditor = getService('aceEditor');
+  const a11y = getService('a11y');
+  const flyout = getService('flyout');
+
+  describe('Accessibility Search Profiler Editor', () => {
+    before(async () => {
+      await PageObjects.common.navigateToApp('searchProfiler');
+      await a11y.testAppSnapshot();
+      expect(await testSubjects.exists('searchProfilerEditor')).to.be(true);
+    });
+
+    it('input the JSON in the aceeditor', async () => {
+      const input = {
+        query: {
+          bool: {
+            should: [
+              {
+                match: {
+                  name: 'fred',
+                },
+              },
+              {
+                terms: {
+                  name: ['sue', 'sally'],
+                },
+              },
+            ],
+          },
+        },
+        aggs: {
+          stats: {
+            stats: {
+              field: 'price',
+            },
+          },
+        },
+      };
+
+      await aceEditor.setValue('searchProfilerEditor', JSON.stringify(input));
+      await a11y.testAppSnapshot();
+    });
+
+    it('click on the profile button', async () => {
+      await testSubjects.click('profileButton');
+      await a11y.testAppSnapshot();
+    });
+
+    it('click on the dropdown link', async () => {
+      const viewShardDetailslink = await testSubjects.findAll('viewShardDetails');
+      await viewShardDetailslink[0].click();
+      await a11y.testAppSnapshot();
+    });
+
+    it('click on the open-close shard details link', async () => {
+      const openShardDetailslink = await testSubjects.findAll('openCloseShardDetails');
+      await openShardDetailslink[0].click();
+      await a11y.testAppSnapshot();
+    });
+
+    it('close the fly out', async () => {
+      await flyout.ensureAllClosed();
+      await a11y.testAppSnapshot();
+    });
+
+    it('click on the Aggregation Profile link', async () => {
+      await testSubjects.click('aggregationProfileTab');
+      await a11y.testAppSnapshot();
+    });
+
+    it('click on the view details link', async () => {
+      const viewShardDetailslink = await testSubjects.findAll('viewShardDetails');
+      await viewShardDetailslink[0].click();
+      await a11y.testAppSnapshot();
+    });
+
+    it('close the fly out', async () => {
+      await flyout.ensureAllClosed();
+      await a11y.testAppSnapshot();
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -13,10 +13,12 @@ export default async function({ readConfigFile }: FtrConfigProviderContext) {
 
   return {
     ...functionalConfig.getAll(),
+
     testFiles: [
       require.resolve('./apps/login_page'),
       require.resolve('./apps/home'),
       require.resolve('./apps/grok_debugger'),
+      require.resolve('./apps/search_profiler'),
     ],
     pageObjects,
     services,