Add unit tests and minor code improvements

machadoum · machadoum · commit 30bf355f76b8 · 2021-10-18T11:19:51.000+02:00
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -7,8 +7,8 @@
 
 import React, { useCallback, useMemo, useEffect } from 'react';
 import { connect, ConnectedProps, useDispatch } from 'react-redux';
-import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
+import styled from 'styled-components';
 import { isEmpty } from 'lodash/fp';
 import { inputsModel, inputsSelectors, State } from '../../store';
 import { inputsActions } from '../../store/actions';
@@ -31,7 +31,7 @@ import { defaultControlColumn } from '../../../timelines/components/timeline/bod
 import { EventsViewer } from './events_viewer';
 import * as i18n from './translations';
 import { GraphOverlay } from '../../../timelines/components/graph_overlay';
-import { CreateFieldButton } from '../../../timelines/components/create_runtime_field';
+import { CreateFieldButton } from '../../../timelines/components/create_field';
 import { CreateFieldComponentType } from '../../../../../timelines/public';
 
 const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
@@ -176,7 +176,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   const bulkActions = useMemo(() => ({ onAlertStatusActionSuccess }), [onAlertStatusActionSuccess]);
 
   const createFieldComponent = useMemo(() => {
-    // It has to receive onClick props from TGrid in order to close browserFields modal.
+    // It receives onClick props from field browser in order to close the modal.
     const CreateFieldButtonComponent: CreateFieldComponentType = ({ onClick }) => (
       <CreateFieldButton
         selectedDataViewId={selectedDataViewId}
diff --git a/x-pack/plugins/security_solution/public/common/containers/source/index.test.tsx b/x-pack/plugins/security_solution/public/common/containers/source/index.test.tsx
@@ -30,7 +30,7 @@ jest.mock('react-redux', () => {
     useDispatch: () => mockDispatch,
   };
 });
-jest.mock('../../lib/kibana'); // , () => ({
+jest.mock('../../lib/kibana');
 
 describe('source/index.tsx', () => {
   describe('getBrowserFields', () => {
@@ -39,11 +39,11 @@ describe('source/index.tsx', () => {
       expect(fields).toEqual({});
     });
 
-    test('it returns the same input with the same title', () => {
-      getBrowserFields('title 1', []);
-      // Since it is memoized it will return the same output which is empty object given 'title 1' a second time
-      const fields = getBrowserFields('title 1', mocksSource.indexFields as IndexField[]);
-      expect(fields).toEqual({});
+    test('it returns the same input given the same title and same fields length', () => {
+      const oldFields = getBrowserFields('title 1', mocksSource.indexFields as IndexField[]);
+      const newFields = getBrowserFields('title 1', mocksSource.indexFields as IndexField[]);
+      // Since it is memoized it will return the same object instance
+      expect(newFields).toBe(oldFields);
     });
 
     test('it transforms input into output as expected', () => {
@@ -282,5 +282,44 @@ describe('source/index.tsx', () => {
         );
       });
     });
+
+    it('doesnt set source when `autoCall` is false', async () => {
+      await act(async () => {
+        const { rerender, waitForNextUpdate } = renderHook<string, void>(
+          () => useIndexFields(SourcererScopeName.default, false),
+          {
+            wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+          }
+        );
+        await waitForNextUpdate();
+        rerender();
+        expect(mockDispatch).not.toBeCalled();
+      });
+    });
+
+    it('sets source when `autoCall` is false and when indexFieldsSearch is called', async () => {
+      await act(async () => {
+        const { rerender, waitForNextUpdate, result } = renderHook<
+          string,
+          ReturnType<typeof useIndexFields>
+        >(() => useIndexFields(SourcererScopeName.default, false), {
+          wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+        });
+        await waitForNextUpdate();
+        rerender();
+
+        result.current.indexFieldsSearch(sourcererState.defaultDataView.id);
+
+        expect(mockDispatch).toHaveBeenCalledTimes(2);
+        expect(mockDispatch.mock.calls[0][0]).toHaveProperty(
+          'type',
+          'x-pack/security_solution/local/sourcerer/SET_SOURCERER_SCOPE_LOADING'
+        );
+        expect(mockDispatch.mock.calls[1][0]).toHaveProperty(
+          'type',
+          'x-pack/security_solution/local/sourcerer/SET_SOURCE'
+        );
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, fireEvent, act, screen } from '@testing-library/react';
+import React from 'react';
+import { SourcererScopeName } from '../../../common/store/sourcerer/model';
+import { CreateFieldButton } from './index';
+import {
+  indexPatternFieldEditorPluginMock,
+  Start,
+} from '../../../../../../../src/plugins/index_pattern_field_editor/public/mocks';
+
+import { TestProviders } from '../../../common/mock';
+import { useKibana } from '../../../common/lib/kibana';
+import { DataView } from '../../../../../../../src/plugins/data/common';
+
+const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
+
+let mockIndexPatternFieldEditor: Start;
+jest.mock('../../../common/lib/kibana');
+
+jest.mock('../../../common/containers/source', () => ({ useIndexFields: () => ({}) }));
+
+const runAllPromises = () => new Promise(setImmediate);
+
+describe('CreateFieldButton', () => {
+  beforeEach(() => {
+    mockIndexPatternFieldEditor = indexPatternFieldEditorPluginMock.createStartContract();
+    useKibanaMock().services.indexPatternFieldEditor = mockIndexPatternFieldEditor;
+    useKibanaMock().services.data.dataViews.get = () => new Promise(() => undefined);
+  });
+
+  it('displays the button when user has permissions', () => {
+    mockIndexPatternFieldEditor.userPermissions.editIndexPattern = () => true;
+
+    render(
+      <CreateFieldButton
+        selectedDataViewId={'dataViewId'}
+        onClick={() => undefined}
+        scopeId={SourcererScopeName.timeline}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it("doesn't display the button when user doesn't have permissions", () => {
+    mockIndexPatternFieldEditor.userPermissions.editIndexPattern = () => false;
+    render(
+      <CreateFieldButton
+        selectedDataViewId={'dataViewId'}
+        onClick={() => undefined}
+        scopeId={SourcererScopeName.timeline}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it("calls 'onClick' param when the button is clicked", async () => {
+    mockIndexPatternFieldEditor.userPermissions.editIndexPattern = () => true;
+    useKibanaMock().services.data.dataViews.get = () => Promise.resolve({} as DataView);
+
+    const onClickParam = jest.fn();
+    await act(async () => {
+      render(
+        <CreateFieldButton
+          selectedDataViewId={'dataViewId'}
+          onClick={onClickParam}
+          scopeId={SourcererScopeName.timeline}
+        />,
+        { wrapper: TestProviders }
+      );
+      await runAllPromises();
+    });
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(onClickParam).toHaveBeenCalled();
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { EuiButton, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 import styled from 'styled-components';
 
 import { IndexPattern } from '../../../../../../../src/plugins/data/public';
@@ -46,7 +46,6 @@ export const CreateFieldButton = React.memo<CreateFieldButtonProps>(
       if (dataView) {
         indexPatternFieldEditor?.openEditor({
           ctx: { indexPattern: dataView },
-          // fieldName: item.fieldName, edit?
           onSave: () => {
             indexFieldsSearch(selectedDataViewId);
           },
@@ -76,22 +75,3 @@ export const CreateFieldButton = React.memo<CreateFieldButtonProps>(
 );
 
 CreateFieldButton.displayName = 'CreateFieldButton';
-
-// MUST HAVE
-// [x] alerts - Fix scope id bug. When I call useIndexFields it fetch the data and set t-grid loading state...
-// [x] Close modal
-// [x] refetch data after creating field
-// [x] check user permissions
-// [x] timeline
-// [x] display flyout over timeline (z-index issue)
-// [x] Fix create field loading state
-
-// TODO
-// Add cypress test
-// Fix unit tests
-
-// NICE TO HAVE
-// Change "create field" flyout subtitle
-// edit field
-// delete field
-// automaticaly display the added field? (it shows on one mockup)
diff --git a/x-pack/plugins/security_solution/public/timelines/components/create_field_button/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/create_field_button/translations.ts
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
@@ -45,7 +45,7 @@ import { Events } from './events';
 import { DEFAULT_ICON_BUTTON_WIDTH } from '../helpers';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
-import { CreateFieldButton } from '../../create_runtime_field';
+import { CreateFieldButton } from '../../create_field_button';
 import { SelectedDataView } from '../../../../common/store/sourcerer/selectors';
 
 interface OwnProps {
@@ -234,11 +234,11 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     );
 
     const createFieldComponent = useMemo(() => {
-      // It has to receive onClick props from TGrid in order to close browserFields modal.
+      // It receives onClick props from field browser in order to close the modal.
       const CreateFieldButtonComponent: CreateFieldComponentType = ({ onClick }) => (
         <CreateFieldButton
           selectedDataViewId={dataViewId}
-          onClick={onClick} // close browserField and make sure create field modal is on top of timeline modal
+          onClick={onClick}
           scopeId={SourcererScopeName.timeline}
         />
       );
diff --git a/x-pack/plugins/timelines/public/components/t_grid/toolbar/fields_browser/field_browser.tsx b/x-pack/plugins/timelines/public/components/t_grid/toolbar/fields_browser/field_browser.tsx
@@ -208,7 +208,7 @@ const FieldsBrowserComponent: React.FC<Props> = ({
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              {CreateField && <CreateField onClick={closeAndRestoreFocus} />}
+              {CreateField && <CreateField onClick={onHide} />}
             </EuiFlexItem>
           </EuiFlexGroup>
 
diff --git a/x-pack/yarn.lock b/x-pack/yarn.lock
