Introduce RouterWrapper

RedHatInsights · Oct 2, 2023 · e0051a8 · e0051a8
1 parent 5adfe07
commit e0051a8
Show file tree

Hide file tree

Showing 10 changed files with 435 additions and 284 deletions.
diff --git a/config/setupTests.js b/config/setupTests.js
@@ -3,6 +3,7 @@ import { configure, mount, render, shallow } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import React from 'react';
 import 'whatwg-fetch';
+
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.requireActual('react').useEffect,

diff --git a/src/Utilities/TestingUtilities.js b/src/Utilities/TestingUtilities.js
@@ -1,9 +1,35 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
 export const mountWithRouter = (Component, initialEntries) => {
   const wrapper = mount(
     <MemoryRouter initialEntriest={initialEntries}>{Component}</MemoryRouter>
   );
 
   return wrapper;
 };
+
+export const RouterWrapper = ({
+  children,
+  routerProps = { initialEntries: ['/'] },
+  path,
+}) => (
+  <MemoryRouter {...routerProps}>
+    {path ? (
+      <Routes>
+        <Route path={path} element={children} />
+      </Routes>
+    ) : (
+      children
+    )}
+  </MemoryRouter>
+);
+
+RouterWrapper.propTypes = {
+  children: PropTypes.any.isRequired,
+  routerProps: PropTypes.shape({
+    initialEntries: PropTypes.arrayOf(PropTypes.string),
+  }),
+  path: PropTypes.string,
+};
diff --git a/src/components/GeneralInfo/BiosCard/BiosCard.test.js b/src/components/GeneralInfo/BiosCard/BiosCard.test.js
@@ -1,16 +1,10 @@
 /* eslint-disable camelcase */
+import { render } from '@testing-library/react';
 import React from 'react';
-import BiosCard from './BiosCard';
 import configureStore from 'redux-mock-store';
+import { RouterWrapper } from '../../../Utilities/TestingUtilities';
 import { biosTest } from '../../../__mocks__/selectors';
