From 037e32a51d34b24148357d04cd01874383f94210 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Mon, 10 Aug 2020 17:47:02 -0700
Subject: [PATCH] Add UT for Detector List page

---
 .../components/EmptyMessage/EmptyMessage.tsx  |   4 +-
 .../__tests__/EmptyMessage.test.tsx           |  24 +-
 .../__snapshots__/EmptyMessage.test.tsx.snap  |   4 +-
 .../__tests__/ListActions.test.tsx            |  27 +-
 .../ConfirmDeleteDetectorsModal.test.tsx      |  28 +-
 .../containers/List/__tests__/List.test.tsx   | 254 +++++++++++++++++-
 .../utils/__tests__/helpers.test.ts           | 134 ++++++++-
 .../utils/__tests__/tableUtils.test.tsx       |  52 ++++
 8 files changed, 498 insertions(+), 29 deletions(-)
 create mode 100644 public/pages/DetectorsList/utils/__tests__/tableUtils.test.tsx

diff --git a/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx b/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx
index 2a8d06a9..1438440f 100644
--- a/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx
+++ b/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx
@@ -40,7 +40,7 @@ export const EmptyDetectorMessage = (props: EmptyDetectorProps) => (
         <EuiButton
           fill
           onClick={props.onResetFilters}
-          data-test-subj="reset_list_filters"
+          data-test-subj="resetListFilters"
         >
           Reset filters
         </EuiButton>
@@ -48,7 +48,7 @@ export const EmptyDetectorMessage = (props: EmptyDetectorProps) => (
         <EuiButton
           fill
           href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}
-          data-test-subj="add_detector"
+          data-test-subj="createDetectorButton"
         >
           Create detector
         </EuiButton>
diff --git a/public/pages/DetectorsList/components/EmptyMessage/__tests__/EmptyMessage.test.tsx b/public/pages/DetectorsList/components/EmptyMessage/__tests__/EmptyMessage.test.tsx
index 1bf642b3..52e58e91 100644
--- a/public/pages/DetectorsList/components/EmptyMessage/__tests__/EmptyMessage.test.tsx
+++ b/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);
     });
   });
 });
diff --git a/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap b/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap
index 6d0140e5..9a2f9809 100644
--- a/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap
+++ b/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
diff --git a/public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx b/public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx
index 96f7cc6f..5e7f60b4 100644
--- a/public/pages/DetectorsList/components/ListActions/__tests__/ListActions.test.tsx
+++ b/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(
diff --git a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx b/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx
index 4e023013..12c09ba1 100644
--- a/public/pages/DetectorsList/containers/ConfirmActionModals/__tests__/ConfirmDeleteDetectorsModal.test.tsx
+++ b/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();
+    });
   });
 });
diff --git a/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx b/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx
index ae49061d..54d48211 100644
--- a/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx
+++ b/public/pages/DetectorsList/containers/List/__tests__/List.test.tsx
@@ -13,7 +13,7 @@
  * permissions and limitations under the License.
  */
 
-import { render, wait } from '@testing-library/react';
+import { render, wait, getByTestId, getByRole } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import moment from 'moment';
 import React from 'react';
@@ -55,7 +55,7 @@ const renderWithRouter = (
   ),
 });
 
