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

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

@@ -1,55 +1,47 @@
 import React from 'react';
+import { Form, Formik } from 'formik';
 import { render, screen } from '@testing-library/react';
 import { usePersonAttributeType } from './person-attributes.resource';
-import { PersonAttributeField } from './person-attribute-field.component';
 import { useConceptAnswers } from '../field.resource';
-import { Form, Formik } from 'formik';
 import { type FieldDefinition } from '../../../config-schema';
+import { PersonAttributeField } from './person-attribute-field.component';
 
-jest.mock('./person-attributes.resource'); // Mock the usePersonAttributeType hook
-jest.mock('../field.resource'); // Mock the useConceptAnswers hook
-
-jest.mock('formik', () => ({
-  ...jest.requireActual('formik'),
-}));
-
-const mockedUsePersonAttributeType = usePersonAttributeType as jest.Mock;
-const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
-
-let fieldDefinition: FieldDefinition;
+jest.mock('./person-attributes.resource');
+jest.mock('../field.resource');
+
+const mockUsePersonAttributeType = jest.mocked(usePersonAttributeType);
+const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+
+const mockPersonAttributeType = {
+  format: 'java.lang.String',
+  display: 'Referred by',
+  uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+  name: 'Referred by',
+  description: 'The person who referred the patient',
+};
+
+let fieldDefinition: FieldDefinition = {
+  id: 'referredby',
+  label: 'Referred by',
+  type: 'person attribute',
+  uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+  answerConceptSetUuid: '6682d17f-0777-45e4-a39b-93f77eb3531c',
+  validation: {
+    matches: '',
+    required: true,
+  },
+  showHeading: true,
+};
 
 describe('PersonAttributeField', () => {
-  let mockPersonAttributeType = {
-    format: 'java.lang.String',
-    display: 'Referred by',
-    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
-  };
-
   beforeEach(() => {
-    fieldDefinition = {
-      id: 'referredby',
-      name: 'Referred by',
-      type: 'person attribute',
-      uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
-      answerConceptSetUuid: '6682d17f-0777-45e4-a39b-93f77eb3531c',
-      validation: {
-        matches: '',
-        required: true,
-      },
-      showHeading: true,
-    };
-    mockedUsePersonAttributeType.mockReturnValue({
+    mockUsePersonAttributeType.mockReturnValue({
       data: mockPersonAttributeType,
       isLoading: false,
       error: null,
-      uuid: '14d4f066-15f5-102d-96e4-000c29c2a5d7d',
     });
   });
 
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
   it('renders the text input field for String format', () => {
     render(
       <Formik initialValues={{}} onSubmit={() => {}}>
@@ -78,23 +70,24 @@ describe('PersonAttributeField', () => {
         </Form>
       </Formik>,
     );
+
     expect(screen.queryByRole('heading')).not.toBeInTheDocument();
   });
 
   it('renders the coded attribute field for Concept format', () => {
-    mockedUsePersonAttributeType.mockReturnValue({
-      data: { ...mockPersonAttributeType, format: 'org.openmrs.Concept' },
-      isLoading: false,
-      error: null,
-    });
-
     fieldDefinition = {
       id: 'referredby',
       ...fieldDefinition,
       label: 'Referred by',
     };
 
-    mockedUseConceptAnswers.mockReturnValueOnce({
+    mockUsePersonAttributeType.mockReturnValue({
+      data: { ...mockPersonAttributeType, format: 'org.openmrs.Concept' },
+      isLoading: false,
+      error: null,
+    });
+
+    mockUseConceptAnswers.mockReturnValueOnce({
       data: [
         { uuid: '1', display: 'Option 1' },
         { uuid: '2', display: 'Option 2' },
@@ -118,7 +111,7 @@ describe('PersonAttributeField', () => {
   });
 
   it('renders an error notification if attribute type has unknown format', () => {
-    mockedUsePersonAttributeType.mockReturnValue({
+    mockUsePersonAttributeType.mockReturnValue({
       data: { ...mockPersonAttributeType, format: 'unknown' },
       isLoading: false,
       error: null,
@@ -135,17 +128,20 @@ describe('PersonAttributeField', () => {
     expect(screen.getByText('Error')).toBeInTheDocument();
     expect(screen.getByText(/Patient attribute type has unknown format/i)).toBeInTheDocument();
   });
+
   it('renders an error notification if unable to fetch attribute type', () => {
-    mockedUsePersonAttributeType.mockReturnValue({
+    mockUsePersonAttributeType.mockReturnValue({
       data: null,
       isLoading: false,
       error: new Error('Failed to fetch attribute type'),
     });
 
     fieldDefinition = {
+      id: 'referredBy',
       uuid: 'attribute-uuid',
       label: 'Attribute',
       showHeading: false,
+      type: 'person attribute',
     };
 
     render(
@@ -160,17 +156,19 @@ describe('PersonAttributeField', () => {
     expect(screen.getByText(/Unable to fetch person attribute type/i)).toBeInTheDocument();
   });
 
-  it('renders a skeleton if attribute type is loading', () => {
-    mockedUsePersonAttributeType.mockReturnValue({
+  it('renders a skeleton if attribute type is loading', async () => {
+    mockUsePersonAttributeType.mockReturnValue({
       data: null,
       isLoading: true,
       error: null,
     });
 
     fieldDefinition = {
+      id: 'referredBy',
       uuid: 'attribute-uuid',
       label: 'Attribute',
       showHeading: true,
+      type: 'person attribute',
     };
 
     render(
@@ -180,8 +178,8 @@ describe('PersonAttributeField', () => {
         </Form>
       </Formik>,
     );
-    const input = screen.findByLabelText(/Reffered by/i);
-    expect(screen.getByText(/Attribute/i)).toBeInTheDocument();
-    expect(input).not.toBeNull(); // checks that the input is not rendered when the attribute type is loading
+
+    await screen.findByRole('heading', { name: /attribute/i });
+    expect(screen.queryByLabelText(/Referred by/i)).not.toBeInTheDocument();
   });
 });

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

@@ -9,6 +9,8 @@ describe('TextPersonAttributeField', () => {
     format: 'java.lang.String',
     display: 'Referred by',
     uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+    description: 'Referred by',
+    name: 'Referred by',
   };
 
   it('renders the input field with a label', () => {

package/src/patient-registration/input/basic-input/select/select-input.test.tsx

@@ -40,7 +40,7 @@ describe('the select input', () => {
       </Formik>,
     );
 
-    await expect(screen.findByRole('combobox'));
+    await screen.findByRole('combobox');
 
     const selectInput = screen.getByRole('combobox', { name: 'Select (optional)' }) as HTMLSelectElement;
     expect(selectInput.labels).toHaveLength(1);

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .label01 {
   @include type.type-style('label-01');
@@ -18,12 +18,12 @@
   position: absolute;
   left: 0;
   background-color: #fff;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
   z-index: 99;
 }
 
 .suggestions li {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   line-height: 1.29;
   color: #525252;
   border-bottom: 1px solid #8d8d8d;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Autosuggest } from './autosuggest.component';
 import { BrowserRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Autosuggest } from './autosuggest.component';
 
 const mockPersons = [
   {
@@ -23,28 +23,50 @@ const mockPersons = [
   },
 ];
 
-const mockedGetSearchResults = async (query: string) => {
+const mockGetSearchResults = async (query: string) => {
   return mockPersons.filter((person) => {
     return person.display.toUpperCase().includes(query.toUpperCase());
   });
 };
 
-const mockedHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
+const mockHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
 
 describe('Autosuggest', () => {
-  afterEach(() => mockedHandleSuggestionSelected.mockClear());
-
   it('renders a search box', () => {
-    renderAutosuggest();
+    render(
+      <BrowserRouter>
+        <Autosuggest
+          getSearchResults={mockGetSearchResults}
+          getDisplayValue={(item) => item.display}
+          getFieldValue={(item) => item.uuid}
+          id="person"
+          labelText=""
+          onSuggestionSelected={mockHandleSuggestionSelected}
+          placeholder="Find Person"
+        />
+      </BrowserRouter>,
+    );
 
     expect(screen.getByRole('searchbox')).toBeInTheDocument();
-    expect(screen.queryByRole('list')).toBeNull();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
   });
 
   it('renders matching search results in a list when the user types a query', async () => {
     const user = userEvent.setup();
 
-    renderAutosuggest();
+    render(
+      <BrowserRouter>
+        <Autosuggest
+          getSearchResults={mockGetSearchResults}
+          getDisplayValue={(item) => item.display}
+          getFieldValue={(item) => item.uuid}
+          id="person"
+          labelText=""
+          onSuggestionSelected={mockHandleSuggestionSelected}
+          placeholder="Find Person"
+        />
+      </BrowserRouter>,
+    );
 
     const searchbox = screen.getByRole('searchbox');
     await user.type(searchbox, 'john');
@@ -52,7 +74,7 @@ describe('Autosuggest', () => {
     const list = screen.getByRole('list');
 
     expect(list).toBeInTheDocument();
-    expect(list.children).toHaveLength(2);
+    expect(screen.getAllByRole('listitem').length).toEqual(2);
     expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('John Doe');
     expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('John Smith');
   });
@@ -60,10 +82,22 @@ describe('Autosuggest', () => {
   it('clears the list of suggestions when a suggestion is selected', async () => {
     const user = userEvent.setup();
 
-    renderAutosuggest();
+    render(
+      <BrowserRouter>
+        <Autosuggest
+          getSearchResults={mockGetSearchResults}
+          getDisplayValue={(item) => item.display}
+          getFieldValue={(item) => item.uuid}
+          id="person"
+          labelText=""
+          onSuggestionSelected={mockHandleSuggestionSelected}
+          placeholder="Find Person"
+        />
+      </BrowserRouter>,
+    );
 
     let list = screen.queryByRole('list');
-    expect(list).toBeNull();
+    expect(list).not.toBeInTheDocument();
 
     const searchbox = screen.getByRole('searchbox');
     await user.type(searchbox, 'john');
@@ -74,19 +108,31 @@ describe('Autosuggest', () => {
     const listitems = screen.getAllByRole('listitem');
     await user.click(listitems[0]);
 
-    expect(mockedHandleSuggestionSelected).toHaveBeenLastCalledWith('person', 'randomuuid1');
+    expect(mockHandleSuggestionSelected).toHaveBeenLastCalledWith('person', 'randomuuid1');
 
     list = screen.queryByRole('list');
-    expect(list).toBeNull();
+    expect(list).not.toBeInTheDocument();
   });
 
   it('changes suggestions when a search input is changed', async () => {
     const user = userEvent.setup();
 
-    renderAutosuggest();
+    render(
+      <BrowserRouter>
+        <Autosuggest
+          getSearchResults={mockGetSearchResults}
+          getDisplayValue={(item) => item.display}
+          getFieldValue={(item) => item.uuid}
+          id="person"
+          labelText=""
+          onSuggestionSelected={mockHandleSuggestionSelected}
+          placeholder="Find Person"
+        />
+      </BrowserRouter>,
+    );
 
     let list = screen.queryByRole('list');
-    expect(list).toBeNull();
+    expect(list).not.toBeInTheDocument();
 
     const searchbox = screen.getByRole('searchbox');
     await user.type(searchbox, 'john');
@@ -97,13 +143,25 @@ describe('Autosuggest', () => {
     await user.clear(searchbox);
 
     list = screen.queryByRole('list');
-    expect(list).toBeNull();
+    expect(list).not.toBeInTheDocument();
   });
 
   it('hides the list of suggestions when the user clicks outside of the component', async () => {
     const user = userEvent.setup();
 
-    renderAutosuggest();
+    render(
+      <BrowserRouter>
+        <Autosuggest
+          getSearchResults={mockGetSearchResults}
+          getDisplayValue={(item) => item.display}
+          getFieldValue={(item) => item.uuid}
+          id="person"
+          labelText=""
+          onSuggestionSelected={mockHandleSuggestionSelected}
+          placeholder="Find Person"
+        />
+      </BrowserRouter>,
+    );
 
     const input = screen.getByRole('searchbox');
 
@@ -114,19 +172,3 @@ describe('Autosuggest', () => {
     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

@@ -17,7 +17,7 @@ interface IdentifierInputProps {
   fieldName: string;
 }
 
-export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fieldName }) => {
+const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fieldName }) => {
   const { t } = useTranslation();
   const { defaultPatientIdentifierTypes } = useConfig();
   const { identifierTypes } = useContext(ResourcesContext);
@@ -154,3 +154,5 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
     </div>
   );
 };
+
+export default IdentifierInput;

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

@@ -1,20 +1,13 @@
+/* eslint-disable testing-library/no-node-access */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Formik, Form } from 'formik';
-import { IdentifierInput } from './identifier-input.component';
+import { type PatientIdentifierType } from '../../../patient-registration.types';
 import { initialFormValues } from '../../../patient-registration.component';
-import { type PatientIdentifierType } from '../../../patient-registration-types';
+import IdentifierInput from './identifier-input.component';
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-  };
-});
-
-describe.skip('identifier input', () => {
+// TODO: Fix this test
+xdescribe('identifier input', () => {
   const openmrsID = {
     name: 'OpenMRS ID',
     fieldName: 'openMrsId',
@@ -42,8 +35,10 @@ describe.skip('identifier input', () => {
     ],
     autoGenerationSource: null,
   };
+
   const setupIdentifierInput = async (identifierType: PatientIdentifierType) => {
     initialFormValues['source-for-' + identifierType.fieldName] = identifierType.identifierSources[0].name;
+
     render(
       <Formik initialValues={initialFormValues} onSubmit={null}>
         <Form>
@@ -61,12 +56,14 @@ describe.skip('identifier input', () => {
 
   it('exists', async () => {
     const { identifierInput, identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+
     expect(identifierInput.type).toBe('text');
     expect(identifierSourceSelectInput.type).toBe('select-one');
   });
 
   it('has correct props for identifier source select input', async () => {
     const { identifierSourceSelectInput } = await setupIdentifierInput(openmrsID);
+
     expect(identifierSourceSelectInput.childElementCount).toBe(3);
     expect(identifierSourceSelectInput.value).toBe('Generator 1 for OpenMRS ID');
   });

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

@@ -3,18 +3,9 @@ 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 { type FormValues } from '../../patient-registration-types';
+import { type FormValues } from '../../patient-registration.types';
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-  };
-});
-
-describe('dummy data input', () => {
+describe('Dummy data input', () => {
   let formValues: FormValues = initialFormValues;
 
   const setupInput = async () => {

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

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../../patient-registration/patient-registration.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .fieldRow {
   display: flex;
@@ -10,7 +10,7 @@
 }
 
 .subFieldRow {
-  margin-bottom: 5px;
+  margin-bottom: 0.3125rem;
 }
 
 .label {
@@ -20,7 +20,7 @@
 
 .textID,
 .comboInput {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .requiredField {
@@ -28,15 +28,15 @@
 }
 
 .input {
-  margin-right: 5px;
+  margin-right: 0.3125rem;
 }
 
 .checkboxField {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  width: 400px;
-  margin-left: 10px;
+  width: 25rem;
+  margin-left: 0.625rem;
 }
 
 .textInput {
@@ -50,9 +50,9 @@
 }
 
 .checkboxInput {
-  height: 1.5rem !important;
-  width: 1.5rem !important;
-  margin-top: 8px;
+  height: layout.$spacing-06 !important;
+  width: layout.$spacing-06 !important;
+  margin-top: layout.$spacing-03;
 }
 
 .selectInput {
@@ -114,5 +114,5 @@
 
 .comboInputItemOption {
   margin: 0;
-  padding-left: 1rem;
+  padding-left: layout.$spacing-05;
 }

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

@@ -4,16 +4,16 @@ import { type RegistrationConfig } from '../config-schema';
 import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
 
 export interface PatientRegistrationContextProps {
+  currentPhoto: string;
   identifierTypes: Array<any>;
-  values: FormValues;
-  validationSchema: any;
   inEditMode: boolean;
-  setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
-  setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;
-  currentPhoto: string;
-  isOffline: boolean;
   initialFormValues: FormValues;
+  isOffline: boolean;
+  setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;
+  setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
   setInitialFormValues?: React.Dispatch<SetStateAction<FormValues>>;
+  validationSchema: any;
+  values: FormValues;
 }
 
 export const PatientRegistrationContext = createContext<PatientRegistrationContextProps | undefined>(undefined);

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

@@ -1,4 +1,6 @@
 import * as Yup from 'yup';
+import camelCase from 'lodash-es/camelCase';
+import { parseDate } from '@openmrs/esm-framework';
 import {
   type AddressValidationSchemaType,
   type FormValues,
@@ -7,9 +9,6 @@ import {
   type PatientIdentifierValue,
   type Encounter,
 } from './patient-registration.types';
-import { parseDate } from '@openmrs/esm-framework';
-import camelCase from 'lodash-es/camelCase';
-import capitalize from 'lodash-es/capitalize';
 
 export function parseAddressTemplateXml(addressTemplate: string) {
   const templateXmlDoc = new DOMParser().parseFromString(addressTemplate, 'text/xml');
@@ -205,9 +204,9 @@ export function getPhonePersonAttributeValueFromFhirPatient(patient: fhir.Patien
   return result;
 }
 
-export const filterUndefinedPatientIdenfier = (patientIdenfiers) =>
+export const filterOutUndefinedPatientIdentifiers = (patientIdentifiers) =>
   Object.fromEntries(
-    Object.entries<PatientIdentifierValue>(patientIdenfiers).filter(
+    Object.entries<PatientIdentifierValue>(patientIdentifiers).filter(
       ([key, value]) => value.identifierValue !== undefined,
     ),
   );

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

@@ -18,18 +18,8 @@ import { type FormValues, type CapturePhotoProps } from './patient-registration.
 import { PatientRegistrationContext } from './patient-registration-context';
 import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
-import {
-  cancelRegistration,
-  filterUndefinedPatientIdenfier,
-  parseAddressTemplateXml,
-  scrollIntoView,
-} from './patient-registration-utils';
-import {
-  useInitialAddressFieldValues,
-  useInitialFormValues,
-  usePatientObs,
-  usePatientUuidMap,
-} from './patient-registration-hooks';
+import { cancelRegistration, filterOutUndefinedPatientIdentifiers, scrollIntoView } from './patient-registration-utils';
+import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap,usePatientObs } from './patient-registration-hooks';
 import { ResourcesContext } from '../offline.resources';
 import { builtInSections, type RegistrationConfig, type SectionDefinition } from '../config-schema';
 import { SectionWrapper } from './section/section-wrapper.component';
@@ -46,7 +36,7 @@ export interface PatientRegistrationProps {
 }
 
 export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePatientForm, isOffline }) => {
-  const { currentSession, addressTemplate, identifierTypes } = useContext(ResourcesContext);
+  const { currentSession, identifierTypes } = useContext(ResourcesContext);
   const { search } = useLocation();
   const config = useConfig() as RegistrationConfig;
   const [target, setTarget] = useState<undefined | string>();
@@ -86,7 +76,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     const abortController = new AbortController();
     helpers.setSubmitting(true);
 
-    const updatedFormValues = { ...values, identifiers: filterUndefinedPatientIdenfier(values.identifiers) };
+    const updatedFormValues = { ...values, identifiers: filterOutUndefinedPatientIdentifiers(values.identifiers) };
     try {
       await savePatientForm(
         !inEditMode,

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

@@ -8,10 +8,6 @@ jest.mock('@openmrs/esm-framework', () => ({
 }));
 
 describe('savePatient', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
   it('appends patient uuid in url if provided', () => {
     mockOpenmrsFetch.mockImplementationOnce((url) => url);
     savePatient(null, '1234');