@olaboot/esm-patient-registration-app 9.2.0 → 10.0.2

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { screen } from '@testing-library/react';
 import { Formik, Form } from 'formik';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
@@ -15,14 +16,14 @@ import { useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
 import { ResourcesContextProvider } from '../../../resources-context';
 import { AddressComponent } from './address-field.component';
 
-const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
-const mockUseOrderedAddressHierarchyLevels = jest.mocked(useOrderedAddressHierarchyLevels);
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+const mockUseOrderedAddressHierarchyLevels = vi.mocked(useOrderedAddressHierarchyLevels);
 
 const mockResourcesContextValue = {
   addressTemplate: {} as AddressTemplate,
   currentSession: mockSession.data,
   identifierTypes: [],
-  relationshipTypes: [],
+  relationshipTypes: { results: [] },
 } as Resources;
 
 const mockInitialFormValues = {
@@ -57,240 +58,232 @@ const initialContextValues: PatientRegistrationContextProps = {
   identifierTypes: [],
   initialFormValues: mockInitialFormValues,
   isOffline: false,
-  setCapturePhotoProps: jest.fn(),
-  setFieldValue: jest.fn(),
-  setFieldTouched: jest.fn(),
-  setInitialFormValues: jest.fn(),
+  setCapturePhotoProps: vi.fn(),
+  setFieldValue: vi.fn(),
+  setFieldTouched: vi.fn(),
+  setInitialFormValues: vi.fn(),
   validationSchema: null,
   values: mockInitialFormValues,
 };
 
-jest.mock('./address-hierarchy.resource', () => ({
-  ...jest.requireActual('./address-hierarchy.resource'),
-  useOrderedAddressHierarchyLevels: jest.fn(),
+vi.mock('./address-hierarchy.resource', async () => ({
+  ...((await vi.importActual('./address-hierarchy.resource')) as object),
+  useOrderedAddressHierarchyLevels: vi.fn(),
 }));
 
-async function renderAddressHierarchy(contextValues: PatientRegistrationContextProps) {
-  await renderWithContext(
+/**
+ * Helper to render AddressComponent with Formik.
+ */
+async function renderAddressHierarchy(
+  contextValues: PatientRegistrationContextProps,
+  resourcesContextValue: Resources = mockResourcesContextValue,
+) {
+  return await renderWithContext(
     <PatientRegistrationContextProvider value={contextValues}>
-      <Formik initialValues={mockInitialFormValues} onSubmit={null}>
+      <Formik initialValues={mockInitialFormValues} onSubmit={() => {}}>
         <Form>
           <AddressComponent />
         </Form>
       </Formik>
     </PatientRegistrationContextProvider>,
     ResourcesContextProvider,
-    mockResourcesContextValue,
+    resourcesContextValue,
   );
 }
 
 describe('Address hierarchy', () => {
-  it('renders a loading skeleton when the address template is loading', () => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: false,
-            useQuickSearch: false,
-            searchAddressByLevel: false,
-          },
-          requiredAddressFields: [],
-        },
-      } as RegistrationConfig['fieldConfigurations'],
-    });
-
-    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
-      orderedFields: [],
-      isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: undefined,
-    });
-
-    renderAddressHierarchy(initialContextValues);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  beforeEach(() => {
+    mockResourcesContextValue.addressTemplate = {} as AddressTemplate;
   });
 
-  it('renders a loading skeleton when the address hierarchy feature is enabled and address hierarchy order levels are loading', () => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: true,
-            useQuickSearch: false,
-            searchAddressByLevel: false,
+  describe('Loading states', () => {
+    it('renders a loading skeleton when the address template is not available', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          address: {
+            useAddressHierarchy: {
+              enabled: false,
+              useQuickSearch: false,
+              searchAddressByLevel: false,
+            },
+            requiredAddressFields: [],
           },
-        },
-      } as RegistrationConfig['fieldConfigurations'],
+        } as RegistrationConfig['fieldConfigurations'],
+        fieldDefinitions: [],
+      });
+
+      mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+        orderedFields: [],
+        isLoadingFieldOrder: false,
+        errorFetchingFieldOrder: undefined,
+      });
+
+      renderAddressHierarchy(initialContextValues);
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
     });
 
