fix unit tests

elastic · Jan 8, 2020 · cb3b850 · cb3b850
1 parent 7634187
commit cb3b850
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 136 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx
@@ -75,12 +75,9 @@ describe('StatefulEventsViewer', () => {
     await wait();
     wrapper.update();
 
-    expect(
-      wrapper
-        .find(`.${BUTTON_CLASS}`)
-        .first()
-        .exists()
-    ).toHaveStyleRule('opacity', 0);
+    expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
+      modifier: `.${BUTTON_CLASS}`,
+    });
   });
 
   test('it renders an opaque inspect button when it has mouse focus', async () => {
@@ -100,14 +97,8 @@ describe('StatefulEventsViewer', () => {
     await wait();
     wrapper.update();
 
-    wrapper.simulate('mouseenter');
-    wrapper.update();
-
-    expect(
-      wrapper
-        .find(`.${BUTTON_CLASS}`)
-        .first()
-        .exists()
-    ).toHaveStyleRule('opacity', 1);
+    expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
+      modifier: `:hover .${BUTTON_CLASS}`,
+    });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx
@@ -84,128 +84,102 @@ interface DispatchProps {
 
 type Props = OwnProps & StateReduxProps & DispatchProps;
 
-const StatefulEventsViewerComponent = React.memo<Props>(
-  ({
-    createTimeline,
-    columns,
-    dataProviders,
-    defaultModel,
-    deletedEventIds,
-    defaultIndices,
-    deleteEventQuery,
-    end,
-    filters,
-    headerFilterGroup,
-    id,
-    isLive,
-    itemsPerPage,
-    itemsPerPageOptions,
-    kqlMode,
-    pageFilters = [],
-    query,
-    removeColumn,
-    start,
-    showCheckboxes,
-    showRowRenderers,
-    sort,
-    timelineTypeContext = {
-      loadingText: i18n.LOADING_EVENTS,
-    },
-    updateItemsPerPage,
-    upsertColumn,
-    utilityBar,
-  }) => {
-    const [{ browserFields, indexPatterns }] = useFetchIndexPatterns(
-      defaultIndices ?? useUiSetting<string[]>(DEFAULT_INDEX_KEY)
-    );
-
-    useEffect(() => {
-      if (createTimeline != null) {
-        createTimeline({ id, columns, sort, itemsPerPage, showCheckboxes, showRowRenderers });
-      }
-      return () => {
-        deleteEventQuery({ id, inputId: 'global' });
-      };
-    }, []);
-
-    const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback(
-      itemsChangedPerPage => updateItemsPerPage({ id, itemsPerPage: itemsChangedPerPage }),
-      [id, updateItemsPerPage]
-    );
-
-    const toggleColumn = useCallback(
-      (column: ColumnHeader) => {
-        const exists = columns.findIndex(c => c.id === column.id) !== -1;
-
-        if (!exists && upsertColumn != null) {
-          upsertColumn({
-            column,
-            id,
-            index: 1,
-          });
-        }
-
-        if (exists && removeColumn != null) {
-          removeColumn({
-            columnId: column.id,
-            id,
-          });
-        }
-      },
-      [columns, id, upsertColumn, removeColumn]
-    );
-
-    return (
-      <InspectButtonContainer>
-        <EventsViewer
-          browserFields={browserFields ?? {}}
-          columns={columns}
-          id={id}
-          dataProviders={dataProviders!}
-          deletedEventIds={deletedEventIds}
-          end={end}
-          filters={filters}
-          headerFilterGroup={headerFilterGroup}
-          indexPattern={indexPatterns ?? { fields: [], title: '' }}
-          isLive={isLive}
-          itemsPerPage={itemsPerPage!}
-          itemsPerPageOptions={itemsPerPageOptions!}
-          kqlMode={kqlMode}
-          onChangeItemsPerPage={onChangeItemsPerPage}
-          query={query}
-          start={start}
-          sort={sort!}
-          timelineTypeContext={timelineTypeContext}
-          toggleColumn={toggleColumn}
-          utilityBar={utilityBar}
-        />
-      </InspectButtonContainer>
-    );
+const StatefulEventsViewerComponent: React.FC<Props> = ({
+  createTimeline,
+  columns,
+  dataProviders,
+  deletedEventIds,
+  defaultIndices,
+  deleteEventQuery,
+  end,
+  filters,
+  headerFilterGroup,
+  id,
+  isLive,
+  itemsPerPage,
+  itemsPerPageOptions,
+  kqlMode,
+  pageFilters = [],
+  query,
+  removeColumn,
+  start,
+  showCheckboxes,
+  showRowRenderers,
+  sort,
+  timelineTypeContext = {
+    loadingText: i18n.LOADING_EVENTS,
   },
-  (prevProps, nextProps) =>
-    prevProps.id === nextProps.id &&
-    isEqual(prevProps.columns, nextProps.columns) &&
-    isEqual(prevProps.dataProviders, nextProps.dataProviders) &&
-    prevProps.deletedEventIds === nextProps.deletedEventIds &&
-    prevProps.end === nextProps.end &&
-    isEqual(prevProps.filters, nextProps.filters) &&
-    prevProps.isLive === nextProps.isLive &&
-    prevProps.itemsPerPage === nextProps.itemsPerPage &&
-    isEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
-    prevProps.kqlMode === nextProps.kqlMode &&
-    isEqual(prevProps.query, nextProps.query) &&
-    prevProps.pageCount === nextProps.pageCount &&
-    isEqual(prevProps.sort, nextProps.sort) &&
-    prevProps.start === nextProps.start &&
-    isEqual(prevProps.pageFilters, nextProps.pageFilters) &&
-    prevProps.showCheckboxes === nextProps.showCheckboxes &&
-    prevProps.showRowRenderers === nextProps.showRowRenderers &&
-    prevProps.start === nextProps.start &&
-    isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
-    prevProps.utilityBar === nextProps.utilityBar
-);
+  updateItemsPerPage,
+  upsertColumn,
+  utilityBar,
+}) => {
+  const [{ browserFields, indexPatterns }] = useFetchIndexPatterns(
+    defaultIndices ?? useUiSetting<string[]>(DEFAULT_INDEX_KEY)
+  );
+
+  useEffect(() => {
+    if (createTimeline != null) {
+      createTimeline({ id, columns, sort, itemsPerPage, showCheckboxes, showRowRenderers });
+    }
+    return () => {
+      deleteEventQuery({ id, inputId: 'global' });
+    };
+  }, []);
+
+  const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback(
+    itemsChangedPerPage => updateItemsPerPage({ id, itemsPerPage: itemsChangedPerPage }),
+    [id, updateItemsPerPage]
+  );
+
+  const toggleColumn = useCallback(
+    (column: ColumnHeader) => {
+      const exists = columns.findIndex(c => c.id === column.id) !== -1;
+
+      if (!exists && upsertColumn != null) {
+        upsertColumn({
+          column,
+          id,
+          index: 1,
+        });
+      }
 
-StatefulEventsViewerComponent.displayName = 'StatefulEventsViewerComponent';
+      if (exists && removeColumn != null) {
+        removeColumn({
+          columnId: column.id,
+          id,
+        });
+      }
+    },
+    [columns, id, upsertColumn, removeColumn]
+  );
+
+  return (
+    <InspectButtonContainer>
+      <EventsViewer
+        browserFields={browserFields ?? {}}
+        columns={columns}
+        id={id}
+        dataProviders={dataProviders!}
+        deletedEventIds={deletedEventIds}
+        end={end}
+        filters={filters}
+        headerFilterGroup={headerFilterGroup}
+        indexPattern={indexPatterns ?? { fields: [], title: '' }}
+        isLive={isLive}
+        itemsPerPage={itemsPerPage!}
+        itemsPerPageOptions={itemsPerPageOptions!}
+        kqlMode={kqlMode}
+        onChangeItemsPerPage={onChangeItemsPerPage}
+        query={query}
+        start={start}
+        sort={sort!}
+        timelineTypeContext={timelineTypeContext}
+        toggleColumn={toggleColumn}
+        utilityBar={utilityBar}
+      />
+    </InspectButtonContainer>
+  );
+};
 
 const makeMapStateToProps = () => {
   const getInputsTimeline = inputsSelectors.getTimelineSelector();
@@ -252,4 +226,29 @@ export const StatefulEventsViewer = connect(makeMapStateToProps, {
   updateItemsPerPage: timelineActions.updateItemsPerPage,
   removeColumn: timelineActions.removeColumn,
   upsertColumn: timelineActions.upsertColumn,
-})(StatefulEventsViewerComponent);
+})(
+  React.memo(
+    StatefulEventsViewerComponent,
+    (prevProps, nextProps) =>
+      prevProps.id === nextProps.id &&
+      isEqual(prevProps.columns, nextProps.columns) &&
+      isEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      prevProps.deletedEventIds === nextProps.deletedEventIds &&
+      prevProps.end === nextProps.end &&
+      isEqual(prevProps.filters, nextProps.filters) &&
+      prevProps.isLive === nextProps.isLive &&
+      prevProps.itemsPerPage === nextProps.itemsPerPage &&
+      isEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
+      prevProps.kqlMode === nextProps.kqlMode &&
+      isEqual(prevProps.query, nextProps.query) &&
+      prevProps.pageCount === nextProps.pageCount &&
+      isEqual(prevProps.sort, nextProps.sort) &&
+      prevProps.start === nextProps.start &&
+      isEqual(prevProps.pageFilters, nextProps.pageFilters) &&
+      prevProps.showCheckboxes === nextProps.showCheckboxes &&
+      prevProps.showRowRenderers === nextProps.showRowRenderers &&
+      prevProps.start === nextProps.start &&
+      isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
+      prevProps.utilityBar === nextProps.utilityBar
+  )
+);
diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx
@@ -38,6 +38,8 @@ export const InspectButtonContainer = styled.div<{ show?: boolean }>`
     `}
 `;
 
+InspectButtonContainer.displayName = 'InspectButtonContainer';
+
 InspectButtonContainer.defaultProps = {
   show: true,
 };
-Original file line number
+Diff line change
@@ Expand Up @@
         `}
     `;
+    InspectButtonContainer.displayName = 'InspectButtonContainer';
     InspectButtonContainer.defaultProps = {
       show: true,
     };
@@ Expand Down @@