[Security Solution] Fixing jest warnings and errors (#86532)

elastic · Dec 21, 2020 · 513138b · 513138b
1 parent 8d5dd1d
commit 513138b
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 57 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx
@@ -101,17 +101,17 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
         <EuiDescriptionList compressed>
           <EuiFlexGroup gutterSize="l" alignItems="center">
             <EuiFlexItem>
+              <EuiDescriptionListTitle>
+                <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
+                  <EuiFlexItem grow={false}>
+                    <span>{i18n.SYNC_ALERTS}</span>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiDescriptionListTitle>
               <EuiDescriptionListDescription>
-                <EuiDescriptionListTitle>
-                  <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
-                    <EuiFlexItem grow={false}>
-                      <span>{i18n.SYNC_ALERTS}</span>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiDescriptionListTitle>
                 <SyncAlertsSwitch
                   disabled={disabled || isLoading}
                   isSynced={caseData.settings.syncAlerts}

diff --git a/...k/plugins/security_solution/public/common/components/event_details/event_details.test.tsx b/...k/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
+import { ReactWrapper, shallow } from 'enzyme';
 import React from 'react';
 
 import '../../mock/match_media';
@@ -16,6 +16,7 @@ import { mockBrowserFields } from '../../containers/source/mock';
 import { useMountAppended } from '../../utils/use_mount_appended';
 import { mockAlertDetailsData } from './__mocks__';
 import { TimelineEventsDetailsItem } from '../../../../common/search_strategy';
+import { waitFor } from '@testing-library/dom';
 
 jest.mock('../link_to');
 describe('EventDetails', () => {
@@ -36,18 +37,21 @@ describe('EventDetails', () => {
     isAlert: true,
   };
 
-  const wrapper = mount(
-    <TestProviders>
-      <EventDetails {...defaultProps} />
-    </TestProviders>
-  );
-
-  const alertsWrapper = mount(
-    <TestProviders>
-      <EventDetails {...alertsProps} />
-    </TestProviders>
-  );
-
+  let wrapper: ReactWrapper;
+  let alertsWrapper: ReactWrapper;
+  beforeAll(async () => {
+    wrapper = mount(
+      <TestProviders>
+        <EventDetails {...defaultProps} />
+      </TestProviders>
+    ) as ReactWrapper;
+    alertsWrapper = mount(
+      <TestProviders>
+        <EventDetails {...alertsProps} />
+      </TestProviders>
+    ) as ReactWrapper;
+    await waitFor(() => wrapper.update());
+  });
   describe('rendering', () => {
     test('should match snapshot', () => {
       const shallowWrap = shallow(<EventDetails {...defaultProps} />);

diff --git a/...k/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx b/...k/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx
@@ -30,6 +30,13 @@ jest.mock('../../../timelines/components/graph_overlay', () => ({
   GraphOverlay: jest.fn(() => <div />),
 }));
 
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+  return {
+    ...original,
+    useDataGridColumnSorting: jest.fn(),
+  };
+});
 jest.mock('../../../timelines/containers', () => ({
   useTimelineEvents: jest.fn(),
 }));
@@ -84,7 +91,7 @@ const eventsViewerDefaultProps = {
   sort: [
     {
       columnId: 'foo',
-      sortDirection: 'none' as SortDirection,
+      sortDirection: 'asc' as SortDirection,
     },
   ],
   scopeId: SourcererScopeName.timeline,

diff --git a/...plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx b/...plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx
@@ -25,6 +25,7 @@ import {
 } from '../../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
 import { getFoundListSchemaMock } from '../../../../../../lists/common/schemas/response/found_list_schema.mock';
 import { getEmptyValue } from '../../empty_value';
+import { waitFor } from '@testing-library/dom';
 
 // mock out lists hook
 const mockStart = jest.fn();
@@ -583,7 +584,7 @@ describe('BuilderEntryItem', () => {
     );
   });
 
-  test('it invokes "setErrorsExist" when user touches value input and leaves empty', () => {
+  test('it invokes "setErrorsExist" when user touches value input and leaves empty', async () => {
     const mockSetErrorExists = jest.fn();
     wrapper = mount(
       <BuilderEntryItem
@@ -608,14 +609,16 @@ describe('BuilderEntryItem', () => {
       />
     );
 
-    ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
-      onBlur: () => void;
-    }).onBlur();
+    await waitFor(() => {
+      ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
+        onBlur: () => void;
+      }).onBlur();
+    });
 
     expect(mockSetErrorExists).toHaveBeenCalledWith(true);
   });
 
-  test('it invokes "setErrorsExist" when invalid value inputted for field value input', () => {
+  test('it invokes "setErrorsExist" when invalid value inputted for field value input', async () => {
     const mockSetErrorExists = jest.fn();
     wrapper = mount(
       <BuilderEntryItem
@@ -639,14 +642,17 @@ describe('BuilderEntryItem', () => {
         setErrorsExist={mockSetErrorExists}
       />
     );
-    ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
-      onBlur: () => void;
-    }).onBlur();
 
-    // Invalid input because field type is number
-    ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
-      onSearchChange: (arg: string) => void;
-    }).onSearchChange('hellooo');
+    await waitFor(() => {
+      ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
+        onBlur: () => void;
+      }).onBlur();
+
+      // Invalid input because field type is number
+      ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
+        onSearchChange: (arg: string) => void;
+      }).onSearchChange('hellooo');
+    });
 
     expect(mockSetErrorExists).toHaveBeenCalledWith(true);
   });

diff --git a/x-pack/plugins/security_solution/public/common/components/last_updated/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/last_updated/index.test.tsx
@@ -8,12 +8,18 @@ import { mount } from 'enzyme';
 import { I18nProvider } from '@kbn/i18n/react';
 
 import { LastUpdatedAt } from './';
+jest.mock('@kbn/i18n/react', () => {
+  const originalModule = jest.requireActual('@kbn/i18n/react');
+  const FormattedRelative = jest.fn();
+  FormattedRelative.mockImplementation(() => '2 minutes ago');
+
+  return {
+    ...originalModule,
+    FormattedRelative,
+  };
+});
 
 describe('LastUpdatedAt', () => {
-  beforeEach(() => {
-    Date.now = jest.fn().mockReturnValue(1603995369774);
-  });
-
   test('it renders correct relative time', () => {
     const wrapper = mount(
       <I18nProvider>

diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx
@@ -14,6 +14,7 @@ import { mockAnomalies } from '../mock';
 import { TestProviders } from '../../../mock/test_providers';
 import { useMountAppended } from '../../../utils/use_mount_appended';
 import { Anomalies } from '../types';
+import { waitFor } from '@testing-library/dom';
 
 const startDate: string = '2020-07-07T08:20:18.966Z';
 const endDate: string = '3000-01-01T00:00:00.000Z';
@@ -57,7 +58,7 @@ describe('anomaly_scores', () => {
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(false);
   });
 
-  test('show a popover on a mouse click', () => {
+  test('show a popover on a mouse click', async () => {
     const wrapper = mount(
       <TestProviders>
         <AnomalyScoreComponent
@@ -71,7 +72,7 @@ describe('anomaly_scores', () => {
       </TestProviders>
     );
     wrapper.find('[data-test-subj="anomaly-score-popover"]').first().simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(true);
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx
@@ -15,6 +15,7 @@ import { TestProviders } from '../../../mock/test_providers';
 import { getEmptyValue } from '../../empty_value';
 import { Anomalies } from '../types';
 import { useMountAppended } from '../../../utils/use_mount_appended';
+import { waitFor } from '@testing-library/dom';
 
 const startDate: string = '2020-07-07T08:20:18.966Z';
 const endDate: string = '3000-01-01T00:00:00.000Z';
@@ -121,7 +122,7 @@ describe('anomaly_scores', () => {
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(false);
   });
 
-  test('showing a popover on a mouse click', () => {
+  test('showing a popover on a mouse click', async () => {
     const wrapper = mount(
       <TestProviders>
         <AnomalyScoresComponent
@@ -134,7 +135,7 @@ describe('anomaly_scores', () => {
       </TestProviders>
     );
     wrapper.find('[data-test-subj="anomaly-score-popover"]').first().simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(true);
   });
 });
diff --git a/...ins/security_solution/public/common/components/ml/score/create_descriptions_list.test.tsx b/...ins/security_solution/public/common/components/ml/score/create_descriptions_list.test.tsx
@@ -10,6 +10,7 @@ import { mockAnomalies } from '../mock';
 import { createDescriptionList } from './create_description_list';
 import { EuiDescriptionList } from '@elastic/eui';
 import { Anomaly } from '../types';
+import { waitFor } from '@testing-library/dom';
 
 jest.mock('../../../lib/kibana');
 
@@ -38,7 +39,7 @@ describe('create_description_list', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('it calls the narrow date range function on click', () => {
+  test('it calls the narrow date range function on click', async () => {
     const wrapper = mount(
       <EuiDescriptionList
         listItems={createDescriptionList(
@@ -54,12 +55,12 @@ describe('create_description_list', () => {
       .find('[data-test-subj="anomaly-description-narrow-range-link"]')
       .first()
       .simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
 
     expect(narrowDateRange.mock.calls.length).toBe(1);
   });
 
-  test('it should the narrow date range with the score', () => {
+  test('it should the narrow date range with the score', async () => {
     const wrapper = mount(
       <EuiDescriptionList
         listItems={createDescriptionList(
@@ -75,7 +76,7 @@ describe('create_description_list', () => {
       .find('[data-test-subj="anomaly-description-narrow-range-link"]')
       .first()
       .simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
 
     const expected: Anomaly = {
       detectorIndex: 0,
@@ -119,7 +120,7 @@ describe('create_description_list', () => {
     expect(narrowDateRange.mock.calls[0][0]).toEqual(expected);
   });
 
-  test('it should call the narrow date range with the interval', () => {
+  test('it should call the narrow date range with the interval', async () => {
     const wrapper = mount(
       <EuiDescriptionList
         listItems={createDescriptionList(
@@ -135,8 +136,7 @@ describe('create_description_list', () => {
       .find('[data-test-subj="anomaly-description-narrow-range-link"]')
       .first()
       .simulate('click');
-    wrapper.update();
-
+    await waitFor(() => wrapper.update());
     expect(narrowDateRange.mock.calls[0][1]).toEqual('hours');
   });
 });
diff --git a/...security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx b/...security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx
@@ -123,13 +123,13 @@ export const useCreateTimelineButton = ({ timelineId, timelineType, closeGearMen
       };
       const dataTestSubjPrefix =
         timelineType === TimelineType.template ? `template-timeline-new` : `timeline-new`;
-
+      const { fill: noThanks, ...propsWithoutFill } = buttonProps;
       return outline ? (
         <EuiButton data-test-subj={`${dataTestSubjPrefix}-with-border`} {...buttonProps}>
           {title}
         </EuiButton>
       ) : (
-        <EuiButtonEmpty data-test-subj={dataTestSubjPrefix} color="text" {...buttonProps}>
+        <EuiButtonEmpty data-test-subj={dataTestSubjPrefix} color="text" {...propsWithoutFill}>
           {title}
         </EuiButtonEmpty>
       );

diff --git a/...k/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx b/...k/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx
@@ -23,6 +23,7 @@ import {
   getDataProviderFilter,
   TIMELINE_FILTER_DROP_AREA,
 } from './index';
+import { waitFor } from '@testing-library/dom';
 
 const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;
 
@@ -181,7 +182,7 @@ describe('Timeline QueryBar ', () => {
   });
 
   describe('#onSavedQuery', () => {
-    test('is only reference that changed when dataProviders props get updated', () => {
+    test('is only reference that changed when dataProviders props get updated', async () => {
       const Proxy = (props: QueryBarTimelineComponentProps) => (
         <TestProviders>
           <QueryBarTimeline {...props} />
@@ -213,13 +214,13 @@ describe('Timeline QueryBar ', () => {
       const onSavedQueryRef = queryBarProps.onSavedQuery;
 
       wrapper.setProps({ dataProviders: mockDataProviders.slice(1, 0) });
-      wrapper.update();
+      await waitFor(() => wrapper.update());
 
       expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
       expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
     });
 
-    test('is only reference that changed when savedQueryId props get updated', () => {
+    test('is only reference that changed when savedQueryId props get updated', async () => {
       const Proxy = (props: QueryBarTimelineComponentProps) => (
         <TestProviders>
           <QueryBarTimeline {...props} />
@@ -253,7 +254,7 @@ describe('Timeline QueryBar ', () => {
       wrapper.setProps({
         savedQueryId: 'new',
       });
-      wrapper.update();
+      await waitFor(() => wrapper.update());
 
       expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
       expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);