-    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
-      orderedFields: [],
-      isLoadingFieldOrder: true,
-      errorFetchingFieldOrder: undefined,
-    });
-
-    renderAddressHierarchy(initialContextValues);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-  });
-
-  it('renders a loading skeleton when the address hierarchy feature is enabled and address hierarchy order levels are loading', () => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: true,
-            useQuickSearch: false,
-            searchAddressByLevel: false,
+    it('renders a loading skeleton when address hierarchy order levels are loading', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          address: {
+            useAddressHierarchy: {
+              enabled: true,
+              useQuickSearch: false,
+              searchAddressByLevel: false,
+            },
+            requiredAddressFields: [],
           },
-          requiredAddressFields: [],
-        },
-      } as RegistrationConfig['fieldConfigurations'],
+        } as RegistrationConfig['fieldConfigurations'],
+        fieldDefinitions: [],
+      });
+
+      mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+        orderedFields: [],
+        isLoadingFieldOrder: true,
+        errorFetchingFieldOrder: undefined,
+      });
+
+      renderAddressHierarchy(initialContextValues);
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
     });
-
-    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
-      orderedFields: [],
-      isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: undefined,
-    });
-
-    renderAddressHierarchy(initialContextValues);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('renders the address component with address hierarchy disabled', () => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: false,
-            useQuickSearch: false,
-            searchAddressByLevel: false,
-          },
-          requiredAddressFields: [],
-        },
-      } as RegistrationConfig['fieldConfigurations'],
-    });
-
-    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
-      orderedFields: [],
-      isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: undefined,
+  describe('Rendering', () => {
+    beforeEach(() => {
+      mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
     });
 
-    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
-
-    renderAddressHierarchy(initialContextValues);
-
-    const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
-    allFields.forEach((field) => {
-      const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
-      expect(textFieldInput).toBeInTheDocument();
-    });
-  });
-
-  it('renders the address hierarchy fields in order if the address hierarchy feature is enabled', () => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: true,
-            useQuickSearch: false,
-            searchAddressByLevel: false,
+    it('renders address fields when address hierarchy is disabled', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          address: {
+            useAddressHierarchy: {
+              enabled: false,
+              useQuickSearch: false,
+              searchAddressByLevel: false,
+            },
+            requiredAddressFields: [],
           },
-          requiredAddressFields: [],
-        },
-      } as RegistrationConfig['fieldConfigurations'],
-    });
-
-    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
-      orderedFields: [],
-      isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: undefined,
+        } as RegistrationConfig['fieldConfigurations'],
+        fieldDefinitions: [],
+      });
+
+      mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+        orderedFields: [],
+        isLoadingFieldOrder: false,
+        errorFetchingFieldOrder: undefined,
+      });
+
+      renderAddressHierarchy(initialContextValues);
+
+      const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
+      allFields.forEach((field) => {
+        const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
+        expect(textFieldInput).toBeInTheDocument();
+      });
     });
 
-    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
-
-    renderAddressHierarchy(initialContextValues);
-
-    const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
-    const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
-    allFields.sort(
-      (existingField1, existingField2) =>
-        orderMap[existingField1.codeName ?? 0] - orderMap[existingField2.codeName ?? 0],
-    );
-    allFields.forEach((field) => {
-      const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
-      expect(textFieldInput).toBeInTheDocument();
-    });
-  });
-
-  it('renders the quick search bar above the address hierarchy fields when the address hierarchy feature is enabled and useQuickSearch is set to true', () => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: true,
-            useQuickSearch: true,
-            searchAddressByLevel: false,
+    it('renders address hierarchy fields in order when address hierarchy is enabled', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          address: {
+            useAddressHierarchy: {
+              enabled: true,
+              useQuickSearch: false,
+              searchAddressByLevel: false,
+            },
+            requiredAddressFields: [],
           },
-          requiredAddressFields: [],
-        },
-      } as RegistrationConfig['fieldConfigurations'],
-    });
-
-    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
-      orderedFields: [],
-      isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: undefined,
+        } as RegistrationConfig['fieldConfigurations'],
+        fieldDefinitions: [],
+      });
+
+      mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+        orderedFields: mockedOrderedFields,
+        isLoadingFieldOrder: false,
+        errorFetchingFieldOrder: undefined,
+      });
+
+      renderAddressHierarchy(initialContextValues);
+
+      const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
+      const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
+      allFields.sort(
+        (existingField1, existingField2) =>
+          orderMap[existingField1.codeName ?? 0] - orderMap[existingField2.codeName ?? 0],
+      );
+      allFields.forEach((field) => {
+        const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
+        expect(textFieldInput).toBeInTheDocument();
+      });
     });
 
-    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
-
-    renderAddressHierarchy(initialContextValues);
-
-    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
-    expect(searchbox).toBeInTheDocument();
-  });
-
-  it('renders combobox fields when address hierarchy is enabled and searchAddressByLevel is set to true', () => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
-      fieldConfigurations: {
-        address: {
-          useAddressHierarchy: {
-            enabled: true,
-            useQuickSearch: false,
-            searchAddressByLevel: true,
+    it('renders quick search bar when useQuickSearch is enabled', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          address: {
+            useAddressHierarchy: {
+              enabled: true,
+              useQuickSearch: true,
+              searchAddressByLevel: false,
+            },
+            requiredAddressFields: [],
           },
-          requiredAddressFields: [],
-        },
-      } as RegistrationConfig['fieldConfigurations'],
-    });
+        } as RegistrationConfig['fieldConfigurations'],
+        fieldDefinitions: [],
+      });
 
