unit test

Author: angorayc

x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.test.tsx

@@ -4,40 +4,169 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
+import { mount, ReactWrapper, shallow } from 'enzyme';
 import React from 'react';
+import * as redux from 'react-redux';
+import { act } from 'react-dom/test-utils';
 
 import '../../../common/mock/match_media';
 import { useIndexPatterns } from '../../../common/hooks/use_index_patterns';
 import { TestProviders } from '../../../common/mock';
 
 import { EmbeddedMapComponent } from './embedded_map';
+import { createEmbeddable } from './embedded_map_helpers';
 
 const mockUseIndexPatterns = useIndexPatterns as jest.Mock;
 jest.mock('../../../common/hooks/use_index_patterns');
 mockUseIndexPatterns.mockImplementation(() => [true, []]);
 
 jest.mock('../../../common/lib/kibana');
+jest.mock('./embedded_map_helpers', () => ({
+  createEmbeddable: jest.fn(),
+}));
+jest.mock('../../../common/lib/kibana', () => {
+  return {
+    useKibana: jest.fn().mockReturnValue({
+      services: {
+        embeddable: {
+          EmbeddablePanel: jest.fn(() => <div data-test-subj="EmbeddablePanel" />),
+        },
+        docLinks: { ELASTIC_WEBSITE_URL: 'ELASTIC_WEBSITE_URL' },
+      },
+    }),
+  };
+});
+
+jest.mock('./index_patterns_missing_prompt', () => {
+  return {
+    IndexPatternsMissingPrompt: jest.fn(() => <div data-test-subj="IndexPatternsMissingPrompt" />),
+  };
+});
 
 describe('EmbeddedMapComponent', () => {
-  let setQuery: jest.Mock;
+  const setQuery: jest.Mock = jest.fn();
+  const mockSelector = {
+    kibanaIndexPatterns: [
+      { id: '6f1eeb50-023d-11eb-bcb6-6ba0578012a9', title: 'filebeat-*' },
+      { id: '28995490-023d-11eb-bcb6-6ba0578012a9', title: 'auditbeat-*' },
+    ],
+    sourcererScope: { selectedPatterns: ['filebeat-*', 'packetbeat-*'] },
+  };
+  const mockCreateEmbeddable = {
+    destroyed: false,
+    enhancements: { dynamicActions: {} },
+    getActionContext: jest.fn(),
+    getFilterActions: jest.fn(),
+    id: '70969ddc-4d01-4048-8073-4ea63d595638',
+    input: {
+      viewMode: 'view',
+      title: 'Source -> Destination Point-to-Point Map',
+      id: '70969ddc-4d01-4048-8073-4ea63d595638',
+      filters: Array(0),
+      hidePanelTitles: true,
+    },
+    input$: {},
+    isContainer: false,
+    output: {},
+    output$: {},
+    parent: undefined,
+    parentSubscription: undefined,
+    renderComplete: {},
+    runtimeId: 1,
+    reload: jest.fn(),
+    setLayerList: jest.fn(),
+    setEventHandlers: jest.fn(),
+    setRenderTooltipContent: jest.fn(),
+    type: 'map',
+    updateInput: jest.fn(),
+  };
+  const testProps = {
+    endDate: '2019-08-28T05:50:57.877Z',
+    filters: [],
+    query: { query: '', language: 'kuery' },
+    setQuery,
+    startDate: '2019-08-28T05:50:47.877Z',
+  };
 
   beforeEach(() => {
-    setQuery = jest.fn();
+    setQuery.mockClear();
   });
 
   test('renders correctly against snapshot', () => {
     const wrapper = shallow(
       <TestProviders>
-        <EmbeddedMapComponent
-          endDate="2019-08-28T05:50:57.877Z"
-          filters={[]}
-          query={{ query: '', language: 'kuery' }}
-          setQuery={setQuery}
-          startDate="2019-08-28T05:50:47.877Z"
-        />
+        <EmbeddedMapComponent {...testProps} />
       </TestProviders>
     );
     expect(wrapper.find('EmbeddedMapComponent')).toMatchSnapshot();
   });
+
+  test('renders services.embeddable.EmbeddablePanel', async () => {
+    const spy = jest.spyOn(redux, 'useSelector');
+    spy.mockReturnValue(mockSelector);
+
+    (createEmbeddable as jest.Mock).mockResolvedValue(mockCreateEmbeddable);
+
+    let wrapper: ReactWrapper;
+    await act(async () => {
+      wrapper = mount(
+        <TestProviders>
+          <EmbeddedMapComponent {...testProps} />
+        </TestProviders>
+      );
+    });
+
+    wrapper!.update();
+
+    expect(wrapper!.find('[data-test-subj="EmbeddablePanel"]').exists()).toEqual(true);
+    expect(wrapper!.find('[data-test-subj="IndexPatternsMissingPrompt"]').exists()).toEqual(false);
+    expect(wrapper!.find('[data-test-subj="loading-panel"]').exists()).toEqual(false);
+  });
+
+  test('renders IndexPatternsMissingPrompt', async () => {
+    const spy = jest.spyOn(redux, 'useSelector');
+    spy.mockReturnValue({
+      ...mockSelector,
+      kibanaIndexPatterns: [],
+    });
+
+    (createEmbeddable as jest.Mock).mockResolvedValue(mockCreateEmbeddable);
+
+    let wrapper: ReactWrapper;
+    await act(async () => {
+      wrapper = mount(
+        <TestProviders>
+          <EmbeddedMapComponent {...testProps} />
+        </TestProviders>
+      );
+    });
+
+    wrapper!.update();
+
+    expect(wrapper!.find('[data-test-subj="EmbeddablePanel"]').exists()).toEqual(false);
+    expect(wrapper!.find('[data-test-subj="IndexPatternsMissingPrompt"]').exists()).toEqual(true);
+    expect(wrapper!.find('[data-test-subj="loading-panel"]').exists()).toEqual(false);
+  });
+
+  test('renders Loader', async () => {
+    const spy = jest.spyOn(redux, 'useSelector');
+    spy.mockReturnValue(mockSelector);
+
+    (createEmbeddable as jest.Mock).mockResolvedValue(null);
+
+    let wrapper: ReactWrapper;
+    await act(async () => {
+      wrapper = mount(
+        <TestProviders>
+          <EmbeddedMapComponent {...testProps} />
+        </TestProviders>
+      );
+    });
+
+    wrapper!.update();
+
+    expect(wrapper!.find('[data-test-subj="EmbeddablePanel"]').exists()).toEqual(false);
+    expect(wrapper!.find('[data-test-subj="IndexPatternsMissingPrompt"]').exists()).toEqual(false);
+    expect(wrapper!.find('[data-test-subj="loading-panel"]').exists()).toEqual(true);
+  });
 });

