[Uptime] Added tests for pages

x-pack/legacy/plugins/uptime/common/constants/ui.ts

@@ -4,6 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export const MONITOR_ROUTE = '/monitor/:monitorId?';
+
+export const OVERVIEW_ROUTE = '/';
+
 export enum STATUS {
   UP = 'up',
   DOWN = 'down',

x-pack/legacy/plugins/uptime/public/components/connected/index.ts

@@ -7,7 +7,6 @@
 export { PingHistogram } from './charts/ping_histogram';
 export { Snapshot } from './charts/snapshot_container';
 export { KueryBar } from './kuerybar/kuery_bar_container';
-export { OverviewPage } from './pages/overview_container';
 export { FilterGroup } from './filter_group/filter_group_container';
 export { MonitorStatusDetails } from './monitor/status_details_container';
 export { MonitorStatusBar } from './monitor/status_bar_container';

x-pack/legacy/plugins/uptime/public/components/connected/pages/page_header_container.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { selectSelectedMonitor } from '../../../state/selectors';
+import { AppState } from '../../../state';
+import { PageHeaderComponent } from '../../../pages/page_header';
+
+const mapStateToProps = (state: AppState) => ({
+  monitorStatus: selectSelectedMonitor(state),
+});
+
+export const PageHeader = connect(mapStateToProps, null)(PageHeaderComponent);

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/monitor_charts.test.tsx

@@ -6,10 +6,9 @@
 
 import React from 'react';
 import DateMath from '@elastic/datemath';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { MonitorChartsComponent } from '../monitor_charts';
 import { MonitorChart } from '../../../../common/graphql/types';
-import { renderWithRouter } from '../../../lib';
+import { shallowWithRouter } from '../../../lib';
 
 describe('MonitorCharts component', () => {
   let dateMathSpy: any;
@@ -63,18 +62,16 @@ describe('MonitorCharts component', () => {
   };
 
   it('renders the component without errors', () => {
-    const component = shallowWithIntl(
-      renderWithRouter(
-        <MonitorChartsComponent
-          danger="dangerColor"
-          data={{ monitorChartsData: chartResponse.monitorChartsData }}
-          loading={false}
-          mean="mean"
-          range="range"
-          success="success"
-          monitorId="something"
-        />
-      )
+    const component = shallowWithRouter(
+      <MonitorChartsComponent
+        danger="dangerColor"
+        data={{ monitorChartsData: chartResponse.monitorChartsData }}
+        loading={false}
+        mean="mean"
+        range="range"
+        success="success"
+        monitorId="something"
+      />
     );
     expect(component).toMatchSnapshot();
   });

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx

@@ -4,19 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallowWithIntl, renderWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { UptimeDatePicker } from '../uptime_date_picker';
-import { renderWithRouter } from '../../../lib';
+import { renderWithRouter, shallowWithRouter } from '../../../lib';
 
 describe('UptimeDatePicker component', () => {
   it('validates props with shallow render', () => {
-    const component = shallowWithIntl(renderWithRouter(<UptimeDatePicker />));
+    const component = shallowWithRouter(<UptimeDatePicker />);
     expect(component).toMatchSnapshot();
   });
 
   it('renders properly with mock data', () => {
-    const component = renderWithIntl(renderWithRouter(<UptimeDatePicker />));
+    const component = renderWithRouter(<UptimeDatePicker />);
     expect(component).toMatchSnapshot();
   });
 });

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/monitor_bar_series.test.tsx

@@ -5,9 +5,8 @@
  */
 
 import React from 'react';
-import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { MonitorBarSeries, MonitorBarSeriesProps } from '../monitor_bar_series';
-import { renderWithRouter } from '../../../../lib';
+import { renderWithRouter, shallowWithRouter } from '../../../../lib';
 import { SummaryHistogramPoint } from '../../../../../common/graphql/types';
 
 describe('MonitorBarSeries component', () => {
@@ -161,13 +160,13 @@ describe('MonitorBarSeries component', () => {
   });
 
   it('shallow renders a series when there are down items', () => {
-    const component = shallowWithIntl(renderWithRouter(<MonitorBarSeries {...props} />));
+    const component = shallowWithRouter(<MonitorBarSeries {...props} />);
     expect(component).toMatchSnapshot();
   });
 
   it('shallow renders null when there are no down items', () => {
     props.histogramSeries = [];
-    const component = shallowWithIntl(renderWithRouter(<MonitorBarSeries {...props} />));
+    const component = shallowWithRouter(<MonitorBarSeries {...props} />);
     expect(component).toEqual({});
   });
 
@@ -189,20 +188,20 @@ describe('MonitorBarSeries component', () => {
         up: 0,
       },
     ];
-    const component = shallowWithIntl(renderWithRouter(<MonitorBarSeries {...props} />));
+    const component = shallowWithRouter(<MonitorBarSeries {...props} />);
     expect(component).toEqual({});
   });
 
   it('shallow renders nothing if the data series is null', () => {
-    const component = shallowWithIntl(
-      renderWithRouter(<MonitorBarSeries dangerColor="danger" histogramSeries={null} />)
+    const component = shallowWithRouter(
+      <MonitorBarSeries dangerColor="danger" histogramSeries={null} />
     );
     expect(component).toEqual({});
   });
 
   it('renders if the data series is present', () => {
-    const component = renderWithIntl(
-      renderWithRouter(<MonitorBarSeries dangerColor="danger" histogramSeries={histogramSeries} />)
+    const component = renderWithRouter(
+      <MonitorBarSeries dangerColor="danger" histogramSeries={histogramSeries} />
     );
     expect(component).toMatchSnapshot();
   });

x-pack/legacy/plugins/uptime/public/components/functional/filter_group/__tests__/filter_status_button.test.tsx

@@ -5,9 +5,8 @@
  */
 
 import React from 'react';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { FilterStatusButton, FilterStatusButtonProps } from '../filter_status_button';
-import { renderWithRouter } from '../../../../lib/';
+import { shallowWithRouter } from '../../../../lib/';
 
 describe('FilterStatusButton', () => {
   let props: FilterStatusButtonProps;
@@ -21,7 +20,7 @@ describe('FilterStatusButton', () => {
   });
 
   it('renders without errors for valid props', () => {
-    const wrapper = shallowWithIntl(renderWithRouter(<FilterStatusButton {...props} />));
+    const wrapper = shallowWithRouter(<FilterStatusButton {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

x-pack/legacy/plugins/uptime/public/components/functional/location_map/location_map.tsx

@@ -32,7 +32,6 @@ const EuiFlexItemTags = styled(EuiFlexItem)`
   padding-top: 5px;
   @media (max-width: 850px) {
     order: 1;
-    text-align: center;
   }
 `;
 
@@ -80,14 +79,14 @@ export const LocationMap = ({ monitorLocations }: LocationMapProps) => {
         <EuiFlexItemTags>
           <LocationStatusTags locations={monitorLocations?.locations || []} />
         </EuiFlexItemTags>
-        <EuiFlexItem grow={false}>
-          <EuiHideFor sizes={['xs']}>
+        <EuiHideFor sizes={['xs']}>
+          <EuiFlexItem grow={false}>
             {isGeoInfoMissing && <LocationMissingWarning />}
             <MapPanel>
               <EmbeddedMap upPoints={upPoints} downPoints={downPoints} />
             </MapPanel>
-          </EuiHideFor>
-        </EuiFlexItem>
+          </EuiFlexItem>
+        </EuiHideFor>
       </FlexGroup>
     </EuiErrorBoundary>
   );

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/monitor_list.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { MonitorSummaryResult } from '../../../../../common/graphql/types';
 import { MonitorListComponent } from '../monitor_list';
@@ -110,16 +110,14 @@ describe('MonitorList component', () => {
   });
 
   it('renders the monitor list', () => {
-    const component = renderWithIntl(
-      renderWithRouter(
-        <MonitorListComponent
-          dangerColor="danger"
-          data={{ monitorStates: result }}
-          hasActiveFilters={false}
-          loading={false}
-          successColor="primary"
-        />
-      )
+    const component = renderWithRouter(
+      <MonitorListComponent
+        dangerColor="danger"
+        data={{ monitorStates: result }}
+        hasActiveFilters={false}
+        loading={false}
+        successColor="primary"
+      />
     );
 
     expect(component).toMatchSnapshot();