[Uptime] Tests/uptime testing utils (elastic#87650)

* add additional component test helpers * add test examples * uptime testing utils remove custom prefix from props and parameter options * skip executed step tests * adjust MlJobLink test * add testing util interfaces * update mock core * combine wrappers into one custom render function * split enzyme helpers and rtl helpers into different files and adjust types * adjust types * spread core on render function * remove unnecessary items from MLJobLink test * update use_monitor_breadcrumbs test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
dominiqueclarke · Jan 12, 2021 · 4c20cc2 · 4c20cc2
1 parent 60c0bac
commit 4c20cc2
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 203 deletions.
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_job_link.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_job_link.test.tsx.snap
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/ml_job_link.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/ml_job_link.test.tsx
@@ -5,28 +5,20 @@
  */
 
 import React from 'react';
-import { coreMock } from 'src/core/public/mocks';
-import { renderWithRouter, shallowWithRouter } from '../../../lib';
+import { render } from '../../../lib/helper/rtl_helpers';
 import { MLJobLink } from './ml_job_link';
-import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
 
-const core = coreMock.createStart();
 describe('ML JobLink', () => {
-  it('shallow renders without errors', () => {
-    const wrapper = shallowWithRouter(
-      <MLJobLink dateRange={{ to: '', from: '' }} basePath="" monitorId="testMonitor" />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
   it('renders without errors', () => {
-    const wrapper = renderWithRouter(
-      <KibanaContextProvider
-        services={{ ...core, triggersActionsUi: { getEditAlertFlyout: jest.fn() } }}
-      >
-        <MLJobLink dateRange={{ to: '', from: '' }} basePath="" monitorId="testMonitor" />
-      </KibanaContextProvider>
+    const expectedHref = `/app/ml#/explorer?_g=(ml:(jobIds:!(testmonitor_high_latency_by_geo)),refreshInterval:(pause:!t,value:0),time:(from:'',to:''))&_a=(mlExplorerFilter:(filterActive:!t,filteredFields:!(monitor.id,testMonitor)),mlExplorerSwimlane:(viewByFieldName:observer.geo.name))`;
+    const { getByRole, getByText } = render(
+      <MLJobLink dateRange={{ to: '', from: '' }} basePath="" monitorId="testMonitor">
+        <div>Test link</div>
+      </MLJobLink>
     );
-    expect(wrapper).toMatchSnapshot();
+
+    const jobLink = getByRole('link');
+    expect(jobLink.getAttribute('href')).toBe(expectedHref);
+    expect(getByText('Test link'));
   });
 });
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.test.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import { ExecutedStep } from './executed_step';
 import { Ping } from '../../../../common/runtime_types';
 import { mountWithRouter } from '../../../lib';
+import { render } from '../../../lib/helper/rtl_helpers';
 
 // FLAKY: https://github.com/elastic/kibana/issues/85899
 describe.skip('ExecutedStep', () => {
@@ -35,32 +36,9 @@ describe.skip('ExecutedStep', () => {
   });
 
   it('renders correct step heading', () => {
-    expect(
-      mountWithRouter(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />).find(
-        'EuiText'
-      )
-    ).toMatchInlineSnapshot(`
-      <EuiText>
-        <div
-          className="euiText euiText--medium"
-        >
-          <strong>
-            <FormattedMessage
-              defaultMessage="{stepNumber}. {stepName}"
-              id="xpack.uptime.synthetics.executedStep.stepName"
-              values={
-                Object {
-                  "stepName": "STEP_NAME",
-                  "stepNumber": 4,
-                }
-              }
-            >
-              4. STEP_NAME
-            </FormattedMessage>
-          </strong>
-        </div>
-      </EuiText>
-    `);
+    const { getByText } = render(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />);
+
+    expect(getByText(`${step?.synthetics?.step?.index}. ${step?.synthetics?.step?.name}`));
   });
 
   it('renders a link to the step detail view', () => {

diff --git a/.../uptime/public/components/monitor/synthetics/step_detail/use_monitor_breadcrumbs.test.tsx b/.../uptime/public/components/monitor/synthetics/step_detail/use_monitor_breadcrumbs.test.tsx
@@ -8,16 +8,37 @@ import { ChromeBreadcrumb } from 'kibana/public';
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { of } from 'rxjs';
-import { MountWithReduxProvider, mountWithRouter } from '../../../../lib';
-import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public';
+import { render } from '../../../../lib/helper/rtl_helpers';
 import { useMonitorBreadcrumb } from './use_monitor_breadcrumb';
 import { OVERVIEW_ROUTE } from '../../../../../common/constants';
 import { Ping } from '../../../../../common/runtime_types/ping';
 import { JourneyState } from '../../../../state/reducers/journey';
+import { chromeServiceMock, uiSettingsServiceMock } from 'src/core/public/mocks';
 
 describe('useMonitorBreadcrumbs', () => {
   it('sets the given breadcrumbs', () => {
-    const [getBreadcrumbs, core] = mockCore();
+    let breadcrumbObj: ChromeBreadcrumb[] = [];
+    const getBreadcrumbs = () => {
+      return breadcrumbObj;
+    };
+
+    const core = {
+      chrome: {
+        ...chromeServiceMock.createStartContract(),
+        setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => {
+          breadcrumbObj = newBreadcrumbs;
+        },
+      },
+      uiSettings: {
+        ...uiSettingsServiceMock.createSetupContract(),
+        get(key: string, defaultOverride?: any): any {
+          return `MMM D, YYYY @ HH:mm:ss.SSS` || defaultOverride;
+        },
+        get$(key: string, defaultOverride?: any): any {
+          return of(`MMM D, YYYY @ HH:mm:ss.SSS`) || of(defaultOverride);
+        },
+      },
+    };
 
     const Component = () => {
       useMonitorBreadcrumb({
@@ -27,14 +48,11 @@ describe('useMonitorBreadcrumbs', () => {
       return <>Step Water Fall</>;
     };
 
-    mountWithRouter(
-      <MountWithReduxProvider>
-        <KibanaContextProvider services={{ ...core }}>
-          <Route path={OVERVIEW_ROUTE}>
-            <Component />
-          </Route>
-        </KibanaContextProvider>
-      </MountWithReduxProvider>
+    render(
+      <Route path={OVERVIEW_ROUTE}>
+        <Component />
+      </Route>,
+      { core }
     );
 
     expect(getBreadcrumbs()).toMatchInlineSnapshot(`
@@ -56,27 +74,3 @@ describe('useMonitorBreadcrumbs', () => {
     `);
   });
 });
-
-const mockCore: () => [() => ChromeBreadcrumb[], any] = () => {
-  let breadcrumbObj: ChromeBreadcrumb[] = [];
-  const get = () => {
-    return breadcrumbObj;
-  };
-  const core = {
-    application: {
-      getUrlForApp: () => '/app/uptime',
-      navigateToUrl: jest.fn(),
-    },
-    chrome: {
-      setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => {
-        breadcrumbObj = newBreadcrumbs;
-      },
-    },
-    uiSettings: {
-      get: (key: string) => 'MMM D, YYYY @ HH:mm:ss.SSS',
-      get$: (key: string) => of('MMM D, YYYY @ HH:mm:ss.SSS'),
-    },
-  };
-
-  return [get, core];
-};
diff --git a/x-pack/plugins/uptime/public/lib/__mocks__/uptime_store.mock.ts b/x-pack/plugins/uptime/public/lib/__mocks__/uptime_store.mock.ts
@@ -5,12 +5,13 @@
  */
 
 import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../common/constants';
+import { AppState } from '../../state';
 
 /**
  * NOTE: This variable name MUST start with 'mock*' in order for
  * Jest to accept its use within a jest.mock()
  */
-export const mockStore = {
+export const mockState: AppState = {
   overviewFilters: {
     filters: {
       locations: [],
@@ -111,8 +112,11 @@ export const mockStore = {
   alerts: {
     alertDeletion: { data: null, loading: false },
     anomalyAlert: { data: null, loading: false },
+    anomalyAlertDeletion: { data: null, loading: false },
     alerts: { data: null, loading: false },
     connectors: { data: null, loading: false },
     newAlert: { data: null, loading: false },
   },
+  journeys: {},
+  networkEvents: {},
 };
diff --git a/.../public/lib/helper/helper_with_router.tsx → ...time/public/lib/helper/enzyme_helpers.tsx b/.../public/lib/helper/helper_with_router.tsx → ...time/public/lib/helper/enzyme_helpers.tsx
@@ -5,13 +5,12 @@
  */
 
 import React, { ReactElement } from 'react';
-
 import { Router } from 'react-router-dom';
 import { MemoryHistory } from 'history/createMemoryHistory';
 import { createMemoryHistory } from 'history';
 import { mountWithIntl, renderWithIntl, shallowWithIntl } from '@kbn/test/jest';
-import { AppState } from '../../state';
 import { MountWithReduxProvider } from './helper_with_redux';
+import { AppState } from '../../state';
 
 const helperWithRouter: <R>(
   helper: (node: ReactElement) => R,
@@ -28,7 +27,7 @@ const helperWithRouter: <R>(
 
   if (wrapReduxStore) {
     return helper(
-      <MountWithReduxProvider store={storeState}>{routerWrapper}</MountWithReduxProvider>
+      <MountWithReduxProvider state={storeState}>{routerWrapper}</MountWithReduxProvider>
     );
   }
 

diff --git a/x-pack/plugins/uptime/public/lib/helper/helper_with_redux.tsx b/x-pack/plugins/uptime/public/lib/helper/helper_with_redux.tsx
@@ -8,11 +8,11 @@ import React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { AppState } from '../../state';
 
-export const MountWithReduxProvider: React.FC<{ store?: AppState }> = ({ children, store }) => (
+export const MountWithReduxProvider: React.FC<{ state?: AppState }> = ({ children, state }) => (
   <ReduxProvider
     store={{
       dispatch: jest.fn(),
-      getState: jest.fn().mockReturnValue(store || { selectedFilters: null }),
+      getState: jest.fn().mockReturnValue(state || { selectedFilters: null }),
       subscribe: jest.fn(),
       replaceReducer: jest.fn(),
     }}