PR comments

elastic · Jan 13, 2020 · 31a69a9 · 31a69a9
1 parent 8c2cb5c
commit 31a69a9
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 86 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
@@ -16,7 +16,6 @@ import { StatefulEventsViewer } from '.';
 import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { eventsDefaultModel } from './default_model';
-import { BUTTON_CLASS } from '../inspect';
 
 const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock;
 jest.mock('../../containers/detection_engine/rules/fetch_index_patterns');
@@ -58,7 +57,8 @@ describe('StatefulEventsViewer', () => {
     ).toBe(true);
   });
 
-  test('it renders a transparent inspect button when it does NOT have mouse focus', async () => {
+  // InspectButtonContainer controls displaying InspectButton components
+  test('it renders InspectButtonContainer', async () => {
     const wrapper = mount(
       <TestProviders>
         <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
@@ -75,30 +75,6 @@ describe('StatefulEventsViewer', () => {
     await wait();
     wrapper.update();
 
-    expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
-      modifier: `.${BUTTON_CLASS}`,
-    });
-  });
-
-  test('it renders an opaque inspect button when it has mouse focus', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
-          <StatefulEventsViewer
-            defaultModel={eventsDefaultModel}
-            end={to}
-            id={'test-stateful-events-viewer'}
-            start={from}
-          />
-        </MockedProvider>
-      </TestProviders>
-    );
-
-    await wait();
-    wrapper.update();
-
-    expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
-      modifier: `:hover .${BUTTON_CLASS}`,
-    });
+    expect(wrapper.find(`InspectButtonContainer`).exists()).toBe(true);
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx
@@ -17,7 +17,7 @@ import {
 import { createStore, State } from '../../store';
 import { UpdateQueryParams, upsertQuery } from '../../store/inputs/helpers';
 
-import { InspectButton } from '.';
+import { InspectButton, InspectButtonContainer, BUTTON_CLASS } from '.';
 import { cloneDeep } from 'lodash/fp';
 
 describe('Inspect Button', () => {
@@ -114,6 +114,36 @@ describe('Inspect Button', () => {
       );
       expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
     });
+
+    describe('InspectButtonContainer', () => {
+      test('it renders a transparent inspect button by default', async () => {
+        const wrapper = mount(
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButtonContainer>
+              <InspectButton queryId={newQuery.id} title="My title" />
+            </InspectButtonContainer>
+          </TestProviderWithoutDragAndDrop>
+        );
+
+        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
+          modifier: `.${BUTTON_CLASS}`,
+        });
+      });
+
+      test('it renders an opaque inspect button when it has mouse focus', async () => {
+        const wrapper = mount(
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButtonContainer>
+              <InspectButton queryId={newQuery.id} title="My title" />
+            </InspectButtonContainer>
+          </TestProviderWithoutDragAndDrop>
+        );
+
+        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
+          modifier: `:hover .${BUTTON_CLASS}`,
+        });
+      });
+    });
   });
 
   describe('Modal Inspect - happy path', () => {