Type openmrsFetch mocks

packages/esm-appointments-app/src/appointments/appointment-tabs.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { mockAppointmentsData } from '__mocks__';
 import AppointmentTabs from './appointment-tabs.component';
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 describe('AppointmentTabs', () => {
   xit(`renders tabs showing different appointment lists`, async () => {
-    mockOpenmrsFetch.mockReturnValueOnce({ data: mockAppointmentsData.data });
+    mockOpenmrsFetch.mockResolvedValue({ ...mockAppointmentsData } as unknown as FetchResponse);
 
     renderWithSwr(<AppointmentTabs appointmentServiceType="" />);
 

packages/esm-appointments-app/src/appointments/details/appointment-details.component.tsx

@@ -51,7 +51,7 @@ const AppointmentDetails: React.FC<AppointmentDetailsProps> = ({ appointment })
           )}
           {patient && patient?.telecom
             ? patient.telecom.map((contact, i) => (
-                <div className={styles.labelContainer}>
+                <div key={i} className={styles.labelContainer}>
                   <p className={styles.labelBold}>{t('Contact', 'Contact {{index}}', { index: i + 1 })}: </p>
                   <p className={styles.label}>{contact.value}</p>
                 </div>

packages/esm-appointments-app/src/form/appointments-form.component.tsx

@@ -43,7 +43,6 @@ import {
   useMutateAppointments,
 } from './appointments-form.resource';
 import { useProviders } from '../hooks/useProviders';
-import Workload from '../workload/workload.component';
 import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
 import { type ConfigObject } from '../config-schema';
 import {
@@ -54,9 +53,9 @@ import {
   moduleName,
   weekDays,
 } from '../constants';
-import styles from './appointments-form.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
-import uniqBy from 'lodash/uniqBy';
+import Workload from '../workload/workload.component';
+import styles from './appointments-form.scss';
 
 const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
 

packages/esm-appointments-app/src/form/appointments-form.test.tsx

@@ -23,7 +23,7 @@ const defaultProps = {
 };
 
 const mockCreateAppointment = jest.mocked(saveAppointment);
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseLocations = jest.mocked(useLocations);
 const mockUseSession = jest.mocked(useSession);
@@ -108,7 +108,7 @@ describe('AppointmentForm', () => {
   });
 
   it('renders the appointments form showing all the relevant fields and values', async () => {
-    mockOpenmrsFetch.mockReturnValue(mockUseAppointmentServiceData);
+    mockOpenmrsFetch.mockResolvedValue(mockUseAppointmentServiceData as unknown as FetchResponse);
 
     renderWithSwr(<AppointmentForm {...defaultProps} />);
 
@@ -137,7 +137,7 @@ describe('AppointmentForm', () => {
   it('closes the form and the workspace when the cancel button is clicked', async () => {
     const user = userEvent.setup();
 
-    mockOpenmrsFetch.mockReturnValueOnce(mockUseAppointmentServiceData);
+    mockOpenmrsFetch.mockResolvedValueOnce(mockUseAppointmentServiceData as unknown as FetchResponse);
 
     renderWithSwr(<AppointmentForm {...defaultProps} />);
 
@@ -152,7 +152,7 @@ describe('AppointmentForm', () => {
   it('renders a success snackbar  upon successfully scheduling an appointment', async () => {
     const user = userEvent.setup();
 
-    mockOpenmrsFetch.mockReturnValue({ data: mockUseAppointmentServiceData });
+    mockOpenmrsFetch.mockResolvedValue({ data: mockUseAppointmentServiceData } as unknown as FetchResponse);
     mockCreateAppointment.mockResolvedValue({ status: 200, statusText: 'Ok' } as FetchResponse);
 
     renderWithSwr(<AppointmentForm {...defaultProps} />);
@@ -190,7 +190,7 @@ describe('AppointmentForm', () => {
       },
     };
 
-    mockOpenmrsFetch.mockReturnValueOnce({ data: mockUseAppointmentServiceData });
+    mockOpenmrsFetch.mockResolvedValueOnce({ data: mockUseAppointmentServiceData } as unknown as FetchResponse);
     mockCreateAppointment.mockRejectedValueOnce(error);
 
     renderWithSwr(<AppointmentForm {...defaultProps} />);

packages/esm-appointments-app/src/metrics/appointments-metrics.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { mockAppointmentMetrics, mockProvidersCount, mockStartTime } from '__mocks__';
 import AppointmentsMetrics from './appointments-metrics.component';
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 jest.mock('../hooks/useClinicalMetrics', () => ({
   ...jest.requireActual('../hooks/useClinicalMetrics'),
@@ -28,7 +28,9 @@ jest.mock('../hooks/useClinicalMetrics', () => ({
 
 describe('Appointment metrics', () => {
   it('renders metrics from the appointments list', async () => {
-    mockOpenmrsFetch.mockResolvedValue({ data: [] });
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: [],
+    } as unknown as FetchResponse);
 
     render(<AppointmentsMetrics appointmentServiceType="consultation-service-uuid" />);
 

packages/esm-appointments-app/src/patient-appointments/patient-appointments-base.test.tsx

@@ -1,28 +1,32 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { mockAppointmentsData } from '__mocks__';
 import { mockPatient, patientChartBasePath, renderWithSwr, waitForLoadingToFinish } from 'tools';
+import { type AppointmentsFetchResponse } from '../types';
 import AppointmentsBase from './patient-appointments-base.component';
 
 const testProps = {
   basePath: patientChartBasePath,
   patientUuid: mockPatient.id,
 };
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 describe('AppointmensOverview', () => {
   it('renders an empty state if appointments data is unavailable', async () => {
-    mockOpenmrsFetch.mockReturnValueOnce({ data: [] });
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: [],
+    } as unknown as FetchResponse<AppointmentsFetchResponse>);
 
     renderWithSwr(<AppointmentsBase {...testProps} />);
 
     await waitForLoadingToFinish();
 
     expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+    expect(screen.getByText(/there are no upcoming appointments to display for this patient/i)).toBeInTheDocument();
   });
 
   it('renders an error state if there was a problem fetching appointments data', async () => {
@@ -51,7 +55,9 @@ describe('AppointmensOverview', () => {
   it(`renders a tabular overview of the patient's appointment schedule if available`, async () => {
     const user = userEvent.setup();
 
-    mockOpenmrsFetch.mockReturnValueOnce(mockAppointmentsData);
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      ...mockAppointmentsData,
+    } as unknown as FetchResponse<AppointmentsFetchResponse>);
 
     renderWithSwr(<AppointmentsBase {...testProps} />);
 

packages/esm-appointments-app/src/types/index.ts

@@ -61,6 +61,7 @@ export interface Appointment {
 export interface AppointmentsFetchResponse {
   data: Array<Appointment>;
 }
+
 export interface AppointmentService {
   appointmentServiceId: number;
   creatorName: string;
@@ -133,6 +134,7 @@ export interface AppointmentPayload {
   uuid?: string;
   providerUuid?: string | OpenmrsResource;
 }
+
 export interface AppointmentCountMap {
   allAppointmentsCount: number;
   missedAppointmentsCount;
@@ -144,6 +146,7 @@ export interface AppointmentSummary {
   appointmentService: OpenmrsResource;
   appointmentCountMap: Record<string, AppointmentCountMap>;
 }
+
 export interface Provider {
   uuid: string;
   display: string;
@@ -158,6 +161,7 @@ export enum DurationPeriod {
   weekly,
   daily,
 }
+
 export interface Identifier {
   identifier: string;
   identifierName?: string;

packages/esm-patient-list-management-app/src/lists-dashboard/lists-dashboard.test.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { useLocation } from 'react-router-dom';
-import { openmrsFetch, restBaseUrl, useSession } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl, useSession } from '@openmrs/esm-framework';
 import { mockSession } from '__mocks__';
 import ListsDashboard from './lists-dashboard.component';
 
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockUseLocation = jest.mocked(useLocation);
 const mockUseSession = jest.mocked(useSession);
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -86,7 +86,7 @@ describe('ListsDashboard', () => {
           },
         ],
       },
-    });
+    } as unknown as FetchResponse);
   });
 
   it('renders the patient list page UI correctly', async () => {

packages/esm-patient-search-app/src/compact-patient-search/compact-patient-banner.component.tsx

@@ -129,7 +129,7 @@ const CompactPatientBanner = forwardRef<HTMLDivElement, CompactPatientBannerProp
                 {getGender(patient.gender)} <span className={styles.middot}>&middot;</span> {age(patient.birthDate)}
                 <span className={styles.middot}>&middot;</span>
                 {patientIdentifiers.map((identifier) => (
-                  <IdentifierTag identifier={identifier} />
+                  <IdentifierTag key={identifier.uuid} identifier={identifier} />
                 ))}
               </div>
             </div>

packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.test.tsx

@@ -12,7 +12,7 @@ import { mockMetrics, mockServiceTypes, mockLocations, mockSession } from '__moc
 import { type ConfigObject, configSchema } from '../config-schema';
 import ClinicMetrics from './clinic-metrics.component';
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseLocations = jest.mocked(useLocations);
 const mockUseSession = jest.mocked(useSession);
@@ -61,7 +61,7 @@ describe('Clinic metrics', () => {
       visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
     });
 
-    mockOpenmrsFetch.mockReturnValue({ data: mockMetrics } as unknown as FetchResponse);
+    mockOpenmrsFetch.mockResolvedValue({ data: mockMetrics } as unknown as FetchResponse);
 
     render(<ClinicMetrics />);