[ML] Fix jest tests.

elastic · Mar 5, 2020 · 5a07ca7 · 5a07ca7
1 parent 7246934
commit 5a07ca7
Show file tree

Hide file tree

Showing 20 changed files with 113 additions and 114 deletions.
diff --git a/x-pack/plugins/transform/public/app/app_dependencies.mock.ts b/x-pack/plugins/transform/public/app/app_dependencies.mock.ts
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { coreMock } from 'src/core/public/mocks';
+
+import { getAppProviders, AppDependencies } from './app_dependencies';
+
+const coreSetup = coreMock.createSetup();
+const coreStart = coreMock.createStart();
+
+const appDependencies: AppDependencies = {
+  chrome: coreStart.chrome,
+  data: {},
+  docLinks: coreStart.docLinks,
+  i18n: coreStart.i18n,
+  notifications: coreStart.notifications,
+  uiSettings: coreStart.uiSettings,
+  savedObjects: coreStart.savedObjects,
+  overlays: coreStart.overlays,
+  http: coreSetup.http,
+};
+
+export const Providers = getAppProviders(appDependencies);
diff --git a/x-pack/plugins/transform/public/app/app_dependencies.tsx b/x-pack/plugins/transform/public/app/app_dependencies.tsx
@@ -7,30 +7,38 @@
 import React, { createContext, useContext, ReactNode } from 'react';
 import { HashRouter } from 'react-router-dom';
 
+import { CoreSetup, CoreStart } from '../../../../../src/core/public';
+
 import { API_BASE_PATH } from '../../common/constants';
 
