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

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

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Formik, Form, FormikHelpers } from 'formik';
 import { createErrorHandler, showToast, useConfig, interpolateUrl, usePatient } from '@openmrs/esm-framework';
 import { validationSchema as initialSchema } from './validation/patient-registration-validation';
-import { FormValues, CapturePhotoProps, PatientIdentifierValue } from './patient-registration-types';
+import { FormValues, CapturePhotoProps, PatientIdentifierValue } from './patient-registration.types';
 import { PatientRegistrationContext } from './patient-registration-context';
 import { SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { usePatientPhoto } from './patient-registration.resource';
@@ -75,17 +75,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
       .filter((s) => s);
   }, [config.sections, config.sectionDefinitions]);
 
-  useEffect(() => {
-    if (addressTemplate) {
-      const addressTemplateXml = addressTemplate?.results[0].value;
-      if (!addressTemplateXml) {
-        return;
-      }
-      const { addressValidationSchema } = parseAddressTemplateXml(addressTemplateXml);
-      setValidationSchema((validationSchema) => validationSchema.concat(addressValidationSchema));
-    }
-  }, [inEditMode, addressTemplate, initialAddressFieldValues]);
-
   const onFormSubmit = async (values: FormValues, helpers: FormikHelpers<FormValues>) => {
     const abortController = new AbortController();
     helpers.setSubmitting(true);

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import useSWR from 'swr';
 import useSWRImmutable from 'swr/immutable';
 import { FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
-import { Patient, Relationship, PatientIdentifier, Encounter } from './patient-registration-types';
+import { Patient, Relationship, PatientIdentifier, Encounter } from './patient-registration.types';
 
 export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
 export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
@@ -223,74 +223,3 @@ export async function deletePatientIdentifier(patientUuid: string, patientIdenti
     signal: abortController.signal,
   });
 }
-
-export function useAddressHierarchy(
-  searchString,
-  separator,
-): {
-  addresses: Array<string>;
-  isLoading: boolean;
-  error: Error;
-} {
-  const { data, error, isLoading } = useSWRImmutable<
-    FetchResponse<
-      Array<{
-        address: string;
-      }>
-    >,
-    Error
-  >(
-    searchString
-      ? `/module/addresshierarchy/ajax/getPossibleFullAddresses.form?separator=${separator}&searchString=${searchString}`
-      : null,
-    openmrsFetch,
-  );
-
-  const results = useMemo(
-    () => ({
-      addresses: data?.data?.map((address) => address.address) ?? [],
-      error,
-      isLoading,
-    }),
-    [data?.data, error, isLoading],
-  );
-  return results;
-}
-
-export function useAdressHierarchyWithParentSearch(
-  addressField,
-  parentid,
-  query,
-): {
-  error: Error;
-  isLoading: boolean;
-  addresses: Array<{
-    uuid: string;
-    name: string;
-  }>;
-} {
-  const { data, error, isLoading } = useSWRImmutable<
-    FetchResponse<
-      Array<{
-        uuid: string;
-        name: string;
-      }>
-    >
-  >(
-    query
-      ? `/module/addresshierarchy/ajax/getPossibleAddressHierarchyEntriesWithParents.form?addressField=${addressField}&limit=20&searchString=${query}&parentUuid=${parentid}`
-      : null,
-    openmrsFetch,
-  );
-
-  const results = useMemo(
-    () => ({
-      error: error,
-      isLoading,
-      addresses: data?.data ?? [],
-    }),
-    [data?.data, error, isLoading],
-  );
-
-  return results;
-}

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

@@ -1,15 +1,16 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
+import { BrowserRouter as Router, useParams } from 'react-router-dom';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { showToast, useConfig, usePatient } from '@openmrs/esm-framework';
-import FormManager from './form-manager';
-import { mockPatient } from '../../../../__mocks__/patient.mock';
+import { FormManager } from './form-manager';
 import { saveEncounter, savePatient } from './patient-registration.resource';
 import { Encounter } from './patient-registration-types';
 import { Resources, ResourcesContext } from '../offline.resources';
 import { PatientRegistration } from './patient-registration.component';
 import { RegistrationConfig } from '../config-schema';
