From 99a34bded81ae5a87305e54eb5ef7f50e50e0cb8 Mon Sep 17 00:00:00 2001
From: Eric Musyoka <wambua.eric01@gmail.com>
Date: Mon, 29 Apr 2024 14:41:05 +0300
Subject: [PATCH] Add tests

---
 .../PageHeaders/RichPageHeader/index.tsx      |  2 +-
 .../RichPageHeader/tests/index.test.tsx       | 79 +++++++++++++++++++
 .../SimplePageHeader/tests/index.test.tsx     | 14 ++++
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-utils/src/components/PageHeaders/RichPageHeader/tests/index.test.tsx
 create mode 100644 packages/react-utils/src/components/PageHeaders/SimplePageHeader/tests/index.test.tsx

diff --git a/packages/react-utils/src/components/PageHeaders/RichPageHeader/index.tsx b/packages/react-utils/src/components/PageHeaders/RichPageHeader/index.tsx
index d7a8a34bd..14bc025c1 100644
--- a/packages/react-utils/src/components/PageHeaders/RichPageHeader/index.tsx
+++ b/packages/react-utils/src/components/PageHeaders/RichPageHeader/index.tsx
@@ -1,7 +1,7 @@
 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 { useTranslation } from '../../../mls';
 import { Breadcrumb } from 'antd';
 import { BreadcrumbProps } from 'antd/es/breadcrumb';
 
diff --git a/packages/react-utils/src/components/PageHeaders/RichPageHeader/tests/index.test.tsx b/packages/react-utils/src/components/PageHeaders/RichPageHeader/tests/index.test.tsx
new file mode 100644
index 000000000..f818c5037
--- /dev/null
+++ b/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);
+});
diff --git a/packages/react-utils/src/components/PageHeaders/SimplePageHeader/tests/index.test.tsx b/packages/react-utils/src/components/PageHeaders/SimplePageHeader/tests/index.test.tsx
new file mode 100644
index 000000000..ecac255fe
--- /dev/null
+++ b/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();
+});