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

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"7.0.3-pre.89"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"8.0.0"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "7.0.3-pre.89",
+  "version": "8.0.0",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -53,6 +53,5 @@
   },
   "devDependencies": {
     "webpack": "^5.74.0"
-  },
-  "stableVersion": "7.0.2"
+  }
 }

package/src/add-patient-link.test.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { navigate } from '@openmrs/esm-framework';
 import Root from './add-patient-link';
 
-const mockedNavigate = navigate as jest.Mock;
+const mockNavigate = jest.mocked(navigate);
 
 describe('Add patient link component', () => {
   it('renders an "Add Patient" button and triggers navigation on click', async () => {
     const user = userEvent.setup();
-
-    const { getByRole } = render(<Root />);
-    const addButton = getByRole('button', { name: /add patient/i });
-
-    await user.click(addButton);
-
-    expect(mockedNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/patient-registration' });
+    render(<Root />);
+    await user.click(screen.getByRole('button', { name: /add patient/i }));
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/patient-registration' });
   });
 });

package/src/config-schema.ts

@@ -26,10 +26,12 @@ export interface FieldDefinition {
   };
   renderType?: string;
 }
+
 export interface CustomConceptAnswer {
   uuid: string;
   label?: string;
 }
+
 export interface Gender {
   label?: string;
   value: string;

package/src/nav-link.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import Root from './nav-link';
 
 describe('Nav link component', () => {
   it('renders a link to the patient registration page', () => {
-    const { getByText } = render(<Root />);
-    const linkElement = getByText('Patient Registration');
+    render(<Root />);
+    const linkElement = screen.getByText('Patient Registration');
 
     expect(linkElement).toBeInTheDocument();
     expect(linkElement).toHaveAttribute('href', '/openmrs/spa/patient-registration');

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

@@ -70,10 +70,10 @@ export const AddressComponent: React.FC = () => {
     );
   }, [isLoadingFieldOrder, errorFetchingFieldOrder, orderedFields, addressLayout]);
 
-  if (!addressTemplate) {
+  if (addressTemplate && !Object.keys(addressTemplate)?.length) {
     return (
       <AddressComponentContainer>
-        <SkeletonText />
+        <SkeletonText role="progressbar" />
       </AddressComponentContainer>
     );
   }

package/src/patient-registration/field/address/address-hierarchy-levels.component.tsx

@@ -4,24 +4,6 @@ import { useAddressEntries, useAddressEntryFetchConfig } from './address-hierarc
 import { useField } from 'formik';
 import ComboInput from '../../input/combo-input/combo-input.component';
 
-interface AddressHierarchyLevelsProps {
-  orderedAddressFields: Array<any>;
-}
-
-const AddressHierarchyLevels: React.FC<AddressHierarchyLevelsProps> = ({ orderedAddressFields }) => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      {orderedAddressFields.map((attribute) => (
-        <AddressComboBox key={attribute.id} attribute={attribute} />
-      ))}
-    </>
-  );
-};
-
-export default AddressHierarchyLevels;
-
 interface AddressComboBoxProps {
   attribute: {
     id: string;
@@ -32,6 +14,10 @@ interface AddressComboBoxProps {
   };
 }
 
+interface AddressHierarchyLevelsProps {
+  orderedAddressFields: Array<any>;
+}
+
 const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const { t } = useTranslation();
   const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
@@ -71,3 +57,15 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
     />
   );
 };
+
+const AddressHierarchyLevels: React.FC<AddressHierarchyLevelsProps> = ({ orderedAddressFields }) => {
+  return (
+    <>
+      {orderedAddressFields.map((attribute) => (
+        <AddressComboBox key={attribute.id} attribute={attribute} />
+      ))}
+    </>
+  );
+};
+
+export default AddressHierarchyLevels;

package/src/patient-registration/field/address/address-search.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');
@@ -17,13 +17,13 @@
   position: absolute;
   left: 0;
   background-color: #fff;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
   z-index: 99;
   border: 1px solid $ui-03;
 }
 
 .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/field/address/tests/address-hierarchy.test.tsx

@@ -1,40 +1,75 @@
 import React from 'react';
-import { cleanup, render, screen } from '@testing-library/react';
-import { AddressComponent } from '../address-field.component';
+import { render, screen } from '@testing-library/react';
 import { Formik, Form } from 'formik';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { mockedAddressTemplate, mockedOrderedFields, mockOpenmrsId, mockPatient, mockSession } from '__mocks__';
+import { type AddressTemplate } from '../../../patient-registration.types';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../../config-schema';
 import { type Resources, ResourcesContext } from '../../../../offline.resources';
-import { PatientRegistrationContext } from '../../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import {
+  PatientRegistrationContext,
+  type PatientRegistrationContextProps,
+} from '../../../patient-registration-context';
 import { useOrderedAddressHierarchyLevels } from '../address-hierarchy.resource';
