(test) Fix various warnings shown when running tests (#862)

packages/esm-active-visits-app/src/active-visits-widget/active-visits.component.tsx

@@ -18,6 +18,7 @@ import {
   TableExpandedRow,
   Tile,
 } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import {
   useLayoutType,
   isDesktop,
@@ -28,7 +29,6 @@ import {
   navigate,
   ErrorState,
 } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 import { EmptyDataIllustration } from './empty-data-illustration.component';
 import { useActiveVisits, getOriginFromPathName } from './active-visits.resource';
 import styles from './active-visits.scss';

packages/esm-active-visits-app/src/active-visits-widget/active-visits.test.tsx

@@ -8,6 +8,7 @@ const mockedUsePagination = usePagination as jest.Mock;
 const mockActiveVisits = useActiveVisits as jest.Mock;
 
 const mockActiveVisitsData = [{ id: '1', name: 'John Doe', visitType: 'Checkup', patientUuid: 'uuid1' }];
+
 jest.mock('./active-visits.resource', () => ({
   ...jest.requireActual('./active-visits.resource'),
   useActiveVisits: jest.fn(() => ({
@@ -20,6 +21,12 @@ jest.mock('./active-visits.resource', () => ({
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
+  ErrorState: jest.fn(() => (
+    <div>
+      Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site
+      administrator and quote the error code above.
+    </div>
+  )),
   useConfig: jest.fn(() => ({ activeVisits: { pageSizes: [10, 20, 30, 40, 50], pageSize: 10 } })),
   usePagination: jest.fn().mockImplementation((data) => ({
     currentPage: 1,
@@ -30,10 +37,6 @@ jest.mock('@openmrs/esm-framework', () => ({
 }));
 
 describe('ActiveVisitsTable', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('renders data table with active visits', () => {
     render(<ActiveVisitsTable />);
 
@@ -97,7 +100,7 @@ describe('ActiveVisitsTable', () => {
     });
   });
 
-  it('should display the Error when there is error', () => {
+  it('should display the error state when there is error', () => {
     mockActiveVisits.mockImplementationOnce(() => ({
       activeVisits: undefined,
       isLoading: false,
@@ -107,10 +110,8 @@ describe('ActiveVisitsTable', () => {
 
     render(<ActiveVisitsTable />);
 
-    const expectedColumnHeaders = [/Visit Time/, /ID Number/, /Name/, /Gender/, /Age/, /Visit Type/];
-    expectedColumnHeaders.forEach((header) => {
-      expect(screen.queryByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
-    });
+    expect(screen.getByText(/sorry, there was a problem displaying this information/i)).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
   });
 
   it('should display the pagination when pagination is true', () => {

packages/esm-appointments-app/package.json

@@ -14,7 +14,7 @@
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env.analyze=true",
     "lint": "eslint src --ext tsx",
-    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
     "test-watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",

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

@@ -8,7 +8,11 @@ import MetricsCard from './metrics-card.component';
 import MetricsHeader from './metrics-header.component';
 import styles from './appointments-metrics.scss';
 
-const AppointmentsMetrics: React.FC<{ serviceUuid: string }> = ({ serviceUuid }) => {
+interface AppointmentMetricsProps {
+  serviceUuid: string;
+}
+
+const AppointmentsMetrics: React.FC<AppointmentMetricsProps> = ({ serviceUuid }) => {
   const { t } = useTranslation();
 
   const { highestServiceLoad, error: clinicalMetricsError } = useClinicalMetrics();

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { openmrsFetch } from '@openmrs/esm-framework';
 import { mockAppointmentMetrics, mockProvidersCount, mockStartTime } from '../../../../__mocks__/appointments.mock';
 import AppointmentsMetrics from './appointments-metrics.component';
@@ -31,19 +31,21 @@ jest.mock('../hooks/useClinicalMetrics', () => {
 });
 
 describe('Appointment metrics', () => {
-  it('renders metrics from appointment list', async () => {
+  it('renders metrics from the appointments list', async () => {
     mockedOpenmrsFetch.mockResolvedValue({ data: [] });
 
     renderAppointmentMetrics();
 
-    await waitFor(() => expect(screen.getByText(/appointment metrics/i)).toBeInTheDocument());
-    expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
-    expect(screen.getByText(/patients/i)).toBeInTheDocument();
-    expect(screen.getByText(/16/i)).toBeInTheDocument();
-    expect(screen.getByText(/4/i)).toBeInTheDocument();
+    await act(() => {
+      expect(screen.getByText(/appointment metrics/i)).toBeInTheDocument();
+      expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
+      expect(screen.getByText(/patients/i)).toBeInTheDocument();
+      expect(screen.getByText(/16/i)).toBeInTheDocument();
+      expect(screen.getByText(/4/i)).toBeInTheDocument();
+    });
   });
 });
 
 function renderAppointmentMetrics() {
-  render(<AppointmentsMetrics serviceUuid="uuid" />);
+  render(<AppointmentsMetrics serviceUuid="consultation-service-uuid" />);
 }

packages/esm-appointments-app/src/appointments-metrics/metrics-header.component.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next';
 import { Calendar, Hospital } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { ExtensionSlot, navigate } from '@openmrs/esm-framework';
-import styles from './metrics-header.scss';
 import { spaBasePath } from '../constants';
-import AppointmentForm from '../appointments/forms/create-edit-form/appointments-form.component';
 import { closeOverlay, launchOverlay } from '../hooks/useOverlay';
+import AppointmentForm from '../appointments/forms/create-edit-form/appointments-form.component';
+import styles from './metrics-header.scss';
 
 const MetricsHeader: React.FC = () => {
   const { t } = useTranslation();

packages/esm-appointments-app/src/appointments/forms/create-edit-form/appointments-form.component.tsx

@@ -6,19 +6,19 @@ import {
   ButtonSet,
   DatePicker,
   DatePickerInput,
+  Layer,
   Select,
   SelectItem,
-  TimePicker,
-  TimePickerSelect,
-  Toggle,
   SkeletonText,
   Tab,
   TabList,
-  Tabs,
   TabPanel,
   TabPanels,
+  Tabs,
   TextArea,
-  Layer,
+  TimePicker,
+  TimePickerSelect,
+  Toggle,
 } from '@carbon/react';
 import {
   useLocations,
@@ -30,9 +30,7 @@ import {
   ConfigObject,
   useSession,
 } from '@openmrs/esm-framework';
-
 import first from 'lodash-es/first';
-import styles from './appointments-form.scss';
 import { mutate } from 'swr';
 import { useAppointmentDate, convertTime12to24 } from '../../../helpers';
 import { closeOverlay } from '../../../hooks/useOverlay';
@@ -46,9 +44,10 @@ import {
 } from '../forms.resource';
 import { useInitialAppointmentFormValue, PatientAppointment } from '../useInitialFormValues';
 import { useCalendarDistribution } from '../workload-helper';
-import WorkloadCard from '../workload.component';
 import { useDefaultLoginLocation } from '../../../hooks/useDefaultLocation';
 import LocationSelectOption from '../../common-components/location-select-option.component';
+import WorkloadCard from '../workload.component';
+import styles from './appointments-form.scss';
 
 interface AppointmentFormProps {
   appointment?: MappedAppointment;
@@ -78,7 +77,7 @@ const AppointmentForm: React.FC<AppointmentFormProps> = ({ appointment, patientU
   const { defaultFacility, isLoading: loadingDefaultFacility } = useDefaultLoginLocation();
 
   const appointmentService = services?.find(({ uuid }) => uuid === patientAppointment.serviceUuid);
-  const today = dayjs().startOf('day').toDate();
+  const today = dayjs().startOf('day').format();
 
   useEffect(() => {
     if (locations?.length && sessionUser) {

packages/esm-appointments-app/src/home-appointments/appointment-actions.test.tsx

@@ -37,21 +37,21 @@ describe('ActionsMenu', () => {
       status: 'Scheduled',
     };
 
-    const { getByText } = render(<ActionsMenu appointment={mockAppointment} useBahmniUI="true" />);
+    renderActionsMenu({ appointment: mockAppointment, useBahmniUI: 'true' });
 
-    fireEvent.click(getByText('Edit Appointment'));
-    fireEvent.click(getByText('Check In'));
-    fireEvent.click(getByText('Complete'));
-    fireEvent.click(getByText('Missed'));
-    fireEvent.click(getByText('Cancel'));
-    fireEvent.click(getByText('Add new appointment'));
+    fireEvent.click(screen.getByText(/Edit Appointment/i));
+    fireEvent.click(screen.getByText(/Check In/i));
+    fireEvent.click(screen.getByText(/Complete/i));
+    fireEvent.click(screen.getByText(/Missed/i));
+    fireEvent.click(screen.getByText(/Cancel/i));
+    fireEvent.click(screen.getByText(/Add new appointment/i));
 
-    expect(screen.getByText('Edit Appointment')).toBeInTheDocument();
-    expect(screen.getByText('Check In')).toBeInTheDocument();
-    expect(screen.getByText('Complete')).toBeInTheDocument();
-    expect(screen.getByText('Missed')).toBeInTheDocument();
-    expect(screen.getByText('Cancel')).toBeInTheDocument();
-    expect(screen.getByText('Add new appointment')).toBeInTheDocument();
+    expect(screen.getByText(/Edit Appointment/i)).toBeInTheDocument();
+    expect(screen.getByText(/Check In/i)).toBeInTheDocument();
+    expect(screen.getByText(/Complete/i)).toBeInTheDocument();
+    expect(screen.getByText(/Missed/i)).toBeInTheDocument();
+    expect(screen.getByText(/Cancel/i)).toBeInTheDocument();
+    expect(screen.getByText(/Add new appointment/i)).toBeInTheDocument();
   });
 
   it('renders the actions menu with correct options and handlers in non-BahmniUI mode', () => {
@@ -61,14 +61,14 @@ describe('ActionsMenu', () => {
       status: 'CheckedIn',
     };
 
-    const { getByText } = render(<ActionsMenu appointment={mockAppointment} useBahmniUI={undefined} />);
+    renderActionsMenu({ appointment: mockAppointment, useBahmniUI: undefined });
 
-    fireEvent.click(getByText('Edit Appointment'));
-    fireEvent.click(getByText('Check In'));
-    fireEvent.click(getByText('Complete'));
-    fireEvent.click(getByText('Missed'));
-    fireEvent.click(getByText('Cancel'));
-    fireEvent.click(getByText('Add new appointment'));
+    fireEvent.click(screen.getByText(/Edit Appointment/i));
+    fireEvent.click(screen.getByText(/Check In/i));
+    fireEvent.click(screen.getByText(/Complete/i));
+    fireEvent.click(screen.getByText(/Missed/i));
+    fireEvent.click(screen.getByText(/Cancel/i));
+    fireEvent.click(screen.getByText(/Add new appointment/i));
 
     expect(screen.getByText('Edit Appointment')).toBeInTheDocument();
     expect(screen.getByText('Check In')).toBeInTheDocument();
@@ -78,3 +78,7 @@ describe('ActionsMenu', () => {
     expect(screen.getByText('Add new appointment')).toBeInTheDocument();
   });
 });
+
+function renderActionsMenu({ appointment, useBahmniUI }) {
+  return render(<ActionsMenu appointment={appointment} useBahmniUI={useBahmniUI} />);
+}

packages/esm-appointments-app/src/home-appointments/appointments-list.test.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import AppointmentsBaseTable from './appointments-list.component';
 import { mockSession } from '../../../../__mocks__/session.mock';
 import { useTodaysAppointments } from './appointments-table.resource';
 import { usePagination } from '@openmrs/esm-framework';
-import { mockAppointmentsData } from '../../../../__mocks__/appointments.mock';
 
 const useTodaysAppointmentsMock = useTodaysAppointments as jest.Mock;
 const usePaginationMock = usePagination as jest.Mock;
@@ -51,7 +50,7 @@ describe('AppointmentsBaseTable', () => {
     useTodaysAppointmentsMock.mockImplementationOnce(() => ({
       appointments: [
         {
-          id: 1,
+          id: '1',
           dateTime: '2023-08-18 10:00 AM',
           name: 'John Doe',
           identifier: 'JD123',
@@ -69,7 +68,7 @@ describe('AppointmentsBaseTable', () => {
       currentPage: 1,
       results: [
         {
-          id: 1,
+          id: '2',
           dateTime: '2023-08-18 10:00 AM',
           name: 'John Doe',
           identifier: 'JD123',

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

@@ -107,7 +107,7 @@ const PatientSearchResults = React.forwardRef<HTMLDivElement, PatientSearchResul
                     className={styles.flexRow}
                   /> */}
                 </div>
-                <p className={styles.demographics}>
+                <div className={styles.demographics}>
                   {getGender(patient.gender)} <span className={styles.middot}>&middot;</span> {age(patient.birthDate)}
                   <span className={styles.middot}>&middot;</span>
                   {config.defaultIdentifierTypes.length ? (
@@ -123,7 +123,7 @@ const PatientSearchResults = React.forwardRef<HTMLDivElement, PatientSearchResul
                       <span className={styles.middot}>&middot;</span> {patient.identifier?.[0]?.identifier}
                     </>
                   )}
-                </p>
+                </div>
               </div>
             </ConfigurableLink>
           );

packages/esm-patient-search-app/src/patient-search-page/advanced-patient-search.component.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useInfinitePatientSearch } from '../patient-search.resource';
 import { AdvancedPatientSearchState } from '../types';
-import styles from './advanced-patient-search.scss';
 import { initialState } from './advanced-search-reducer';
 import PatientSearchComponent from './patient-search-lg.component';
 import RefineSearch from './refine-search.component';
+import styles from './advanced-patient-search.scss';
 
 interface AdvancedPatientSearchProps {
   query: string;

packages/esm-patient-search-app/src/patient-search-page/patient-search-page.component.tsx

@@ -1,10 +1,9 @@
 import React, { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { isDesktop, navigate, useLayoutType } from '@openmrs/esm-framework';
-import PatientSearchComponent from './patient-search-lg.component';
-import styles from './patient-search-page.scss';
-import PatientSearchOverlay from '../patient-search-overlay/patient-search-overlay.component';
 import AdvancedPatientSearchComponent from './advanced-patient-search.component';
+import PatientSearchOverlay from '../patient-search-overlay/patient-search-overlay.component';
+import styles from './patient-search-page.scss';
 
 interface PatientSearchPageComponentProps {}
 

packages/esm-patient-search-app/src/ui-components/empty-data-illustration.component.tsx

@@ -1,40 +1,40 @@
 import * as React from 'react';
 
-const EmptyDataIllustration = ({ width = '74', height = '72' }) => {
+const EmptyDataIllustration = ({ width = '72', height = '72' }) => {
   return (
     <svg width={width} height={height} viewBox="0 0 74 72">
       <title>Empty data illustration</title>
-      <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)" fill="none" fillRule="evenodd">
         <path
           d="M45.708 15.742h-19.4a1.666 1.666 0 0 0-1.668 1.661l-.222 41.947-5.084 1.588a.89.89 0 0 1-1.11-.588L4.39 15.223a.886.886 0 0 1 .59-1.106l7.334-2.237 21.262-6.482 7.334-2.237a.891.891 0 0 1 1.111.587l3.619 11.773.067.221z"
           fill="#CEE6E5"
         />
         <path
           d="M49.942 15.52 45.581 1.333A1.883 1.883 0 0 0 44.66.22a1.896 1.896 0 0 0-1.44-.137L32.908 3.226 11.65 9.71 1.336 12.854a1.883 1.883 0 0 0-1.254 2.351l14.906 48.492a1.892 1.892 0 0 0 2.36 1.25l7.069-2.156.222-.068v-.232l-.222.068-7.134 2.176a1.67 1.67 0 0 1-2.083-1.102L.296 15.14a1.653 1.653 0 0 1 .121-1.266c.208-.389.562-.68.985-.808L11.714 9.92l21.26-6.482L43.287.294a1.668 1.668 0 0 1 2.082 1.102L49.71 15.52l.069.221h.23l-.067-.221z"
           stroke="#7BBCB9"
-          stroke-width="1.2"
+          strokeWidth="1.2"
         />
         <path
           d="M13.639 14.153c-.44 0-.828-.286-.958-.705L11.25 8.789a.993.993 0 0 1 .664-1.244l19.56-5.965a1.002 1.002 0 0 1 1.25.661L34.155 6.9a.997.997 0 0 1-.664 1.245l-19.56 5.964a1 1 0 0 1-.292.044z"
           fill="#7BBCB9"
         />
         <ellipse fill="#C6C6C6" cx="21.14" cy="2.762" rx="2.223" ry="2.215" />
-        <ellipse fill="#FFF" fill-rule="nonzero" cx="21.14" cy="2.762" rx="1.408" ry="1.402" />
+        <ellipse fill="#FFF" fillRule="nonzero" cx="21.14" cy="2.762" rx="1.408" ry="1.402" />
         <path
           d="M66.997 66.735H29.42c-.521 0-.944-.442-.944-.987V18.722c0-.545.423-.986.944-.987h37.577c.522 0 .945.442.945.987v47.026c0 .545-.423.987-.945.987z"
           fill="#CEE6E5"
         />
         <path
           d="M49.71 15.52H26.308a1.889 1.889 0 0 0-1.89 1.883v45.156l.222-.068V17.403a1.666 1.666 0 0 1 1.668-1.66h23.47l-.068-.222zm20.4 0H26.308a1.889 1.889 0 0 0-1.89 1.883v50.715A1.889 1.889 0 0 0 26.308 70H70.11A1.889 1.889 0 0 0 72 68.118V17.403a1.889 1.889 0 0 0-1.89-1.882zm1.668 52.598a1.666 1.666 0 0 1-1.668 1.66H26.308a1.666 1.666 0 0 1-1.668-1.66V17.403a1.666 1.666 0 0 1 1.668-1.66H70.11c.92 0 1.667.743 1.668 1.66v50.715z"
           stroke="#7BBCB9"
-          stroke-width="1.2"
+          strokeWidth="1.2"
         />
         <path
           d="M58.437 20.393H37.98a1 1 0 0 1-1-.997v-4.872a1 1 0 0 1 1-.997h20.456a1 1 0 0 1 1 .997v4.872a1 1 0 0 1-1 .997z"
           fill="#7BBCB9"
         />
         <ellipse fill="#C6C6C6" cx="48.209" cy="11.645" rx="2.223" ry="2.215" />
-        <ellipse fill="#FFF" fill-rule="nonzero" cx="48.209" cy="11.645" rx="1.354" ry="1.349" />
+        <ellipse fill="#FFF" fillRule="nonzero" cx="48.209" cy="11.645" rx="1.354" ry="1.349" />
       </g>
     </svg>
   );