@kenyaemr/esm-patient-registration-app 4.5.4 → 4.5.6

package/src/patient-registration/field/address/tests/address-search-component.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Formik, Form, useFormikContext } from 'formik';
+import { Resources, ResourcesContext } from '../../../../offline.resources';
+import { PatientRegistrationContext } from '../../../patient-registration-context';
+import { useConfig } from '@openmrs/esm-framework';
+import { useAddressHierarchy, useOrderedAddressHierarchyLevels } from '../address-hierarchy.resource';
+import { mockedAddressTemplate, mockedAddressOptions, mockedOrderedFields } from './mocks';
+import AddressSearchComponent from '../address-search.component';
+import userEvent from '@testing-library/user-event';
+
+useAddressHierarchy;
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(),
+}));
+
+jest.mock('../address-hierarchy.resource', () => ({
+  ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+  useOrderedAddressHierarchyLevels: jest.fn(),
+  useAddressHierarchy: jest.fn(),
+}));
+
+jest.mock('../../../patient-registration.resource', () => ({
+  ...(jest.requireActual('../../../../patient-registration.resource') as jest.Mock),
+  useAddressHierarchy: jest.fn(),
+}));
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as jest.Mock),
+  useFormikContext: jest.fn(() => ({})),
+}));
+
+const allFields = mockedAddressTemplate.lines
+  .flat()
+  .filter((field) => field.isToken === 'IS_ADDR_TOKEN')
+  .map(({ codeName, displayText }) => ({
+    id: codeName,
+    name: codeName,
+    label: displayText,
+  }));
+const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
+allFields.sort((existingField1, existingField2) => orderMap[existingField1.name] - orderMap[existingField2.name]);
+
+async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
+  await render(
+    <ResourcesContext.Provider value={{ addressTemplate } as Resources}>
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() } as any}>
+            <AddressSearchComponent addressLayout={allFields} />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>
+    </ResourcesContext.Provider>,
+  );
+}
+
+const setFieldValue = jest.fn();
+
+describe('Testing address search bar', () => {
+  beforeEach(() => {
+    cleanup();
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: true,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: mockedOrderedFields,
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    (useFormikContext as jest.Mock).mockImplementation(() => ({
+      setFieldValue,
+    }));
+  });
+
+  it('should render the search bar', () => {
+    (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
+      addresses: [],
+      error: null,
+      isLoading: false,
+    }));
+    renderAddressHierarchy();
+    const searchbox = screen.getByRole('searchbox');
+    expect(searchbox).toBeInTheDocument();
+    const ul = screen.queryByRole('list');
+    expect(ul).not.toBeInTheDocument();
+  });
+
+  it("should render only the results for the search term matched address' parents", async () => {
+    (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
+      addresses: mockedAddressOptions,
+      error: null,
+      isLoading: false,
+    }));
+    renderAddressHierarchy();
+    const searchString = 'nea';
+    const separator = ' > ';
+    const options: Set<string> = new Set();
+    mockedAddressOptions.forEach((address) => {
+      const values = address.split(separator);
+      values.forEach((val, index) => {
+        if (val.toLowerCase().includes(searchString.toLowerCase())) {
+          options.add(values.slice(0, index + 1).join(separator));
+        }
+      });
+    });
+
+    const addressOptions = [...options];
+    addressOptions.forEach(async (address) => {
+      const optionElement = screen.getByText(address);
+      expect(optionElement).toBeInTheDocument();
+      fireEvent.click(optionElement);
+      const values = address.split(separator);
+      allFields.map(({ name }, index) => {
+        waitFor(() => expect(setFieldValue).toBeCalledWith(`address.${name}`, values?.[index]));
+      });
+    });
+  });
+});

package/src/patient-registration/field/address/tests/mocks.ts