-import { PluginsDependencies } from '../plugin';
 import { setDependencyCache } from '../shared_imports';
 
 import { AuthorizationProvider } from './lib/authorization';
 
 export interface AppDependencies {
-  core: any;
-  plugins: PluginsDependencies;
+  chrome: CoreStart['chrome'];
+  data: any;
+  docLinks: CoreStart['docLinks'];
+  http: CoreSetup['http'];
+  i18n: CoreStart['i18n'];
+  notifications: CoreStart['notifications'];
+  uiSettings: CoreStart['uiSettings'];
+  savedObjects: CoreStart['savedObjects'];
+  overlays: CoreStart['overlays'];
 }
 
 let DependenciesContext: React.Context<AppDependencies>;
 
 const setAppDependencies = (deps: AppDependencies) => {
   const legacyBasePath = {
-    prepend: deps.core.http.basePath.prepend,
-    get: deps.core.http.basePath.get,
+    prepend: deps.http.basePath.prepend,
+    get: deps.http.basePath.get,
     remove: () => {},
   };
 
   setDependencyCache({
-    autocomplete: deps.plugins.data.autocomplete,
-    docLinks: deps.core.docLinks,
+    autocomplete: deps.data.autocomplete,
+    docLinks: deps.docLinks,
     basePath: legacyBasePath as any,
   });
   DependenciesContext = createContext<AppDependencies>(deps);
@@ -47,15 +55,13 @@ export const useAppDependencies = () => {
 
 export const useToastNotifications = () => {
   const {
-    core: {
-      notifications: { toasts: toastNotifications },
-    },
+    notifications: { toasts: toastNotifications },
   } = useAppDependencies();
   return toastNotifications;
 };
 
 export const getAppProviders = (deps: AppDependencies) => {
-  const I18nContext = deps.core.i18n.Context;
+  const I18nContext = deps.i18n.Context;
 
   // Create App dependencies context and get its provider
   const AppDependenciesProvider = setAppDependencies(deps);

diff --git a/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx b/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { getAppProviders } from '../app_dependencies';
+import { Providers } from '../app_dependencies.mock';
 
 import { ToastNotificationText } from './toast_notification_text';
 
@@ -16,7 +16,6 @@ jest.mock('ui/new_platform');
 
 describe('ToastNotificationText', () => {
   test('should render the text as plain text', () => {
-    const Providers = getAppProviders({});
     const props = {
       text: 'a short text message',
     };
@@ -29,7 +28,6 @@ describe('ToastNotificationText', () => {
   });
 
   test('should render the text within a modal', () => {
-    const Providers = getAppProviders({});
     const props = {
       text:
         'a text message that is longer than 140 characters. a text message that is longer than 140 characters. a text message that is longer than 140 characters. ',

diff --git a/x-pack/plugins/transform/public/app/components/toast_notification_text.tsx b/x-pack/plugins/transform/public/app/components/toast_notification_text.tsx
@@ -25,9 +25,7 @@ import { useAppDependencies } from '../app_dependencies';
 const MAX_SIMPLE_MESSAGE_LENGTH = 140;
 
 export const ToastNotificationText: FC<{ text: any }> = ({ text }) => {
-  const {
-    core: { overlays },
-  } = useAppDependencies();
+  const { overlays } = useAppDependencies();
 
   if (typeof text === 'string' && text.length <= MAX_SIMPLE_MESSAGE_LENGTH) {
     return text;

diff --git a/x-pack/plugins/transform/public/app/hooks/use_api.ts b/x-pack/plugins/transform/public/app/hooks/use_api.ts
@@ -12,9 +12,7 @@ import { PreviewRequestBody } from '../common';
 import { EsIndex } from './use_api_types';
 
 export const useApi = () => {
-  const {
-    core: { http },
-  } = useAppDependencies();
+  const { http } = useAppDependencies();
 
   const basePath = http.basePath.prepend('/api/transform');
   const indicesBasePath = http.basePath.prepend('/api');

diff --git a/x-pack/plugins/transform/public/app/hooks/use_documentation_links.ts b/x-pack/plugins/transform/public/app/hooks/use_documentation_links.ts
@@ -10,7 +10,7 @@ import { TRANSFORM_DOC_PATHS } from '../constants';
 
 export const useDocumentationLinks = () => {
   const deps = useAppDependencies();
-  const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = deps.core.docLinks;
+  const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = deps.docLinks;
   return {
     esDocBasePath: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/`,
     esIndicesCreateIndex: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/indices-create-index.html#indices-create-index`,

diff --git a/x-pack/plugins/transform/public/app/hooks/use_request.ts b/x-pack/plugins/transform/public/app/hooks/use_request.ts
@@ -9,8 +9,6 @@ import { UseRequestConfig, useRequest as _useRequest } from '../../shared_import
 import { useAppDependencies } from '../app_dependencies';
 
 export const useRequest = (config: UseRequestConfig) => {
-  const {
-    core: { http },
-  } = useAppDependencies();
+  const { http } = useAppDependencies();
   return _useRequest(http, config);
 };
diff --git a/x-pack/plugins/transform/public/app/hooks/use_search_items/use_search_items.ts b/x-pack/plugins/transform/public/app/hooks/use_search_items/use_search_items.ts
@@ -23,14 +23,14 @@ export const useSearchItems = (defaultSavedObjectId: string | undefined) => {
   const [savedObjectId, setSavedObjectId] = useState(defaultSavedObjectId);
 
   const appDeps = useAppDependencies();
-  const indexPatterns = appDeps.plugins.data.indexPatterns;
-  const uiSettings = appDeps.core.uiSettings;
-  const savedObjectsClient = appDeps.core.savedObjects.client;
+  const indexPatterns = appDeps.data.indexPatterns;
+  const uiSettings = appDeps.uiSettings;
+  const savedObjectsClient = appDeps.savedObjects.client;
   const savedSearches = createSavedSearchesLoader({
     savedObjectsClient,
     indexPatterns,
-    chrome: appDeps.core.chrome,
-    overlays: appDeps.core.overlays,
+    chrome: appDeps.chrome,
+    overlays: appDeps.overlays,
   });
 
   const [searchItems, setSearchItems] = useState<SearchItems | undefined>(undefined);

diff --git a/...p/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx b/...p/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx
@@ -5,10 +5,10 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, wait } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import { getAppProviders } from '../../../../app_dependencies';
+import { Providers } from '../../../../app_dependencies.mock';
 import { getPivotQuery } from '../../../../common';
 import { SearchItems } from '../../../../hooks/use_search_items';
 
@@ -18,7 +18,8 @@ jest.mock('ui/new_platform');
 jest.mock('../../../../../shared_imports');
 
 describe('Transform: <SourceIndexPreview />', () => {
-  test('Minimal initialization', () => {
+  // Using the async/await wait()/done() pattern to avoid act() errors.
+  test('Minimal initialization', async done => {
     // Arrange
     const props = {
       indexPattern: {
@@ -27,7 +28,6 @@ describe('Transform: <SourceIndexPreview />', () => {
       } as SearchItems['indexPattern'],
       query: getPivotQuery('the-query'),
     };
-    const Providers = getAppProviders({});
     const { getByText } = render(
       <Providers>
         <SourceIndexPreview {...props} />
@@ -37,5 +37,7 @@ describe('Transform: <SourceIndexPreview />', () => {
     // Act
     // Assert
     expect(getByText(`Source index ${props.indexPattern.title}`)).toBeInTheDocument();
+    await wait();
+    done();
   });
 });
diff --git a/.../sections/create_transform/components/source_index_preview/use_source_index_data.test.tsx b/.../sections/create_transform/components/source_index_preview/use_source_index_data.test.tsx
@@ -4,9 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
-import ReactDOM from 'react-dom';
-import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react-hooks';
+import '@testing-library/jest-dom/extend-expect';
 
 import { SimpleQuery } from '../../../../common';
 import {
@@ -17,50 +16,31 @@ import {
 
 jest.mock('../../../../hooks/use_api');
 
-type Callback = () => void;
-interface TestHookProps {
-  callback: Callback;
-}
-
-const TestHook: FC<TestHookProps> = ({ callback }) => {
-  callback();
-  return null;
-};
-
-const testHook = (callback: Callback) => {
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  act(() => {
-    ReactDOM.render(<TestHook callback={callback} />, container);
-  });
-};
-
 const query: SimpleQuery = {
   query_string: {
     query: '*',
     default_operator: 'AND',
   },
 };
 
-let sourceIndexObj: UseSourceIndexDataReturnType;
-
 describe('useSourceIndexData', () => {
-  test('indexPattern set triggers loading', () => {
-    testHook(() => {
-      act(() => {
-        sourceIndexObj = useSourceIndexData(
-          { id: 'the-id', title: 'the-title', fields: [] },
-          query,
-          { pageIndex: 0, pageSize: 10 }
-        );
-      });
-    });
+  test('indexPattern set triggers loading', async done => {
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useSourceIndexData({ id: 'the-id', title: 'the-title', fields: [] }, query, {
+        pageIndex: 0,
+        pageSize: 10,
+      })
+    );
+    const sourceIndexObj: UseSourceIndexDataReturnType = result.current;
+
+    await waitForNextUpdate();
 
     expect(sourceIndexObj.errorMessage).toBe('');
     expect(sourceIndexObj.status).toBe(SOURCE_INDEX_STATUS.LOADING);
     expect(sourceIndexObj.tableItems).toEqual([]);
+    done();
   });
 
   // TODO add more tests to check data retrieved via `api.esSearch()`.
-  // This needs more investigation in regards to jest/enzyme's React Hooks support.
+  // This needs more investigation in regards to jest's React Hooks support.
 });
diff --git a/...orm/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx b/...orm/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import { getAppProviders } from '../../../../app_dependencies';
+import { Providers } from '../../../../app_dependencies.mock';
 
 import { StepCreateForm } from './step_create_form';
 
@@ -26,7 +26,6 @@ describe('Transform: <StepCreateForm />', () => {
       onChange() {},
     };
 
-    const Providers = getAppProviders({});
     const { getByText } = render(
       <Providers>
         <StepCreateForm {...props} />

diff --git a/...ransform/public/app/sections/create_transform/components/step_create/step_create_form.tsx b/...ransform/public/app/sections/create_transform/components/step_create/step_create_form.tsx
@@ -75,8 +75,8 @@ export const StepCreateForm: FC<Props> = React.memo(
     );
 
     const deps = useAppDependencies();
-    const indexPatterns = deps.plugins.data.indexPatterns;
-    const uiSettings = deps.core.uiSettings;
+    const indexPatterns = deps.data.indexPatterns;
+    const uiSettings = deps.uiSettings;
     const toastNotifications = useToastNotifications();
 
     useEffect(() => {
@@ -464,7 +464,7 @@ export const StepCreateForm: FC<Props> = React.memo(
                           defaultMessage: 'Use Discover to explore the transform.',
                         }
                       )}
-                      href={getDiscoverUrl(indexPatternId, deps.core.http.basePath.get())}
+                      href={getDiscoverUrl(indexPatternId, deps.http.basePath.get())}
                       data-test-subj="transformWizardCardDiscover"
                     />
                   </EuiFlexItem>

diff --git a/...nsform/public/app/sections/create_transform/components/step_define/pivot_preview.test.tsx b/...nsform/public/app/sections/create_transform/components/step_define/pivot_preview.test.tsx
@@ -5,10 +5,10 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, wait } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import { getAppProviders } from '../../../../app_dependencies';
+import { Providers } from '../../../../app_dependencies.mock';
 import {
   getPivotQuery,
   PivotAggsConfig,
@@ -24,7 +24,8 @@ jest.mock('ui/new_platform');
 jest.mock('../../../../../shared_imports');
 
 describe('Transform: <PivotPreview />', () => {
-  test('Minimal initialization', () => {
+  // Using the async/await wait()/done() pattern to avoid act() errors.
+  test('Minimal initialization', async done => {
     // Arrange
     const groupBy: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
@@ -48,7 +49,6 @@ describe('Transform: <PivotPreview />', () => {
       query: getPivotQuery('the-query'),
     };
 
-    const Providers = getAppProviders({});
     const { getByText } = render(
       <Providers>
         <PivotPreview {...props} />
@@ -58,5 +58,7 @@ describe('Transform: <PivotPreview />', () => {
     // Act
     // Assert
     expect(getByText('Transform pivot preview')).toBeInTheDocument();
+    await wait();
+    done();
   });
 });