-import { renderWithRouter } from '../../../Utilities/TestingUtilities';
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: 'localhost:3000/example/path',
-  }),
-}));
+import BiosCard from './BiosCard';
 
 describe('BiosCard', () => {
   let initialState;
@@ -31,13 +25,21 @@ describe('BiosCard', () => {
 
   it('should render correctly - no data', () => {
     const store = mockStore({ systemProfileStore: {} });
-    const view = renderWithRouter(<BiosCard store={store} />);
+    const view = render(
+      <RouterWrapper>
+        <BiosCard store={store} />
+      </RouterWrapper>
+    );
     expect(view.asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with data', () => {
     const store = mockStore(initialState);
-    const view = renderWithRouter(<BiosCard store={store} />);
+    const view = render(
+      <RouterWrapper>
+        <BiosCard store={store} />
+      </RouterWrapper>
+    );
     expect(view.asFragment()).toMatchSnapshot();
   });
 
@@ -52,35 +54,45 @@ describe('BiosCard', () => {
         },
       },
     });
-    const view = renderWithRouter(<BiosCard store={store} />);
+    const view = render(
+      <RouterWrapper>
+        <BiosCard store={store} />
+      </RouterWrapper>
+    );
     expect(view.asFragment()).toMatchSnapshot();
   });
 
   ['hasVendor', 'hasVersion', 'hasReleaseDate'].map((item) =>
     it(`should not render ${item}`, () => {
       const store = mockStore(initialState);
-      const view = renderWithRouter(
-        <BiosCard store={store} {...{ [item]: false }} />
+      const view = render(
+        <RouterWrapper>
+          <BiosCard store={store} {...{ [item]: false }} />
+        </RouterWrapper>
       );
       expect(view.asFragment()).toMatchSnapshot();
     })
   );
 
   it('should render extra', () => {
     const store = mockStore(initialState);
-    const view = renderWithRouter(
-      <BiosCard
-        store={store}
-        extra={[
-          { title: 'something', value: 'test' },
-          {
-            title: 'with click',
-            value: '1 tests',
-            onClick: (_e, handleClick) => handleClick('Something', {}, 'small'),
-          },
-        ]}
-      />
+    const view = render(
+      <RouterWrapper>
+        <BiosCard
+          store={store}
+          extra={[
+            { title: 'something', value: 'test' },
+            {
+              title: 'with click',
+              value: '1 tests',
+              onClick: (_e, handleClick) =>
+                handleClick('Something', {}, 'small'),
+            },
+          ]}
+        />
+      </RouterWrapper>
     );
+
     expect(view.asFragment()).toMatchSnapshot();
   });
 });
diff --git a/src/components/GeneralInfo/BiosCard/__snapshots__/BiosCard.test.js.snap b/src/components/GeneralInfo/BiosCard/__snapshots__/BiosCard.test.js.snap
@@ -23,7 +23,7 @@ exports[`BiosCard should not render hasReleaseDate 1`] = `
           >
             <h1
               class=""
-              data-ouia-component-id="OUIA-Generated-Text-6"
+              data-ouia-component-id="SystemPropertiesCardTitle"
               data-ouia-component-type="PF4/Text"
               data-ouia-safe="true"
               data-pf-content="true"
@@ -97,7 +97,7 @@ exports[`BiosCard should not render hasVendor 1`] = `
           >
             <h1
               class=""
-              data-ouia-component-id="OUIA-Generated-Text-4"
+              data-ouia-component-id="SystemPropertiesCardTitle"
               data-ouia-component-type="PF4/Text"
               data-ouia-safe="true"
               data-pf-content="true"
@@ -171,7 +171,7 @@ exports[`BiosCard should not render hasVersion 1`] = `
           >
             <h1
               class=""
-              data-ouia-component-id="OUIA-Generated-Text-5"
+              data-ouia-component-id="SystemPropertiesCardTitle"
               data-ouia-component-type="PF4/Text"
               data-ouia-safe="true"
               data-pf-content="true"
@@ -245,7 +245,7 @@ exports[`BiosCard should render correctly - no data 1`] = `
           >
             <h1
               class=""
-              data-ouia-component-id="OUIA-Generated-Text-1"
+              data-ouia-component-id="SystemPropertiesCardTitle"
               data-ouia-component-type="PF4/Text"
               data-ouia-safe="true"
               data-pf-content="true"
@@ -349,7 +349,7 @@ exports[`BiosCard should render correctly with data - wrong date 1`] = `
           >
             <h1
               class=""
-              data-ouia-component-id="OUIA-Generated-Text-3"
+              data-ouia-component-id="SystemPropertiesCardTitle"
               data-ouia-component-type="PF4/Text"
               data-ouia-safe="true"
               data-pf-content="true"
@@ -435,7 +435,7 @@ exports[`BiosCard should render correctly with data 1`] = `
           >
             <h1
               class=""
-              data-ouia-component-id="OUIA-Generated-Text-2"
+              data-ouia-component-id="SystemPropertiesCardTitle"
               data-ouia-component-type="PF4/Text"
               data-ouia-safe="true"
               data-pf-content="true"
@@ -521,7 +521,7 @@ exports[`BiosCard should render extra 1`] = `
           >
             <h1
               class=""
-              data-ouia-component-id="OUIA-Generated-Text-7"
+              data-ouia-component-id="SystemPropertiesCardTitle"
               data-ouia-component-type="PF4/Text"
               data-ouia-safe="true"
               data-pf-content="true"

diff --git a/src/components/GeneralInfo/CollectionCard/CollectionCard.test.js b/src/components/GeneralInfo/CollectionCard/CollectionCard.test.js
@@ -1,19 +1,13 @@
 /* eslint-disable camelcase */
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import configureStore from 'redux-mock-store';
-import { renderWithRouter } from '../../../Utilities/TestingUtilities';
+import { RouterWrapper } from '../../../Utilities/TestingUtilities';
 import { collectInfoTest } from '../../../__mocks__/selectors';
 import CollectionCard from './CollectionCard';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: 'localhost:3000/example/path',
-  }),
-}));
-
 describe('CollectionCard', () => {
   let initialState;
   let mockStore;
@@ -50,7 +44,11 @@ describe('CollectionCard', () => {
 
   it('renders tooltip for version', async () => {
     const store = mockStore(initialState);
-    renderWithRouter(<CollectionCard store={store} />);
+    render(
+      <RouterWrapper>
+        <CollectionCard store={store} />
+      </RouterWrapper>
+    );
     await userEvent.hover(screen.getByText('test-client'));
     await screen.findByText(/RPM version: test-client/i);
     await screen.findByText(/Dynamic update version: test-egg/i);
@@ -65,25 +63,32 @@ describe('CollectionCard', () => {
   ].map(([flag, title]) =>
     it(`should not render ${title}`, () => {
       const store = mockStore(initialState);
-      renderWithRouter(<CollectionCard store={store} {...{ [flag]: false }} />);
-      expect(screen.queryByText(title)).toBeNull();
+      render(
+        <RouterWrapper>
+          <CollectionCard store={store} {...{ [flag]: false }} />
+        </RouterWrapper>
+      );
+      expect(screen.queryByText(title)).not.toBeInTheDocument();
     })
   );
 
   it('should render extra', () => {
     const store = mockStore(initialState);
-    const view = renderWithRouter(
-      <CollectionCard
-        store={store}
-        extra={[
-          { title: 'something', value: 'test' },
-          {
-            title: 'with click',
-            value: '1 tests',
-            onClick: (_e, handleClick) => handleClick('Something', {}, 'small'),
-          },
-        ]}
-      />
+    const view = render(
+      <RouterWrapper>
+        <CollectionCard
+          store={store}
+          extra={[
+            { title: 'something', value: 'test' },
+            {
+              title: 'with click',
+              value: '1 tests',
+              onClick: (_e, handleClick) =>
+                handleClick('Something', {}, 'small'),
+            },
+          ]}
+        />
+      </RouterWrapper>
     );
     expect(view.asFragment()).toMatchSnapshot();
   });