[Workplace Search] Add tests for Custom Source Display Settings

x-pack/plugins/enterprise_search/public/applications/workplace_search/__mocks__/content_sources.mock.ts

@@ -226,3 +226,26 @@ export const sourceConfigData = {
     consumerKey: 'elastic_enterprise_search_123',
   },
 };
+
+export const exampleResult = {
+  sourceName: 'source',
+  searchResultConfig: {
+    titleField: 'otherTitle',
+    subtitleField: 'otherSubtitle',
+    urlField: 'myLink',
+    color: '#e3e3e3',
+    descriptionField: 'about',
+    detailFields: [
+      { fieldName: 'cats', label: 'Felines' },
+      { fieldName: 'dogs', label: 'Canines' },
+    ],
+  },
+  titleFieldHover: false,
+  urlFieldHover: false,
+  exampleDocuments: [
+    {
+      myLink: 'http://foo',
+      otherTitle: 'foo',
+    },
+  ],
+};

x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts

@@ -181,7 +181,7 @@ export interface CustomSource {
 }
 
 export interface Result {
-  [key: string]: string;
+  [key: string]: string | string[];
 }
 
 export interface OptionValue {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/custom_source_icon.test.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { CustomSourceIcon } from './custom_source_icon';
+
+describe('CustomSourceIcon', () => {
+  it('renders', () => {
+    const wrapper = shallow(<CustomSourceIcon />);
+
+    expect(wrapper.find('svg')).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.test.tsx

@@ -0,0 +1,157 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import '../../../../../__mocks__/shallow_useeffect.mock';
+
+import { mockKibanaValues } from '../../../../../__mocks__';
+
+import { setMockValues, setMockActions } from '../../../../../__mocks__';
+import { unmountHandler } from '../../../../../__mocks__/shallow_useeffect.mock';
+
+import { shallow } from 'enzyme';
+
+import React from 'react';
+
+import { EuiButton, EuiTabbedContent } from '@elastic/eui';
+
+import { exampleResult } from '../../../../__mocks__/content_sources.mock';
+
+import { Loading } from '../../../../../shared/loading';
+import { ViewContentHeader } from '../../../../components/shared/view_content_header';
+
+import { FieldEditorModal } from './field_editor_modal';
+
+import { DisplaySettings } from './display_settings';
+
+describe('DisplaySettings', () => {
+  const { navigateToUrl } = mockKibanaValues;
+  const { exampleDocuments, searchResultConfig } = exampleResult;
+  const initializeDisplaySettings = jest.fn();
+  const setServerData = jest.fn();
+  const setColorField = jest.fn();
+
+  const values = {
+    isOrganization: true,
+    dataLoading: false,
+    sourceId: '123',
+    addFieldModalVisible: false,
+    unsavedChanges: false,
+    exampleDocuments,
+    searchResultConfig,
+  };
+
+  beforeEach(() => {
+    setMockActions({
+      initializeDisplaySettings,
+      setServerData,
+      setColorField,
+    });
+    setMockValues({ ...values });
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<DisplaySettings tabId={0} />);
+
+    expect(wrapper.find('form')).toHaveLength(1);
+  });
+
+  it('returns loading when loading', () => {
+    setMockValues({ ...values, dataLoading: true });
+    const wrapper = shallow(<DisplaySettings tabId={0} />);
+
+    expect(wrapper.find(Loading)).toHaveLength(1);
+  });
+
+  it('handles window.onbeforeunload change', () => {
+    setMockValues({ ...values, unsavedChanges: true });
+    shallow(<DisplaySettings tabId={0} />);
+
+    unmountHandler();
+
+    expect(window.onbeforeunload).toEqual(null);
+  });
+
+  it('handles window.onbeforeunload unmount', () => {
+    setMockValues({ ...values, unsavedChanges: true });
+    shallow(<DisplaySettings tabId={0} />);
+
+    expect(window.onbeforeunload!({} as any)).toEqual(
+      'Your display settings have not been saved. Are you sure you want to leave?'
+    );
+  });
+
+  describe('tabbed content', () => {
+    const tabs = [
+      {
+        id: 'search_results',
+        name: 'Search Results',
+        content: <></>,
+      },
+      {
+        id: 'result_detail',
+        name: 'Result Detail',
+        content: <></>,
+      },
+    ];
+
+    it('handles first tab click', () => {
+      const wrapper = shallow(<DisplaySettings tabId={0} />);
+      const tabsEl = wrapper.find(EuiTabbedContent);
+      tabsEl.prop('onTabClick')!(tabs[0]);
+
+      expect(navigateToUrl).toHaveBeenCalledWith('/sources/123/display_settings/');
+    });
+
+    it('handles second tab click', () => {
+      const wrapper = shallow(<DisplaySettings tabId={0} />);
+      const tabsEl = wrapper.find(EuiTabbedContent);
+      tabsEl.prop('onTabClick')!(tabs[1]);
+
+      expect(navigateToUrl).toHaveBeenCalledWith('/sources/123/display_settings/result_detail');
+    });
+  });
+
+  describe('header action', () => {
+    it('renders button when hasDocuments', () => {
+      const wrapper = shallow(<DisplaySettings tabId={0} />);
+      const button = (
+        <EuiButton type="submit" disabled fill>
+          Save
+        </EuiButton>
+      );
+
+      expect(wrapper.find(ViewContentHeader).prop('action')).toStrictEqual(button);
+    });
+
+    it('renders null when no documents', () => {
+      setMockValues({ ...values, exampleDocuments: [] });
+      const wrapper = shallow(<DisplaySettings tabId={0} />);
+
+      expect(wrapper.find(ViewContentHeader).prop('action')).toBeNull();
+    });
+  });
+
+  it('submits the form', () => {
+    const wrapper = shallow(<DisplaySettings tabId={0} />);
+    const simulatedEvent = {
+      form: 0,
+      target: { getAttribute: () => '_self' },
+      preventDefault: jest.fn(),
+    };
+
+    const form = wrapper.find('form');
+    form.simulate('submit', simulatedEvent);
+    expect(simulatedEvent.preventDefault).toHaveBeenCalled();
+    expect(setServerData).toHaveBeenCalled();
+  });
+
+  it('renders FieldEditorModal', () => {
+    setMockValues({ ...values, addFieldModalVisible: true });
+    const wrapper = shallow(<DisplaySettings tabId={0} />);
+
+    expect(wrapper.find(FieldEditorModal)).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.tsx

@@ -6,9 +6,7 @@
 
 import React, { FormEvent, useEffect } from 'react';
 
-import { History } from 'history';
 import { useActions, useValues } from 'kea';
-import { useHistory } from 'react-router-dom';
 
 import './display_settings.scss';
 
@@ -26,6 +24,9 @@ import {
   getContentSourcePath,
 } from '../../../../routes';
 
+import { clearFlashMessages } from '../../../../../shared/flash_messages';
+
+import { KibanaLogic } from '../../../../../shared/kibana';
 import { AppLogic } from '../../../../app_logic';
 
 import { Loading } from '../../../../../shared/loading';
@@ -45,10 +46,7 @@ interface DisplaySettingsProps {
 }
 
 export const DisplaySettings: React.FC<DisplaySettingsProps> = ({ tabId }) => {
-  const history = useHistory() as History;
-  const { initializeDisplaySettings, setServerData, resetDisplaySettingsState } = useActions(
-    DisplaySettingsLogic
-  );
+  const { initializeDisplaySettings, setServerData } = useActions(DisplaySettingsLogic);
 
   const {
     dataLoading,
@@ -64,7 +62,7 @@ export const DisplaySettings: React.FC<DisplaySettingsProps> = ({ tabId }) => {
 
   useEffect(() => {
     initializeDisplaySettings();
-    return resetDisplaySettingsState;
+    return clearFlashMessages;
   }, []);
 
   useEffect(() => {
@@ -95,7 +93,7 @@ export const DisplaySettings: React.FC<DisplaySettingsProps> = ({ tabId }) => {
         ? getContentSourcePath(DISPLAY_SETTINGS_RESULT_DETAIL_PATH, sourceId, isOrganization)
         : getContentSourcePath(DISPLAY_SETTINGS_SEARCH_RESULT_PATH, sourceId, isOrganization);
 
-    history.push(path);
+    KibanaLogic.values.navigateToUrl(path);
   };
 
   const handleFormSubmit = (e: FormEvent) => {