x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx

@@ -118,6 +118,9 @@ export const EmbeddedMapComponent = ({
         sourcererScope.selectedPatterns.includes(kip.title)
       );
       if (!deepEqual(newIndexPatterns, prevMapIndexPatterns)) {
+        if (newIndexPatterns.length === 0) {
+          setIsError(true);
+        }
         return newIndexPatterns;
       }
       return prevMapIndexPatterns;
@@ -143,7 +146,6 @@ export const EmbeddedMapComponent = ({
         if (isSubscribed) {
           if (mapIndexPatterns.length === 0) {
             setIsIndexError(true);
-            return;
           } else {
             setEmbeddable(embeddableObject);
             setIsIndexError(false);
@@ -156,7 +158,6 @@ export const EmbeddedMapComponent = ({
         }
       }
     }
-
     if (embeddable == null && sourcererScope.selectedPatterns.length > 0) {
       setupEmbeddable();
     }
@@ -237,10 +238,10 @@ export const EmbeddedMapComponent = ({
       </InPortal>
 
       <EmbeddableMap maintainRatio={!isIndexError}>
-        {embeddable != null && !isIndexError ? (
-          <services.embeddable.EmbeddablePanel embeddable={embeddable} />
-        ) : isIndexError ? (
+        {isIndexError ? (
           <IndexPatternsMissingPrompt data-test-subj="missing-prompt" />
+        ) : embeddable != null ? (
+          <services.embeddable.EmbeddablePanel embeddable={embeddable} />
         ) : (
           <Loader data-test-subj="loading-panel" overlay size="xl" />
         )}