@@ -1,104 +1,98 @@
-export const mockResponse1 = {
-  results: [
-    {
-      value:
-        '<?xml version="1.0" encoding="UTF-8"?> \
-          <org.openmrs.layout.address.AddressTemplate> \
-            <nameMappings class="properties"> \
-                <property name="postalCode" value="Postcode" /> \
-                <property name="address1" value="Address line 1" /> \
-                <property name="address2" value="Address line 2" /> \
-                <property name="country" value="Country" /> \
-                <property name="stateProvince" value="State" /> \
-                <property name="cityVillage" value="City" /> \
-            </nameMappings> \
-            <sizeMappings class="properties"> \
-                <property name="postalCode" value="10" /> \
-                <property name="address2" value="40" /> \
-                <property name="address1" value="40" /> \
-                <property name="country" value="10" /> \
-                <property name="stateProvince" value="10" /> \
-                <property name="cityVillage" value="10" /> \
-            </sizeMappings> \
-            <lineByLineFormat> \
-                <string> address1</string> \
-                <string> address2</string> \
-                <string> cityVillage stateProvince country postalCode</string> \
-            </lineByLineFormat> \
-            <requiredElements /> \
-        </org.openmrs.layout.address.AddressTemplate>',
-    },
-  ],
-};
+import { AddressTemplate } from '../../../patient-registration.types';
 
-export const mockResponse2 = {
-  results: [
-    {
-      value:
-        '<org.openmrs.layout.address.AddressTemplate> \
-          <nameMappings> \
-            <entry> \
-              <string>country</string> \
-              <string>Country</string> \
-            </entry> \
-            <entry> \
-              <string>postalCode</string> \
-              <string>Postcode</string> \
-            </entry> \
-            <entry> \
-              <string>address1</string> \
-              <string>Address line 1</string> \
-            </entry> \
-            <entry> \
-              <string>address2</string> \
-              <string>Address line 2</string> \
-            </entry> \
-            <entry> \
-              <string>stateProvince</string> \
-              <string>State</string> \
-            </entry> \
-            <entry> \
-              <string>cityVillage</string> \
-              <string>City</string> \
-            </entry> \
-          </nameMappings> \
-          <sizeMappings> \
-            <entry> \
-              <string>country</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>countyDistrict</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>address1</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>stateProvince</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>cityVillage</string> \
-              <string>40</string> \
-            </entry> \
-          </sizeMappings> \
-          <elementDefaults> \
-            <entry> \
-              <string>country</string> \
-              <string>Cambodia</string> \
-            </entry> \
-          </elementDefaults> \
-          <lineByLineFormat> \
-            <string>cityVillage, address1</string> \
-            <string>countyDistrict, stateProvince</string> \
-            <string>country</string> \
-          </lineByLineFormat> \
-          <maxTokens>0</maxTokens> \
-        </org.openmrs.layout.address.AddressTemplate>',
-    },
+export const mockedAddressTemplate: AddressTemplate = {
+  displayName: null,
+  codeName: 'default',
+  country: null,
+  lines: [
+    [
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: '',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Village',
+        codeName: 'cityVillage',
+        displaySize: '40',
+      },
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: ', ',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Commune',
+        codeName: 'address1',
+        displaySize: '40',
+      },
+    ],
+    [
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: '',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'District',
+        codeName: 'countyDistrict',
+        displaySize: '40',
+      },
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: ', ',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Province',
+        codeName: 'stateProvince',
+        displaySize: '40',
+      },
+    ],
+    [
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: '',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Country',
+        codeName: 'country',
+        displaySize: '40',
+      },
+    ],
   ],
+  lineByLineFormat: ['cityVillage, address1', 'countyDistrict, stateProvince', 'country'],
+  nameMappings: {
+    country: 'Country',
+    countyDistrict: 'District',
+    address1: 'Commune',
+    stateProvince: 'Province',
+    cityVillage: 'Village',
+  },
+  sizeMappings: {
+    country: '40',
+    countyDistrict: '40',
+    address1: '40',
+    stateProvince: '40',
+    cityVillage: '40',
+  },
+  elementDefaults: {
+    country: 'កម្ពុជា (Cambodia)',
+  },
+  elementRegex: null,
+  elementRegexFormats: null,
+  requiredElements: null,
 };
 
 export const mockedOrderedFields = ['country', 'stateProvince', 'cityVillage', 'postalCode', 'address1', 'address2'];