+import { mockedAddressTemplate } from './field/address/tests/mocks';
+import { mockPatient } from '../../../../tools/test-helpers';
 
 const mockedUseConfig = useConfig as jest.Mock;
 const mockedUsePatient = usePatient as jest.Mock;
@@ -35,6 +36,7 @@ jest.mock('react-router-dom', () => ({
     pathname: 'openmrs/spa/patient-registration',
   }),
   useHistory: () => [],
+  useParams: jest.fn().mockReturnValue({ patientUuid: undefined }),
 }));
 
 jest.mock('./patient-registration.resource', () => {
@@ -56,17 +58,8 @@ jest.mock('@openmrs/esm-framework', () => {
   };
 });
 
-const predefinedAddressTemplate = {
-  results: [
-    {
-      value:
-        '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
-    },
-  ],
-};
-
 const mockResourcesContextValue = {
-  addressTemplate: predefinedAddressTemplate,
+  addressTemplate: mockedAddressTemplate,
   currentSession: {
     authenticated: true,
     sessionId: 'JSESSION',
@@ -87,9 +80,11 @@ let mockOpenmrsConfig: RegistrationConfig = {
   fieldConfigurations: {
     name: {
       displayMiddleName: true,
-      unidentifiedPatient: true,
+      allowUnidentifiedPatients: true,
       defaultUnknownGivenName: 'UNKNOWN',
       defaultUnknownFamilyName: 'UNKNOWN',
+      displayReverseFieldOrder: false,
+      displayCapturePhoto: true,
     },
     gender: [
       {
@@ -173,264 +168,272 @@ const fillRequiredFields = async () => {
   await user.type(familyNameInput, 'Gaihre');
   await user.clear(dateOfBirthInput);
   await user.type(dateOfBirthInput, '02/08/1993');
-  fireEvent.blur(dateOfBirthInput);
-  fireEvent.click(genderInput);
+  user.click(genderInput);
 };
 
-describe('patient registration', () => {
-  beforeEach(() => {
-    mockedUseConfig.mockReturnValue(mockOpenmrsConfig);
-    mockedSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
-    mockedSaveEncounter.mockClear();
-    mockedShowToast.mockClear();
-  });
+describe('patient registration component', () => {
+  describe('when registering a new patient', () => {
+    beforeEach(() => {
+      mockedUseConfig.mockReturnValue(mockOpenmrsConfig);
+      mockedSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
+      mockedSaveEncounter.mockClear();
+      mockedShowToast.mockClear();
+      jest.clearAllMocks();
+    });
 
-  it.only('renders without crashing', () => {
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Router>
-          <PatientRegistration isOffline={false} savePatientForm={jest.fn()} />
-        </Router>
-        ,
-      </ResourcesContext.Provider>,
-    );
-  });
+    it('renders without crashing', () => {
+      render(
+        <ResourcesContext.Provider value={mockResourcesContextValue}>
+          <Router>
+            <PatientRegistration isOffline={false} savePatientForm={jest.fn()} />
+          </Router>
+          ,
+        </ResourcesContext.Provider>,
+      );
+    });
 
-  it('has the expected sections', async () => {
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Router>
-          <PatientRegistration isOffline={false} savePatientForm={jest.fn()} />
-        </Router>
-      </ResourcesContext.Provider>,
-    );
-    await waitFor(() => expect(screen.getByLabelText(/Demographics Section/)).not.toBeNull());
-    expect(screen.getByLabelText(/Contact Info Section/)).not.toBeNull();
-  });
+    it('has the expected sections', async () => {
+      render(
+        <ResourcesContext.Provider value={mockResourcesContextValue}>
+          <Router>
+            <PatientRegistration isOffline={false} savePatientForm={jest.fn()} />
+          </Router>
+        </ResourcesContext.Provider>,
+      );
+      await waitFor(() => expect(screen.getByLabelText(/Demographics Section/)).not.toBeNull());
+      expect(screen.getByLabelText(/Contact Info Section/)).not.toBeNull();
+    });
 
-  it('saves the patient without extra info', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Router>
-          <PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />
-        </Router>
-      </ResourcesContext.Provider>,
-    );
-
-    await fillRequiredFields();
-    await user.click(await screen.findByText('Register Patient'));
-    await waitFor(() => {
-      expect(mockedSavePatient).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.objectContaining({
-          identifiers: [], //TODO when the identifer story is finished: { identifier: '', identifierType: '05a29f94-c0ed-11e2-94be-8c13b969e334', location: '' }
-          // identifiers: [{ identifier: '', identifierType: '05a29f94-c0ed-11e2-94be-8c13b969e334', location: '' }],
-          person: {
-            addresses: [{}],
-            attributes: [],
-            birthdate: '1993-8-2',
-            birthdateEstimated: false,
-            gender: 'M',
-            names: [{ givenName: 'Paul', middleName: '', familyName: 'Gaihre', preferred: true, uuid: undefined }],
-            dead: false,
-            uuid: expect.anything(),
-          },
-          uuid: expect.anything(),
-        }),
-        undefined,
+    it('saves the patient without extra info', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <ResourcesContext.Provider value={mockResourcesContextValue}>
+          <Router>
+            <PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />
+          </Router>
+        </ResourcesContext.Provider>,
       );
+
+      await fillRequiredFields();
+      await user.click(await screen.findByText('Register Patient'));
+      await waitFor(() => {
+        expect(mockedSavePatient).toHaveBeenCalledWith(
+          expect.objectContaining({
+            identifiers: [], //TODO when the identifer story is finished: { identifier: '', identifierType: '05a29f94-c0ed-11e2-94be-8c13b969e334', location: '' },
+            person: {
+              addresses: expect.arrayContaining([expect.any(Object)]),
+              attributes: [],
+              birthdate: '1993-8-2',
+              birthdateEstimated: false,
+              gender: 'M',
+              names: [{ givenName: 'Paul', middleName: '', familyName: 'Gaihre', preferred: true, uuid: undefined }],
+              dead: false,
+              uuid: expect.anything(),
+            },
+            uuid: expect.anything(),
+          }),
+          undefined,
+        );
+      });
     });
-  });
 
-  it('should not save the patient if validation fails', async () => {
-    const user = userEvent.setup();
+    it('should not save the patient if validation fails', async () => {
+      const user = userEvent.setup();
+
+      const mockedSavePatientForm = jest.fn();
+      render(
+        <ResourcesContext.Provider value={mockResourcesContextValue}>
+          <Router>
+            <PatientRegistration isOffline={false} savePatientForm={mockedSavePatientForm} />
+          </Router>
+        </ResourcesContext.Provider>,
+      );
 
-    const mockedSavePatientForm = jest.fn();
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Router>
-          <PatientRegistration isOffline={false} savePatientForm={mockedSavePatientForm} />
-        </Router>
-      </ResourcesContext.Provider>,
-    );
+      const givenNameInput = (await screen.findByLabelText('First Name')) as HTMLInputElement;
 
-    const givenNameInput = (await screen.findByLabelText('First Name')) as HTMLInputElement;
+      await user.type(givenNameInput, '5');
+      await user.click(screen.getByText('Register Patient'));
 
-    await user.type(givenNameInput, '');
-    await user.click(screen.getByText('Register Patient'));
+      expect(mockedSavePatientForm).not.toHaveBeenCalled();
+    });
 
-    expect(mockedSavePatientForm).not.toHaveBeenCalled();
-  });
+    it('renders and saves registration obs', async () => {
+      const user = userEvent.setup();
 
-  it.skip('edits patient demographics', async () => {
-    const user = userEvent.setup();
+      mockedSaveEncounter.mockResolvedValue({});
+      mockedUseConfig.mockReturnValue(configWithObs);
 
-    mockedSavePatient.mockResolvedValue({});
+      render(
+        <ResourcesContext.Provider value={mockResourcesContextValue}>
+          <Router>
+            <PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />
+          </Router>
+        </ResourcesContext.Provider>,
+      );
 
-    mockedUsePatient.mockReturnValueOnce({
-      isLoading: false,
-      patient: mockPatient,
-      patientUuid: mockPatient.id,
-      error: null,
+      await fillRequiredFields();
+      const customSection = screen.getByLabelText('Custom Section');
+      const weight = within(customSection).getByLabelText('Weight (kg) (optional)');
+      await user.type(weight, '50');
+      const complaint = within(customSection).getByLabelText('Chief Complaint (optional)');
+      await user.type(complaint, 'sad');
+      const nationality = within(customSection).getByLabelText('Nationality');
+      await user.selectOptions(nationality, 'USA');
+
+      await user.click(screen.getByText('Register Patient'));
+
+      await waitFor(() => expect(mockedSavePatient).toHaveBeenCalled());
+      await waitFor(() =>
+        expect(mockedSaveEncounter).toHaveBeenCalledWith(
+          expect.objectContaining<Partial<Encounter>>({
+            encounterType: 'reg-enc-uuid',
+            patient: 'new-pt-uuid',
+            obs: [
+              { concept: 'weight-uuid', value: 50 },
+              { concept: 'chief-complaint-uuid', value: 'sad' },
+              { concept: 'nationality-uuid', value: 'usa' },
+            ],
+          }),
+        ),
+      );
     });
 
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Router>
-          <PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />
-        </Router>
-      </ResourcesContext.Provider>,
-    );
-
-    const givenNameInput = screen.getByLabelText(/First Name/) as HTMLInputElement;
-    const familyNameInput = screen.getByLabelText(/Family Name/) as HTMLInputElement;
-    const middleNameInput = screen.getByLabelText(/Middle Name/) as HTMLInputElement;
-    const dateOfBirthInput = screen.getByLabelText('Date of Birth') as HTMLInputElement;
-    const address1 = screen.getByLabelText('Location.address1') as HTMLInputElement;
-
-    // assert initial values
-    expect(givenNameInput.value).toBe('John');
-    expect(familyNameInput.value).toBe('Wilson');
-    expect(middleNameInput.value).toBeFalsy();
-    expect(dateOfBirthInput.value).toBe('04/04/1972');
-
-    // do some edits
-    await user.clear(givenNameInput);
-    await user.clear(middleNameInput);
-    await user.clear(familyNameInput);
-    await user.type(givenNameInput, 'Eric');
-    await user.type(middleNameInput, 'Johnson');
-    await user.type(familyNameInput, 'Smith');
-    await user.type(address1, 'Bom Jesus Street');
-    await user.click(screen.getByText('Update Patient'));
-
-    expect(mockedSavePatient).toHaveBeenCalledWith(
-      expect.anything(),
-      {
-        uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
-        identifiers: [
-          {
-            uuid: '1f0ad7a1-430f-4397-b571-59ea654a52db',
-            identifier: '100GEJ',
-            identifierType: 'e5af9a9c-ff9d-486d-900c-5fbf66a5ba3c',
-            preferred: true,
-          },
-          {
-            uuid: '1f0ad7a1-430f-4397-b571-59ea654a52db',
-            identifier: '100732HE',
-            identifierType: '3ff0063c-dd45-4d98-8af4-0c094f26166c',
-            preferred: false,
-          },
-        ],
-        person: {
-          addresses: [
-            {
-              address1: 'Bom Jesus Street',
-              address2: '',
-              cityVillage: 'City0351',
-              country: 'Country0351',
-              postalCode: '60351',
-              stateProvince: 'State0351tested',
-            },
-          ],
-          attributes: [],
-          birthdate: new Date('1972-04-04'),
-          birthdateEstimated: false,
-          gender: 'M',
-          names: [
-            {
-              uuid: 'efdb246f-4142-4c12-a27a-9be60b9592e9',
-              givenName: 'Eric',
-              middleName: 'Johnson',
-              familyName: 'Smith',
-              preferred: true,
-            },
-          ],
-          dead: false,
-          uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
-        },
-      },
-      '8673ee4f-e2ab-4077-ba55-4980f408773e',
-    );
-  });
+    it('retries saving registration obs after a failed attempt', async () => {
+      const user = userEvent.setup();
 
-  it('renders and saves registration obs', async () => {
-    const user = userEvent.setup();
-
-    mockedSaveEncounter.mockResolvedValue({});
-    mockedUseConfig.mockReturnValue(configWithObs);
-
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Router>
-          <PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />
-        </Router>
-      </ResourcesContext.Provider>,
-    );
-
-    await fillRequiredFields();
-    const customSection = screen.getByLabelText('Custom Section');
-    const weight = within(customSection).getByLabelText('Weight (kg)');
-    await user.type(weight, '50');
-    const complaint = within(customSection).getByLabelText('Chief Complaint');
-    await user.type(complaint, 'sad');
-    const nationality = within(customSection).getByLabelText('Nationality');
-    await user.selectOptions(nationality, 'USA');
-
-    await user.click(screen.getByText('Register Patient'));
-
-    await waitFor(() => expect(mockedSavePatient).toHaveBeenCalled());
-    await waitFor(() =>
-      expect(mockedSaveEncounter).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.objectContaining<Partial<Encounter>>({
-          encounterType: 'reg-enc-uuid',
-          patient: 'new-pt-uuid',
-          obs: [
-            { concept: 'weight-uuid', value: 50 },
-            { concept: 'chief-complaint-uuid', value: 'sad' },
-            { concept: 'nationality-uuid', value: 'usa' },
-          ],
-        }),
-      ),
-    );
-  });
+      mockedUseConfig.mockReturnValue(configWithObs);
 
-  it('retries saving registration obs after a failed attempt', async () => {
-    const user = userEvent.setup();
+      render(
+        <ResourcesContext.Provider value={mockResourcesContextValue}>
+          <Router>
+            <PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />
+          </Router>
+        </ResourcesContext.Provider>,
+      );
 
-    mockedUseConfig.mockReturnValue(configWithObs);
+      await fillRequiredFields();
+      const customSection = screen.getByLabelText('Custom Section');
+      const weight = within(customSection).getByLabelText('Weight (kg) (optional)');
+      await user.type(weight, '-999');
 
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Router>
-          <PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />
-        </Router>
-      </ResourcesContext.Provider>,
-    );
+      mockedSaveEncounter.mockRejectedValue({ status: 400, responseBody: { error: { message: 'an error message' } } });
 
-    await fillRequiredFields();
-    const customSection = screen.getByLabelText('Custom Section');
-    const weight = within(customSection).getByLabelText('Weight (kg)');
-    await user.type(weight, '-999');
+      await user.click(screen.getByText('Register Patient'));
 
-    mockedSaveEncounter.mockRejectedValue({ status: 400, responseBody: { error: { message: 'an error message' } } });
+      await waitFor(() => expect(mockedSavePatient).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(mockedSaveEncounter).toHaveBeenCalledTimes(1));
+      await waitFor(() =>
+        expect(mockedShowToast).toHaveBeenCalledWith(expect.objectContaining({ description: 'an error message' })),
+      );
 
-    await user.click(screen.getByText('Register Patient'));
+      mockedSaveEncounter.mockResolvedValue({});
 
-    await waitFor(() => expect(mockedSavePatient).toHaveBeenCalledTimes(1));
-    await waitFor(() => expect(mockedSaveEncounter).toHaveBeenCalledTimes(1));
-    await waitFor(() =>
-      expect(mockedShowToast).toHaveBeenCalledWith(expect.objectContaining({ description: 'an error message' })),
-    );
+      await user.click(screen.getByText('Register Patient'));
+      await waitFor(() => expect(mockedSavePatient).toHaveBeenCalledTimes(2));
+      await waitFor(() => expect(mockedSaveEncounter).toHaveBeenCalledTimes(2));
+      await waitFor(() => expect(mockedShowToast).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' })));
+    });
+  });
+
+  describe('when updating an existing patient details', () => {
+    beforeEach(() => {
+      mockedUseConfig.mockReturnValue(mockOpenmrsConfig);
+      mockedSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
+      mockedSaveEncounter.mockClear();
+      mockedShowToast.mockClear();
+      jest.clearAllMocks();
+    });
 
-    mockedSaveEncounter.mockResolvedValue({});
+    it('edits patient demographics', async () => {
+      const user = userEvent.setup();
 
-    await user.click(screen.getByText('Register Patient'));
-    await waitFor(() => expect(mockedSavePatient).toHaveBeenCalledTimes(1));
-    await waitFor(() => expect(mockedSaveEncounter).toHaveBeenCalledTimes(2));
-    await waitFor(() => expect(mockedShowToast).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' })));
+      mockedSavePatient.mockResolvedValue({});
+
+      const mockedUseParams = useParams as jest.Mock;
+
+      mockedUseParams.mockReturnValue({ patientUuid: mockPatient.id });
+
+      mockedUsePatient.mockReturnValue({
+        isLoading: false,
+        patient: mockPatient,
+        patientUuid: mockPatient.id,
+        error: null,
+      });
+
+      render(
+        <ResourcesContext.Provider value={mockResourcesContextValue}>
+          <Router>
+            <PatientRegistration isOffline={false} savePatientForm={mockedSavePatient} />
+          </Router>
+        </ResourcesContext.Provider>,
+      );
+
+      const givenNameInput: HTMLInputElement = screen.getByLabelText(/First Name/);
+      const familyNameInput: HTMLInputElement = screen.getByLabelText(/Family Name/);
+      const middleNameInput: HTMLInputElement = screen.getByLabelText(/Middle Name/);
+      const dateOfBirthInput: HTMLInputElement = screen.getByLabelText('Date of Birth');
+      const genderInput: HTMLInputElement = screen.getByLabelText(/Male/);
+
+      // assert initial values
+      expect(givenNameInput.value).toBe('John');
+      expect(familyNameInput.value).toBe('Wilson');
+      expect(middleNameInput.value).toBeFalsy();
+      expect(dateOfBirthInput.value).toBe('4/4/1972');
+      expect(genderInput.value).toBe('Male');
+
+      // do some edits
+      await user.clear(givenNameInput);
+      await user.clear(middleNameInput);
+      await user.clear(familyNameInput);
+      await user.type(givenNameInput, 'Eric');
+      await user.type(middleNameInput, 'Johnson');
+      await user.type(familyNameInput, 'Smith');
+      await user.click(screen.getByText('Update Patient'));
+
+      await waitFor(() =>
+        expect(mockedSavePatient).toHaveBeenCalledWith(
+          false,
+          {
+            '0': {
+              oldIdentificationNumber: '100732HE',
+            },
+            '1': {
+              openMrsId: '100GEJ',
+            },
+            addNameInLocalLanguage: undefined,
+            additionalFamilyName: '',
+            additionalGivenName: '',
+            additionalMiddleName: '',
+            address: {},
+            birthdate: new Date('1972-04-04T00:00:00.000Z'),
+            birthdateEstimated: false,
+            deathCause: '',
+            deathDate: '',
+            familyName: 'Smith',
+            gender: 'Male',
+            givenName: 'Eric',
+            identifiers: {},
+            isDead: false,
+            middleName: 'Johnson',
+            monthsEstimated: 0,
+            patientUuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
+            relationships: [],
+            telephoneNumber: '',
+            unidentifiedPatient: undefined,
+            yearsEstimated: 0,
+          },
+          expect.anything(),
+          expect.anything(),
+          null,
+          undefined,
+          expect.anything(),
+          expect.anything(),
+          expect.anything(),
+          { patientSaved: false },
+          expect.anything(),
+        ),
+      );
+    });
   });
 });