[Enterprise Search] Remove all instances of KibanaContext to Kea store (

#78513)

* Add KibanaLogic store/mount

* Update usage of setBreadcrumbs/setDocTitle to KibanaLogic

* Update usage of Kibana config context to KibanaLogic

* Update usage of navigateToUrl context to KibanaLogic

* 🔥 Remove unused shallow_usecontext mocks, repurpose file to shallow_useeffect

- The file is now no longer used to mock useContext, only unseEffect, hence the rename

* 🔥 Delete/repurpose mount with context helpers

- Remove mountWithKibanaContext completely
- Change mountWithContext to mountWithIntl, since that's the only context remaining, and move it to its own file
- Change mountWithAsyncContext to just mountAsync and move it to its own file
  + add an option to pair it w/ mountWithIntl for formatted date/number support

* 🔥 Delete KibanaContext and mockKibanaContext

+ minor newline linting/grouping tweaks

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/__mocks__/index.ts

@@ -5,17 +5,13 @@
  */
 
 export { mockHistory, mockLocation } from './react_router_history.mock';
-export { mockKibanaContext } from './kibana_context.mock';
+export { mockKibanaValues } from './kibana_logic.mock';
 export { mockLicensingValues } from './licensing_logic.mock';
 export { mockHttpValues } from './http_logic.mock';
 export { mockFlashMessagesValues, mockFlashMessagesActions } from './flash_messages_logic.mock';
 export { mockAllValues, mockAllActions, setMockValues } from './kea.mock';
 
-export {
-  mountWithContext,
-  mountWithKibanaContext,
-  mountWithAsyncContext,
-} from './mount_with_context.mock';
+export { mountAsync } from './mount_async.mock';
+export { mountWithIntl } from './mount_with_i18n.mock';
 export { shallowWithIntl } from './shallow_with_i18n.mock';
-
-// Note: shallow_usecontext must be imported directly as a file
+// Note: shallow_useeffect must be imported directly as a file

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

@@ -10,11 +10,13 @@
  * NOTE: These variable names MUST start with 'mock*' in order for
  * Jest to accept its use within a jest.mock()
  */
+import { mockKibanaValues } from './kibana_logic.mock';
 import { mockLicensingValues } from './licensing_logic.mock';
 import { mockHttpValues } from './http_logic.mock';
 import { mockFlashMessagesValues, mockFlashMessagesActions } from './flash_messages_logic.mock';
 
 export const mockAllValues = {
+  ...mockKibanaValues,
   ...mockLicensingValues,
   ...mockHttpValues,
   ...mockFlashMessagesValues,

x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_context.mock.ts → x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_logic.mock.ts

@@ -4,13 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-/**
- * A set of default Kibana context values to use across component tests.
- * @see enterprise_search/public/index.tsx for the KibanaContext definition/import
- */
-export const mockKibanaContext = {
+export const mockKibanaValues = {
+  config: { host: 'http://localhost:3002' },
   navigateToUrl: jest.fn(),
   setBreadcrumbs: jest.fn(),
   setDocTitle: jest.fn(),
-  config: { host: 'http://localhost:3002' },
 };

x-pack/plugins/enterprise_search/public/applications/__mocks__/mount_async.mock.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import { mount, ReactWrapper } from 'enzyme';
+
+import { mountWithIntl } from './';
+
+/**
+ * This helper is intended for components that have async effects
+ * (e.g. http fetches) on mount. It mostly adds act/update boilerplate
+ * that's needed for the wrapper to play nice with Enzyme/Jest
+ *
+ * Example usage:
+ *
+ * const wrapper = mountAsync(<Component />);
+ */
+
+interface IOptions {
+  i18n?: boolean;
+}
+
+export const mountAsync = async (
+  children: React.ReactElement,
+  options: IOptions
+): Promise<ReactWrapper> => {
+  let wrapper: ReactWrapper | undefined;
+
+  // We get a lot of act() warning/errors in the terminal without this.
+  // TBH, I don't fully understand why since Enzyme's mount is supposed to
+  // have act() baked in - could be because of the wrapping context provider?
+  await act(async () => {
+    wrapper = options.i18n ? mountWithIntl(children) : mount(children);
+  });
+  if (wrapper) {
+    wrapper.update(); // This seems to be required for the DOM to actually update
+
+    return wrapper;
+  } else {
+    throw new Error('Could not mount wrapper');
+  }
+};

x-pack/plugins/enterprise_search/public/applications/__mocks__/mount_with_i18n.mock.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 { mount } from 'enzyme';
+import { I18nProvider } from '@kbn/i18n/react';
+
+/**
+ * This helper wraps a component with react-intl's <I18nProvider> which
+ * fixes "Could not find required `intl` object" console errors when running tests
+ *
+ * Example usage (should be the same as mount()):
+ *
+ * const wrapper = mountWithI18n(<Component />);
+ */
+export const mountWithIntl = (children: React.ReactElement) => {
+  return mount(<I18nProvider>{children}</I18nProvider>);
+};

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

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+jest.mock('react', () => ({
+  ...(jest.requireActual('react') as object),
+  useEffect: jest.fn((fn) => fn()), // Calls on mount/every update - use mount for more complex behavior
+}));
+
+/**
+ * Example usage within a component test using shallow():
+ *
+ * import '../../../__mocks__/shallow_useeffect.mock'; // Must come before React's import, adjust relative path as needed
+ *
+ * import React from 'react';
+ * import { shallow } from 'enzyme';
+ *
+ * // ... etc.
+ */

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.test.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { shallow, ReactWrapper } from 'enzyme';
 
-import { mountWithAsyncContext, mockHttpValues, setMockValues } from '../../../__mocks__';
+import { mountAsync, mockHttpValues, setMockValues } from '../../../__mocks__';
 
 import { LoadingState, EmptyState } from './components';
 import { EngineTable } from './engine_table';
@@ -36,7 +36,7 @@ describe('EngineOverview', () => {
           }),
         },
       });
