@kenyaemr/esm-patient-registration-app 7.0.3-pre.89 → 8.0.1-pre.95

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

@@ -3,42 +3,65 @@ import dayjs from 'dayjs';
 import { Formik, Form } from 'formik';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DobField } from './dob.component';
+import { getDefaultsFromConfigSchema, OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { initialFormValues } from '../../patient-registration.component';
-import { type FormValues } from '../../patient-registration.types';
+import { DobField } from './dob.component';
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    useConfig: jest.fn().mockImplementation(() => ({
+const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+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());
+        }}
+      />
+    </>
+  );
+});
+
+describe('Dob', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         dateOfBirth: {
           allowEstimatedDateOfBirth: true,
           useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 },
         },
-      },
-    })),
-    getLocale: jest.fn().mockReturnValue('en'),
-    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())}
-          />
-        </>
-      );
-    }),
-  };
-});
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
 
-describe('Dob', () => {
   it('renders the fields in the birth section of the registration form', async () => {
-    renderDob();
+    render(
+      <Formik initialValues={{ birthdate: '' }} onSubmit={() => {}}>
+        <Form>
+          <PatientRegistrationContext.Provider
+            value={{
+              identifierTypes: [],
+              values: initialFormValues,
+              validationSchema: null,
+              inEditMode: false,
+              setFieldValue: () => {},
+              setCapturePhotoProps: (value) => {},
+              currentPhoto: '',
+              isOffline: false,
+              initialFormValues: initialFormValues,
+            }}>
+            <DobField />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>,
+    );
 
     expect(screen.getByRole('heading', { name: /birth/i })).toBeInTheDocument();
     expect(screen.getByText(/date of birth known?/i)).toBeInTheDocument();
@@ -54,38 +77,31 @@ describe('Dob', () => {
   it.skip('typing in the date picker input sets the date of birth', async () => {
     const user = userEvent.setup();
 
-    renderDob();
+    render(
+      <Formik initialValues={{ birthdate: '' }} onSubmit={() => {}}>
+        <Form>
+          <PatientRegistrationContext.Provider
+            value={{
+              identifierTypes: [],
+              values: initialFormValues,
+              validationSchema: null,
+              inEditMode: false,
+              setFieldValue: () => {},
+              setCapturePhotoProps: (value) => {},
+              currentPhoto: '',
+              isOffline: false,
+              initialFormValues: initialFormValues,
+            }}>
+            <DobField />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>,
+    );
 
     const dateInput = screen.getByLabelText(/Date of birth/i);
     expect(dateInput).toBeInTheDocument();
 
     await user.type(dateInput, '10/10/2022');
-
     expect(screen.getByPlaceholderText('dd/mm/YYYY')).toHaveValue('10/10/2022');
   });
 });
-
-function renderDob() {
-  let formValues: FormValues = initialFormValues;
-
-  render(
-    <Formik initialValues={{ birthdate: '' }} onSubmit={() => {}}>
-      <Form>
-        <PatientRegistrationContext.Provider
-          value={{
-            identifierTypes: [],
-            values: formValues,
-            validationSchema: null,
-            inEditMode: false,
-            setFieldValue: () => {},
-            setCapturePhotoProps: (value) => {},
-            currentPhoto: '',
-            isOffline: false,
-            initialFormValues: formValues,
-          }}>
-          <DobField />
-        </PatientRegistrationContext.Provider>
-      </Form>
-    </Formik>,
-  );
-}

package/src/patient-registration/field/field.scss

@@ -1,16 +1,17 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .productiveHeading02 {
   @include type.type-style('heading-compact-02');
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
 }
 
 .productiveHeading02Light {
   @include type.type-style('heading-compact-02');
-  margin-bottom: 1rem;
-  color: #525252;
+  margin-bottom: layout.$spacing-05;
+  color: colors.$gray-70;
 }
 
 .label01 {
@@ -20,11 +21,11 @@
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  column-gap: spacing.$spacing-05;
+  column-gap: layout.$spacing-05;
 }
 
 .halfWidthInDesktopView {
-  width: calc(50% - spacing.$spacing-05);
+  width: calc(50% - layout.$spacing-05);
 }
 
 .patientPhoto {
@@ -45,7 +46,7 @@
 }
 
 .contentSwitcher {
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
 }
 
 .dobField > :global(.cds--content-switcher) {
@@ -56,7 +57,7 @@
 }
 
 .photoExtension {
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
   grid-row: 1;
   grid-column: 2;
   justify-self: center;
@@ -64,11 +65,11 @@
 
 .sexField,
 .dobField {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .dobContentSwitcherLabel {
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .identifierLabelText {
@@ -76,20 +77,20 @@
   align-items: center;
 }
 
-.setIDNumberButton {
-  margin-bottom: spacing.$spacing-05;
-}
+.configureIdentifiersButton {
+  margin: 0 0 layout.$spacing-05 layout.$spacing-05;
 
-.setIDNumberButton > svg {
-  margin-left: spacing.$spacing-03;
-}
+  svg {
+    margin-left: layout.$spacing-03;
+  }
 
-.customField {
-  margin-bottom: spacing.$spacing-05;
+  .customField {
+    margin-bottom: layout.$spacing-05;
+  }
 }
 
 .attributeField {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 :global(.omrs-breakpoint-lt-desktop) {
@@ -97,31 +98,35 @@
     grid-template-columns: 1fr;
     grid-template-rows: auto auto;
   }
+
   .nameField {
     grid-row: 2;
     grid-column: 1;
   }
+
   .photoExtension {
     grid-column: 1;
     grid-row: 1;
     justify-self: start;
   }
+
   .radioButton label {
-    height: spacing.$spacing-09 !important;
+    height: layout.$spacing-09 !important;
   }
+
   .halfWidthInDesktopView {
     width: 100%;
   }
 }
 
 .radioFieldError {
-  color: #da1e28;
+  color: colors.$red-60;
   display: block;
   font-weight: 400;
   max-height: 12.5rem;
   overflow: visible;
-  font-size: 0.75rem;
+  font-size: layout.$spacing-04;
   letter-spacing: 0.32px;
   line-height: 1.34;
-  margin: 0.25rem 0 0;
+  margin: layout.$spacing-02 0 0;
 }

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

@@ -1,30 +1,32 @@
 import React from 'react';
+import dayjs from 'dayjs';
 import { Form, Formik } from 'formik';
 import { render, screen } from '@testing-library/react';
-import { useConfig } from '@openmrs/esm-framework';
+import { getDefaultsFromConfigSchema, OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { Field } from './field.component';
-import type { AddressTemplate, FormValues } from '../patient-registration.types';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../config-schema';
 import { type Resources, ResourcesContext } from '../../offline.resources';
+import type { AddressTemplate, FormValues } from '../patient-registration.types';
 import { PatientRegistrationContext } from '../patient-registration-context';
-import dayjs from 'dayjs';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useConfig: jest.fn(),
-  getLocale: jest.fn().mockReturnValue('en'),
-  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())}
-        />
-      </>
-    );
-  }),
-}));
+const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+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 predefinedAddressTemplate = {
   uuid: 'test-address-template-uuid',
@@ -36,7 +38,7 @@ const predefinedAddressTemplate = {
     '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
 };
 
-const mockedIdentifierTypes = [
+const mockIdentifierTypes = [
   {
     fieldName: 'openMrsId',
     format: '',
@@ -105,7 +107,7 @@ const mockResourcesContextValue: Resources = {
     currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
   },
   relationshipTypes: [],
-  identifierTypes: [...mockedIdentifierTypes],
+  identifierTypes: [...mockIdentifierTypes],
 };
 
 const initialContextValues = {
@@ -136,31 +138,32 @@ describe('Field', () => {
         </Formik>
       </ResourcesContext.Provider>
     );
-  });
 
-  afterEach(() => {
-    jest.clearAllMocks();
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+    });
   });
 
   it('should render NameField component when name prop is "name"', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         name: {
+          allowUnidentifiedPatients: true,
           displayMiddleName: true,
-          unidentifiedPatient: true,
           defaultUnknownGivenName: 'UNKNOWN',
           defaultUnknownFamilyName: 'UNKNOWN',
         },
-      },
-    }));
+      } as RegistrationConfig['fieldConfigurations'],
+    });
 
     render(<Field name="name" />, { wrapper: ContextWrapper });
