adjust monitor tests to use mockReduxHooks helper, and add mockReactR…

…outerDomHooks

x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx

@@ -6,11 +6,10 @@
 
 import React from 'react';
 import moment from 'moment';
-import * as reactRouterDom from 'react-router-dom';
-import * as redux from 'react-redux';
 import { Ping } from '../../../../common/runtime_types';
 import { MonitorPageTitle } from '../monitor_title';
 import { renderWithRouter } from '../../../lib';
+import { mockReduxHooks, mockReactRouterDomHooks } from '../../../lib/helper/test_helpers';
 
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
@@ -21,15 +20,6 @@ jest.mock('react-router-dom', () => {
   };
 });
 
-jest.mock('react-redux', () => {
-  const originalModule = jest.requireActual('react-redux');
-
-  return {
-    ...originalModule,
-    useSelector: jest.fn(),
-  };
-});
-
 describe('MonitorTitle component', () => {
   const monitorName = 'sample monitor';
   const defaultMonitorId = 'always-down';
@@ -61,29 +51,25 @@ describe('MonitorTitle component', () => {
   };
 
   beforeEach(() => {
-    jest.spyOn(reactRouterDom, 'useParams').mockReturnValue({ monitorId: defaultMonitorIdEncoded });
-    jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn());
-    jest.spyOn(redux, 'useSelector').mockReturnValue(defaultMonitorStatus);
+    mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } });
+    mockReduxHooks(defaultMonitorStatus);
   });
 
   it('renders the monitor heading and EnableMonitorAlert toggle', () => {
-    jest.spyOn(redux, 'useSelector').mockReturnValue(monitorStatusWithName);
-
+    mockReduxHooks(monitorStatusWithName);
     const component = renderWithRouter(<MonitorPageTitle />);
     expect(component.find('h1').text()).toBe(monitorName);
     expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1);
   });
 
   it('renders the user provided monitorId when the name is not present', () => {
-    jest.spyOn(reactRouterDom, 'useParams').mockReturnValue({ monitorId: defaultMonitorIdEncoded }); // resolves to always-down
+    mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } });
     const component = renderWithRouter(<MonitorPageTitle />);
     expect(component.find('h1').text()).toBe(defaultMonitorId);
   });
 
   it('renders the url when the monitorId is auto generated and the monitor name is not present', () => {
-    jest
-      .spyOn(reactRouterDom, 'useParams')
-      .mockReturnValue({ monitorId: autoGeneratedMonitorIdEncoded }); // resolves to auto-icmp-0X24948F467C6C4F01
+    mockReactRouterDomHooks({ useParamsResponse: { monitorId: autoGeneratedMonitorIdEncoded } });
     const component = renderWithRouter(<MonitorPageTitle />);
     expect(component.find('h1').text()).toBe(defaultMonitorStatus.url?.full);
   });

x-pack/plugins/uptime/public/lib/helper/test_helpers.ts

@@ -9,6 +9,7 @@
 import moment from 'moment';
 import { Moment } from 'moment-timezone';
 import * as redux from 'react-redux';
+import * as reactRouterDom from 'react-router-dom';
 
 export function mockMoment() {
   // avoid timezone issues
@@ -27,3 +28,7 @@ export function mockReduxHooks(response?: any) {
 
   jest.spyOn(redux, 'useSelector').mockReturnValue(response);
 }
+
+export function mockReactRouterDomHooks({ useParamsResponse }: { useParamsResponse: any }) {
+  jest.spyOn(reactRouterDom, 'useParams').mockReturnValue(useParamsResponse);
+}