ISSUE-9: Add tests

jest.config.js

@@ -13,9 +13,12 @@ module.exports = {
  '!**/e2e/**',
  ],
  transform: {
- '^.+\\.tsx?$': ['@swc/jest'],
+ '^.+\\.(js|jsx|ts|tsx)$': ['@swc/jest'],
+
  },
- transformIgnorePatterns: ['/node_modules/(?!@openmrs)'],
+ transformIgnorePatterns: [
+ '/node_modules/(?!(@openmrs|uuid)/)',
+ ],
  moduleNameMapper: {
  '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
  '@openmrs/esm-utils': '@openmrs/esm-framework/mock',
@@ -30,4 +33,4 @@ module.exports = {
  testEnvironmentOptions: {
  url: 'http://localhost/',
  },
-};
+};

src/common/history.resource.tsx

@@ -3,15 +3,15 @@ import { restBaseUrl } from '@openmrs/esm-framework';
 import { openmrsFetch } from '@openmrs/esm-framework';
 import useSWR from 'swr';
 
-const useIpsResource = (uuid: string) => {
+export function useIpsResource(uuid: string) {
  const url = `${restBaseUrl}/patient/${uuid}/patientsummary`;
  const { data: history, error, isLoading } = useSWR<{ data: InternationalPatientSummary }, Error>(url, openmrsFetch);
  return {
  history,
  error,
  isLoading,
  };
-};
+}
 
 export function createIpsResource(uuid: string, abortController: AbortController) {
  const url = `${restBaseUrl}/patient/${uuid}/patientsummary`;
@@ -26,5 +26,3 @@ export function createIpsResource(uuid: string, abortController: AbortController
  },
  });
 }
-
-export default useIpsResource;

src/constants.ts

@@ -1,3 +1,3 @@
 export const spaRoot = window['getOpenmrsSpaBase']();
 export const historyBasePath = '/patient/:patientUuid/chart';
-export const historyDashboardPath = `${historyBasePath}/:view/*`;
+export const historyDashboardPath = `${historyBasePath}/:view/*`;

src/dashboard.meta.ts

@@ -3,4 +3,3 @@ export const dashboardMeta = {
  path: 'Patient History',
  title: 'Patient History',
 };
-

src/history/history-detail-overview.component.tsx

@@ -12,7 +12,7 @@ import ObservationTemplate from '../templates/observation-template.component';
 import { Renew } from '@carbon/react/icons';
 import styles from './history-detail-overview.scss';
 import { useTranslation } from 'react-i18next';
-import useIpsResource, { createIpsResource } from '../common/history.resource';
+import { useIpsResource, createIpsResource } from '../common/history.resource';
 import { Tile } from '@carbon/react';
 
 interface HistoryDetailOverviewProps {
@@ -39,49 +39,43 @@ const HistoryDetailOverview: React.FC<HistoryDetailOverviewProps> = () => {
  const [ips, setIps] = useState({
  history: null,
  isLoading: true,
- error: "",
- })
- 
+ error: '',
+ });
+
  useEffect(() => {
  if (history != null) {
- setIps((ps) => ({...ps, history: history, isLoading: isLoading, error: error?.message}));
+ setIps((ps) => ({ ...ps, history: history, isLoading: isLoading, error: error?.message }));
  }
- },[error, history, isLoading])
-
+ }, [error, history, isLoading]);
 
  const handleSubmit = () => {
  setIsSubmitting(true);
- createIpsResource(
- uuid, 
- abortController,
- ).then((response) => {
- if (response.status === 200) {
- setIps((ps) => ({...ps, history: history, isLoading: isLoading, error: error?.message}));
+ createIpsResource(uuid, abortController)
+ .then((response) => {
+ setIps((ps) => ({ ...ps, history: history, isLoading: isLoading, error: error?.message }));
  setIsSubmitting(false);
  showSnackbar({
  isLowContrast: true,
  kind: 'success',
  title: t('ipsCreated', 'IPS'),
+ subtitle: t('ipsNowAvailable', 'The IPS has been updated and is now visible in the Patient History.'),
+ });
+ })
+ .catch((err) => {
+ setIps((ps) => ({ ...ps, history: null, isLoading: false, error: err?.message || 'Failed to fetch IPS' }));
+ setIsSubmitting(false);
+ showSnackbar({
+ title: t('ipsCreationError', 'Error updating IPS'),
+ kind: 'error',
+ isLowContrast: false,
  subtitle: t(
- 'ipsNowAvailable',
- 'The IPS has been updated and is now visible in the Patient History.',
+ 'checkForServerAvailability',
+ 'The FHIR server maybe unreachable or the IPS generation process exited with an error!',
  ),
  });
- }
- })
- .catch((err) => {
- setIps((ps) => ({...ps, history: null, isLoading: false, error: err?.message || "Failed to fetch IPS"}));
- setIsSubmitting(false);
- showSnackbar({
- title: t('ipsCreationError', 'IPS'),
- kind: 'error',
- isLowContrast: false,
- subtitle: t('checkForServerAvailability', 'The Fhir server maybe unreachable or the IPS generation process exited with an error!'),
- });
- })
- .finally(() => {
- abortController.abort();
- });
+ console.error(err?.message);
+ })
+ .finally(() => {});
  };
 
  return (
@@ -95,13 +89,14 @@ const HistoryDetailOverview: React.FC<HistoryDetailOverviewProps> = () => {
  <ErrorState headerTitle={t('patientHistory', 'Patient History')} error={error} />
  ) : ips?.history?.data?.entry ? (
  <Tile className={styles.tile}>
-  <Button
+ <Button
  className={styles.button}
  kind="ghost"
  renderIcon={Renew}
  onClick={handleSubmit}
  disabled={isSubmitting}
- type="submit">
+ type="submit"
+ >
  {t('refresh', 'Refresh')}
  </Button>
  {ips?.history?.data?.entry
@@ -129,20 +124,23 @@ const HistoryDetailOverview: React.FC<HistoryDetailOverviewProps> = () => {
  })()}
  </div>
  ))}
