@kenyaemr/esm-patient-registration-app 7.0.3-pre.88 → 7.0.3-pre.94

package/src/patient-registration/field/id/id-field.test.tsx

@@ -1,68 +1,91 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { Form, Formik } from 'formik';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { Identifiers } from './id-field.component';
+import { mockOpenmrsId, mockIdentifierTypes, mockPatient, mockSession } from '__mocks__';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
 import { type Resources, ResourcesContext } from '../../../offline.resources';
-import { Form, Formik } from 'formik';
-import { PatientRegistrationContext } from '../../patient-registration-context';
-import { openmrsID, mockedIdentifierTypes } from '__mocks__';
+import { PatientRegistrationContext, type PatientRegistrationContextProps } from '../../patient-registration-context';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+const mockResourcesContextValue = {
+  addressTemplate: null,
+  currentSession: mockSession.data,
+  identifierTypes: [],
+  relationshipTypes: [],
+} as Resources;
+
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: null,
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: mockOpenmrsId,
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+};
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useConfig: jest.fn().mockImplementation(() => ({
-    defaultPatientIdentifierTypes: ['OpenMRS ID'],
-  })),
-}));
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+};
 
 describe('Identifiers', () => {
-  const mockResourcesContextValue = {
-    addressTemplate: {},
-    currentSession: {
-      authenticated: true,
-      sessionId: 'JSESSION',
-      currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
-    },
-    relationshipTypes: [],
-    identifierTypes: [...mockedIdentifierTypes],
-  } as Resources;
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      defaultPatientIdentifierTypes: ['OpenMRS ID'],
+    });
+  });
 
   it('should render loading skeleton when identifier types are loading', () => {
     render(
-      <ResourcesContext.Provider value={[]}>
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
         <Formik initialValues={{}} onSubmit={null}>
           <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
-                setInitialFormValues: jest.fn(),
-                values: {
-                  identifiers: { openmrsID },
-                },
-              }}>
+            <PatientRegistrationContext.Provider value={mockContextValues}>
               <Identifiers />
             </PatientRegistrationContext.Provider>
           </Form>
         </Formik>
       </ResourcesContext.Provider>,
     );
