diff --git a/x-pack/plugins/uptime/public/components/common/__tests__/uptime_date_picker.test.tsx b/x-pack/plugins/uptime/public/components/common/__tests__/uptime_date_picker.test.tsx index 445d9302e3a9..16853211433c 100644 --- a/x-pack/plugins/uptime/public/components/common/__tests__/uptime_date_picker.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/__tests__/uptime_date_picker.test.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { UptimeDatePicker } from '../uptime_date_picker'; -import { renderWithRouter, shallowWithRouter } from '../../../lib'; +import { renderWithRouter, shallowWithRouter, MountWithReduxProvider } from '../../../lib'; describe('UptimeDatePicker component', () => { it('validates props with shallow render', () => { @@ -15,7 +15,11 @@ describe('UptimeDatePicker component', () => { }); it('renders properly with mock data', () => { - const component = renderWithRouter(); + const component = renderWithRouter( + + + + ); expect(component).toMatchSnapshot(); }); }); diff --git a/x-pack/plugins/uptime/public/components/common/charts/__tests__/monitor_bar_series.test.tsx b/x-pack/plugins/uptime/public/components/common/charts/__tests__/monitor_bar_series.test.tsx index 4522f8d633fa..5e49d303c5c6 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__tests__/monitor_bar_series.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/__tests__/monitor_bar_series.test.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { MonitorBarSeries, MonitorBarSeriesProps } from '../monitor_bar_series'; -import { renderWithRouter, shallowWithRouter } from '../../../../lib'; +import { renderWithRouter, shallowWithRouter, MountWithReduxProvider } from '../../../../lib'; import { HistogramPoint } from '../../../../../common/runtime_types'; describe('MonitorBarSeries component', () => { @@ -197,7 +197,11 @@ describe('MonitorBarSeries component', () => { }); it('renders if the data series is present', () => { - const component = renderWithRouter(); + const component = renderWithRouter( + + + + ); expect(component).toMatchSnapshot(); }); }); diff --git a/x-pack/plugins/uptime/public/components/common/charts/__tests__/ping_histogram.test.tsx b/x-pack/plugins/uptime/public/components/common/charts/__tests__/ping_histogram.test.tsx index 21c1fa86eeee..57a38f2a949e 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__tests__/ping_histogram.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/__tests__/ping_histogram.test.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { PingHistogramComponent, PingHistogramComponentProps } from '../ping_histogram'; -import { renderWithRouter, shallowWithRouter } from '../../../../lib'; +import { renderWithRouter, shallowWithRouter, MountWithReduxProvider } from '../../../../lib'; describe('PingHistogram component', () => { const props: PingHistogramComponentProps = { @@ -49,7 +49,12 @@ describe('PingHistogram component', () => { }); it('renders the component without errors', () => { - const component = renderWithRouter(); + const component = renderWithRouter( + + + + ); + expect(component).toMatchSnapshot(); }); }); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/filter_status_button.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/filter_status_button.test.tsx index 58c305f0d15a..612ede2c556e 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/filter_status_button.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/filter_status_button.test.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { FilterStatusButton, FilterStatusButtonProps } from '../filter_status_button'; -import { renderWithRouter, shallowWithRouter } from '../../../../lib'; +import { renderWithRouter, shallowWithRouter, MountWithReduxProvider } from '../../../../lib'; describe('FilterStatusButton', () => { let props: FilterStatusButtonProps; @@ -26,7 +26,11 @@ describe('FilterStatusButton', () => { }); it('renders without errors for valid props', () => { - const wrapper = renderWithRouter(); + const wrapper = renderWithRouter( + + + + ); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx index a1288513eb78..d09bbad5cb9e 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx @@ -5,7 +5,12 @@ */ import React from 'react'; -import { mountWithRouter, renderWithRouter, shallowWithRouter } from '../../../../lib'; +import { + mountWithRouter, + renderWithRouter, + shallowWithRouter, + MountWithReduxProvider, +} from '../../../../lib'; import { createMemoryHistory } from 'history'; import { StatusFilter } from '../status_filter'; import { FilterStatusButton } from '../filter_status_button'; @@ -18,7 +23,12 @@ describe('StatusFilterComponent', () => { initialEntries: [`/?g=%22%22&statusFilter=${status}`], }); - const wrapper = mountWithRouter(, history); + const wrapper = mountWithRouter( + + + , + history + ); const filterBtns = wrapper.find(FilterStatusButton); const allBtn = filterBtns.at(0); @@ -34,7 +44,11 @@ describe('StatusFilterComponent', () => { }); it('renders without errors for valid props', () => { - const wrapper = renderWithRouter(); + const wrapper = renderWithRouter( + + + + ); expect(wrapper).toMatchSnapshot(); }); diff --git a/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap b/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap index 827c9257893a..5d2565b7210d 100644 --- a/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap +++ b/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap @@ -137,30 +137,95 @@ exports[`useUrlParams deletes keys that do not have truthy values 1`] = ` } } > - + -
- {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":"","pagination":"foo"} -
- - -
+ +
+ {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":"","pagination":"foo"} +
+ + +
+ + `; @@ -301,24 +366,89 @@ exports[`useUrlParams gets the expected values using the context 1`] = ` } } > - -
- {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-15m","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":""} -
- - -
+ +
+ {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-15m","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":""} +
+ + +
+ + `; diff --git a/x-pack/plugins/uptime/public/hooks/__tests__/use_breadcrumbs.test.tsx b/x-pack/plugins/uptime/public/hooks/__tests__/use_breadcrumbs.test.tsx index 306919015fcb..d688660f564c 100644 --- a/x-pack/plugins/uptime/public/hooks/__tests__/use_breadcrumbs.test.tsx +++ b/x-pack/plugins/uptime/public/hooks/__tests__/use_breadcrumbs.test.tsx @@ -10,7 +10,7 @@ import { Route } from 'react-router-dom'; import { mountWithRouter } from '../../lib'; import { OVERVIEW_ROUTE } from '../../../common/constants'; import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; -import { UptimeUrlParams, getSupportedUrlParams } from '../../lib/helper'; +import { UptimeUrlParams, getSupportedUrlParams, MountWithReduxProvider } from '../../lib/helper'; import { makeBaseBreadcrumb, useBreadcrumbs } from '../use_breadcrumbs'; describe('useBreadcrumbs', () => { @@ -34,11 +34,13 @@ describe('useBreadcrumbs', () => { }; mountWithRouter( - - - - - + + + + + + + ); const urlParams: UptimeUrlParams = getSupportedUrlParams({}); diff --git a/x-pack/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx b/x-pack/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx index deb1f163c132..af5c113a0283 100644 --- a/x-pack/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx +++ b/x-pack/plugins/uptime/public/hooks/__tests__/use_url_params.test.tsx @@ -8,7 +8,7 @@ import DateMath from '@elastic/datemath'; import React, { useState, Fragment } from 'react'; import { useUrlParams, UptimeUrlParamsHook } from '../use_url_params'; import { UptimeRefreshContext } from '../../contexts'; -import { mountWithRouter } from '../../lib'; +import { mountWithRouter, MountWithReduxProvider } from '../../lib'; import { createMemoryHistory } from 'history'; interface MockUrlParamsComponentProps { @@ -52,9 +52,11 @@ describe('useUrlParams', () => { jest.spyOn(history, 'push'); const component = mountWithRouter( - - - , + + + + + , history ); @@ -68,14 +70,16 @@ describe('useUrlParams', () => { it('gets the expected values using the context', () => { const component = mountWithRouter( - - - + + + + + ); const getUrlParamsButton = component.find('#getUrlParams'); @@ -92,14 +96,16 @@ describe('useUrlParams', () => { jest.spyOn(history, 'push'); const component = mountWithRouter( - - - , + + + + + , history ); 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 new file mode 100644 index 000000000000..a68184dbdff9 --- /dev/null +++ b/x-pack/plugins/uptime/public/lib/helper/helper_with_redux.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 { Provider as ReduxProvider } from 'react-redux'; + +export const MountWithReduxProvider: React.FC = ({ children }) => ( + + {children} + +); diff --git a/x-pack/plugins/uptime/public/lib/helper/index.ts b/x-pack/plugins/uptime/public/lib/helper/index.ts index cf49328141b8..10663163e8fd 100644 --- a/x-pack/plugins/uptime/public/lib/helper/index.ts +++ b/x-pack/plugins/uptime/public/lib/helper/index.ts @@ -9,3 +9,4 @@ export * from './observability_integration'; export { getChartDateLabel } from './charts'; export { seriesHasDownValues } from './series_has_down_values'; export { UptimeUrlParams, getSupportedUrlParams } from './url_params'; +export { MountWithReduxProvider } from './helper_with_redux'; diff --git a/x-pack/plugins/uptime/public/lib/index.ts b/x-pack/plugins/uptime/public/lib/index.ts index 06ac06e647ad..92787737d579 100644 --- a/x-pack/plugins/uptime/public/lib/index.ts +++ b/x-pack/plugins/uptime/public/lib/index.ts @@ -4,4 +4,5 @@ * you may not use this file except in compliance with the Elastic License. */ +export { MountWithReduxProvider } from './helper'; export { renderWithRouter, shallowWithRouter, mountWithRouter } from './helper/helper_with_router'; diff --git a/x-pack/plugins/uptime/public/pages/__tests__/page_header.test.tsx b/x-pack/plugins/uptime/public/pages/__tests__/page_header.test.tsx index c9e4eef38676..63d4c24f965d 100644 --- a/x-pack/plugins/uptime/public/pages/__tests__/page_header.test.tsx +++ b/x-pack/plugins/uptime/public/pages/__tests__/page_header.test.tsx @@ -6,47 +6,33 @@ import React from 'react'; import { PageHeader } from '../page_header'; -import { renderWithRouter } from '../../lib'; -import { Provider } from 'react-redux'; +import { renderWithRouter, MountWithReduxProvider } from '../../lib'; describe('PageHeader', () => { it('shallow renders with the date picker', () => { const component = renderWithRouter( - + - + ); expect(component).toMatchSnapshot('page_header_with_date_picker'); }); it('shallow renders without the date picker', () => { const component = renderWithRouter( - + - + ); expect(component).toMatchSnapshot('page_header_no_date_picker'); }); it('shallow renders extra links', () => { const component = renderWithRouter( - + - + ); expect(component).toMatchSnapshot('page_header_with_extra_links'); }); }); - -const MockReduxProvider = ({ children }: { children: React.ReactElement }) => ( - - {children} - -);