-      const wrapper = await mountWithAsyncContext(<EngineOverview />);
+      const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
 
       expect(wrapper.find(EmptyState)).toHaveLength(1);
     });
@@ -69,7 +69,7 @@ describe('EngineOverview', () => {
     });
 
     it('renders and calls the engines API', async () => {
-      const wrapper = await mountWithAsyncContext(<EngineOverview />);
+      const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
 
       expect(wrapper.find(EngineTable)).toHaveLength(1);
       expect(mockApi).toHaveBeenNthCalledWith(1, '/api/app_search/engines', {
@@ -86,7 +86,7 @@ describe('EngineOverview', () => {
           hasPlatinumLicense: true,
           http: { ...mockHttpValues.http, get: mockApi },
         });
-        const wrapper = await mountWithAsyncContext(<EngineOverview />);
+        const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
 
         expect(wrapper.find(EngineTable)).toHaveLength(2);
         expect(mockApi).toHaveBeenNthCalledWith(2, '/api/app_search/engines', {
@@ -103,15 +103,15 @@ describe('EngineOverview', () => {
         wrapper.find(EngineTable).prop('pagination');
 
       it('passes down page data from the API', async () => {
-        const wrapper = await mountWithAsyncContext(<EngineOverview />);
+        const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
         const pagination = getTablePagination(wrapper);
 
         expect(pagination.totalEngines).toEqual(100);
         expect(pagination.pageIndex).toEqual(0);
       });
 
       it('re-polls the API on page change', async () => {
-        const wrapper = await mountWithAsyncContext(<EngineOverview />);
+        const wrapper = await mountAsync(<EngineOverview />, { i18n: true });
         await act(async () => getTablePagination(wrapper).onPaginate(5));
         wrapper.update();
 

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.test.tsx

@@ -6,11 +6,9 @@
 
 import '../../../__mocks__/kea.mock';
 import '../../../__mocks__/enterprise_search_url.mock';
-import { mockHttpValues } from '../../../__mocks__/';
+import { mockHttpValues, mountWithIntl } from '../../../__mocks__/';
 
 import React from 'react';
-import { mount } from 'enzyme';
-import { I18nProvider } from '@kbn/i18n/react';
 import { EuiBasicTable, EuiPagination, EuiButtonEmpty, EuiLink } from '@elastic/eui';
 
 jest.mock('../../../shared/telemetry', () => ({ sendTelemetry: jest.fn() }));
@@ -21,24 +19,22 @@ import { EngineTable } from './engine_table';
 describe('EngineTable', () => {
   const onPaginate = jest.fn(); // onPaginate updates the engines API call upstream
 
-  const wrapper = mount(
-    <I18nProvider>
-      <EngineTable
-        data={[
-          {
-            name: 'test-engine',
-            created_at: 'Fri, 1 Jan 1970 12:00:00 +0000',
-            document_count: 99999,
-            field_count: 10,
-          },
-        ]}
-        pagination={{
-          totalEngines: 50,
-          pageIndex: 0,
-          onPaginate,
-        }}
-      />
-    </I18nProvider>
+  const wrapper = mountWithIntl(
+    <EngineTable
+      data={[
+        {
+          name: 'test-engine',
+          created_at: 'Fri, 1 Jan 1970 12:00:00 +0000',
+          document_count: 99999,
+          field_count: 10,
+        },
+      ]}
+      pagination={{
+        totalEngines: 50,
+        pageIndex: 0,
+        onPaginate,
+      }}
+    />
   );
   const table = wrapper.find(EuiBasicTable);
 
@@ -78,13 +74,8 @@ describe('EngineTable', () => {
   });
 
   it('handles empty data', () => {
-    const emptyWrapper = mount(
-      <I18nProvider>
-        <EngineTable
-          data={[]}
-          pagination={{ totalEngines: 0, pageIndex: 0, onPaginate: () => {} }}
-        />
-      </I18nProvider>
+    const emptyWrapper = mountWithIntl(
+      <EngineTable data={[]} pagination={{ totalEngines: 0, pageIndex: 0, onPaginate: () => {} }} />
     );
     const emptyTable = emptyWrapper.find(EuiBasicTable);