-
     expect(screen.getByText('Full Name')).toBeInTheDocument();
   });
 
   it('should render GenderField component when name prop is "gender"', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         gender: [
           {
@@ -169,33 +172,26 @@ describe('Field', () => {
             id: 'male',
           },
         ],
-      },
-    }));
+      } as unknown as RegistrationConfig['fieldConfigurations'],
+    });
 
     render(<Field name="gender" />, { wrapper: ContextWrapper });
-
     expect(screen.getByLabelText('Male')).toBeInTheDocument();
   });
 
   it('should render DobField component when name prop is "dob"', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
-      fieldConfigurations: {
-        dob: {
-          minAgeLimit: 0,
-          maxAgeLimit: 120,
-        },
-      },
-    }));
     render(<Field name="dob" />, { wrapper: ContextWrapper });
     expect(screen.getByText('Birth')).toBeInTheDocument();
   });
 
   it('should render AddressComponent component when name prop is "address"', () => {
     jest.mock('./address/address-hierarchy.resource', () => ({
-      ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+      ...jest.requireActual('../address-hierarchy.resource'),
       useOrderedAddressHierarchyLevels: jest.fn(),
     }));
-    (useConfig as jest.Mock).mockImplementation(() => ({
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         address: {
           useAddressHierarchy: {
@@ -204,18 +200,18 @@ describe('Field', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
+      } as RegistrationConfig['fieldConfigurations'],
+    });
 
     render(<Field name="address" />, { wrapper: ContextWrapper });
-
     expect(screen.getByText('Address')).toBeInTheDocument();
   });
 
   it('should render Identifiers component when name prop is "id"', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       defaultPatientIdentifierTypes: ['OpenMRS ID'],
-    }));
+    });
 
     const openmrsID = {
       name: 'OpenMRS ID',
@@ -289,9 +285,11 @@ describe('Field', () => {
   it('should return null and report an error for an invalid field name', () => {
     const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-    (useConfig as jest.Mock).mockImplementation(() => ({
-      fieldDefinitions: [{ id: 'weight' }],
-    }));
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldDefinitions: [{ id: 'weight' }] as RegistrationConfig['fieldDefinitions'],
+    });
+
     let error = null;
 
     try {

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

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import { RadioButton, RadioButtonGroup } from '@carbon/react';
-import styles from '../field.scss';
 import { useTranslation } from 'react-i18next';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { useField } from 'formik';
 import { type RegistrationConfig } from '../../../config-schema';
 import { useConfig } from '@openmrs/esm-framework';
+import styles from '../field.scss';
 
 export const GenderField: React.FC = () => {
-  const { fieldConfigurations } = useConfig() as RegistrationConfig;
+  const { fieldConfigurations } = useConfig<RegistrationConfig>();
   const { t } = useTranslation();
   const [field, meta] = useField('gender');
   const { setFieldValue } = useContext(PatientRegistrationContext);

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

@@ -1,28 +1,12 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
 import { GenderField } from './gender-field.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...(jest.requireActual('@openmrs/esm-framework') as any),
-  useConfig: jest.fn(() => ({
-    fieldConfigurations: {
-      gender: [
-        {
-          value: 'male',
-          label: 'Male',
-        },
-      ],
-      name: {
-        displayMiddleName: false,
-        unidentifiedPatient: false,
-        defaultUnknownGivenName: '',
-        defaultUnknownFamilyName: '',
-      },
-    },
-  })),
-}));
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
 
 jest.mock('react', () => ({
   ...(jest.requireActual('react') as any),
@@ -37,23 +21,57 @@ jest.mock('formik', () => ({
 }));
 
 describe('GenderField', () => {
-  const renderComponent = () => {
-    return render(
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        gender: [
+          {
+            value: 'male',
+            label: 'Male',
+          },
+          {
+            value: 'female',
+            label: 'Female',
+          },
+        ],
+        name: {
+          displayMiddleName: false,
+          allowUnidentifiedPatients: false,
+          defaultUnknownGivenName: '',
+          defaultUnknownFamilyName: '',
+          displayCapturePhoto: false,
+          displayReverseFieldOrder: false,
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+  it('has a label', () => {
+    render(
       <Formik initialValues={{}} onSubmit={null}>
         <Form>
           <GenderField />
         </Form>
       </Formik>,
     );
-  };
 
-  it('has a label', () => {
-    expect(renderComponent().getAllByText('Sex')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /sex/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/^male/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/female/i)).toBeInTheDocument();
   });
 
   it('checks an option', async () => {
     const user = userEvent.setup();
-    const component = renderComponent();
-    expect(component.getByLabelText('Male').getAttribute('value')).toBe('male');
+    render(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <GenderField />
+        </Form>
+      </Formik>,
+    );
+
+    await user.click(screen.getByText(/female/i));
+    expect(screen.getByLabelText(/female/i)).toBeChecked();
+    expect(screen.getByLabelText(/^male/i)).not.toBeChecked();
   });
 });

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

@@ -4,13 +4,13 @@ import { Button, SkeletonText } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
 import { useLayoutType, useConfig, isDesktop, UserHasAccess } from '@openmrs/esm-framework';
 import IdentifierSelectionOverlay from './identifier-selection-overlay.component';
-import { IdentifierInput } from '../../input/custom-input/identifier/identifier-input.component';
+import IdentifierInput from '../../input/custom-input/identifier/identifier-input.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import {
-  type FormValues,
-  type IdentifierSource,
-  type PatientIdentifierType,
-  type PatientIdentifierValue,
+import type {
+  FormValues,
+  IdentifierSource,
+  PatientIdentifierType,
+  PatientIdentifierValue,
 } from '../../patient-registration.types';
 import { ResourcesContext } from '../../../offline.resources';
 import styles from '../field.scss';
@@ -58,7 +58,7 @@ export function deleteIdentifierType(identifiers: FormValues['identifiers'], ide
 
 export const Identifiers: React.FC = () => {
   const { identifierTypes } = useContext(ResourcesContext);
-  const isLoading = !identifierTypes;
+  const isLoading = !identifierTypes?.length;
   const { values, setFieldValue, initialFormValues, isOffline } = useContext(PatientRegistrationContext);
   const { t } = useTranslation();
   const layout = useLayoutType();
@@ -67,7 +67,6 @@ export const Identifiers: React.FC = () => {
   const { defaultPatientIdentifierTypes } = config;
 
   useEffect(() => {
-    // Initialization
     if (identifierTypes) {
       const identifiers = {};
       identifierTypes
@@ -108,23 +107,23 @@ export const Identifiers: React.FC = () => {
 
   if (isLoading && !isOffline) {
     return (
-      <div data-testid="loading-skeleton" className={styles.halfWidthInDesktopView}>
+      <div className={styles.halfWidthInDesktopView}>
         <div className={styles.identifierLabelText}>
           <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
         </div>
-        <SkeletonText />
+        <SkeletonText role="progressbar" />
       </div>
     );
   }
 
   return (
     <div className={styles.halfWidthInDesktopView}>
-      <UserHasAccess privilege={['Get Identifier Types', 'Add Patient Identifiers']}>
+      <UserHasAccess privilege={['Get Identifier Types', 'Add patient identifiers']}>
         <div className={styles.identifierLabelText}>
           <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
           <Button
             kind="ghost"
-            className={styles.setIDNumberButton}
+            className={styles.configureIdentifiersButton}
             onClick={() => setShowIdentifierOverlay(true)}
             size={isDesktop(layout) ? 'sm' : 'md'}>
             {t('configure', 'Configure')} <ArrowRight size={16} />