-    expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   it('should render identifier inputs when identifier types are loaded', () => {
+    mockResourcesContextValue.identifierTypes = mockIdentifierTypes;
+
     render(
       <ResourcesContext.Provider value={mockResourcesContextValue}>
         <Formik initialValues={{}} onSubmit={null}>
           <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
-                setInitialFormValues: jest.fn(),
-                values: {
-                  identifiers: { openmrsID },
-                },
-              }}>
+            <PatientRegistrationContext.Provider value={mockContextValues}>
               <Identifiers />
             </PatientRegistrationContext.Provider>
           </Form>
@@ -78,20 +101,12 @@ describe('Identifiers', () => {
 
   it('should open identifier selection overlay when "Configure" button is clicked', async () => {
     const user = userEvent.setup();
-
+    mockResourcesContextValue.identifierTypes = mockIdentifierTypes;
     render(
       <ResourcesContext.Provider value={mockResourcesContextValue}>
         <Formik initialValues={{}} onSubmit={null}>
           <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
-                setInitialFormValues: jest.fn(),
-                values: {
-                  identifiers: { openmrsID },
-                },
-              }}>
+            <PatientRegistrationContext.Provider value={mockContextValues}>
               <Identifiers />
             </PatientRegistrationContext.Provider>
           </Form>

package/src/patient-registration/field/id/identifier-selection.scss

@@ -1,8 +1,8 @@
-@use '@carbon/styles/scss/spacing';
-@import '../../patient-registration.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -10,28 +10,32 @@
 }
 
 .tablet {
-  padding: 1.5rem 1rem;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: $ui-02;
 }
 
 .desktop {
-  padding: 0rem;
+  padding: 0;
 }
 
 .radioGroup {
   background-color: $ui-01;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }
 
 .radioButton {
   margin: 0 !important;
   label {
-    height: spacing.$spacing-07;
+    height: layout.$spacing-07;
   }
 }
 
+.space05 {
+  margin: layout.$spacing-05 0;
+}
+
 :global(.omrs-breakpoint-lt-desktop) {
   .radioButton label {
-    height: spacing.$spacing-09 !important;
+    height: layout.$spacing-09 !important;
   }
 }

package/src/patient-registration/field/name/name-field.component.tsx

@@ -5,8 +5,8 @@ import { useField } from 'formik';
 import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
 import { Input } from '../../input/basic-input/input/input.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import styles from '../field.scss';
 import { type RegistrationConfig } from '../../../config-schema';
+import styles from '../field.scss';
 
 export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
 const containsNoNumbers = /^([^0-9]*)$/;

package/src/patient-registration/field/obs/obs-field.component.tsx

@@ -1,16 +1,15 @@
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
-import { OpenmrsDatePicker, parseDate, useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type ConceptResponse } from '../../patient-registration.types';
 import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
-import styles from './../field.scss';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { type CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import styles from './../field.scss';
 
 export interface ObsFieldProps {
   fieldDefinition: FieldDefinition;
@@ -19,7 +18,6 @@ export interface ObsFieldProps {
 export function ObsField({ fieldDefinition }: ObsFieldProps) {
   const { t } = useTranslation();
   const { data: concept, isLoading } = useConcept(fieldDefinition.uuid);
-
   const config = useConfig<RegistrationConfig>();
 
   if (!config.registrationObs.encounterTypeUuid) {
@@ -170,9 +168,8 @@ function DateObsField({ concept, label, required, placeholder }: DateObsFieldPro
   const fieldName = `obs.${concept.uuid}`;
   const { setFieldValue } = useContext(PatientRegistrationContext);
 
-  const onDateChange = ([date]) => {
-    const refinedDate = date instanceof Date ? new Date(date.setHours(0, 0, 0, 0)) : new Date(date);
-    setFieldValue(fieldName, refinedDate);
+  const onDateChange = (date: Date) => {
+    setFieldValue(fieldName, date);
   };
 
   return (
@@ -186,14 +183,12 @@ function DateObsField({ concept, label, required, placeholder }: DateObsFieldPro
                   id={fieldName}
                   {...field}
                   isRequired={required}
-                  onChange={(date) => onDateChange([date])}
+                  onChange={onDateChange}
                   labelText={label ?? concept.display}
                   isInvalid={errors[fieldName] && touched[fieldName]}
+                  invalidText={t(meta.error)}
                   value={field.value}
                 />
-                {errors[fieldName] && touched[fieldName] && (
-                  <div className={styles.radioFieldError}>{meta.error && t(meta.error)}</div>
-                )}
               </>
             );
           }}

package/src/patient-registration/field/obs/obs-field.test.tsx

@@ -1,39 +1,36 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import dayjs from 'dayjs';
 import userEvent from '@testing-library/user-event';
-import { useConfig } from '@openmrs/esm-framework';
-import { type FieldDefinition } from '../../../config-schema';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+import { esmPatientRegistrationSchema, type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import { ObsField } from './obs-field.component';
-import { PatientRegistrationContext } from '../../patient-registration-context';
-import dayjs from 'dayjs';
+import { PatientRegistrationContext, type PatientRegistrationContextProps } from '../../patient-registration-context';
+import { mockOpenmrsId, mockPatient } from '__mocks__';
 
-const mockUseConfig = useConfig as jest.Mock;
+const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
+const mockUseConcept = jest.mocked(useConcept);
+const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
 
-jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+jest.mock('../field.resource');
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    OpenmrsDatePicker: jest.fn().mockImplementation(({ id, labelText, value, onChange }) => {
-      return (
-        <>
-          <label htmlFor={id}>{labelText}</label>
-          <input
-            id={id}
-            value={value ? dayjs(value).format('DD/MM/YYYY') : undefined}
-            onChange={(evt) => onChange(dayjs(evt.target.value).toDate())}
-          />
-        </>
-      );
-    }),
-  };
+mockOpenmrsDatePicker.mockImplementation(({ id, labelText, value, onChange }) => {
+  return (
+    <>
+      <label htmlFor={id}>{labelText}</label>
+      <input
+        id={id}
+        // @ts-ignore
+        value={value ? dayjs(value).format('DD/MM/YYYY') : ''}
+        onChange={(evt) => {
+          onChange(dayjs(evt.target.value).toDate());
+        }}
+      />
+    </>
+  );
 });
-
-const mockedUseConcept = useConcept as jest.Mock;
-const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
-
 const useConceptMockImpl = (uuid: string) => {
   let data;
   if (uuid == 'weight-uuid') {
@@ -122,7 +119,7 @@ jest.mock('formik', () => ({
 const textFieldDef: FieldDefinition = {
   id: 'chief-complaint',
   type: 'obs',
-  label: '',
+  label: 'Chief complaint',
   placeholder: '',
   showHeading: false,
   uuid: 'chief-complaint-uuid',
@@ -137,7 +134,7 @@ const textFieldDef: FieldDefinition = {
 const numberFieldDef: FieldDefinition = {
   id: 'weight',
   type: 'obs',
-  label: '',
+  label: 'Weight',
   placeholder: '',
   showHeading: false,
   uuid: 'weight-uuid',
@@ -152,7 +149,7 @@ const numberFieldDef: FieldDefinition = {
 const dateFieldDef: FieldDefinition = {
   id: 'vac_date',
   type: 'obs',
-  label: '',
+  label: 'Vaccination date',
   placeholder: '',
   showHeading: false,
   uuid: 'vaccination-date-uuid',
@@ -167,7 +164,7 @@ const dateFieldDef: FieldDefinition = {
 const codedFieldDef: FieldDefinition = {
   id: 'nationality',
   type: 'obs',
-  label: '',
+  label: 'Nationality',
   placeholder: '',
   showHeading: false,
   uuid: 'nationality-uuid',
@@ -179,41 +176,82 @@ const codedFieldDef: FieldDefinition = {
   customConceptAnswers: [],
 };
 
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: null,
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: mockOpenmrsId,
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+};
+
+const initialContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+};
+
 describe('ObsField', () => {
   beforeEach(() => {
-    mockUseConfig.mockReturnValue({ registrationObs: { encounterTypeUuid: 'reg-enc-uuid' } });
-    mockedUseConcept.mockImplementation(useConceptMockImpl);
-    mockedUseConceptAnswers.mockImplementation(useConceptAnswersMockImpl);
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      registrationObs: { encounterTypeUuid: 'reg-enc-uuid' },
+    } as RegistrationConfig);
+    mockUseConcept.mockImplementation(useConceptMockImpl);
+    mockUseConceptAnswers.mockImplementation(useConceptAnswersMockImpl);
   });
 
   it("logs an error and doesn't render if no registration encounter type is provided", () => {
-    mockUseConfig.mockReturnValue({ registrationObs: { encounterTypeUuid: null } });
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      registrationObs: { encounterTypeUuid: null },
+    } as RegistrationConfig);
+
     console.error = jest.fn();
     render(<ObsField fieldDefinition={textFieldDef} />);
     expect(console.error).toHaveBeenCalledWith(
       expect.stringMatching(/no registration encounter type has been configured/i),
     );
-    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
   });
 
   it('renders a text box for text concept', () => {
     render(<ObsField fieldDefinition={textFieldDef} />);
-    // I don't know why the labels aren't in the DOM, but they aren't
-    // expect(screen.getByLabelText("Chief Complaint")).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+
+    expect(screen.getByRole('textbox', { name: 'Chief complaint (optional)' })).toBeInTheDocument();
   });
 
   it('renders a number box for number concept', () => {
     render(<ObsField fieldDefinition={numberFieldDef} />);
-    // expect(screen.getByLabelText("Weight (kg)")).toBeInTheDocument();
-    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+
+    expect(screen.getByRole('spinbutton', { name: 'Weight (optional)' })).toBeInTheDocument();
   });
 
-  // TODO O3-3482: Fix this test case.
-  // Disabling this test case for now as it doesn't work as expected when mocking the date picker
-  it.skip('renders a datepicker for date concept', async () => {
+  // TODO: Fix this test
+  xit('renders a datepicker for date concept', async () => {
     render(
-      <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() }}>
+      <PatientRegistrationContext.Provider value={initialContextValues}>
         <ObsField fieldDefinition={dateFieldDef} />
       </PatientRegistrationContext.Provider>,
     );
@@ -227,25 +265,23 @@ describe('ObsField', () => {
 
   it('renders a select for a coded concept', () => {
     render(<ObsField fieldDefinition={codedFieldDef} />);
-    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
-    const select = screen.getByRole('combobox');
-    expect(select).toBeInTheDocument();
-    expect(select).toHaveDisplayValue('Select an option');
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'USA' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Mexico' })).toBeInTheDocument();
   });
 
   it('select uses answerConcept for answers when it is provided', async () => {
-    const user = userEvent.setup();
-
     render(<ObsField fieldDefinition={{ ...codedFieldDef, answerConceptSetUuid: 'other-countries-uuid' }} />);
-    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
-    const select = screen.getByRole('combobox');
-    expect(select).toBeInTheDocument();
-    await user.selectOptions(select, 'Kenya');
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Kenya' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Uganda' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'USA' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Mexico' })).not.toBeInTheDocument();
   });
 
   it('select uses customConceptAnswers for answers when provided', async () => {
-    const user = userEvent.setup();
-
     render(
       <ObsField
         fieldDefinition={{
@@ -259,9 +295,9 @@ describe('ObsField', () => {
         }}
       />,
     );
-    // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();
-    const select = screen.getByRole('combobox');
-    expect(select).toBeInTheDocument();
-    await user.selectOptions(select, 'Mozambique');
+
+    expect(screen.getByRole('combobox', { name: 'Nationality' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Mozambique' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Uganda' })).not.toBeInTheDocument();
   });
 });

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
+import { Form, Formik } from 'formik';
 import { render, screen } from '@testing-library/react';
 import { useConceptAnswers } from '../field.resource';
 import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
-import { Form, Formik } from 'formik';
 
 jest.mock('formik', () => ({
   ...jest.requireActual('formik'),
 }));
 
-jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+jest.mock('../field.resource');
 
-const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
 
 describe('CodedPersonAttributeField', () => {
   const conceptAnswers = [
@@ -27,8 +27,7 @@ describe('CodedPersonAttributeField', () => {
   const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
 
   beforeEach(() => {
-    jest.clearAllMocks();
-    mockedUseConceptAnswers.mockReturnValue({
+    mockUseConceptAnswers.mockReturnValue({
       data: conceptAnswers,
       isLoading: false,
     });
@@ -45,6 +44,7 @@ describe('CodedPersonAttributeField', () => {
               answerConceptSetUuid={null}
               label={personAttributeType.display}
               customConceptAnswers={[]}
+              required={false}
             />
           </Form>
         </Formik>,
@@ -53,7 +53,7 @@ describe('CodedPersonAttributeField', () => {
   });
 
   it('shows error if the concept answer set does not have any concept answers', () => {
-    mockedUseConceptAnswers.mockReturnValue({
+    mockUseConceptAnswers.mockReturnValue({
       data: [],
       isLoading: false,
     });
@@ -67,6 +67,7 @@ describe('CodedPersonAttributeField', () => {
               answerConceptSetUuid={answerConceptSetUuid}
               label={personAttributeType.display}
               customConceptAnswers={[]}
+              required={false}
             />
           </Form>
         </Formik>,
@@ -84,6 +85,7 @@ describe('CodedPersonAttributeField', () => {
             answerConceptSetUuid={answerConceptSetUuid}
             label={personAttributeType.display}
             customConceptAnswers={[]}
+            required={false}
           />
         </Form>
       </Formik>,
@@ -113,6 +115,7 @@ describe('CodedPersonAttributeField', () => {
                 label: 'Special Option B',
               },
             ]}
+            required={false}
           />
         </Form>
       </Formik>,