+export const mockedAddressOptions = [
+  'Cambodia > Banteay Meanchey > Mongkol Borei > Banteay Neang > Ou Thum',
+  'Cambodia > Battambang > Banan > Ta Kream > Andoung Neang',
+  'Cambodia > Banteay Meanchey > Mongkol Borei > Banteay Neang > Phnum',
+  'Cambodia > Kampong Cham > Chamkar Leu > Ta Prok > Neang Laeung',
+  'Cambodia > Battambang > Thma Koul > Ta Meun > Tumneab',
+  'Cambodia > Banteay Meanchey > Mongkol Borei > Banteay Neang > Banteay Neang',
+  'Cambodia > Banteay Meanchey > Phnum Srok > Spean Sraeng > Mukh Chhneang',
+  'Cambodia > Kampong Cham > Cheung Prey > Phdau Chum > Cham Neang',
+];

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

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { ContentSwitcher, DatePicker, DatePickerInput, Switch, TextInput, Layer } from '@carbon/react';
+import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { generateFormatting } from '../../date-util';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import styles from '../field.scss';
 import { useConfig } from '@openmrs/esm-framework';
 import { RegistrationConfig } from '../../../config-schema';
+import styles from '../field.scss';
 
 const calcBirthdate = (yearDelta, monthDelta, dateOfBirth) => {
   const { enabled, month, dayOfMonth } = dateOfBirth.useEstimatedDateOfBirth;
@@ -104,38 +104,40 @@ export const DobField: React.FC = () => {
         ) : (
           <div className={styles.grid}>
             <div className={styles.dobField}>
-              <TextInput
-                id="yearsEstimated"
-                type="number"
-                name={yearsEstimated.name}
-                light
-                onChange={onEstimatedYearsChange}
-                labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
-                invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
-                invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
-                value={yearsEstimated.value}
-                min={0}
-                required
-                {...yearsEstimated}
-                onBlur={updateBirthdate}
-              />
+              <Layer>
+                <TextInput
+                  id="yearsEstimated"
+                  type="number"
+                  name={yearsEstimated.name}
+                  onChange={onEstimatedYearsChange}
+                  labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                  invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
+                  invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
+                  value={yearsEstimated.value}
+                  min={0}
+                  required
+                  {...yearsEstimated}
+                  onBlur={updateBirthdate}
+                />
+              </Layer>
             </div>
             <div className={styles.dobField}>
-              <TextInput
-                id="monthsEstimated"
-                type="number"
-                name={monthsEstimated.name}
-                light
-                onChange={onEstimatedMonthsChange}
-                labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
-                invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
-                invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
-                value={monthsEstimated.value}
-                min={0}
-                {...monthsEstimated}
-                required={!yearsEstimateMeta.value}
-                onBlur={updateBirthdate}
-              />
+              <Layer>
+                <TextInput
+                  id="monthsEstimated"
+                  type="number"
+                  name={monthsEstimated.name}
+                  onChange={onEstimatedMonthsChange}
+                  labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
+                  invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
+                  invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
+                  value={monthsEstimated.value}
+                  min={0}
+                  {...monthsEstimated}
+                  required={!yearsEstimateMeta.value}
+                  onBlur={updateBirthdate}
+                />
+              </Layer>
             </div>
           </div>
         )}

package/src/patient-registration/field/field.resource.ts

@@ -1,6 +1,6 @@
 import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
-import { ConceptAnswers, ConceptResponse } from '../patient-registration-types';
+import { ConceptAnswers, ConceptResponse } from '../patient-registration.types';
 
 export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
   const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';

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