-
  </Tile>
  ) : (
  <Tile className={styles.tile}>
-  <Button
+ <Button
  className={styles.button}
  kind="ghost"
  renderIcon={Renew}
  onClick={handleSubmit}
  disabled={isSubmitting}
- type="submit">
+ type="submit"
+ >
  {t('refresh', 'Refresh')}
  </Button>
- <EmptyState headerTitle={t('patientHistory', 'Patient History')} displayText={t('patientHistory', 'Patient History')}/>
+ <EmptyState
+ headerTitle={t('patientHistory', 'Patient History')}
+ displayText={t('patientHistory', 'Patient History')}
+ />
  </Tile>
  )}
  </TabPanel>

src/history/patient-history.component.tsx

@@ -1,14 +1,14 @@
-import React  from 'react';
+import React from 'react';
 import { useParams } from 'react-router-dom';
 import HistoryDetailOverview from './history-detail-overview.component';
 
 const PatientHistory: React.FC = () => {
  const { patientUuid } = useParams();
  return (
  <>
- <HistoryDetailOverview patientUuid={patientUuid} />
+  <HistoryDetailOverview patientUuid={patientUuid} />
  </>
  );
-}
+};
 
 export default PatientHistory;

src/history/patient-history.test.tsx

@@ -0,0 +1,143 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useParams } from 'react-router-dom';
+import HistoryDetailOverview from './history-detail-overview.component';
+import React from 'react';
+import { FetchResponse, usePatient } from '@openmrs/esm-framework';
+import { createIpsResource, useIpsResource } from '../common/history.resource';
+import { mockIPS, mockPUTResponse } from '../__mocks__/test.util';
+
+const mockUsePatient = jest.mocked(usePatient);
+const mockUseIpsResource = jest.mocked(useIpsResource);
+
+jest.mock('../common/history.resource');
+
+jest.mock('react-router-dom', () => ({
+ ...(jest.requireActual('react-router-dom') as any),
+ useLocation: jest.fn().mockReturnValue({
+ pathname: 'openmrs/spa/patient',
+ }),
+ useHistory: () => [],
+ useParams: jest.fn().mockReturnValue({ patientUuid: 'undefined' }),
+}));
+
+describe('Display patient IPS', () => {
+ beforeEach(() => {
+ const mockUseParams = jest.mocked(useParams);
+ mockUseParams.mockReturnValue({ patientUuid: 'mock-uuid' });
+ });
+
+ it('renders without crashing', () => {
+ mockUsePatient.mockReturnValue({
+ isLoading: false,
+ patient: undefined,
+ patientUuid: 'mock-uuid',
+ error: null,
+ });
+
+ mockUseIpsResource.mockReturnValue({
+ isLoading: false,
+ history: { data: null },
+ error: undefined,
+ });
+ render(<HistoryDetailOverview patientUuid={'mock-uuid'} />, {});
+ });
+
+ it('renders loading before resolving ips', async () => {
+ mockUsePatient.mockReturnValue({
+ isLoading: false,
+ patient: undefined,
+ patientUuid: 'mock-uuid',
+ error: null,
+ });
+
+ mockUseIpsResource.mockReturnValue({
+ isLoading: true,
+ history: { data: null },
+ error: undefined,
+ });
+ render(<HistoryDetailOverview patientUuid={'mock-uuid'} />, {});
+
+ expect(screen.getByText('Loading ...')).toBeInTheDocument();
+ expect(screen.getByRole('progressbar')).toBeInTheDocument();
+ });
+
+ it('renders the ips', async () => {
+ mockUsePatient.mockReturnValue({
+ isLoading: false,
+ patient: undefined,
+ patientUuid: 'mock-uuid',
+ error: null,
+ });
+
+ mockUseIpsResource.mockReturnValue({
+ isLoading: false,
+ history: { data: mockIPS },
+ error: undefined,
+ });
+
+ render(<HistoryDetailOverview patientUuid={'mock-uuid'} />, {});
+
+ expect(screen.getByText('Refresh')).toBeInTheDocument();
+ expect(screen.getByText('AllergyIntolerance')).toBeInTheDocument();
+ expect(screen.getByText('Condition')).toBeInTheDocument();
+ expect(screen.getByText('Immunization')).toBeInTheDocument();
+ expect(screen.getByText('Observation')).toBeInTheDocument();
+
+ expect(screen.getByText('Penicillin allergy')).toBeInTheDocument();
+ expect(screen.getByText('Diabetes mellitus type 2')).toBeInTheDocument();
+ expect(screen.getByText('COVID-19 Vaccine')).toBeInTheDocument();
+ expect(screen.getByText('Blood pressure panel with all children optional')).toBeInTheDocument();
+ });
+
+ it('refresh button triggers downloading new ips', async () => {
+ const mockCreateIpsResource = jest.mocked(createIpsResource);
+
+ mockCreateIpsResource.mockReturnValue({
+ then: function <TResult1 = FetchResponse<unknown>, TResult2 = never>(
+ onfulfilled?: (value: FetchResponse<unknown>) => TResult1 | PromiseLike<TResult1>,
+ onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>,
+ ): Promise<TResult1 | TResult2> {
+ return Promise.resolve(onfulfilled ? onfulfilled(mockPUTResponse) : (mockPUTResponse as TResult1));
+ },
+ catch: function <TResult = never>(
+ onrejected?: (reason: any) => TResult | PromiseLike<TResult>,
+ ): Promise<FetchResponse<unknown> | TResult> {
+ throw new Error('Function not implemented.');
+ },
+ finally: function (onfinally?: () => void): Promise<FetchResponse<unknown>> {
+ return Promise.resolve(mockPUTResponse);
+ },
+ [Symbol.toStringTag]: '',
+ });
+
+ mockUsePatient.mockReturnValue({
+ isLoading: false,
+ patient: undefined,
+ patientUuid: 'mock-uuid',
+ error: null,
+ });
+
+ mockUseIpsResource.mockReturnValue({
+ isLoading: false,
+ history: { data: mockIPS },
+ error: undefined,
+ });
+
+ render(<HistoryDetailOverview patientUuid={'mock-uuid'} />, {});
+
+ expect(screen.getByText('Refresh')).toBeInTheDocument();
+ expect(screen.getByText('AllergyIntolerance')).toBeInTheDocument();
+ expect(screen.getByText('Condition')).toBeInTheDocument();
+ expect(screen.getByText('Immunization')).toBeInTheDocument();
+ expect(screen.getByText('Observation')).toBeInTheDocument();
+
+ expect(screen.getByText('Penicillin allergy')).toBeInTheDocument();
+ expect(screen.getByText('Diabetes mellitus type 2')).toBeInTheDocument();
+ expect(screen.getByText('COVID-19 Vaccine')).toBeInTheDocument();
+ expect(screen.getByText('Blood pressure panel with all children optional')).toBeInTheDocument();
+
+ fireEvent.click(screen.getByText('Refresh'));
+
+ expect(mockCreateIpsResource).toHaveBeenCalled();
+ });
+});

