diff --git a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/ping_histogram.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/ping_histogram.test.tsx.snap
deleted file mode 100644
index 40abce98f5f33..0000000000000
--- a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/ping_histogram.test.tsx.snap
+++ /dev/null
@@ -1,282 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PingHistogram component renders the component without errors 1`] = `
-Array [
-
- Pings over time
-
,
- ,
- ,
-]
-`;
-
-exports[`PingHistogram component shallow renders the component without errors 1`] = `
-
-
-
-
-
-`;
diff --git a/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.test.tsx b/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.test.tsx
index 154d4a8ee6c7f..6d08833d52aff 100644
--- a/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.test.tsx
+++ b/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.test.tsx
@@ -5,13 +5,23 @@
*/
import React from 'react';
+import DateMath from '@elastic/datemath';
import { PingHistogramComponent, PingHistogramComponentProps } from './ping_histogram';
-import { renderWithRouter, shallowWithRouter, MountWithReduxProvider } from '../../../lib';
-import moment from 'moment';
+import { render } from '../../../lib/helper/rtl_helpers';
+import { mockDataPlugin, mockMoment, mockMomentTimezone } from '../../../lib/helper/test_helpers';
describe('PingHistogram component', () => {
+ let dateMathSpy: any;
beforeAll(() => {
- moment.prototype.fromNow = jest.fn(() => 'a year ago');
+ mockMoment();
+ mockMomentTimezone();
+ mockDataPlugin();
+ dateMathSpy = jest.spyOn(DateMath, 'parse');
+ dateMathSpy.mockReturnValue(20);
+ });
+
+ afterAll(() => {
+ jest.clearAllMocks();
});
const props: PingHistogramComponentProps = {
@@ -48,18 +58,13 @@ describe('PingHistogram component', () => {
},
};
- it('shallow renders the component without errors', () => {
- const component = shallowWithRouter();
- expect(component).toMatchSnapshot();
- });
-
it('renders the component without errors', () => {
- const component = renderWithRouter(
-
-
-
+ const { getByLabelText, getByText } = render();
+ expect(getByText('Pings over time'));
+ expect(
+ getByLabelText(
+ 'Bar Chart showing uptime status over time from 15 minutes ago to 15 minutes ago.'
+ )
);
-
- expect(component).toMatchSnapshot();
});
});
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__snapshots__/monitor_status_column.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__snapshots__/monitor_status_column.test.tsx.snap
deleted file mode 100644
index 850bb7f50e1dc..0000000000000
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__snapshots__/monitor_status_column.test.tsx.snap
+++ /dev/null
@@ -1,300 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MonitorListStatusColumn can handle a non-numeric timestamp value 1`] = `
-
-
-
-
- Up
-
-
-
-
-
-
-
-
- }
- delay="regular"
- position="top"
- >
-
- in 0/0 location
- ,
-
-
-
- Thu May 09 2019 10:15:11 GMT-0400
-
- }
- delay="regular"
- position="top"
- >
-
- Checked
- Dec 31, 2018 7:00:00 PM
-
-
-
-
-`;
-
-exports[`MonitorListStatusColumn provides expected tooltip and display times 1`] = `
-
-
-
-
- Up
-
-
-
-
-
-
-
-
- }
- delay="regular"
- position="top"
- >
-
- in 0/0 location
- ,
-
-
-
- Thu May 09 2019 10:15:11 GMT-0400
-
- }
- delay="regular"
- position="top"
- >
-
- Checked
- Dec 31, 1969 7:38:34 PM
-
-
-
-
-`;
-
-exports[`MonitorListStatusColumn will display location status 1`] = `
-
-
-
-
- Up
-
-
-
-
-
-
- Up in BerlinDown in Islamabad, st-paul
-
- }
- delay="regular"
- position="top"
- >
-
- in 1/3 locations
- ,
-
-
-
- Thu May 09 2019 10:15:11 GMT-0400
-
- }
- delay="regular"
- position="top"
- >
-
- Checked
- Dec 31, 2018 7:00:00 PM
-
-
-
-
-`;
-
-exports[`MonitorListStatusColumn will render display location status 1`] = `
-.c1 {
- padding-right: 4px;
-}
-
-@media (max-width:574px) {
- .c0 {
- min-width: 230px;
- }
-}
-
-
-`;
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.test.tsx
index 3a35f699eb1ad..41a74fc0aec5c 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.test.tsx
@@ -5,20 +5,18 @@
*/
import React from 'react';
-import moment from 'moment';
-import { renderWithIntl, shallowWithIntl } from '@kbn/test/jest';
+import { getLocationStatus, MonitorListStatusColumn } from './monitor_status_column';
import { Ping } from '../../../../../common/runtime_types';
import { STATUS } from '../../../../../common/constants';
-import { getLocationStatus, MonitorListStatusColumn } from './monitor_status_column';
import { EuiThemeProvider } from '../../../../../../observability/public';
+import { mockDate, mockMoment } from '../../../../lib/helper/test_helpers';
+import { render } from '../../../../lib/helper/rtl_helpers';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
describe('MonitorListStatusColumn', () => {
beforeAll(() => {
- moment.prototype.toLocaleString = jest.fn(() => 'Thu May 09 2019 10:15:11 GMT-0400');
- moment.prototype.fromNow = jest.fn(() => 'a few seconds ago');
- // Only for testing purposes we allow extending Date here
- // eslint-disable-next-line no-extend-native
- Date.prototype.toString = jest.fn(() => 'Tue, 01 Jan 2019 00:00:00 GMT');
+ mockDate();
+ mockMoment();
});
let upChecks: Ping[];
@@ -227,33 +225,53 @@ describe('MonitorListStatusColumn', () => {
];
});
- it('provides expected tooltip and display times', () => {
- const component = shallowWithIntl(
-
+ it('provides expected tooltip and display times', async () => {
+ const { getByText } = render(
+
+
+
);
- expect(component).toMatchSnapshot();
+
+ const timestamp = getByText('Sept 4, 2020', { exact: false });
+ expect(timestamp.innerHTML).toEqual('Checked Sept 4, 2020 9:31:38 AM');
+
+ fireEvent.mouseOver(timestamp);
+
+ await waitFor(() => screen.getByText('Thu May 09 2019 10:15:11 GMT-0400'));
});
it('can handle a non-numeric timestamp value', () => {
- const component = shallowWithIntl(
-
+ const { getByText } = render(
+
+
+
+ );
+
+ expect(getByText('Sept 4, 2020', { exact: false }).innerHTML).toEqual(
+ 'Checked Sept 4, 2020 9:31:38 AM'
);
- expect(component).toMatchSnapshot();
});
- it('will display location status', () => {
- const component = shallowWithIntl(
-
+ it('displays single location status', async () => {
+ const { getByText } = render(
+
+ ping.observer!.geo!.name! === 'Islamabad')}
+ />
+
);
- expect(component).toMatchSnapshot();
+
+ const locationsContainer = getByText('in 0/1 location', { exact: false });
+
+ fireEvent.mouseOver(locationsContainer);
+
+ await waitFor(() => screen.getByText('Down in Islamabad'));
});
- it('will render display location status', () => {
- const component = renderWithIntl(
+ it('will display location status', async () => {
+ const { getByText } = render(
{
/>
);
- expect(component).toMatchSnapshot();
+
+ const locationsContainer = getByText('in 1/3 locations', { exact: false });
+
+ fireEvent.mouseOver(locationsContainer);
+
+ await waitFor(() => screen.getByText('Up in Berlin'));
+ await waitFor(() => screen.getByText('Down in Islamabad, st-paul'));
+ });
+
+ it('will render display location status', async () => {
+ const { getByText } = render(
+
+
+
+ );
+
+ const timestamp = getByText('Sept 4, 2020', { exact: false });
+
+ expect(timestamp.innerHTML).toEqual('Checked Sept 4, 2020 9:31:38 AM');
+ expect(getByText('in 1/3 locations,'));
});
- it(' will test getLocationStatus location', () => {
+ it('will test getLocationStatus location', () => {
let { statusMessage } = getLocationStatus(summaryPings, STATUS.UP);
expect(statusMessage).toBe('in 1/3 locations');
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx
index c758f7d2c1076..81e486bb467bb 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/monitor_status_column.tsx
@@ -123,7 +123,13 @@ export const getLocationStatus = (summaryPings: Ping[], status: string) => {
values: { noLoc: statusMessage },
}
),
- locTooltip: upsMessage + downMessage,
+ locTooltip: (
+ <>
+ {upsMessage}
+
+ {downMessage}
+
+ ),
};
}
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx
index 2252d947daa72..49aff79cccea3 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx
@@ -6,16 +6,15 @@
import { shallowWithIntl } from '@kbn/test/jest';
import React from 'react';
-import moment from 'moment';
import { MonitorStatusList } from './monitor_status_list';
import { Ping } from '../../../../../common/runtime_types';
+import { mockMoment } from '../../../../lib/helper/test_helpers';
describe('MonitorStatusList component', () => {
let pings: Ping[];
beforeAll(() => {
- moment.prototype.toLocaleString = jest.fn(() => '2019-06-21 15:29:26');
- moment.prototype.from = jest.fn(() => 'a few moments ago');
+ mockMoment();
});
beforeEach(() => {
diff --git a/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts b/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts
index 8102bdee9485b..b56b55f9146ae 100644
--- a/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts
+++ b/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts
@@ -21,6 +21,39 @@ export function mockMoment() {
jest.spyOn(moment.prototype, 'fromNow').mockImplementation(function (this: Moment) {
return `15 minutes ago`;
});
+
+ // use static locale string to avoid issues
+ jest.spyOn(moment.prototype, 'toLocaleString').mockImplementation(function (this: Moment) {
+ return `Thu May 09 2019 10:15:11 GMT-0400`;
+ });
+}
+
+export function mockMomentTimezone() {
+ jest.mock('moment-timezone', () => {
+ return function () {
+ return { tz: { guess: () => 'America/New_York' } };
+ };
+ });
+}
+
+export function mockDate() {
+ // use static date string to avoid CI timing issues
+ jest.spyOn(Date.prototype, 'toString').mockImplementation(function (this: Date) {
+ return `Tue, 01 Jan 2019 00:00:00 GMT`;
+ });
+}
+
+export function mockDataPlugin() {
+ jest.mock('../../../../../../src/plugins/data/public', () => {
+ return function () {
+ return {
+ esKuery: {
+ fromKueryExpression: () => 'an ast',
+ toElasticsearchQuery: () => 'an es query',
+ },
+ };
+ };
+ });
}
export function mockReduxHooks(response?: any) {