@@ -11,7 +11,7 @@ import {
   IdentifierSource,
   PatientIdentifierType,
   PatientIdentifierValue,
-} from '../../patient-registration-types';
+} from '../../patient-registration.types';
 import { ResourcesContext } from '../../../offline.resources';
 import styles from '../field.scss';
 

package/src/patient-registration/field/id/identifier-selection-overlay.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useEffect, useState, useContext } from 're
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSet, Checkbox, Search, RadioButtonGroup, RadioButton } from '@carbon/react';
 import { isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
-import { FormValues, PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration-types';
+import { FormValues, PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration.types';
 import Overlay from '../../ui-components/overlay';
 import { ResourcesContext } from '../../../offline.resources';
 import { PatientRegistrationContext } from '../../patient-registration-context';

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

@@ -80,7 +80,6 @@ export const NameField = () => {
       id="middleName"
       name="middleName"
       labelText={t('middleNameLabelText', 'Middle Name')}
-      light
       checkWarning={checkNumber}
     />
   );

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

@@ -3,7 +3,7 @@ import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { ConceptResponse } from '../../patient-registration-types';
+import { ConceptResponse } from '../../patient-registration.types';
 import { FieldDefinition, RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
@@ -148,18 +148,19 @@ function CodedObsField({ concept, answerConceptSetUuid, label }: CodedObsFieldPr
           {({ field, form: { touched, errors }, meta }) => {
             if (fieldDefinition?.customConceptAnswers?.length) {
               return (
-                <Select
-                  id={fieldName}
-                  name={fieldName}
-                  labelText={label ?? concept?.display}
-                  light
-                  invalid={errors[fieldName] && touched[fieldName]}
-                  {...field}>
-                  <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
-                  {fieldDefinition?.customConceptAnswers.map((answer) => (
-                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
-                  ))}
-                </Select>
+                <Layer>
+                  <Select
+                    id={fieldName}
+                    name={fieldName}
+                    labelText={label ?? concept?.display}
+                    invalid={errors[fieldName] && touched[fieldName]}
+                    {...field}>
+                    <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
+                    {fieldDefinition?.customConceptAnswers.map((answer) => (
+                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                    ))}
+                  </Select>
+                </Layer>
               );
             }
             return (

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Layer, Select, SelectItem } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { Input } from '../../input/basic-input/input/input.component';
-import { CodedPersonAttributeConfig } from '../../patient-registration-types';
+import { CodedPersonAttributeConfig } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import { usePersonAttributeType } from './person-attributes.resource';
 import styles from './../field.scss';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Layer, Select, SelectItem } from '@carbon/react';
 import { Input } from '../../input/basic-input/input/input.component';
-import { PersonAttributeTypeResponse } from '../../patient-registration-types';
+import { PersonAttributeTypeResponse } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
 import { useTranslation } from 'react-i18next';

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

@@ -0,0 +1,103 @@
+import React from 'react';
+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
+
+const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+
+describe('CodedPersonAttributeField', () => {
+  const conceptAnswers = [
+    { uuid: '1', display: 'Option 1' },
+    { uuid: '2', display: 'Option 2' },
+  ];
+  const personAttributeType = {
+    format: 'org.openmrs.Concept',
+    display: 'Referred by',
+    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+  };
+  const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedUseConceptAnswers.mockReturnValue({
+      data: conceptAnswers,
+      isLoading: false,
+    });
+  });
+
+  it('renders the Select component when conceptAnswers are available', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+  });
+
+  it('renders the Input component when conceptAnswers are not available', () => {
+    mockedUseConceptAnswers.mockReturnValueOnce({
+      data: null,
+      isLoading: false,
+    });
+
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('renders the Input component when conceptAnswers are still loading', () => {
+    mockedUseConceptAnswers.mockReturnValueOnce({
+      data: null,
+      isLoading: true,
+    });
+
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+});