fix unit test

elastic · Aug 13, 2021 · a17d13f · a17d13f
1 parent 3c576a3
commit a17d13f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 12 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/columns.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/columns.test.tsx
@@ -11,6 +11,7 @@ import { TestProviders } from '../../mock';
 import { useMountAppended } from '../../utils/use_mount_appended';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { EventFieldsData } from './types';
+import { get } from 'lodash/fp';
 
 jest.mock('../../lib/kibana');
 interface Column {
@@ -78,13 +79,13 @@ describe('getColumns', () => {
       });
     });
 
-    describe('add to timeline', () => {
-      test('it renders an add to timeline button', () => {
+    describe('overflow button', () => {
+      test('it renders an overflow button', () => {
         const wrapper = mount(
           <TestProviders>{actionsColumn.render(testValue, testData)}</TestProviders>
         ) as ReactWrapper;
 
-        expect(wrapper.find('[data-test-subj="hover-actions-add-timeline"]').exists()).toBeTruthy();
+        expect(wrapper.find('[data-test-subj="more-actions-agent.id"]').exists()).toBeTruthy();
       });
     });
 
@@ -95,8 +96,32 @@ describe('getColumns', () => {
         ) as ReactWrapper;
 
         expect(
-          wrapper.find('[data-test-subj="hover-actions-toggle-column"]').exists()
-        ).toBeTruthy();
+          get(['items', 0, 'key'], wrapper.find('[data-test-subj="more-actions-agent.id"]').props())
+        ).toEqual('hover-actions-toggle-column');
+      });
+    });
+
+    describe('add to timeline', () => {
+      test('it renders an add to timeline button', () => {
+        const wrapper = mount(
+          <TestProviders>{actionsColumn.render(testValue, testData)}</TestProviders>
+        ) as ReactWrapper;
+
+        expect(
+          get(['items', 1, 'key'], wrapper.find('[data-test-subj="more-actions-agent.id"]').props())
+        ).toEqual('hover-actions-add-timeline');
+      });
+    });
+
+    describe('topN', () => {
+      test('it renders a show topN button', () => {
+        const wrapper = mount(
+          <TestProviders>{actionsColumn.render(testValue, testData)}</TestProviders>
+        ) as ReactWrapper;
+
+        expect(
+          get(['items', 2, 'key'], wrapper.find('[data-test-subj="more-actions-agent.id"]').props())
+        ).toEqual('hover-actions-show-top-n');
       });
     });
 
@@ -106,7 +131,9 @@ describe('getColumns', () => {
           <TestProviders>{actionsColumn.render(testValue, testData)}</TestProviders>
         ) as ReactWrapper;
 
-        expect(wrapper.find('[data-test-subj="hover-actions-copy-button"]').exists()).toBeTruthy();
+        expect(
+          get(['items', 3, 'key'], wrapper.find('[data-test-subj="more-actions-agent.id"]').props())
+        ).toEqual('hover-actions-copy-button');
       });
     });
   });

diff --git a/...ns/security_solution/public/common/components/event_details/event_fields_browser.test.tsx b/...ns/security_solution/public/common/components/event_details/event_fields_browser.test.tsx
@@ -14,6 +14,7 @@ import { EventFieldsBrowser } from './event_fields_browser';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { useMountAppended } from '../../utils/use_mount_appended';
 import { TimelineTabs } from '../../../../common/types/timeline';
+import { get } from 'lodash/fp';
 
 jest.mock('../../lib/kibana');
 
@@ -116,7 +117,7 @@ describe('EventFieldsBrowser', () => {
       expect(wrapper.find('[data-test-subj="hover-actions-filter-out"]').exists()).toBeTruthy();
     });
 
-    test('it renders an add to timeline button', () => {
+    test('it renders an overflow button', () => {
       const wrapper = mount(
         <TestProviders>
           <EventFieldsBrowser
@@ -129,7 +130,7 @@ describe('EventFieldsBrowser', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="hover-actions-add-timeline"]').exists()).toBeTruthy();
+      expect(wrapper.find('[data-test-subj="more-actions-@timestamp"]').exists()).toBeTruthy();
     });
 
     test('it renders a column toggle button', () => {
@@ -146,8 +147,26 @@ describe('EventFieldsBrowser', () => {
       );
 
       expect(
-        wrapper.find('[data-test-subj="hover-actions-toggle-column"]').first().exists()
-      ).toBeTruthy();
+        get(['items', 0, 'key'], wrapper.find('[data-test-subj="more-actions-@timestamp"]').props())
+      ).toEqual('hover-actions-toggle-column');
+    });
+
+    test('it renders an add to timeline button', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <EventFieldsBrowser
+            browserFields={mockBrowserFields}
+            data={mockDetailItemData}
+            eventId={eventId}
+            timelineId="test"
+            timelineTabType={TimelineTabs.query}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        get(['items', 1, 'key'], wrapper.find('[data-test-subj="more-actions-@timestamp"]').props())
+      ).toEqual('hover-actions-add-timeline');
     });
 
     test('it renders a copy button', () => {
@@ -163,7 +182,9 @@ describe('EventFieldsBrowser', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="hover-actions-copy-button"]').exists()).toBeTruthy();
+      expect(
+        get(['items', 2, 'key'], wrapper.find('[data-test-subj="more-actions-@timestamp"]').props())
+      ).toEqual('hover-actions-copy-button');
     });
   });
 

diff --git a/x-pack/plugins/timelines/public/mock/mock_hover_actions.tsx b/x-pack/plugins/timelines/public/mock/mock_hover_actions.tsx
@@ -13,5 +13,9 @@ export const mockHoverActions = {
   getCopyButton: () => <>{'Copy button'}</>,
   getFilterForValueButton: () => <>{'Filter button'}</>,
   getFilterOutValueButton: () => <>{'Filter out button'}</>,
-  getOverflowButton: () => <>{'Overflow button'}</>,
+  getOverflowButton: (props: { field: string }) => (
+    <div data-test-subj={`more-actions-${props.field}`} {...props}>
+      {'Overflow button'}
+    </div>
+  ),
 };