@kenyaemr/esm-patient-registration-app 5.2.2 → 5.2.3

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx

@@ -1,10 +1,11 @@
-import React, { HTMLAttributes, useEffect, useRef, useState } from 'react';
-import { Layer, Search, SearchProps } from '@carbon/react';
+import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { Layer, Search, type SearchProps } from '@carbon/react';
 import classNames from 'classnames';
 import styles from './autosuggest.scss';
 
 // FIXME Temporarily included types from Carbon
 type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
 interface SearchProps extends InputPropsBase {
   /**
    * Specify an optional value for the `autocomplete` property on the underlying
@@ -136,6 +137,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const query = e.target.value;
     onSuggestionSelected(name, undefined);
+
     if (query) {
       getSearchResults(query).then((suggestions) => {
         setSuggestions(suggestions);
@@ -173,9 +175,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
       {suggestions.length > 0 && (
         <ul className={styles.suggestions}>
           {suggestions.map((suggestion, index) => (
-            <li //eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-              key={index}
-              onClick={(e) => handleClick(index)}>
+            <li key={index} onClick={(e) => handleClick(index)}>
               {getDisplayValue(suggestion)}
             </li>
           ))}

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Autosuggest } from './autosuggest.component';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
-import '@testing-library/jest-dom/extend-expect';
-import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 const mockPersons = [
   {
@@ -24,97 +23,110 @@ const mockPersons = [
   },
 ];
 
-const mockGetSearchResults = async (query: string) => {
+const mockedGetSearchResults = async (query: string) => {
   return mockPersons.filter((person) => {
     return person.display.toUpperCase().includes(query.toUpperCase());
   });
 };
 
-const handleSuggestionSelected = jest.fn((field, value) => [field, value]);
-
-describe('autosuggest', () => {
-  const setup = () => {
-    render(
-      <BrowserRouter>
-        <Autosuggest
-          labelText=""
-          id="person"
-          placeholder="Find Person"
-          onSuggestionSelected={handleSuggestionSelected}
-          getSearchResults={mockGetSearchResults}
-          getDisplayValue={(item) => item.display}
-          getFieldValue={(item) => item.uuid}
-        />
-      </BrowserRouter>,
-    );
-  };
-
-  it('should render a search box', () => {
-    setup();
+const mockedHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
+
+describe('Autosuggest', () => {
+  afterEach(() => mockedHandleSuggestionSelected.mockClear());
+
+  it('renders a search box', () => {
+    renderAutosuggest();
+
     expect(screen.getByRole('searchbox')).toBeInTheDocument();
     expect(screen.queryByRole('list')).toBeNull();
   });
 
-  it('should show the search results in a list', async () => {
-    setup();
+  it('renders matching search results in a list when the user types a query', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
     const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    const list = await waitFor(() => screen.getByRole('list'));
+    await user.type(searchbox, 'john');
+
+    const list = screen.getByRole('list');
+
     expect(list).toBeInTheDocument();
     expect(list.children).toHaveLength(2);
+    expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('John Doe');
+    expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('John Smith');
   });
 
-  it('should creates the li items whose inner text is gotten through getDisplayValue', async () => {
-    setup();
-    const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    const list = await waitFor(() => screen.getAllByRole('listitem'));
-    expect(list[0].textContent).toBe('John Doe');
-    expect(list[1].textContent).toBe('John Smith');
-  });
+  it('clears the list of suggestions when a suggestion is selected', async () => {
+    const user = userEvent.setup();
 
-  it('should trigger the onSuggestionSelected with correct values when li is clicked', async () => {
-    setup();
-    const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    const listitems = await waitFor(() => screen.getAllByRole('listitem'));
-    fireEvent.click(listitems[0]);
-    expect(handleSuggestionSelected).toHaveBeenNthCalledWith(4, 'person', 'randomuuid1');
-  });
+    renderAutosuggest();
 
-  it('should clear the suggestions when a suggestion is selected', async () => {
-    setup();
     let list = screen.queryByRole('list');
     expect(list).toBeNull();
+
     const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
-    list = await waitFor(() => screen.getByRole('list'));
+    await user.type(searchbox, 'john');
+
+    list = screen.getByRole('list');
     expect(list).toBeInTheDocument();
+
     const listitems = screen.getAllByRole('listitem');
-    fireEvent.click(listitems[0]);
+    await user.click(listitems[0]);
+
+    expect(mockedHandleSuggestionSelected).toHaveBeenLastCalledWith('person', 'randomuuid1');
+
     list = screen.queryByRole('list');
     expect(list).toBeNull();
   });
 
-  it('should change suggestions when a search input is changed', async () => {
-    setup();
+  it('changes suggestions when a search input is changed', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
     let list = screen.queryByRole('list');
     expect(list).toBeNull();
+
     const searchbox = screen.getByRole('searchbox');
-    fireEvent.change(searchbox, { target: { value: 'john' } });
+    await user.type(searchbox, 'john');
+
     const suggestion = await screen.findByText('John Doe');
     expect(suggestion).toBeInTheDocument();
-    fireEvent.change(searchbox, { target: { value: '' } });
+
+    await user.clear(searchbox);
+
     list = screen.queryByRole('list');
     expect(list).toBeNull();
   });
 
-  it('should hide suggestions when clicked outside of component', async () => {
-    setup();
+  it('hides the list of suggestions when the user clicks outside of the component', async () => {
+    const user = userEvent.setup();
+
+    renderAutosuggest();
+
     const input = screen.getByRole('searchbox');
-    fireEvent.change(input, { target: { value: 'john' } });
+
+    await user.type(input, 'john');
     await screen.findByText('John Doe');
-    fireEvent.mouseDown(document.body);
+    await user.click(document.body);
+
     expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
   });
 });
+
+function renderAutosuggest() {
+  render(
+    <BrowserRouter>
+      <Autosuggest
+        getSearchResults={mockedGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockedHandleSuggestionSelected}
+        placeholder="Find Person"
+      />
+    </BrowserRouter>,
+  );
+}

package/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

@@ -7,7 +7,7 @@ import { ResourcesContext } from '../../../../offline.resources';
 import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
 import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
 import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
-import { PatientIdentifierValue } from '../../../patient-registration.types';
+import { type PatientIdentifierValue } from '../../../patient-registration.types';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { Input } from '../../basic-input/input/input.component';
 import styles from '../../input.scss';

package/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { Formik, Form } from 'formik';
 import { IdentifierInput } from './identifier-input.component';
 import { initialFormValues } from '../../../patient-registration.component';
-import { PatientIdentifierType } from '../../../patient-registration-types';
+import { type PatientIdentifierType } from '../../../patient-registration-types';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -52,10 +52,7 @@ describe.skip('identifier input', () => {
       </Formik>,
     );
     const identifierInput = screen.getByLabelText(identifierType.fieldName) as HTMLInputElement;
-    let identifierSourceSelectInput = undefined;
-    try {
-      identifierSourceSelectInput = screen.getByLabelText('source-for-' + identifierType.fieldName) as HTMLInputElement;
-    } catch (e) {}
+    let identifierSourceSelectInput = screen.getByLabelText('source-for-' + identifierType.fieldName);
     return {
       identifierInput,
       identifierSourceSelectInput,

package/src/patient-registration/input/custom-input/identifier/utils.ts

@@ -1,4 +1,4 @@
-import { FetchedPatientIdentifierType, PatientIdentifierType } from '../../../patient-registration.types';
+import { type FetchedPatientIdentifierType, type PatientIdentifierType } from '../../../patient-registration.types';
 
 export function shouldBlockPatientIdentifierInOfflineMode(identifierType: PatientIdentifierType) {
   // Patient Identifiers which are unique and can be manually entered are prohibited while offline because

package/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { v4 } from 'uuid';
-import { FormValues } from '../../patient-registration.types';
+import { type FormValues } from '../../patient-registration.types';
 import styles from './../input.scss';
 
 interface DummyDataInputProps {

package/src/patient-registration/input/dummy-data/dummy-data-input.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DummyDataInput, dummyFormValues } from './dummy-data-input.component';
 import { initialFormValues } from '../../patient-registration.component';
-import { FormValues } from '../../patient-registration-types';
+import { type FormValues } from '../../patient-registration-types';
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -33,11 +34,10 @@ describe('dummy data input', () => {
   });
 
   it('can input data on button click', async () => {
+    const user = userEvent.setup();
     const input = await setupInput();
 
-    fireEvent.click(input);
-    waitFor(() => {
-      expect(formValues).toEqual(dummyFormValues);
-    });
+    await user.click(input);
+    expect(formValues).toEqual(dummyFormValues);
   });
 });

package/src/patient-registration/patient-registration-context.ts

@@ -1,13 +1,12 @@
 import { useConfig } from '@openmrs/esm-framework';
-import { createContext, SetStateAction } from 'react';
-import { RegistrationConfig } from '../config-schema';
-import { FormValues, CapturePhotoProps } from './patient-registration.types';
+import { createContext, type SetStateAction } from 'react';
+import { type RegistrationConfig } from '../config-schema';
+import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
 
 export interface PatientRegistrationContextProps {
   identifierTypes: Array<any>;
   values: FormValues;
   validationSchema: any;
-  setValidationSchema(value: any): void;
   inEditMode: boolean;
   setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
   setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;

package/src/patient-registration/patient-registration-hooks.ts

@@ -1,6 +1,6 @@
 import {
-  FetchResponse,
-  OpenmrsResource,
+  type FetchResponse,
+  type OpenmrsResource,
   getSynchronizationItems,
   openmrsFetch,
   useConfig,
@@ -8,21 +8,21 @@ import {
 } from '@openmrs/esm-framework';
 import last from 'lodash-es/last';
 import camelCase from 'lodash-es/camelCase';
-import { Dispatch, useEffect, useMemo, useState } from 'react';
+import { type Dispatch, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { v4 } from 'uuid';
-import { RegistrationConfig } from '../config-schema';
+import { type RegistrationConfig } from '../config-schema';
 import { patientRegistration } from '../constants';
 import { useConceptAnswers, useGlobalProperties } from '../patient-verification/patient-verification-hook';
 import {
-  FormValues,
-  PatientRegistration,
-  PatientUuidMapType,
-  PersonAttributeResponse,
-  PatientIdentifierResponse,
-  ObsResponse,
-  ConceptAnswers,
-  Encounter,
+  type FormValues,
+  type PatientRegistration,
+  type PatientUuidMapType,
+  type PersonAttributeResponse,
+  type PatientIdentifierResponse,
+  type Encounter,
+  type ConceptAnswers,
+  type ObsResponse,
 } from './patient-registration.types';
 import {
   getAddressFieldValuesFromFhirPatient,

package/src/patient-registration/patient-registration-utils.ts

@@ -1,11 +1,11 @@
 import * as Yup from 'yup';
 import {
-  AddressValidationSchemaType,
-  FormValues,
-  PatientIdentifier,
-  PatientUuidMapType,
-  PatientIdentifierValue,
-  Encounter,
+  type AddressValidationSchemaType,
+  type FormValues,
+  type PatientIdentifier,
+  type PatientUuidMapType,
+  type PatientIdentifierValue,
+  type Encounter,
 } from './patient-registration.types';
 import { parseDate } from '@openmrs/esm-framework';
 import camelCase from 'lodash-es/camelCase';
@@ -120,7 +120,7 @@ export function getFormValuesFromFhirPatient(patient: fhir.Patient) {
   result.additionalMiddleName = additionalPatientName?.given[1];
   result.additionalFamilyName = additionalPatientName?.family;
 
-  result.gender = capitalize(patient.gender);
+  result.gender = patient.gender;
   result.birthdate = patient.birthDate ? parseDate(patient.birthDate) : undefined;
   result.telephoneNumber = patient.telecom ? patient.telecom[0].value : '';
 

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

@@ -4,18 +4,28 @@ import { Button, Link, InlineLoading } from '@carbon/react';
 import { XAxis, ShareKnowledge } from '@carbon/react/icons';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Formik, Form, FormikHelpers } from 'formik';
+import { Formik, Form, type FormikHelpers } from 'formik';
 import { createErrorHandler, showSnackbar, useConfig, interpolateUrl, usePatient } from '@openmrs/esm-framework';
-import { validationSchema as initialSchema } from './validation/patient-registration-validation';
-import { FormValues, CapturePhotoProps } from './patient-registration.types';
+import { getValidationSchema } from './validation/patient-registration-validation';
+import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
 import { PatientRegistrationContext } from './patient-registration-context';
-import { SavePatientForm, SavePatientTransactionManager } from './form-manager';
+import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { usePatientPhoto } from './patient-registration.resource';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
-import { cancelRegistration, filterUndefinedPatientIdenfier, scrollIntoView } from './patient-registration-utils';
-import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
+import {
+  cancelRegistration,
+  filterUndefinedPatientIdenfier,
+  parseAddressTemplateXml,
+  scrollIntoView,
+} from './patient-registration-utils';
+import {
+  useInitialAddressFieldValues,
+  useInitialFormValues,
+  usePatientObs,
+  usePatientUuidMap,
+} from './patient-registration-hooks';
 import { ResourcesContext } from '../offline.resources';
-import { builtInSections, RegistrationConfig, SectionDefinition } from '../config-schema';
+import { builtInSections, type RegistrationConfig, type SectionDefinition } from '../config-schema';
 import { SectionWrapper } from './section/section-wrapper.component';
 import BeforeSavePrompt from './before-save-prompt';
 import styles from './patient-registration.scss';
@@ -34,7 +44,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
   const { search } = useLocation();
   const config = useConfig() as RegistrationConfig;
   const [target, setTarget] = useState<undefined | string>();
-  const [validationSchema, setValidationSchema] = useState(initialSchema);
   const { patientUuid: uuidOfPatientToEdit } = useParams();
   const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(uuidOfPatientToEdit);
   const { t } = useTranslation();
@@ -48,6 +57,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
   const { data: photo } = usePatientPhoto(patientToEdit?.id);
   const savePatientTransactionManager = useRef(new SavePatientTransactionManager());
   const fieldDefinition = config?.fieldDefinitions?.filter((def) => def.type === 'address');
+  const validationSchema = getValidationSchema(config);
   const [enableClientRegistry, setEnableClientRegistry] = useState(
     inEditMode ? initialFormValues.identifiers['nationalUniquePatientIdentifier']?.identifierValue : false,
   );
@@ -139,6 +149,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
           title: t('incompleteForm', 'The following field has errors:'),
           kind: 'warning',
           isLowContrast: true,
+          timeoutInMs: 5000,
         });
       });
     }
@@ -211,7 +222,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                 value={{
                   identifierTypes: identifierTypes,
                   validationSchema,
-                  setValidationSchema,
                   values: props.values,
                   inEditMode,
                   setFieldValue: props.setFieldValue,

package/src/patient-registration/{patient-registration.resource.tsx → patient-registration.resource.ts}

@@ -1,6 +1,6 @@
 import useSWR from 'swr';
 import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
-import { Patient, Relationship, PatientIdentifier, Encounter } from './patient-registration.types';
+import { type Patient, type Relationship, type PatientIdentifier, type Encounter } from './patient-registration.types';
 
 export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
 export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';