From abffa79ba2be019faedb027f973f14aa4a581e1f Mon Sep 17 00:00:00 2001 From: Shahzad Date: Mon, 4 Oct 2021 20:57:25 +0200 Subject: [PATCH] [Uptime] Refactor snapshots into RTL (#113727) --- .../fingerprint_col.test.tsx.snap | 202 -- .../certificates/fingerprint_col.test.tsx | 21 +- .../uptime_date_picker.test.tsx.snap | 184 -- .../common/uptime_date_picker.test.tsx | 104 +- .../__snapshots__/license_info.test.tsx.snap | 78 - .../ml/__snapshots__/ml_flyout.test.tsx.snap | 242 --- .../monitor/ml/license_info.test.tsx | 12 +- .../components/monitor/ml/ml_flyout.test.tsx | 31 +- .../availability_reporting.test.tsx.snap | 368 ---- .../location_status_tags.test.tsx.snap | 1060 --------- .../availability_reporting.test.tsx | 19 +- .../availability_reporting.tsx | 7 +- .../location_status_tags.test.tsx | 46 +- .../__snapshots__/monitor_list.test.tsx.snap | 1917 ----------------- .../monitor_list/monitor_list.test.tsx | 96 +- .../uptime/public/lib/helper/rtl_helpers.tsx | 11 +- .../__snapshots__/certificates.test.tsx.snap | 91 - .../pages/__snapshots__/monitor.test.tsx.snap | 91 - .../__snapshots__/not_found.test.tsx.snap | 91 - .../__snapshots__/overview.test.tsx.snap | 91 - .../uptime/public/pages/certificates.test.tsx | 13 +- .../uptime/public/pages/monitor.test.tsx | 15 +- .../uptime/public/pages/not_found.test.tsx | 10 +- .../uptime/public/pages/overview.test.tsx | 12 +- 24 files changed, 186 insertions(+), 4626 deletions(-) delete mode 100644 x-pack/plugins/uptime/public/components/certificates/__snapshots__/fingerprint_col.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/components/common/__snapshots__/uptime_date_picker.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/license_info.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_flyout.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/availability_reporting.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/pages/__snapshots__/certificates.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/pages/__snapshots__/monitor.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/pages/__snapshots__/not_found.test.tsx.snap delete mode 100644 x-pack/plugins/uptime/public/pages/__snapshots__/overview.test.tsx.snap diff --git a/x-pack/plugins/uptime/public/components/certificates/__snapshots__/fingerprint_col.test.tsx.snap b/x-pack/plugins/uptime/public/components/certificates/__snapshots__/fingerprint_col.test.tsx.snap deleted file mode 100644 index 33969b3d83bc..000000000000 --- a/x-pack/plugins/uptime/public/components/certificates/__snapshots__/fingerprint_col.test.tsx.snap +++ /dev/null @@ -1,202 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FingerprintCol renders expected elements for valid props 1`] = ` -.c1 .euiButtonEmpty__content { - padding-right: 0px; -} - -.c0 { - margin-right: 8px; -} - - - - - - - - - - - - - - - - - - - -`; - -exports[`FingerprintCol shallow renders expected elements for valid props 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/components/certificates/fingerprint_col.test.tsx b/x-pack/plugins/uptime/public/components/certificates/fingerprint_col.test.tsx index 1affd1f990f9..f3f4e206f6e2 100644 --- a/x-pack/plugins/uptime/public/components/certificates/fingerprint_col.test.tsx +++ b/x-pack/plugins/uptime/public/components/certificates/fingerprint_col.test.tsx @@ -6,9 +6,9 @@ */ import React from 'react'; -import { renderWithRouter, shallowWithRouter } from '../../lib'; -import { FingerprintCol } from './fingerprint_col'; import moment from 'moment'; +import { FingerprintCol } from './fingerprint_col'; +import { render } from '../../lib/helper/rtl_helpers'; describe('FingerprintCol', () => { const cert = { @@ -16,18 +16,19 @@ describe('FingerprintCol', () => { not_after: '2020-05-08T00:00:00.000Z', not_before: '2018-05-08T00:00:00.000Z', issuer: 'DigiCert SHA2 Extended Validation Server CA', - sha1: 'ca06f56b258b7a0d4f2b05470939478651151984', - sha256: '3111500c4a66012cdae333ec3fca1c9dde45c954440e7ee413716bff3663c074', + sha1: 'ca06f56b258b7a0d4f2b05470939478651151984'.toUpperCase(), + sha256: '3111500c4a66012cdae333ec3fca1c9dde45c954440e7ee413716bff3663c074'.toUpperCase(), common_name: 'github.com', }; - it('shallow renders expected elements for valid props', () => { - expect(shallowWithRouter()).toMatchSnapshot(); - }); - - it('renders expected elements for valid props', () => { + it('renders expected elements for valid props', async () => { cert.not_after = moment().add('4', 'months').toISOString(); + const { findByText, findByTestId } = render(); - expect(renderWithRouter()).toMatchSnapshot(); + expect(await findByText('SHA 1')).toBeInTheDocument(); + expect(await findByText('SHA 256')).toBeInTheDocument(); + + expect(await findByTestId(cert.sha1)).toBeInTheDocument(); + expect(await findByTestId(cert.sha256)).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/common/__snapshots__/uptime_date_picker.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/__snapshots__/uptime_date_picker.test.tsx.snap deleted file mode 100644 index d513c0212da7..000000000000 --- a/x-pack/plugins/uptime/public/components/common/__snapshots__/uptime_date_picker.test.tsx.snap +++ /dev/null @@ -1,184 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`UptimeDatePicker component renders properly with mock data 1`] = ` -
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- - - -
-
-`; - -exports[`UptimeDatePicker component validates props with shallow render 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/components/common/uptime_date_picker.test.tsx b/x-pack/plugins/uptime/public/components/common/uptime_date_picker.test.tsx index f1b37d0c98f4..997831442faa 100644 --- a/x-pack/plugins/uptime/public/components/common/uptime_date_picker.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/uptime_date_picker.test.tsx @@ -7,52 +7,33 @@ import React from 'react'; import { UptimeDatePicker } from './uptime_date_picker'; -import { - renderWithRouter, - shallowWithRouter, - MountWithReduxProvider, - mountWithRouterRedux, -} from '../../lib'; -import { UptimeStartupPluginsContextProvider } from '../../contexts'; import { startPlugins } from '../../lib/__mocks__/uptime_plugin_start_mock'; -import { ClientPluginsStart } from '../../apps/plugin'; import { createMemoryHistory } from 'history'; +import { render } from '../../lib/helper/rtl_helpers'; +import { fireEvent } from '@testing-library/dom'; describe('UptimeDatePicker component', () => { - it('validates props with shallow render', () => { - const component = shallowWithRouter(); - expect(component).toMatchSnapshot(); + it('renders properly with mock data', async () => { + const { findByText } = render(); + expect(await findByText('Last 15 minutes')).toBeInTheDocument(); + expect(await findByText('Refresh')).toBeInTheDocument(); }); - it('renders properly with mock data', () => { - const component = renderWithRouter( - - - - ); - expect(component).toMatchSnapshot(); - }); + it('uses shared date range state when there is no url date range state', async () => { + const customHistory = createMemoryHistory({ + initialEntries: ['/?dateRangeStart=now-15m&dateRangeEnd=now'], + }); - it('uses shared date range state when there is no url date range state', () => { - const customHistory = createMemoryHistory(); jest.spyOn(customHistory, 'push'); - const component = mountWithRouterRedux( - )} - > - - , - { customHistory } - ); + const { findByText } = render(, { + history: customHistory, + core: startPlugins, + }); - const startBtn = component.find('[data-test-subj="superDatePickerstartDatePopoverButton"]'); + expect(await findByText('~ 15 minutes ago')).toBeInTheDocument(); - expect(startBtn.text()).toBe('~ 30 minutes ago'); - - const endBtn = component.find('[data-test-subj="superDatePickerendDatePopoverButton"]'); - - expect(endBtn.text()).toBe('~ 15 minutes ago'); + expect(await findByText('~ 30 minutes ago')).toBeInTheDocument(); expect(customHistory.push).toHaveBeenCalledWith({ pathname: '/', @@ -60,25 +41,19 @@ describe('UptimeDatePicker component', () => { }); }); - it('should use url date range even if shared date range is present', () => { + it('should use url date range even if shared date range is present', async () => { const customHistory = createMemoryHistory({ initialEntries: ['/?g=%22%22&dateRangeStart=now-10m&dateRangeEnd=now'], }); jest.spyOn(customHistory, 'push'); - const component = mountWithRouterRedux( - )} - > - - , - { customHistory } - ); + const { findByText } = render(, { + history: customHistory, + core: startPlugins, + }); - const showDateBtn = component.find('[data-test-subj="superDatePickerShowDatesButton"]'); - - expect(showDateBtn.childAt(0).text()).toBe('Last 10 minutes'); + expect(await findByText('Last 10 minutes')).toBeInTheDocument(); // it should update shared state @@ -87,4 +62,39 @@ describe('UptimeDatePicker component', () => { to: 'now', }); }); + + it('should handle on change', async () => { + const customHistory = createMemoryHistory({ + initialEntries: ['/?g=%22%22&dateRangeStart=now-10m&dateRangeEnd=now'], + }); + + jest.spyOn(customHistory, 'push'); + + const { findByText, getByTestId, findByTestId } = render(, { + history: customHistory, + core: startPlugins, + }); + + expect(await findByText('Last 10 minutes')).toBeInTheDocument(); + + fireEvent.click(getByTestId('superDatePickerToggleQuickMenuButton')); + + fireEvent.click(await findByTestId('superDatePickerCommonlyUsed_Today')); + + expect(await findByText('Today')).toBeInTheDocument(); + + // it should update shared state + + expect(startPlugins.data.query.timefilter.timefilter.setTime).toHaveBeenCalledTimes(3); + + expect(startPlugins.data.query.timefilter.timefilter.setTime).toHaveBeenCalledWith({ + from: 'now-10m', + to: 'now', + }); + + expect(startPlugins.data.query.timefilter.timefilter.setTime).toHaveBeenLastCalledWith({ + from: 'now/d', + to: 'now', + }); + }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/license_info.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/license_info.test.tsx.snap deleted file mode 100644 index 98414f82bf19..000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/license_info.test.tsx.snap +++ /dev/null @@ -1,78 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ShowLicenseInfo renders without errors 1`] = ` -Array [ -
-
-
-
-
-

- In order to access duration anomaly detection, you have to be subscribed to an Elastic Platinum license. -

- - - - Start free 14-day trial - - - -
-
-
, -
, -] -`; - -exports[`ShowLicenseInfo shallow renders without errors 1`] = ` - - -

- In order to access duration anomaly detection, you have to be subscribed to an Elastic Platinum license. -

- - Start free 14-day trial - - - - -`; diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_flyout.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_flyout.test.tsx.snap deleted file mode 100644 index e4672338485f..000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_flyout.test.tsx.snap +++ /dev/null @@ -1,242 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ML Flyout component renders without errors 1`] = ` - - - -

- Enable anomaly detection -

- - - - - -

- Here you can create a machine learning job to calculate anomaly scores on - response durations for Uptime Monitor. Once enabled, the monitor duration chart on the details page - will show the expected bounds and annotate the graph with anomalies. You can also potentially - identify periods of increased latency across geographical regions. -

-

- - Machine Learning jobs management page - , - } - } - /> -

-

- - Note: It might take a few minutes for the job to begin calculating results. - -

- - - - - - - - Cancel - - - - - Create new job - - - - - -`; - -exports[`ML Flyout component shows license info if no ml available 1`] = ` -
- -
-
- -
-
- - -`; diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/license_info.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/license_info.test.tsx index aa175715970c..f8e0c44c2b8c 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ml/license_info.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ml/license_info.test.tsx @@ -6,9 +6,9 @@ */ import React from 'react'; -import { renderWithIntl, shallowWithIntl } from '@kbn/test/jest'; import { ShowLicenseInfo } from './license_info'; import * as redux from 'react-redux'; +import { render } from '../../../lib/helper/rtl_helpers'; describe('ShowLicenseInfo', () => { beforeEach(() => { @@ -18,13 +18,9 @@ describe('ShowLicenseInfo', () => { const spy1 = jest.spyOn(redux, 'useSelector'); spy1.mockReturnValue(true); }); - it('shallow renders without errors', () => { - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); - }); - it('renders without errors', () => { - const wrapper = renderWithIntl(); - expect(wrapper).toMatchSnapshot(); + it('renders without errors', async () => { + const { findAllByText } = render(); + expect((await findAllByText('Start free 14-day trial'))[0]).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout.test.tsx index 200087976bc8..d066bf416e08 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout.test.tsx @@ -6,11 +6,12 @@ */ import React from 'react'; -import { renderWithIntl, shallowWithIntl } from '@kbn/test/jest'; import { MLFlyoutView } from './ml_flyout'; import { UptimeSettingsContext } from '../../../contexts'; import { CLIENT_DEFAULTS } from '../../../../common/constants'; import * as redux from 'react-redux'; +import { render } from '../../../lib/helper/rtl_helpers'; +import * as labels from './translations'; describe('ML Flyout component', () => { const createJob = () => {}; @@ -25,18 +26,7 @@ describe('ML Flyout component', () => { spy1.mockReturnValue(true); }); - it('renders without errors', () => { - const wrapper = shallowWithIntl( - - ); - expect(wrapper).toMatchSnapshot(); - }); - it('shows license info if no ml available', () => { + it('shows license info if no ml available', async () => { const spy1 = jest.spyOn(redux, 'useSelector'); // return false value for no license @@ -50,7 +40,7 @@ describe('ML Flyout component', () => { isInfraAvailable: true, isLogsAvailable: true, }; - const wrapper = renderWithIntl( + const { findByText, findAllByText } = render( { /> ); - const licenseComponent = wrapper.find('.license-info-trial'); - expect(licenseComponent.length).toBe(1); - expect(wrapper).toMatchSnapshot(); + + expect(await findByText(labels.ENABLE_ANOMALY_DETECTION)).toBeInTheDocument(); + expect(await findAllByText(labels.START_TRAIL)).toHaveLength(2); }); - it('able to create job if valid license is available', () => { + it('able to create job if valid license is available', async () => { const value = { basePath: '', dateRangeStart: DATE_RANGE_START, @@ -74,7 +64,7 @@ describe('ML Flyout component', () => { isInfraAvailable: true, isLogsAvailable: true, }; - const wrapper = renderWithIntl( + const { queryByText } = render( { ); - const licenseComponent = wrapper.find('.license-info-trial'); - expect(licenseComponent.length).toBe(0); + expect(queryByText(labels.START_TRAIL)).not.toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/availability_reporting.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/availability_reporting.test.tsx.snap deleted file mode 100644 index 5a660c7cb764..000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/availability_reporting.test.tsx.snap +++ /dev/null @@ -1,368 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AvailabilityReporting component renders correctly against snapshot 1`] = ` -Array [ - @media (max-width:1042px) { - -} - -
, - .c0 { - white-space: nowrap; - display: inline-block; -} - -@media (max-width:1042px) { - .c0 { - display: inline-block; - margin-right: 16px; - } -} - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - Location - - - - - - Availability - - - - - - Last check - - -
-
- Location -
-
-
- - - - au-heartbeat - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - 36m ago - -
-
-
- Location -
-
-
- - - - nyc-heartbeat - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - 36m ago - -
-
-
- Location -
-
-
- - - - spa-heartbeat - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - 36m ago - -
-
-
-
, -] -`; - -exports[`AvailabilityReporting component shallow renders correctly against snapshot 1`] = ` - - - - -`; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap deleted file mode 100644 index c30469eab3c3..000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap +++ /dev/null @@ -1,1060 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LocationStatusTags component renders properly against props 1`] = ` - - - - - -`; - -exports[`LocationStatusTags component renders when all locations are down 1`] = ` -.c1 { - white-space: nowrap; - display: inline-block; -} - -.c0 { - max-height: 246px; - overflow: hidden; -} - -@media (max-width:1042px) { - .c1 { - display: inline-block; - margin-right: 16px; - } -} - -
-
-
-
- - - - - - - - - - - - - - - - - - - - -
-
- - - Location - - - - - - Availability - - - - - - Last check - - -
-
- Location -
-
-
- - - - Berlin - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
- Location -
-
-
- - - - Islamabad - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
-
-
-`; - -exports[`LocationStatusTags component renders when all locations are up 1`] = ` -.c1 { - white-space: nowrap; - display: inline-block; -} - -.c0 { - max-height: 246px; - overflow: hidden; -} - -@media (max-width:1042px) { - .c1 { - display: inline-block; - margin-right: 16px; - } -} - -
-
-
-
- - - - - - - - - - - - - - - - - - - - -
-
- - - Location - - - - - - Availability - - - - - - Last check - - -
-
- Location -
-
-
- - - - Berlin - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
- Location -
-
-
- - - - Islamabad - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
-
-
-`; - -exports[`LocationStatusTags component renders when there are many location 1`] = ` -.c1 { - white-space: nowrap; - display: inline-block; -} - -.c0 { - max-height: 246px; - overflow: hidden; -} - -@media (max-width:1042px) { - .c1 { - display: inline-block; - margin-right: 16px; - } -} - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - Location - - - - - - Availability - - - - - - Last check - - -
-
- Location -
-
-
- - - - Berlin - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
- Location -
-
-
- - - - Islamabad - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
- Location -
-
-
- - - - New York - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
- Location -
-
-
- - - - Paris - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
- Location -
-
-
- - - - Sydney - - - -
-
- 		-
- Availability -
-
- - 100.00 % - -
- 		-
- Last check -
-
- - Sept 4, 2020 9:31:38 AM - -
-
-
-
-
-
-
-
- -
-
-
-
-
-`; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.test.tsx index 3b1f15dc46f7..f62a308daa6d 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.test.tsx @@ -6,15 +6,9 @@ */ import React from 'react'; -import { renderWithIntl, shallowWithIntl } from '@kbn/test/jest'; import { AvailabilityReporting } from './availability_reporting'; import { StatusTag } from './location_status_tags'; - -jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => { - return { - htmlIdGenerator: () => () => `generated-id`, - }; -}); +import { render } from '../../../../lib/helper/rtl_helpers'; describe('AvailabilityReporting component', () => { let allLocations: StatusTag[]; @@ -45,13 +39,10 @@ describe('AvailabilityReporting component', () => { ]; }); - it('shallow renders correctly against snapshot', () => { - const component = shallowWithIntl(); - expect(component).toMatchSnapshot(); - }); + it('renders correctly against snapshot', async () => { + const { findByText } = render(); - it('renders correctly against snapshot', () => { - const component = renderWithIntl(); - expect(component).toMatchSnapshot(); + expect(await findByText('This table contains 3 rows.')).toBeInTheDocument(); + expect(await findByText('au-heartbeat')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx index c17d2dd97d32..878752ef3ede 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx @@ -6,9 +6,8 @@ */ import React, { useState } from 'react'; -import { EuiBasicTable, EuiSpacer } from '@elastic/eui'; +import { EuiBasicTable, EuiSpacer, Criteria, Pagination } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar'; import { StatusTag } from './location_status_tags'; import { TagLabel } from './tag_label'; import { AvailabilityLabel, LastCheckLabel, LocationLabel } from '../translations'; @@ -66,8 +65,8 @@ export const AvailabilityReporting: React.FC = ({ allLocations }) => { hidePerPageOptions: true, }; - const onTableChange = ({ page }: any) => { - setPageIndex(page.index); + const onTableChange = ({ page }: Criteria) => { + setPageIndex(page?.index ?? 0); }; const paginationProps = allLocations.length > pageSize ? { pagination } : {}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.test.tsx index 6b3cc2346583..3db2efd09808 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.test.tsx @@ -6,10 +6,10 @@ */ import React from 'react'; -import { renderWithIntl, shallowWithIntl } from '@kbn/test/jest'; import { MonitorLocation } from '../../../../../common/runtime_types/monitor'; import { LocationStatusTags } from './index'; import { mockMoment } from '../../../../lib/helper/test_helpers'; +import { render } from '../../../../lib/helper/rtl_helpers'; mockMoment(); @@ -22,7 +22,7 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => { describe('LocationStatusTags component', () => { let monitorLocations: MonitorLocation[]; - it('renders properly against props', () => { + it('renders properly against props', async () => { monitorLocations = [ { summary: { up: 4, down: 0 }, @@ -36,21 +36,21 @@ describe('LocationStatusTags component', () => { geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, - down_history: 0, + down_history: 2, }, { summary: { up: 0, down: 2 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, - down_history: 0, + down_history: 1, }, ]; - const component = shallowWithIntl(); - expect(component).toMatchSnapshot(); + const { findByText } = render(); + expect(await findByText('100.00 %')).toBeInTheDocument(); }); - it('renders when there are many location', () => { + it('renders when there are many location', async () => { monitorLocations = [ { summary: { up: 0, down: 1 }, @@ -64,28 +64,28 @@ describe('LocationStatusTags component', () => { geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, - down_history: 0, + down_history: 3, }, { summary: { up: 0, down: 1 }, geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, - down_history: 0, + down_history: 2, }, { summary: { up: 0, down: 1 }, geo: { name: 'Tokyo', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, - down_history: 0, + down_history: 1, }, { summary: { up: 0, down: 1 }, geo: { name: 'New York', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', up_history: 4, - down_history: 0, + down_history: 4, }, { summary: { up: 0, down: 1 }, @@ -109,11 +109,11 @@ describe('LocationStatusTags component', () => { down_history: 0, }, ]; - const component = renderWithIntl(); - expect(component).toMatchSnapshot(); + const { findAllByText } = render(); + expect(await findAllByText('100.00 %')).toHaveLength(3); }); - it('renders when all locations are up', () => { + it('renders when all locations are up', async () => { monitorLocations = [ { summary: { up: 4, down: 0 }, @@ -130,28 +130,28 @@ describe('LocationStatusTags component', () => { down_history: 0, }, ]; - const component = renderWithIntl(); - expect(component).toMatchSnapshot(); + const { findAllByText } = render(); + expect(await findAllByText('100.00 %')).toHaveLength(2); }); - it('renders when all locations are down', () => { + it('renders when all locations are down', async () => { monitorLocations = [ { summary: { up: 0, down: 2 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', - up_history: 4, - down_history: 0, + up_history: 0, + down_history: 2, }, { summary: { up: 0, down: 2 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: 'Oct 26, 2020 7:49:20 AM', - up_history: 4, - down_history: 0, + up_history: 0, + down_history: 2, }, ]; - const component = renderWithIntl(); - expect(component).toMatchSnapshot(); + const { findAllByText } = render(); + expect(await findAllByText('0.00 %')).toHaveLength(2); }); }); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap deleted file mode 100644 index e6e7250dd553..000000000000 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap +++ /dev/null @@ -1,1917 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MonitorList component MonitorListPagination component renders a no items message when no data is provided 1`] = ` - - - - - -`; - -exports[`MonitorList component MonitorListPagination component renders the pagination 1`] = ` - - - - - -`; - -exports[`MonitorList component renders a no items message when no data is provided 1`] = ` - - - - - -`; - -exports[`MonitorList component renders error list 1`] = ` - - - - - -`; - -exports[`MonitorList component renders loading state 1`] = ` - - - - - -`; - -exports[`MonitorList component renders the monitor list 1`] = ` -.c2 { - padding-right: 4px; -} - -.c3 { - margin-top: 12px; -} - -.c0 { - position: relative; -} - -@media (max-width:574px) { - .c1 { - min-width: 230px; - } -} - -
-
-
-
- Monitors -
-
-
-
- - - -
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - Status - - - - - - Name - - - - - - Url - - - - - - Tags - - - - - - TLS Certificate - - - - - - Downtime history - - - - - - Status alert - - - - - - -
-
- Status -
-
-
-
-
- - - -
-
-
-
- -
-
- in 0/1 location, -
-
- - -
-
- Checked Sept 4, 2020 9:31:38 AM -
-
- -
-
-
-
-
- Name -
-
-
- -
- -
-
-
- 		-
- Url -
-
-
- 		-
- Tags -
-
-
-
- TLS Certificate -
-
- - -- - -
- 		-
- -
-
- -- -
-
- -
- 		-
- Status alert -
-
-
-
-
-
-
- -
-
-
-
-
-
- 		-
- -
-
-
- Status -
-
-
-
-
- - - -
-
-
-
- -
-
- in 0/1 location, -
-
- - -
-
- Checked Sept 4, 2020 9:31:38 AM -
-
- -
-
-
-
-
- Name -
-
-
- -
- -
-
-
- 		-
- Url -
-
-
- 		-
- Tags -
-
-
-
- TLS Certificate -
-
- - -- - -
- 		-
- -
-
- -- -
-
- -
- 		-
- Status alert -
-
-
-
-
-
-
- -
-
-
-
-
-
- 		-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-`; - -exports[`MonitorList component shallow renders the monitor list 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.test.tsx index 3a32d8c943af..703e2653ff0a 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.test.tsx @@ -16,13 +16,12 @@ import { MonitorSummary, } from '../../../../common/runtime_types'; import { MonitorListComponent, noItemsMessage } from './monitor_list'; -import { renderWithRouter, shallowWithRouter } from '../../../lib'; import * as redux from 'react-redux'; import moment from 'moment'; import { IHttpFetchError } from '../../../../../../../src/core/public'; import { mockMoment } from '../../../lib/helper/test_helpers'; import { render } from '../../../lib/helper/rtl_helpers'; -import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common'; +import { NO_DATA_MESSAGE } from './translations'; jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => { return { @@ -150,20 +149,8 @@ describe('MonitorList component', () => { global.localStorage = localStorageMock; }); - it('shallow renders the monitor list', () => { - const component = shallowWithRouter( - - ); - - expect(component).toMatchSnapshot(); - }); - - it('renders a no items message when no data is provided', () => { - const component = shallowWithRouter( + it('renders a no items message when no data is provided', async () => { + const { findByText } = render( { nextPagePagination: null, prevPagePagination: null, }, - loading: true, + loading: false, }} pageSize={10} setPageSize={jest.fn()} /> ); - expect(component).toMatchSnapshot(); + expect(await findByText(NO_DATA_MESSAGE)).toBeInTheDocument(); }); - it('renders the monitor list', () => { - const component = renderWithRouter( - - - + it('renders the monitor list', async () => { + const { findByLabelText } = render( + ); - expect(component).toMatchSnapshot(); + expect( + await findByLabelText( + 'Monitor Status table with columns for Status, Name, URL, IP, Downtime History and Integrations. The table is currently displaying 2 items.' + ) + ).toBeInTheDocument(); }); - it('renders error list', () => { - const component = shallowWithRouter( + it('renders error list', async () => { + const { findByText } = render( { /> ); - expect(component).toMatchSnapshot(); - }); - - it('renders loading state', () => { - const component = shallowWithRouter( - - ); - - expect(component).toMatchSnapshot(); + expect(await findByText('foo message')).toBeInTheDocument(); }); describe('MonitorListPagination component', () => { @@ -244,8 +221,8 @@ describe('MonitorList component', () => { }; }); - it('renders the pagination', () => { - const component = shallowWithRouter( + it('renders the pagination', async () => { + const { findByText, findByLabelText } = render( { /> ); - expect(component).toMatchSnapshot(); - }); - - it('renders a no items message when no data is provided', () => { - const component = shallowWithRouter( - - ); - - expect(component).toMatchSnapshot(); + expect(await findByText('Rows per page: 10')).toBeInTheDocument(); + expect(await findByLabelText('Prev page of results')).toBeInTheDocument(); + expect(await findByLabelText('Next page of results')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/lib/helper/rtl_helpers.tsx b/x-pack/plugins/uptime/public/lib/helper/rtl_helpers.tsx index 46f77b547779..ac129bdb327d 100644 --- a/x-pack/plugins/uptime/public/lib/helper/rtl_helpers.tsx +++ b/x-pack/plugins/uptime/public/lib/helper/rtl_helpers.tsx @@ -29,6 +29,7 @@ import { stringifyUrlParams } from './stringify_url_params'; import { ClientPluginsStart } from '../../apps/plugin'; import { triggersActionsUiMock } from '../../../../triggers_actions_ui/public/mocks'; import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks'; +import { UptimeRefreshContextProvider, UptimeStartupPluginsContextProvider } from '../../contexts'; interface KibanaProps { services?: KibanaServices; @@ -129,9 +130,13 @@ export function MockKibanaProvider({ }; return ( - - {children} - + + + + {children} + + + ); } diff --git a/x-pack/plugins/uptime/public/pages/__snapshots__/certificates.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__snapshots__/certificates.test.tsx.snap deleted file mode 100644 index e1009236ef4b..000000000000 --- a/x-pack/plugins/uptime/public/pages/__snapshots__/certificates.test.tsx.snap +++ /dev/null @@ -1,91 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CertificatesPage shallow renders expected elements for valid props 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/pages/__snapshots__/monitor.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__snapshots__/monitor.test.tsx.snap deleted file mode 100644 index cd92334cf72f..000000000000 --- a/x-pack/plugins/uptime/public/pages/__snapshots__/monitor.test.tsx.snap +++ /dev/null @@ -1,91 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MonitorPage shallow renders expected elements for valid props 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/pages/__snapshots__/not_found.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__snapshots__/not_found.test.tsx.snap deleted file mode 100644 index df67e320d7aa..000000000000 --- a/x-pack/plugins/uptime/public/pages/__snapshots__/not_found.test.tsx.snap +++ /dev/null @@ -1,91 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NotFoundPage render component for valid props 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/pages/__snapshots__/overview.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__snapshots__/overview.test.tsx.snap deleted file mode 100644 index 3e532d0d8e78..000000000000 --- a/x-pack/plugins/uptime/public/pages/__snapshots__/overview.test.tsx.snap +++ /dev/null @@ -1,91 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MonitorPage shallow renders expected elements for valid props 1`] = ` - - - - - -`; diff --git a/x-pack/plugins/uptime/public/pages/certificates.test.tsx b/x-pack/plugins/uptime/public/pages/certificates.test.tsx index ff5f1afcaa29..d61fde13663a 100644 --- a/x-pack/plugins/uptime/public/pages/certificates.test.tsx +++ b/x-pack/plugins/uptime/public/pages/certificates.test.tsx @@ -6,11 +6,18 @@ */ import React from 'react'; -import { shallowWithRouter } from '../lib'; import { CertificatesPage } from './certificates'; +import { render } from '../lib/helper/rtl_helpers'; describe('CertificatesPage', () => { - it('shallow renders expected elements for valid props', () => { - expect(shallowWithRouter()).toMatchSnapshot(); + it('renders expected elements for valid props', async () => { + const { findByText } = render(); + + expect(await findByText('This table contains 0 rows; Page 1 of 0.')).toBeInTheDocument(); + expect( + await findByText( + 'No Certificates found. Note: Certificates are only visible for Heartbeat 7.8+' + ) + ).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/pages/monitor.test.tsx b/x-pack/plugins/uptime/public/pages/monitor.test.tsx index 80fcfcc27196..053121d505de 100644 --- a/x-pack/plugins/uptime/public/pages/monitor.test.tsx +++ b/x-pack/plugins/uptime/public/pages/monitor.test.tsx @@ -7,10 +7,19 @@ import React from 'react'; import { MonitorPage } from './monitor'; -import { shallowWithRouter } from '../lib'; +import { render } from '../lib/helper/rtl_helpers'; describe('MonitorPage', () => { - it('shallow renders expected elements for valid props', () => { - expect(shallowWithRouter()).toMatchSnapshot(); + it('renders', async () => { + const { findByText } = render(); + + expect(await findByText('Up in 0 location')).toBeInTheDocument(); + expect(await findByText('Overall availability')).toBeInTheDocument(); + expect(await findByText('0.00 %')).toBeInTheDocument(); + expect(await findByText('Url')).toBeInTheDocument(); + expect(await findByText('Monitor ID')).toBeInTheDocument(); + expect(await findByText('Tags')).toBeInTheDocument(); + expect(await findByText('Set tags')).toBeInTheDocument(); + expect(await findByText('Monitoring from')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/pages/not_found.test.tsx b/x-pack/plugins/uptime/public/pages/not_found.test.tsx index 8d5b20e45303..23f753478417 100644 --- a/x-pack/plugins/uptime/public/pages/not_found.test.tsx +++ b/x-pack/plugins/uptime/public/pages/not_found.test.tsx @@ -6,12 +6,14 @@ */ import React from 'react'; -import { shallowWithRouter } from '../lib'; import { NotFoundPage } from './not_found'; +import { render } from '../lib/helper/rtl_helpers'; describe('NotFoundPage', () => { - it('render component for valid props', () => { - const component = shallowWithRouter(); - expect(component).toMatchSnapshot(); + it('render component', async () => { + const { findByText } = render(); + + expect(await findByText('Page not found')).toBeInTheDocument(); + expect(await findByText('Back to home')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/uptime/public/pages/overview.test.tsx b/x-pack/plugins/uptime/public/pages/overview.test.tsx index f827cf66b034..b3aa4714fa66 100644 --- a/x-pack/plugins/uptime/public/pages/overview.test.tsx +++ b/x-pack/plugins/uptime/public/pages/overview.test.tsx @@ -7,10 +7,16 @@ import React from 'react'; import { OverviewPageComponent } from './overview'; -import { shallowWithRouter } from '../lib'; +import { render } from '../lib/helper/rtl_helpers'; describe('MonitorPage', () => { - it('shallow renders expected elements for valid props', () => { - expect(shallowWithRouter()).toMatchSnapshot(); + it('renders expected elements for valid props', async () => { + const { findByText, findByPlaceholderText } = render(); + + expect(await findByText('No uptime monitors found')).toBeInTheDocument(); + + expect( + await findByPlaceholderText('Search by monitor ID, name, or url (E.g. http:// )') + ).toBeInTheDocument(); }); });