Add component integration tests.

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

@@ -35,6 +35,14 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     ]);
   };
 
+  const setDeleteDataStreamResponse = (response: HttpResponse = []) => {
+    server.respondWith('POST', `${API_BASE_PATH}/delete_data_streams`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
   const setDeleteTemplateResponse = (response: HttpResponse = []) => {
     server.respondWith('POST', `${API_BASE_PATH}/delete_index_templates`, [
       200,
@@ -80,6 +88,7 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     setLoadTemplatesResponse,
     setLoadIndicesResponse,
     setLoadDataStreamsResponse,
+    setDeleteDataStreamResponse,
     setDeleteTemplateResponse,
     setLoadTemplateResponse,
     setCreateTemplateResponse,

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

@@ -5,6 +5,7 @@
  */
 
 import { act } from 'react-dom/test-utils';
+import { ReactWrapper } from 'enzyme';
 
 import {
   registerTestBed,
@@ -33,8 +34,15 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
     goToDataStreamsList: () => void;
     clickEmptyPromptIndexTemplateLink: () => void;
     clickReloadButton: () => void;
+    clickNameAt: (index: number) => void;
     clickIndicesAt: (index: number) => void;
+    clickDeletActionAt: (index: number) => void;
+    clickConfirmDelete: () => void;
   };
+  findDeleteActionAt: (index: number) => ReactWrapper;
+  findDeleteConfirmationModal: () => ReactWrapper;
+  findDetailPanel: () => ReactWrapper;
+  findDetailPanelTitle: () => string;
 }
 
 export const setup = async (): Promise<DataStreamsTabTestBed> => {
@@ -65,10 +73,15 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     find('reloadButton').simulate('click');
   };
 
-  const clickIndicesAt = async (index: number) => {
-    const { component, table, router } = testBed;
+  const findTestSubjectAt = (testSubject: string, index: number) => {
+    const { table } = testBed;
     const { rows } = table.getMetaData('dataStreamTable');
-    const indicesLink = findTestSubject(rows[index].reactWrapper, 'indicesLink');
+    return findTestSubject(rows[index].reactWrapper, testSubject);
+  };
+
+  const clickIndicesAt = async (index: number) => {
+    const { component, router } = testBed;
+    const indicesLink = findTestSubjectAt('indicesLink', index);
 
     await act(async () => {
       router.navigateTo(indicesLink.props().href!);
@@ -77,14 +90,64 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     component.update();
   };
 
+  const clickNameAt = async (index: number) => {
+    const { component, router } = testBed;
+    const nameLink = findTestSubjectAt('nameLink', index);
+
+    await act(async () => {
+      router.navigateTo(nameLink.props().href!);
+    });
+
+    component.update();
+  };
+
+  const findDeleteActionAt = findTestSubjectAt.bind(null, 'deleteDataStream');
+
+  const clickDeletActionAt = (index: number) => {
+    findDeleteActionAt(index).simulate('click');
+  };
+
+  const findDeleteConfirmationModal = () => {
+    const { find } = testBed;
+    return find('deleteDataStreamsConfirmation');
+  };
+
+  const clickConfirmDelete = async () => {
+    const modal = document.body.querySelector('[data-test-subj="deleteDataStreamsConfirmation"]');
+    const confirmButton: HTMLButtonElement | null = modal!.querySelector(
+      '[data-test-subj="confirmModalConfirmButton"]'
+    );
+
+    await act(async () => {
+      confirmButton!.click();
+    });
+  };
+
+  const findDetailPanel = () => {
+    const { find } = testBed;
+    return find('dataStreamDetailPanel');
+  };
+
+  const findDetailPanelTitle = () => {
+    const { find } = testBed;
+    return find('dataStreamDetailPanelTitle').text();
+  };
+
   return {
     ...testBed,
     actions: {
       goToDataStreamsList,
       clickEmptyPromptIndexTemplateLink,
       clickReloadButton,
+      clickNameAt,
       clickIndicesAt,
+      clickDeletActionAt,
+      clickConfirmDelete,
     },
+    findDeleteActionAt,
+    findDeleteConfirmationModal,
+    findDetailPanel,
+    findDetailPanelTitle,
   };
 };
 

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

@@ -90,12 +90,11 @@ describe('Data Streams tab', () => {
 
     test('lists them in the table', async () => {
       const { table } = testBed;
-
       const { tableCellsValues } = table.getMetaData('dataStreamTable');
 
       expect(tableCellsValues).toEqual([
-        ['', 'dataStream1', '1', '@timestamp', '1'],
-        ['', 'dataStream2', '1', '@timestamp', '1'],
+        ['', 'dataStream1', '1', ''],
+        ['', 'dataStream2', '1', ''],
       ]);
     });
 
@@ -113,14 +112,63 @@ describe('Data Streams tab', () => {
       expect(server.requests[server.requests.length - 1].url).toBe(`${API_BASE_PATH}/data_streams`);
     });
 
+    test('clicking the name opens the detail panel', async () => {
+      const { actions, findDetailPanel, findDetailPanelTitle } = testBed;
+      await actions.clickNameAt(0);
+      expect(findDetailPanel().length).toBe(1);
+      expect(findDetailPanelTitle()).toBe('dataStream1');
+    });
+
     test('clicking the indices count navigates to the backing indices', async () => {
       const { table, actions } = testBed;
-
       await actions.clickIndicesAt(0);
-
       expect(table.getMetaData('indexTable').tableCellsValues).toEqual([
         ['', '', '', '', '', '', '', 'dataStream1'],
       ]);
     });
+
+    describe('row actions', () => {
+      test('can delete', () => {
+        const { findDeleteActionAt } = testBed;
+        const deleteAction = findDeleteActionAt(0);
+        expect(deleteAction.length).toBe(1);
+      });
+    });
+
+    describe('deleting a data stream', () => {
+      test('shows a confirmation modal', async () => {
+        const {
+          actions: { clickDeletActionAt },
+          findDeleteConfirmationModal,
+        } = testBed;
+        clickDeletActionAt(0);
+        const confirmationModal = findDeleteConfirmationModal();
+        expect(confirmationModal).toBeDefined();
+      });
+
+      test('sends a request to the Delete API', async () => {
+        const {
+          actions: { clickDeletActionAt, clickConfirmDelete },
+        } = testBed;
+        clickDeletActionAt(0);
+
+        httpRequestsMockHelpers.setDeleteDataStreamResponse({
+          results: {
+            dataStreamsDeleted: ['dataStream1'],
+            errors: [],
+          },
+        });
+
+        await clickConfirmDelete();
+
+        const { method, url, requestBody } = server.requests[server.requests.length - 1];
+
+        expect(method).toBe('POST');
+        expect(url).toBe(`${API_BASE_PATH}/delete_data_streams`);
+        expect(JSON.parse(JSON.parse(requestBody).body)).toEqual({
+          dataStreams: ['dataStream1'],
+        });
+      });
+    });
   });
 });

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

@@ -99,7 +99,7 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
     >
       <EuiFlyoutHeader>
         <EuiTitle size="m">
-          <h2 id="dataStreamDetailPanelTitle" data-test-subj="title">
+          <h2 id="dataStreamDetailPanelTitle" data-test-subj="dataStreamDetailPanelTitle">
             {dataStreamName}
           </h2>
         </EuiTitle>

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

@@ -11,7 +11,6 @@ import { i18n } from '@kbn/i18n';
 import { EuiTitle, EuiText, EuiSpacer, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import { ScopedHistory } from 'kibana/public';
 
-import { reactRouterNavigate } from '../../../../shared_imports';
 import { useAppContext } from '../../../app_context';
 import { SectionError, SectionLoading, Error } from '../../../components';
 import { useLoadDataStreams } from '../../../services/api';

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

@@ -44,10 +44,10 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
         return (
           /* eslint-disable-next-line @elastic/eui/href-or-on-click */
           <EuiLink
+            data-test-subj="nameLink"
             {...reactRouterNavigate(history, {
               pathname: `/${Section.DataStreams}/${encodePathForReactRouter(name)}`,
             })}
-            data-test-subj="dataStreamDetailsLink"
           >
             {name}
           </EuiLink>
@@ -94,6 +94,7 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
             setDataStreamsToDelete([name]);
           },
           isPrimary: true,
+          'data-test-subj': 'deleteDataStream',
         },
       ],
     },