-describe('<ListFilters /> spec', () => {
+describe('<DetectorList /> spec', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -379,5 +379,255 @@ describe('<ListFilters /> spec', () => {
       getByText('10/19/2019 9:30 AM');
       getByText('10/19/2019 7:30 AM');
     });
+    test('start action disabled if selected detector is running', async () => {
+      const randomDetectors = [
+        {
+          id: 1,
+          name: 'Test1',
+          indices: ['index_1'],
+          curState: DETECTOR_STATE.RUNNING,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+      ];
+      httpClientMock.get = jest.fn().mockResolvedValue({
+        data: {
+          ok: true,
+          response: {
+            detectorList: randomDetectors,
+            totalDetectors: randomDetectors.length,
+          },
+        },
+      });
+      const {
+        getByText,
+        getByTestId,
+        getAllByRole,
+        queryByText,
+      } = renderWithRouter();
+      await wait();
+      userEvent.click(getAllByRole('checkbox')[0]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Start'));
+      expect(
+        queryByText('Are you sure you want to start the selected detectors?')
+      ).toBeNull();
+    });
+    test('start action enabled if selected detector is not running', async () => {
+      const randomDetectors = [
+        {
+          id: 1,
+          name: 'Test1',
+          indices: ['index_1'],
+          curState: DETECTOR_STATE.DISABLED,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+      ];
+      httpClientMock.get = jest.fn().mockResolvedValue({
+        data: {
+          ok: true,
+          response: {
+            detectorList: randomDetectors,
+            totalDetectors: randomDetectors.length,
+          },
+        },
+      });
+      const { getByText, getByTestId, getAllByRole } = renderWithRouter();
+      await wait();
+      userEvent.click(getAllByRole('checkbox')[0]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Start'));
+      getByText('Are you sure you want to start the selected detectors?');
+      getByText('Start detectors');
+    });
+    test('stop action disabled if selected detector is stopped', async () => {
+      const randomDetectors = [
+        {
+          id: 1,
+          name: 'Test1',
+          indices: ['index_1'],
+          curState: DETECTOR_STATE.DISABLED,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+      ];
+      httpClientMock.get = jest.fn().mockResolvedValue({
+        data: {
+          ok: true,
+          response: {
+            detectorList: randomDetectors,
+            totalDetectors: randomDetectors.length,
+          },
+        },
+      });
+      const {
+        getByText,
+        getByTestId,
+        getAllByRole,
+        queryByText,
+      } = renderWithRouter();
+      await wait();
+      userEvent.click(getAllByRole('checkbox')[0]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Stop'));
+      expect(
+        queryByText('Are you sure you want to stop the selected detectors?')
+      ).toBeNull();
+    });
+    test('stop action enabled if selected detector is running', async () => {
+      const randomDetectors = [
+        {
+          id: 1,
+          name: 'Test1',
+          indices: ['index_1'],
+          curState: DETECTOR_STATE.RUNNING,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+      ];
+      httpClientMock.get = jest.fn().mockResolvedValue({
+        data: {
+          ok: true,
+          response: {
+            detectorList: randomDetectors,
+            totalDetectors: randomDetectors.length,
+          },
+        },
+      });
+      const { getByText, getByTestId, getAllByRole } = renderWithRouter();
+      await wait();
+      userEvent.click(getAllByRole('checkbox')[0]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Stop'));
+      getByText('Are you sure you want to stop the selected detectors?');
+      getByText('Stop detectors');
+    });
+    test('delete action always enabled', async () => {
+      const randomDetectors = [
+        {
+          id: 1,
+          name: 'Test1',
+          indices: ['index_1'],
+          curState: DETECTOR_STATE.DISABLED,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+        {
+          id: 2,
+          name: 'Test2',
+          indices: ['index_2'],
+          curState: DETECTOR_STATE.INIT,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+        {
+          id: 3,
+          name: 'Test3',
+          indices: ['index_3'],
+          curState: DETECTOR_STATE.RUNNING,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+        {
+          id: 4,
+          name: 'Test4',
+          indices: ['index_4'],
+          curState: DETECTOR_STATE.FEATURE_REQUIRED,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+        {
+          id: 5,
+          name: 'Test5',
+          indices: ['index_5'],
+          curState: DETECTOR_STATE.INIT_FAILURE,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+        {
+          id: 6,
+          name: 'Test6',
+          indices: ['index_6'],
+          curState: DETECTOR_STATE.UNEXPECTED_FAILURE,
+          totalAnomalies: 0,
+          lastActiveAnomaly: 0,
+          enabledTime: 0,
+        },
+      ];
+      httpClientMock.get = jest.fn().mockResolvedValue({
+        data: {
+          ok: true,
+          response: {
+            detectorList: randomDetectors,
+            totalDetectors: randomDetectors.length,
+          },
+        },
+      });
+      const { getByText, getByTestId, getAllByRole } = renderWithRouter();
+      await wait();
+      // Try to delete disabled detector
+      userEvent.click(getAllByRole('checkbox')[1]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Delete'));
+      getByText('Are you sure you want to delete the selected detectors?');
+      getByText('Delete detectors');
+      userEvent.click(getAllByRole('button')[0]);
+      userEvent.click(getAllByRole('checkbox')[1]);
+
+      // Try to delete initializing detector
+      userEvent.click(getAllByRole('checkbox')[2]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Delete'));
+      getByText('Are you sure you want to delete the selected detectors?');
+      getByText('Delete detectors');
+      userEvent.click(getAllByRole('button')[0]);
+      userEvent.click(getAllByRole('checkbox')[2]);
+
+      // Try to delete running detector
+      userEvent.click(getAllByRole('checkbox')[3]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Delete'));
+      getByText('Are you sure you want to delete the selected detectors?');
+      getByText('Delete detectors');
+      userEvent.click(getAllByRole('button')[0]);
+      userEvent.click(getAllByRole('checkbox')[3]);
+
+      // Try to delete feature required detector
+      userEvent.click(getAllByRole('checkbox')[4]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Delete'));
+      getByText('Are you sure you want to delete the selected detectors?');
+      getByText('Delete detectors');
+      userEvent.click(getAllByRole('button')[0]);
+      userEvent.click(getAllByRole('checkbox')[4]);
+
+      // Try to delete init failure detector
+      userEvent.click(getAllByRole('checkbox')[5]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Delete'));
+      getByText('Are you sure you want to delete the selected detectors?');
+      getByText('Delete detectors');
+      userEvent.click(getAllByRole('button')[0]);
+      userEvent.click(getAllByRole('checkbox')[5]);
+
+      // Try to delete unexpected failure detector
+      userEvent.click(getAllByRole('checkbox')[6]);
+      userEvent.click(getByTestId('listActionsButton'));
+      userEvent.click(getByText('Delete'));
+      getByText('Are you sure you want to delete the selected detectors?');
+      getByText('Delete detectors');
+      userEvent.click(getAllByRole('button')[0]);
+      userEvent.click(getAllByRole('checkbox')[6]);
+    });
   });
 });
diff --git a/public/pages/DetectorsList/utils/__tests__/helpers.test.ts b/public/pages/DetectorsList/utils/__tests__/helpers.test.ts
index dc61173c..8879f33c 100644
--- a/public/pages/DetectorsList/utils/__tests__/helpers.test.ts
+++ b/public/pages/DetectorsList/utils/__tests__/helpers.test.ts
@@ -14,7 +14,15 @@
  */
 
 import { SORT_DIRECTION } from '../../../../../server/utils/constants';
-import { getURLQueryParams } from '../helpers';
+import {
+  getURLQueryParams,
+  getMonitorsForAction,
+  getDetectorStateOptions,
+  getDetectorsForAction,
+} from '../helpers';
+import { DetectorListItem, Monitor } from '../../../../models/interfaces';
+import { DETECTOR_STATE } from '../../../../utils/constants';
+import { DETECTOR_ACTION } from '../constants';
 
 describe('helpers spec', () => {
   describe('getURLQueryParams', () => {
@@ -56,4 +64,128 @@ describe('helpers spec', () => {
       });
     });
   });
+
+  describe('getDetectorStateOptions spec', () => {
+    test('should return all detector states', () => {
+      const result = getDetectorStateOptions();
+      expect(result.length).toEqual(6);
+      expect(result[0].label).toEqual(DETECTOR_STATE.DISABLED);
+      expect(result[1].label).toEqual(DETECTOR_STATE.INIT);
+      expect(result[2].label).toEqual(DETECTOR_STATE.RUNNING);
+      expect(result[3].label).toEqual(DETECTOR_STATE.FEATURE_REQUIRED);
+      expect(result[4].label).toEqual(DETECTOR_STATE.INIT_FAILURE);
+      expect(result[5].label).toEqual(DETECTOR_STATE.UNEXPECTED_FAILURE);
+    });
+  });
+
+  describe('getDetectorsForAction spec', () => {
+    const testDetectors = [
+      {
+        id: 'detectorId1',
+        name: 'stopped-detector',
+        curState: DETECTOR_STATE.DISABLED,
+      },
+      {
+        id: 'detectorId2',
+        name: 'init-detector',
+        curState: DETECTOR_STATE.INIT,
+      },
+      {
+        id: 'detectorId1',
+        name: 'running-detector',
+        curState: DETECTOR_STATE.RUNNING,
+      },
+      {
+        id: 'detectorId2',
+        name: 'feature-required-detector',
+        curState: DETECTOR_STATE.FEATURE_REQUIRED,
+      },
+      {
+        id: 'detectorId1',
+        name: 'init-failure-detector',
+        curState: DETECTOR_STATE.INIT_FAILURE,
+      },
+      {
+        id: 'detectorId2',
+        name: 'unexpected-failure-detector',
+        curState: DETECTOR_STATE.UNEXPECTED_FAILURE,
+      },
+    ] as DetectorListItem[];
+    test('filters properly for start action', () => {
+      const result = getDetectorsForAction(
+        testDetectors,
+        DETECTOR_ACTION.START
+      );
+      expect(result.length).toEqual(3);
+      expect(result[0].name).toEqual('stopped-detector');
+      expect(result[1].name).toEqual('init-failure-detector');
+      expect(result[2].name).toEqual('unexpected-failure-detector');
+    });
+    test('filters properly for stop action', () => {
+      const result = getDetectorsForAction(testDetectors, DETECTOR_ACTION.STOP);
+      expect(result.length).toEqual(2);
+      expect(result[0].name).toEqual('init-detector');
+      expect(result[1].name).toEqual('running-detector');
+    });
+    test('filters properly for delete action', () => {
+      const result = getDetectorsForAction(
+        testDetectors,
+        DETECTOR_ACTION.DELETE
+      );
+      expect(result.length).toEqual(6);
+    });
+    test('filters properly for undefined/invalid action', () => {
+      const result = getDetectorsForAction(testDetectors, 'something-invalid');
+      expect(result.length).toEqual(0);
+    });
+  });
+
+  describe('getMonitorsForAction spec', () => {
+    test('should return empty if no related monitors', () => {
+      const testDetectors = [
+        {
+          id: 'detectorId1',
+          name: 'test-detector-1',
+        },
+        {
+          id: 'detectorId2',
+          name: 'test-detector-2',
+        },
+      ] as DetectorListItem[];
+      let testMonitors: { [key: string]: Monitor } = {};
+      testMonitors = {
+        detectorId1: [],
+        detectorId2: [],
+      };
+      expect(getMonitorsForAction(testDetectors, testMonitors)).toEqual({});
+    });
+    test('should return related monitors', () => {
+      const testDetectors = [
+        {
+          id: 'detectorId1',
+          name: 'test-detector-1',
+        },
+        {
+          id: 'detectorId2',
+          name: 'test-detector-2',
+        },
+      ] as DetectorListItem[];
+      let testMonitors: { [key: string]: Monitor } = {};
+      testMonitors = {
+        detectorId1: [
+          {
+            id: 'monitorId1',
+            name: 'test-monitor-1',
+          },
+        ],
+        detectorId2: [],
+      };
+      expect(getMonitorsForAction(testDetectors, testMonitors)).toEqual({
+        detectorId1: {
+          id: 'monitorId1',
+          name: 'test-monitor-1',
+        },
+      });
+    });
+  });
 });
diff --git a/public/pages/DetectorsList/utils/__tests__/tableUtils.test.tsx b/public/pages/DetectorsList/utils/__tests__/tableUtils.test.tsx
new file mode 100644
index 00000000..96f0ccf4
--- /dev/null
+++ b/public/pages/DetectorsList/utils/__tests__/tableUtils.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import { staticColumn } from '../../utils/tableUtils';
+import { render } from '@testing-library/react';
+
+describe('tableUtils spec', () => {
+  describe('should render the column titles', () => {
+    test('detector name column', () => {
+      const result = staticColumn;
+      const { getByText } = render(result[0].name);
+      getByText('Detector');
+    });
+    test('indices column', () => {
+      const result = staticColumn;
+      const { getByText } = render(result[1].name);
+      getByText('Indices');
+    });
+    test('detector state column', () => {
+      const result = staticColumn;
+      const { getByText } = render(result[2].name);
+      getByText('Detector state');
+    });
+    test('total anomalies column', () => {
+      const result = staticColumn;
+      const { getByText } = render(result[3].name);
+      getByText('Anomalies last 24 hours');
+    });
+    test('last active anomaly column', () => {
+      const result = staticColumn;
+      const { getByText } = render(result[4].name);
+      getByText('Last anomaly occurrence');
+    });
+    test('last enabled time column', () => {
+      const result = staticColumn;
+      const { getByText } = render(result[5].name);
+      getByText('Last enabled time');
+    });
+  });
+});