-    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
-      orderedFields: [],
-      isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: undefined,
-    });
+      mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+        orderedFields: mockedOrderedFields,
+        isLoadingFieldOrder: false,
+        errorFetchingFieldOrder: undefined,
+      });
 
-    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
+      renderAddressHierarchy(initialContextValues);
 
-    renderAddressHierarchy(initialContextValues);
+      const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+      expect(searchbox).toBeInTheDocument();
+    });
 
-    const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
-    const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
-    allFields.sort(
-      (existingField1, existingField2) =>
-        orderMap[existingField1.codeName ?? 0] - orderMap[existingField2.codeName ?? 0],
-    );
-    allFields.forEach((field) => {
-      const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
-      expect(textFieldInput).toBeInTheDocument();
+    it('renders address fields when searchAddressByLevel is enabled', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          address: {
+            useAddressHierarchy: {
+              enabled: true,
+              useQuickSearch: false,
+              searchAddressByLevel: true,
+            },
+            requiredAddressFields: [],
+          },
+        } as RegistrationConfig['fieldConfigurations'],
+        fieldDefinitions: [],
+      });
+
+      mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+        orderedFields: mockedOrderedFields,
+        isLoadingFieldOrder: false,
+        errorFetchingFieldOrder: undefined,
+      });
+
+      renderAddressHierarchy(initialContextValues);
+
+      const allFields = mockedAddressTemplate.lines.flat().filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
+      const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
+      allFields.sort(
+        (existingField1, existingField2) =>
+          orderMap[existingField1.codeName ?? 0] - orderMap[existingField2.codeName ?? 0],
+      );
+      allFields.forEach((field) => {
+        const textFieldInput = screen.getByLabelText(`${field.displayText} (optional)`);
+        expect(textFieldInput).toBeInTheDocument();
+      });
     });
   });
 });

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

@@ -16,7 +16,7 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
   const wrapper = useRef(null);
   const [searchString, setSearchString] = useState('');
 
-  const { addresses } = useAddressHierarchy(searchString, separator);
+  const { addresses, isLoading, error } = useAddressHierarchy(searchString, separator);
 
   const addressOptions: Array<string> = useMemo(() => {
     const options: Set<string> = new Set();
@@ -65,19 +65,31 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
     <div className={styles.autocomplete} ref={wrapper} style={{ marginBottom: '1rem' }}>
       <Search
         onChange={handleInputChange}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+          }
+        }}
         labelText={t('searchAddress', 'Search address')}
         placeholder={t('searchAddress', 'Search address')}
         ref={searchBox}
         value={searchString}
       />
-      {addressOptions.length > 0 && (
-        /* Since the input has a marginBottom of 1rem */
+      {searchString && (
         <ul className={styles.suggestions}>
-          {addressOptions.map((address, index) => (
-            <li key={index} onClick={(e) => handleChange(address)}>
-              {address}
-            </li>
-          ))}
+          {isLoading ? (
+            <li className={styles.loading}>{t('searching', 'Searching...')}</li>
+          ) : error ? (
+            <li className={styles.noResults}>{t('errorFetchingAddresses', 'Error fetching address results')}</li>
+          ) : addressOptions.length > 0 ? (
+            addressOptions.map((address) => (
+              <li key={address} onClick={() => handleChange(address)}>
+                {address}
+              </li>
+            ))
+          ) : (
+            <li className={styles.noResults}>{t('noAddressResults', 'No matching addresses found')}</li>
+          )}
         </ul>
       )}
     </div>

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

@@ -12,7 +12,7 @@
   margin-top: 0;
   max-height: 20rem;
   overflow-y: auto;
-  padding-left: 0;
+  padding: 0;
   width: 100%;
   position: absolute;
   left: 0;
@@ -26,7 +26,10 @@
   padding: layout.$spacing-05;
   line-height: 1.29;
   color: #525252;
-  border-bottom: 1px solid #8d8d8d;
+}
+
+.suggestions li:last-of-type {
+  border-bottom: none;
 }
 
 .suggestions li:hover {
@@ -47,6 +50,20 @@
   width: 100%;
 }
 
+.noResults,
+.loading {
+  color: $text-02;
+  cursor: default;
+  border-bottom: none;
+}
+
+.noResults:hover,
+.loading:hover {
+  background-color: inherit;
+  color: $text-02;
+  cursor: default;
+}
+
 .suggestions a {
   color: inherit;
   text-decoration: none;