Add UT for Detector List page

public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx

@@ -40,15 +40,15 @@ export const EmptyDetectorMessage = (props: EmptyDetectorProps) => (
         <EuiButton
           fill
           onClick={props.onResetFilters}
-          data-test-subj="reset_list_filters"
+          data-test-subj="resetListFilters"
         >
           Reset filters
         </EuiButton>
       ) : (
         <EuiButton
           fill
           href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}
-          data-test-subj="add_detector"
+          data-test-subj="createDetectorButton"
         >
           Create detector
         </EuiButton>

public/pages/DetectorsList/components/EmptyMessage/__tests__/EmptyMessage.test.tsx

@@ -20,23 +20,15 @@ import { EmptyDetectorMessage } from '../EmptyMessage';
 describe('<EmptyDetectorMessage /> spec', () => {
   describe('Empty results', () => {
     test('renders component with empty message', () => {
-      const { container } = render(
+      const { container, getByText } = render(
         <EmptyDetectorMessage
           isFilterApplied={false}
           onResetFilters={jest.fn()}
         />
       );
       expect(container.firstChild).toMatchSnapshot();
+      getByText('Create detector');
     });
-    // test.only('should navigate to create detector page', () => {
-    //   const { getByTestId, debug } = render(
-    //     <MemoryRouter initialEntries={['/']}>
-    //       <EmptyDetectorMessage isFilterApplied={false} onResetFilters={jest.fn()} />
-    //     </MemoryRouter>
-    //   );
-    //   fireEvent.click(getByTestId('add_detector'));
-    //   expect(location).toBe('/create-detector');
-    // });
   });
   describe('Filters results message', () => {
     test('renders component no result for filters message', () => {
@@ -48,17 +40,17 @@ describe('<EmptyDetectorMessage /> spec', () => {
       );
       expect(container.firstChild).toMatchSnapshot();
     });
-    test('resets filters when click on rest filters', () => {
-      const handleRestFilters = jest.fn();
+    test('resets filters when click on reset filters', () => {
+      const handleResetFilters = jest.fn();
       const { getByTestId } = render(
         <EmptyDetectorMessage
           isFilterApplied={true}
-          onResetFilters={handleRestFilters}
+          onResetFilters={handleResetFilters}
         />
       );
-      fireEvent.click(getByTestId('reset_list_filters'));
-      expect(handleRestFilters).toHaveBeenCalled();
-      expect(handleRestFilters).toHaveBeenCalledTimes(1);
+      fireEvent.click(getByTestId('resetListFilters'));
+      expect(handleResetFilters).toHaveBeenCalled();
+      expect(handleResetFilters).toHaveBeenCalledTimes(1);
     });
   });
 });

public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`<EmptyDetectorMessage /> spec Empty results renders component with empt
   />
   <a
     class="euiButton euiButton--primary euiButton--fill"
-    data-test-subj="add_detector"
+    data-test-subj="createDetectorButton"
     href="opendistro-anomaly-detection-kibana#/create-ad/"
     rel="noreferrer"
   >
@@ -73,7 +73,7 @@ exports[`<EmptyDetectorMessage /> spec Filters results message renders component
   />
   <button
     class="euiButton euiButton--primary euiButton--fill"
-    data-test-subj="reset_list_filters"
+    data-test-subj="resetListFilters"
     type="button"
   >
     <span

public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx

@@ -25,22 +25,39 @@ describe('<ListActions /> spec', () => {
     onStartDetectors: jest.fn(),
     onStopDetectors: jest.fn(),
     onDeleteDetectors: jest.fn(),
-    detectors: [],
     isActionsDisabled: true,
     isStartDisabled: false,
     isStopDisabled: false,
   };
   describe('List actions', () => {
     console.error = jest.fn();
-    test('renders component when disabled', () => {
-      const { container } = render(<ListActions {...defaultProps} />);
+    test('renders component when disabled', async () => {
+      const { container, getByTestId, queryByText } = render(
+        <ListActions {...defaultProps} />
+      );
       expect(container.firstChild).toMatchSnapshot();
+      expect(queryByText('Start')).toBeNull();
+      expect(queryByText('Stop')).toBeNull();
+      expect(queryByText('Delete')).toBeNull();
+      fireEvent.click(getByTestId('listActionsButton'));
+      await wait();
+      expect(queryByText('Start')).toBeNull();
+      expect(queryByText('Stop')).toBeNull();
+      expect(queryByText('Delete')).toBeNull();
     });
-    test('renders component when enabled', () => {
-      const { container } = render(
+    test('renders component when enabled', async () => {
+      const { container, getByTestId, queryByText } = render(
         <ListActions {...defaultProps} isActionsDisabled={false} />
       );
       expect(container.firstChild).toMatchSnapshot();
+      expect(queryByText('Start')).toBeNull();
+      expect(queryByText('Stop')).toBeNull();
+      expect(queryByText('Delete')).toBeNull();
+      fireEvent.click(getByTestId('listActionsButton'));
+      await wait();
+      expect(queryByText('Start')).not.toBeNull();
+      expect(queryByText('Stop')).not.toBeNull();
+      expect(queryByText('Delete')).not.toBeNull();
     });
     test('should call onStartDetectors when clicking on start action', async () => {
       const { getByTestId } = render(

public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx

@@ -14,7 +14,7 @@
  */
 
 import React from 'react';
-import { render, fireEvent, wait } from '@testing-library/react';
+import { render, fireEvent, wait, getByText } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ConfirmDeleteDetectorsModal } from '../ConfirmDeleteDetectorsModal';
 import { DetectorListItem, Monitor } from '../../../../../models/interfaces';
@@ -150,5 +150,31 @@ describe('<ConfirmDeleteDetectorsModal /> spec', () => {
       await wait();
       expect(defaultDeleteProps.onHide).toHaveBeenCalled();
     });
+    test('should call onStopDetectors when deleting running detectors', async () => {
+      const { getByText, getByTestId, getByPlaceholderText } = render(
+        <ConfirmDeleteDetectorsModal
+          {...defaultDeleteProps}
+          detectors={
+            [
+              {
+                id: 'detector-id-0',
+                name: 'detector-0',
+                curState: DETECTOR_STATE.INIT,
+              },
+            ] as DetectorListItem[]
+          }
+        />
+      );
+      getByText('Yes');
+      // Try clicking before 'delete' has been typed
+      userEvent.click(getByTestId('confirmButton'));
+      await wait();
+      expect(defaultDeleteProps.onStopDetectors).not.toHaveBeenCalled();
+      userEvent.type(getByPlaceholderText('delete'), 'delete');
+      await wait();
+      userEvent.click(getByTestId('confirmButton'));
+      await wait();
+      expect(defaultDeleteProps.onStopDetectors).toHaveBeenCalled();
+    });
   });
 });