-import { mockedAddressTemplate, mockedOrderedFields } from '__mocks__';
-
-// Mocking the AddressSearchComponent
-jest.mock('../address-search.component', () => jest.fn(() => <div data-testid="address-search-bar" />));
-// Mocking the AddressHierarchyLevels
-jest.mock('../address-hierarchy-levels.component', () => jest.fn(() => <div data-testid="address-hierarchy-levels" />));
-// Mocking the SkeletonText
-jest.mock('@carbon/react', () => ({
-  ...jest.requireActual('@carbon/react'),
-  SkeletonText: jest.fn(() => <div data-testid="skeleton-text" />),
-  InlineNotification: jest.fn(() => <div data-testid="inline-notification" />),
-}));
+import { AddressComponent } from '../address-field.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useConfig: jest.fn(),
-}));
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+const mockUseOrderedAddressHierarchyLevels = jest.mocked(useOrderedAddressHierarchyLevels);
+
+const mockResourcesContextValue = {
+  addressTemplate: {} as AddressTemplate,
+  currentSession: mockSession.data,
+  identifierTypes: [],
+  relationshipTypes: [],
+} as Resources;
+
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: '',
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: mockOpenmrsId,
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+};
+
+const initialContextValues: PatientRegistrationContextProps = {
+  currentPhoto: '',
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+};
 
 jest.mock('../address-hierarchy.resource', () => ({
-  ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+  ...jest.requireActual('../address-hierarchy.resource'),
   useOrderedAddressHierarchyLevels: jest.fn(),
 }));
 
-async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
+async function renderAddressHierarchy(contextValues: PatientRegistrationContextProps) {
   await render(
-    <ResourcesContext.Provider value={{ addressTemplate } as unknown as Resources}>
-      <Formik initialValues={{}} onSubmit={null}>
+    <ResourcesContext.Provider value={mockResourcesContextValue}>
+      <Formik initialValues={mockInitialFormValues} onSubmit={null}>
         <Form>
-          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() } as any}>
+          <PatientRegistrationContext.Provider value={contextValues}>
             <AddressComponent />
           </PatientRegistrationContext.Provider>
         </Form>
@@ -43,11 +78,10 @@ async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
   );
 }
 
