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 deleted file mode 100644 index aaabf0551cff6..0000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_job_link.test.tsx.snap +++ /dev/null @@ -1,117 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ML JobLink renders without errors 1`] = ` - - - - - -`; - -exports[`ML JobLink shallow renders without errors 1`] = ` - - - - - -`; 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 index 18cab0fea55d9..74e07879f30dc 100644 --- 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( - - ); - expect(wrapper).toMatchSnapshot(); - }); - it('renders without errors', () => { - const wrapper = renderWithRouter( - - - + 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( + +
Test link
+
); - 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 index 0ad237ae764c2..280e09814c60b 100644 --- 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().find( - 'EuiText' - ) - ).toMatchInlineSnapshot(` - -
- - - 4. STEP_NAME - - -
-
- `); + const { getByText } = render(); + + expect(getByText(`${step?.synthetics?.step?.index}. ${step?.synthetics?.step?.name}`)); }); it('renders a link to the step detail view', () => { diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/use_monitor_breadcrumbs.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/use_monitor_breadcrumbs.test.tsx index 290f9f4bb0423..a8efd1f79c99c 100644 --- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/use_monitor_breadcrumbs.test.tsx +++ b/x-pack/plugins/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( - - - - - - - + render( + + + , + { 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 index 0f600fcc20f6f..e6487503b4ded 100644 --- 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/x-pack/plugins/uptime/public/lib/helper/helper_with_router.tsx b/x-pack/plugins/uptime/public/lib/helper/enzyme_helpers.tsx similarity index 97% rename from x-pack/plugins/uptime/public/lib/helper/helper_with_router.tsx rename to x-pack/plugins/uptime/public/lib/helper/enzyme_helpers.tsx index 132552ef61a69..63792231017b3 100644 --- a/x-pack/plugins/uptime/public/lib/helper/helper_with_router.tsx +++ b/x-pack/plugins/uptime/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: ( helper: (node: ReactElement) => R, @@ -28,7 +27,7 @@ const helperWithRouter: ( if (wrapReduxStore) { return helper( - {routerWrapper} + {routerWrapper} ); } 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 index 3c17d3510bfda..3b1cd143b33fb 100644 --- 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 }) => ( { + core?: Partial & ExtraCore; + kibanaProps?: KibanaProps; +} + +interface MockKibanaProviderProps extends KibanaProviderOptions { + children: ReactElement; +} + +interface MockRouterProps extends MockKibanaProviderProps { + history?: History; +} + +interface RenderRouterOptions extends KibanaProviderOptions { + history?: History; + renderOptions?: Omit; + state?: Partial; +} + +/* default mock core */ +const defaultCore = coreMock.createStart(); +const mockCore: () => any = () => { + const core = { + ...defaultCore, + application: { + getUrlForApp: () => '/app/uptime', + navigateToUrl: jest.fn(), + }, + }; + + return core; +}; + +/* Mock Provider Components */ +export function MockKibanaProvider({ + children, + core, + kibanaProps, +}: MockKibanaProviderProps) { + const coreOptions = { + ...mockCore(), + ...core, + }; + return ( + + {children} + + ); +} + +export function MockRouter({ + children, + core, + history: customHistory, + kibanaProps, +}: MockRouterProps) { + const history = customHistory || createMemoryHistory(); + return ( + + + {children} + + + ); +} + +/* Custom react testing library render */ +export function render( + ui: ReactElement, + { history, core, kibanaProps, renderOptions, state }: RenderRouterOptions = {} +) { + const testState: AppState = { + ...mockState, + ...state, + }; + return reactTestLibRender( + + + {ui} + + , + renderOptions + ); +} diff --git a/x-pack/plugins/uptime/public/lib/index.ts b/x-pack/plugins/uptime/public/lib/index.ts index 7e800cc1eae95..85cce4fd549d5 100644 --- a/x-pack/plugins/uptime/public/lib/index.ts +++ b/x-pack/plugins/uptime/public/lib/index.ts @@ -5,4 +5,4 @@ */ export { MountWithReduxProvider } from './helper'; -export * from './helper/helper_with_router'; +export * from './helper/enzyme_helpers';