Add tests

packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/Form.test.tsx

@@ -243,7 +243,9 @@ describe('components/forms/UserFroupForm', () => {
       wrapper.update();
     });
 
-    expect(wrapper.find('PageHeader').text()).toMatchInlineSnapshot(`"Edit User Group | Admin"`);
+    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(
+      `"Edit User Group | Admin"`
+    );
     wrapper.unmount();
   });
 

packages/keycloak-user-management/src/components/Credentials/tests/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/Credentials renders correctly: row props 1`] = `
 Object {
   "children": Array [
-    <PageHeader
+    <SimplePageHeader
       title="User Credentials | opensrp"
     />,
     <Col

packages/keycloak-user-management/src/components/forms/UserForm/tests/index.test.tsx

@@ -495,7 +495,7 @@ describe('components/forms/UserForm', () => {
       wrapper.update();
     });
 
-    expect(wrapper.find('PageHeader').text()).toEqual(`Edit User | ${keycloakUser.username}`);
+    expect(wrapper.find('SimplePageHeader').text()).toEqual(`Edit User | ${keycloakUser.username}`);
   });
 
   it('show practitioner toggle when editing user and practitioner is null', async () => {

packages/location-management/src/components/EditLocationUnit/tests/index.test.tsx

@@ -108,7 +108,7 @@ describe('EditLocationUnit', () => {
     expect(helmet.title).toEqual('Edit > Kenya');
 
     // rendered page including title
-    expect(wrapper.find('PageHeader').text()).toMatchInlineSnapshot(`"Edit > Kenya"`);
+    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(`"Edit > Kenya"`);
 
     expect(wrapper.find('LocationForm').text()).toMatchSnapshot('form rendered');
 

packages/location-management/src/components/LocationUnitGroupAddEdit/tests/Form.test.tsx

@@ -289,7 +289,7 @@ describe('location-management/src/components/LocationUnitGroupAddEdit', () => {
       wrapper.update();
     });
     wrapperLocationUnitGroup.update();
-    expect(wrapperLocationUnitGroup.find('PageHeader').text()).toEqual(
+    expect(wrapperLocationUnitGroup.find('SimplePageHeader').text()).toEqual(
       `Edit Location Unit Group | ${fixtures.sampleLocationUnitGroupPayload.name}`
     );
   });

packages/location-management/src/components/LocationUnitGroupAddEdit/tests/__snapshots__/index.test.tsx.snap

@@ -10,7 +10,7 @@ Array [
       Edit Location Unit Group
     </title>
   </HelmetWrapper>,
-  <PageHeader
+  <SimplePageHeader
     title="Edit Location Unit Group | "
   />,
   <Col
@@ -35,7 +35,7 @@ Array [
       Add Location Unit Group
     </title>
   </HelmetWrapper>,
-  <PageHeader
+  <SimplePageHeader
     title="Add Location Unit Group"
   />,
   <Col

packages/location-management/src/components/NewLocationUnit/tests/index.test.tsx

@@ -194,7 +194,7 @@ describe('NewLocationUnit', () => {
     expect(helmet.title).toEqual('Add Location Unit');
 
     // rendered page including title
-    expect(wrapper.find('PageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
+    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
 
     expect(wrapper.find('LocationForm').text()).toMatchSnapshot('form rendered');
   });
@@ -235,7 +235,7 @@ describe('NewLocationUnit', () => {
     expect(helmet.title).toEqual('Add Location Unit');
 
     // rendered page including title
-    expect(wrapper.find('PageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
+    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
 
     wrapper.unmount();
   });

packages/react-utils/src/components/PageHeaders/RichPageHeader/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { PageHeader, PageHeaderProps } from '@ant-design/pro-layout';
 import { Link, useHistory } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Breadcrumb } from 'antd';
-import { BreadcrumbProps } from 'antd/es/breadcrumb';
+import { useTranslation } from '../../../mls';
+import { Breadcrumb, BreadcrumbProps } from 'antd';
 
 export interface RichPageHeaderProps {
   pageHeaderProps?: PageHeaderProps;

packages/react-utils/src/components/PageHeaders/RichPageHeader/tests/index.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { RichPageHeader } from '..';
+import { render, cleanup, screen } from '@testing-library/react';
+import { Router } from 'react-router';
+import { createBrowserHistory } from 'history';
+import userEvent from '@testing-library/user-event';
+
+const history = createBrowserHistory();
+
+const ComponentWrapper = (props) => {
+  return (
+    <Router history={history}>
+      <RichPageHeader {...props} />
+    </Router>
+  );
+};
+
+afterEach(() => {
+  jest.resetAllMocks();
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+});
+
+afterAll(() => {
+  cleanup();
+});
+
+it('Renders as expected', async () => {
+  const backBtnSpy = jest.spyOn(history, 'goBack');
+  const pageURL = '/test/page';
+  history.push(pageURL);
+  render(<ComponentWrapper />);
+
+  const container = document.querySelector('.ant-page-header');
+  const breadCrumbElement = container?.querySelector('.ant-breadcrumb');
+  expect(screen.getByText(/View details/)).toBeInTheDocument();
+  expect(breadCrumbElement).toBeNull();
+
+  expect(history.location.pathname).toEqual(pageURL);
+
+  const backBtn = screen.getByRole('button');
+  userEvent.click(backBtn);
+  expect(backBtnSpy).toBeCalledTimes(1);
+});
+
+it('Renders as expected with props', async () => {
+  const prevPageURL = '/users';
+  const pageURL = `${prevPageURL}/details`;
+  const breadCrumbProps = {
+    items: [
+      {
+        title: 'Users',
+        path: prevPageURL,
+      },
+      {
+        title: 'User details',
+      },
+    ],
+  };
+  const pageHeaderProps = {
+    subTitle: '1234',
+  };
+  const richPageHeaderProps = {
+    pageHeaderProps,
+    breadCrumbProps,
+  };
+  history.push(pageURL);
+  render(<ComponentWrapper {...richPageHeaderProps} />);
+
+  expect(screen.getByText(/View details/)).toBeInTheDocument();
+  expect(screen.getByText(/123/)).toBeInTheDocument();
+  expect(screen.getByText(/User details/)).toBeInTheDocument();
+
+  expect(history.location.pathname).toEqual(pageURL);
+
+  const usersLink = screen.getByRole('link', { name: /Users/i });
+  userEvent.click(usersLink);
+  expect(history.location.pathname).toEqual(prevPageURL);
+});

packages/react-utils/src/components/PageHeaders/SimplePageHeader/tests/index.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SimplePageHeader } from '..';
+import { render, cleanup, screen } from '@testing-library/react';
+
+afterAll(() => {
+  cleanup();
+});
+
+it('Renders as expected', async () => {
+  const title = 'Test Page';
+  render(<SimplePageHeader title={title} />);
+
+  expect(screen.getByText(title)).toBeInTheDocument();
+});