-describe('Testing address hierarchy', () => {
-  beforeEach(cleanup);
-
-  it('should render skeleton when address template is loading', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+describe('Address hierarchy', () => {
+  it('renders a loading skeleton when the address template is loading', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         address: {
           useAddressHierarchy: {
@@ -56,21 +90,22 @@ describe('Testing address hierarchy', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: [],
       isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: null,
-    }));
-    // @ts-ignore
-    renderAddressHierarchy(null);
-    const skeletonText = screen.getByTestId('skeleton-text');
-    expect(skeletonText).toBeInTheDocument();
+      errorFetchingFieldOrder: undefined,
+    });
+
+    renderAddressHierarchy(initialContextValues);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('should render skeleton when address hierarchy is enabled and addresshierarchy order is loading', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+  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: {
@@ -79,20 +114,22 @@ describe('Testing address hierarchy', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: [],
       isLoadingFieldOrder: true,
-      errorFetchingFieldOrder: null,
-    }));
-    renderAddressHierarchy();
-    const skeletonText = screen.getByTestId('skeleton-text');
-    expect(skeletonText).toBeInTheDocument();
+      errorFetchingFieldOrder: undefined,
+    });
+
+    renderAddressHierarchy(initialContextValues);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('should render skeleton when address hierarchy is enabled and addresshierarchy order is loading', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+  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: {
@@ -101,20 +138,22 @@ describe('Testing address hierarchy', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: [],
       isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: true,
-    }));
-    renderAddressHierarchy();
-    const inlineNotification = screen.getByTestId('inline-notification');
-    expect(inlineNotification).toBeInTheDocument();
+      errorFetchingFieldOrder: undefined,
+    });
+
+    renderAddressHierarchy(initialContextValues);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('should render the address component with address hierarchy disabled', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+  it('renders the address component with address hierarchy disabled', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         address: {
           useAddressHierarchy: {
@@ -123,14 +162,19 @@ describe('Testing address hierarchy', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: [],
       isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: null,
-    }));
-    renderAddressHierarchy();
+      errorFetchingFieldOrder: undefined,
+    });
+
+    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)`);
@@ -138,8 +182,9 @@ describe('Testing address hierarchy', () => {
     });
   });
 
-  it('should render the fields in order if the address hierarcy is enabled', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+  it('renders the address hierarchy fields in order if the address hierarchy feature is enabled', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         address: {
           useAddressHierarchy: {
@@ -148,14 +193,19 @@ describe('Testing address hierarchy', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: [],
       isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: null,
-    }));
-    renderAddressHierarchy();
+      errorFetchingFieldOrder: undefined,
+    });
+
+    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(
@@ -168,8 +218,9 @@ describe('Testing address hierarchy', () => {
     });
   });
 
-  it('should render quick search bar on above the fields when address hierarchy is enabled and quicksearch is set to true', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+  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: {
@@ -178,20 +229,26 @@ describe('Testing address hierarchy', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: [],
       isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: null,
-    }));
-    renderAddressHierarchy();
-    const addressSearchBar = screen.getByTestId('address-search-bar');
-    expect(addressSearchBar).toBeInTheDocument();
+      errorFetchingFieldOrder: undefined,
+    });
+
+    mockResourcesContextValue.addressTemplate = mockedAddressTemplate;
+
+    renderAddressHierarchy(initialContextValues);
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    expect(searchbox).toBeInTheDocument();
   });
 
-  it('should render combo boxes fields when address hierarchy is enabled and searchAddressByLevel is set to true', () => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+  it('renders combobox fields when address hierarchy is enabled and searchAddressByLevel is set to true', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         address: {
           useAddressHierarchy: {
@@ -200,15 +257,28 @@ describe('Testing address hierarchy', () => {
             searchAddressByLevel: true,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: [],
       isLoadingFieldOrder: false,
-      errorFetchingFieldOrder: null,
-    }));
-    renderAddressHierarchy();
-    const addressHierarchyLevels = screen.getByTestId('address-hierarchy-levels');
-    expect(addressHierarchyLevels).toBeInTheDocument();
+      errorFetchingFieldOrder: undefined,
+    });
+
+    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();
+    });
   });
 });

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

@@ -4,16 +4,16 @@ import { render, screen } from '@testing-library/react';
 import { Formik, Form, useFormikContext } from 'formik';
 import { type Resources, ResourcesContext } from '../../../../offline.resources';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { useAddressHierarchy, useOrderedAddressHierarchyLevels } from '../address-hierarchy.resource';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../../config-schema';
 import { mockedAddressTemplate, mockedAddressOptions, mockedOrderedFields } from '__mocks__';
 import AddressSearchComponent from '../address-search.component';
 
-useAddressHierarchy;
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useConfig: jest.fn(),
-}));
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+const mockUseAddressHierarchy = jest.mocked(useAddressHierarchy);
+const mockUseOrderedAddressHierarchyLevels = jest.mocked(useOrderedAddressHierarchyLevels);
+const mockUseFormikContext = useFormikContext as jest.Mock;
 
 jest.mock('../address-hierarchy.resource', () => ({
   ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
@@ -60,7 +60,8 @@ const setFieldValue = jest.fn();
 
 describe('Testing address search bar', () => {
   beforeEach(() => {
-    (useConfig as jest.Mock).mockImplementation(() => ({
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       fieldConfigurations: {
         address: {
           useAddressHierarchy: {
@@ -69,24 +70,24 @@ describe('Testing address search bar', () => {
             searchAddressByLevel: false,
           },
         },
-      },
-    }));
-    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
       orderedFields: mockedOrderedFields,
       isLoadingFieldOrder: false,
       errorFetchingFieldOrder: null,
-    }));
-    (useFormikContext as jest.Mock).mockImplementation(() => ({
+    });
+    mockUseFormikContext.mockReturnValue({
       setFieldValue,
-    }));
+    });
   });
 
   it('should render the search bar', () => {
-    (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
+    mockUseAddressHierarchy.mockReturnValue({
       addresses: [],
       error: null,
       isLoading: false,
-    }));
+    });
 
     renderAddressHierarchy();
 
@@ -100,11 +101,11 @@ describe('Testing address search bar', () => {
   it("should render only the results for the search term matched address' parents", async () => {
     const user = userEvent.setup();
 
-    (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
+    mockUseAddressHierarchy.mockReturnValue({
       addresses: mockedAddressOptions,
       error: null,
       isLoading: false,
-    }));
+    });
 
     renderAddressHierarchy();
 

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

@@ -2,7 +2,6 @@ import React, { type ChangeEvent, useCallback, useContext } from 'react';
 import { ContentSwitcher, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
-import { type CalendarDate, getLocalTimeZone } from '@internationalized/date';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../../config-schema';
@@ -45,8 +44,8 @@ export const DobField: React.FC = () => {
   );
 
   const onDateChange = useCallback(
-    (birthdate: CalendarDate) => {
-      setFieldValue('birthdate', birthdate?.toDate(getLocalTimeZone()));
+    (birthdate: Date) => {
+      setFieldValue('birthdate', birthdate);
     },
     [setFieldValue],
   );
@@ -107,11 +106,9 @@ export const DobField: React.FC = () => {
               maxDate={today}
               labelText={t('dateOfBirthLabelText', 'Date of Birth')}
               isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              invalidText={t(birthdateMeta.error)}
               value={birthdate.value}
             />
-            {!!(birthdateMeta.touched && birthdateMeta.error) && (
-              <div className={styles.radioFieldError}>{birthdateMeta.error && t(birthdateMeta.error)}</div>
-            )}
           </div>
         ) : (
           <div className={styles.grid}>