src/root.component.tsx

@@ -11,8 +11,8 @@ const Root: React.FC = () => {
  <div className={styles.patientHistoryWrapper}>
  <BrowserRouter basename={spaRoot}>
  <Routes>
- <Route path={historyBasePath} element={<PatientHistory/>} />
- <Route path={historyDashboardPath} element={<PatientHistory/>} />
+ <Route path={historyBasePath} element={<PatientHistory />} />
+ <Route path={historyDashboardPath} element={<PatientHistory />} />
  </Routes>
  </BrowserRouter>
  </div>

src/templates/allergies-template.component .tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as Constants from '../constants/constants';
-import { type InternationalPatientSummary } from '../types';
+import { type InternationalPatientSummaryResource } from '../types';
 import {
  StructuredListBody,
  StructuredListCell,
@@ -12,7 +12,7 @@ import {
 import styles from '../history/history-detail-overview.scss';
 import { useTranslation } from 'react-i18next';
 
-const AllergiesTemplate = (entry: InternationalPatientSummary) => {
+const AllergiesTemplate = (entry: InternationalPatientSummaryResource) => {
  const { t } = useTranslation();
  const interpretation: string = entry?.resource?.criticality;
  const flaggedCritical = interpretation && interpretation == Constants.CRITICAL_INTERPRETATION;