Fix and clean unit tests (opendistro-for-elasticsearch#147)

* Fix and clean unit tests
yizheliu-amazon · May 18, 2020 · 2e9a9ae · 2e9a9ae
1 parent 83c7391
commit 2e9a9ae
Show file tree

Hide file tree

Showing 16 changed files with 34 additions and 16 deletions.
diff --git a/public/pages/AnomalyCharts/components/AlertsButton/__tests__/AlertsButton.test.tsx b/public/pages/AnomalyCharts/components/AlertsButton/__tests__/AlertsButton.test.tsx
@@ -19,8 +19,12 @@ import { AlertsButton } from '../AlertsButton';
 import { getRandomMonitor } from '../../../../../redux/reducers/__tests__/utils';
 
 describe('<AlertsButton /> spec', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   describe('Alerts Button', () => {
     test('renders component without monitor', () => {
+      console.error = jest.fn();
       const { container } = render(
         <AlertsButton
           detectorId="test-detector-id"

diff --git a/public/pages/AnomalyCharts/components/AlertsFlyout/__tests__/AlertsFlyout.test.tsx b/public/pages/AnomalyCharts/components/AlertsFlyout/__tests__/AlertsFlyout.test.tsx
@@ -19,9 +19,13 @@ import { AlertsFlyout } from '../AlertsFlyout';
 import { getRandomMonitor } from '../../../../../redux/reducers/__tests__/utils';
 
 describe('<AlertsFlyout /> spec', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   const detectorId = "GILVg3EBhaIh92zvX8uE";
   describe('Alerts Flyout', () => {
     test('renders component with monitor', () => {
+      console.error = jest.fn();
       const { container } = render(
         <AlertsFlyout
           detectorId={detectorId}
@@ -36,6 +40,7 @@ describe('<AlertsFlyout /> spec', () => {
     });
 
     test('renders component with undefined monitor', () => {
+      console.error = jest.fn();
       const { container } = render(
         <AlertsFlyout
           detectorId={detectorId}

diff --git a/public/pages/AnomalyCharts/components/AnomaliesStat/__tests__/AnomalyStat.test.tsx b/public/pages/AnomalyCharts/components/AnomaliesStat/__tests__/AnomalyStat.test.tsx
@@ -64,8 +64,12 @@ describe('<AnomalyStatWithTooltip /> spec', () => {
 });
 
 describe('<AlertsStat /> spec', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   describe('Alert Stat', () => {
     test('renders component with undefined monitor and loading', () => {
+      console.error = jest.fn();
       const { container } = render(
         <AlertsStat
           monitor={undefined}
@@ -78,6 +82,7 @@ describe('<AlertsStat /> spec', () => {
     });
 
     test('renders component with undefined monitor and not loading', () => {
+      console.error = jest.fn();
       const { container } = render(
         <AlertsStat
           monitor={undefined}

diff --git a/public/pages/AnomalyCharts/containers/__tests__/AnomaliesChart.test.tsx b/public/pages/AnomalyCharts/containers/__tests__/AnomaliesChart.test.tsx
@@ -60,7 +60,7 @@ const renderDataFilter = () => ({
         anomalySummary={undefined}
         dateRange={dateRange}
         isLoading={false}
-        anomalyGradeSeriesName="anoaly grade"
+        anomalyGradeSeriesName="anomaly grade"
         confidenceSeriesName="confidence"
         detectorId="testDetectorId"
         detectorName="testDetectorName"
@@ -72,7 +72,8 @@ const renderDataFilter = () => ({
 
 describe('<AnomaliesChart /> spec', () => {
   test('renders the component', () => {
+    console.error = jest.fn();
     const { getByText } = renderDataFilter();
-    expect(getByText('anoaly grade')).not.toBeNull();
+    expect(getByText('anomaly grade')).not.toBeNull();
   });
 });
diff --git a/public/pages/AnomalyCharts/containers/__tests__/FeatureBreakDown.test.tsx b/public/pages/AnomalyCharts/containers/__tests__/FeatureBreakDown.test.tsx
@@ -52,6 +52,7 @@ describe('<FeatureBreakDown /> spec', () => {
     featureData: featureData,
   };
   test('renders the component', () => {
+    console.error = jest.fn();
     const { container } = render(
       <FeatureBreakDown
         title="test"

diff --git a/public/pages/DetectorDetail/components/MonitorCallout/__tests__/MonitorCallout.test.tsx b/public/pages/DetectorDetail/components/MonitorCallout/__tests__/MonitorCallout.test.tsx
@@ -18,7 +18,11 @@ import { render } from '@testing-library/react';
 import { MonitorCallout } from '../MonitorCallout';
 
 describe('<MonitorCallout /> spec', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   describe('Monitor callout', () => {
+    console.error = jest.fn();
     test('renders component', () => {
       const { container } = render(
         <MonitorCallout

diff --git a/public/pages/DetectorsList/List/__tests__/List.test.tsx b/public/pages/DetectorsList/List/__tests__/List.test.tsx
@@ -229,7 +229,7 @@ describe('<ListControls /> spec', () => {
       await wait();
       getByText('04/15/2020 7:30 AM');
       expect(queryByText('04/15/2020 7:00 AM')).toBeNull();
-    });
+    }, 20000);
     test('should be able to search', async () => {
       const randomDetectors = new Array(40).fill(null).map((_, index) => {
         const hasAnomaly = Math.random() > 0.5;

diff --git a/public/pages/EditFeatures/components/CustomAggregation/__tests__/CustomAggregation.test.tsx b/public/pages/EditFeatures/components/CustomAggregation/__tests__/CustomAggregation.test.tsx
@@ -37,6 +37,9 @@ const renderWithFormik = (initialValue: FeaturesFormikValues) => ({
 });
 
 describe('<CustomAggregation /> spec', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   test('renders the component', () => {
     const { container } = renderWithFormik(INITIAL_VALUES);
     expect(container.firstChild).toMatchSnapshot();
@@ -47,6 +50,7 @@ describe('<CustomAggregation /> spec', () => {
       expect(validateQuery('{"a":{"b":{}}}')).toBeUndefined();
     });
     test('should return error message if invalid query', () => {
+      console.log = jest.fn();
       expect(validateQuery('hello')).toEqual('Invalid JSON');
       expect(validateQuery('{a : b: {}')).toEqual('Invalid JSON');
     });

diff --git a/public/pages/EditFeatures/containers/SampleAnomalies.tsx b/public/pages/EditFeatures/containers/SampleAnomalies.tsx
@@ -125,7 +125,7 @@ export function SampleAnomalies(props: SampleAnomaliesProps) {
       setPreviewDone(true);
       setFirstPreview(false);
     } catch (err) {
-      console.error(`Fail to preivew detector ${detector.id}`, err);
+      console.error(`Fail to preview detector ${detector.id}`, err);
       setIsLoading(false);
       toastNotifications.addDanger(
         getPreviewErrorMessage(err, 'There was a problem previewing detector')

diff --git a/public/pages/createDetector/components/DataFilters/SimpleFilter.tsx b/public/pages/createDetector/components/DataFilters/SimpleFilter.tsx
@@ -98,9 +98,8 @@ export const SimpleFilter = (props: DataFilterProps) => {
           <EuiPanel style={darkMode ? {} : lightModeStyles}>
             {values.filters.map((filter: UIFilter, index: number) => {
               return (
-                <EuiPanel className="filter-container">
+                <EuiPanel key={index} className="filter-container">
                   <EuiAccordion
-                    key={index}
                     id={'name'}
                     initialIsOpen={true}
                     buttonContent={displayText(filter)}

diff --git a/public/pages/createDetector/components/DetectorInfo/DetectorInfo.tsx b/public/pages/createDetector/components/DetectorInfo/DetectorInfo.tsx
@@ -13,7 +13,7 @@
  * permissions and limitations under the License.
  */
 
-import { EuiFieldText, EuiTextArea, EuiFormRow } from '@elastic/eui';
+import { EuiFieldText, EuiTextArea } from '@elastic/eui';
 import { Field, FieldProps } from 'formik';
 import React from 'react';
 import ContentPanel from '../../../../components/ContentPanel/ContentPanel';

diff --git a/...createDetector/components/DetectorInfo/__tests__/__snapshots__/DetectorInfo.test.tsx.snap b/...createDetector/components/DetectorInfo/__tests__/__snapshots__/DetectorInfo.test.tsx.snap
@@ -96,7 +96,6 @@ exports[`<DetectorInfo /> spec renders the component 1`] = `
       </div>
       <div
         class="euiFormRow"
-        formattedtitle="[object Object]"
         hint="Describe the purpose of the detector."
         id="random_id-row"
       >

diff --git a/public/pages/createDetector/components/FormattedFormRow/FormattedFormRow.tsx b/public/pages/createDetector/components/FormattedFormRow/FormattedFormRow.tsx
@@ -32,20 +32,21 @@ export const FormattedFormRow = (props: FormattedFormRowProps) => {
   if (props.hint) {
     const hintTexts = Array.isArray(props.hint) ? props.hint : [props.hint];
     hints = hintTexts.map((hint, i) => {
-      return <p className="sublabel">{hint}</p>;
+      return <p key={i} className="sublabel">{hint}</p>;
     });
   }
+  const {formattedTitle, ...euiFormRowProps} = props;
 
   return (
     <EuiFormRow
       label={
         <div style={{ lineHeight: '8px' }}>
-          {props.formattedTitle ? props.formattedTitle : <p>{props.title}</p>}
+          {formattedTitle ? formattedTitle : <p>{props.title}</p>}
           <br />
           {hints}
         </div>
       }
-      {...props}
+      {...euiFormRowProps}
     >
       {props.children}
     </EuiFormRow>

diff --git a/public/pages/createDetector/containers/__tests__/CreateDetector.test.tsx b/public/pages/createDetector/containers/__tests__/CreateDetector.test.tsx
@@ -29,7 +29,6 @@ import { getRandomDetector } from '../../../../redux/reducers/__tests__/utils';
 import configureStore from '../../../../redux/configureStore';
 import { httpClientMock } from '../../../../../test/mocks';
 import userEvent from '@testing-library/user-event';
-import { UNITS } from '../../../../models/interfaces';
 
 const renderWithRouter = (isEdit: boolean = false) => ({
   ...render(

diff --git a/public/pages/createDetector/containers/__tests__/__snapshots__/CreateDetector.test.tsx.snap b/public/pages/createDetector/containers/__tests__/__snapshots__/CreateDetector.test.tsx.snap
@@ -115,7 +115,6 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
         </div>
         <div
           class="euiFormRow"
-          formattedtitle="[object Object]"
           hint="Describe the purpose of the detector."
           id="random_id-row"
         >
@@ -381,7 +380,6 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
         </div>
         <div
           class="euiFormRow euiFormRow--fullWidth"
-          formattedtitle="[object Object]"
           hint="Choose a subset of your data source to focus your data stream and reduce noisy data.,Use the visual editor to create a simple filter, or use the Elasticsearch query DSL to create more advanced filters."
           id="random_id-row"
         >

diff --git a/public/pages/createDetector/containers/utils/__tests__/formikToDetector.test.ts b/public/pages/createDetector/containers/utils/__tests__/formikToDetector.test.ts
@@ -41,8 +41,6 @@ describe('formikToAd', () => {
       },
       {} as Detector
     );
-    console.log(ad);
-    console.log(randomDetector);
     expect(ad).toEqual({
       name: randomDetector.name,
       description: randomDetector.description,