Update Index Management Tests to Check 4 Tabs on the Home Page (#113692)

* Modified home page test to check for 4 tabs.

* Fixed lint issue.

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

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

@@ -25,6 +25,7 @@ export type TestSubjects =
   | 'ilmPolicyLink'
   | 'includeStatsSwitch'
   | 'includeManagedSwitch'
+  | 'indexManagementHeaderContent'
   | 'indexTable'
   | 'indexTableIncludeHiddenIndicesToggle'
   | 'indexTableIndexNameLink'

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

@@ -24,24 +24,31 @@ const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), te
 export interface HomeTestBed extends TestBed<TestSubjects> {
   actions: {
     selectHomeTab: (tab: 'indicesTab' | 'templatesTab') => void;
+    toggleHiddenIndices: () => void;
   };
 }
 
 export const setup = async (): Promise<HomeTestBed> => {
   const testBed = await initTestBed();
+  const { find } = testBed;
 
   /**
    * User Actions
    */
 
   const selectHomeTab = (tab: 'indicesTab' | 'templatesTab') => {
-    testBed.find(tab).simulate('click');
+    find(tab).simulate('click');
+  };
+
+  const toggleHiddenIndices = async function () {
+    find('indexTableIncludeHiddenIndicesToggle').simulate('click');
   };
 
   return {
     ...testBed,
     actions: {
       selectHomeTab,
+      toggleHiddenIndices,
     },
   };
 };

x-pack/plugins/index_management/__jest__/client_integration/home/home.test.ts

@@ -54,15 +54,18 @@ describe('<IndexManagementHome />', () => {
     });
 
     describe('tabs', () => {
-      test('should have 2 tabs', () => {
+      test('should have 4 tabs', () => {
         const { find } = testBed;
-        const templatesTab = find('templatesTab');
-        const indicesTab = find('indicesTab');
 
-        expect(indicesTab.length).toBe(1);
-        expect(indicesTab.text()).toEqual('Indices');
-        expect(templatesTab.length).toBe(1);
-        expect(templatesTab.text()).toEqual('Index Templates');
+        const indexManagementContainer = find('indexManagementHeaderContent');
+        const tabListContainer = indexManagementContainer.find('.euiTabs');
+        const allTabs = tabListContainer.children();
+        const allTabsLabels = ['Indices', 'Data Streams', 'Index Templates', 'Component Templates'];
+
+        expect(allTabs.length).toBe(4);
+        for (let i = 0; i < allTabs.length; i++) {
+          expect(tabListContainer.childAt(i).text()).toEqual(allTabsLabels[i]);
+        }
       });
 
       test('should navigate to Index Templates tab', async () => {

x-pack/plugins/index_management/public/application/components/no_match/no_match.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const NoMatch = () => (
-  <div>
+  <div data-test-subj="noIndicesMessage">
     <FormattedMessage
       id="xpack.idxMgmt.noMatch.noIndicesDescription"
       defaultMessage="No indices to show"

x-pack/plugins/index_management/public/application/sections/home/home.tsx

@@ -85,6 +85,7 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
   return (
     <>
       <EuiPageHeader
+        data-test-subj="indexManagementHeaderContent"
         pageTitle={
           <span data-test-subj="appTitle">
             <FormattedMessage id="xpack.idxMgmt.home.appTitle" defaultMessage="Index Management" />