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

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

@@ -1,7 +1,14 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * The form-submit flow under test does not fire its callback under happy-dom
+ * (likely a DOM-event-dispatch divergence). Run this file under jsdom.
+ */
 import React from 'react';
+import { vi, describe, it, expect, test, beforeEach } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { useParams } from 'react-router-dom';
-import { screen, within } from '@testing-library/react';
+import { fireEvent, screen, within } from '@testing-library/react';
 import {
   type FetchResponse,
   getDefaultsFromConfigSchema,
@@ -19,18 +26,18 @@ import { PatientRegistration } from './patient-registration.component';
 import { useInitialFormValues } from './patient-registration-hooks';
 import { ResourcesContextProvider } from '../resources-context';
 
-const mockSaveEncounter = jest.mocked(saveEncounter);
-const mockSavePatient = savePatient as jest.Mock;
-const mockShowSnackbar = jest.mocked(showSnackbar);
-const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
-const mockUsePatient = jest.mocked(usePatient);
-const mockUseParams = useParams as jest.Mock;
-const mockUseInitialFormValues = jest.mocked(useInitialFormValues);
+const mockSaveEncounter = vi.mocked(saveEncounter);
+const mockSavePatient = vi.mocked(savePatient);
+const mockShowSnackbar = vi.mocked(showSnackbar);
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+const mockUsePatient = vi.mocked(usePatient);
+const mockUseParams = vi.mocked(useParams);
+const mockUseInitialFormValues = vi.mocked(useInitialFormValues);
 
-jest.mock('./field/field.resource', () => ({
-  useConcept: jest.fn().mockImplementation((uuid: string) => {
+vi.mock('./field/field.resource', () => ({
+  useConcept: vi.fn().mockImplementation((uuid: string) => {
     let data;
-    if (uuid == 'weight-uuid') {
+    if (uuid === 'weight-uuid') {
       data = {
         uuid: 'weight-uuid',
         display: 'Weight (kg)',
@@ -38,7 +45,7 @@ jest.mock('./field/field.resource', () => ({
         answers: [],
         setMembers: [],
       };
-    } else if (uuid == 'chief-complaint-uuid') {
+    } else if (uuid === 'chief-complaint-uuid') {
       data = {
         uuid: 'chief-complaint-uuid',
         display: 'Chief Complaint',
@@ -46,7 +53,7 @@ jest.mock('./field/field.resource', () => ({
         answers: [],
         setMembers: [],
       };
-    } else if (uuid == 'nationality-uuid') {
+    } else if (uuid === 'nationality-uuid') {
       data = {
         uuid: 'nationality-uuid',
         display: 'Nationality',
@@ -63,8 +70,8 @@ jest.mock('./field/field.resource', () => ({
       isLoading: !data,
     };
   }),
-  useConceptAnswers: jest.fn().mockImplementation((uuid: string) => {
-    if (uuid == 'nationality-uuid') {
+  useConceptAnswers: vi.fn().mockImplementation((uuid: string) => {
+    if (uuid === 'nationality-uuid') {
       return {
         data: [
           { display: 'USA', uuid: 'usa' },
@@ -72,7 +79,7 @@ jest.mock('./field/field.resource', () => ({
         ],
         isLoading: false,
       };
-    } else if (uuid == 'other-countries-uuid') {
+    } else if (uuid === 'other-countries-uuid') {
       return {
         data: [
           { display: 'Kenya', uuid: 'ke' },
@@ -84,27 +91,56 @@ jest.mock('./field/field.resource', () => ({
   }),
 }));
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+vi.mock('react-router-dom', async () => ({
+  ...((await vi.importActual('react-router-dom')) as object),
   useLocation: () => ({
     pathname: 'openmrs/spa/patient-registration',
   }),
   useHistory: () => [],
-  useParams: jest.fn().mockReturnValue({ patientUuid: undefined }),
+  useParams: vi.fn().mockReturnValue({ patientUuid: undefined }),
 }));
 
-jest.mock('./patient-registration.resource', () => ({
-  ...jest.requireActual('./patient-registration.resource'),
-  saveEncounter: jest.fn(),
-  savePatient: jest.fn(),
+vi.mock('./patient-registration.resource', async () => ({
+  ...((await vi.importActual('./patient-registration.resource')) as object),
+  saveEncounter: vi.fn(),
+  savePatient: vi.fn(),
 }));
 
-jest.mock('./patient-registration-hooks', () => ({
-  ...jest.requireActual('./patient-registration-hooks'),
-  useInitialFormValues: jest.fn().mockReturnValue([{}, jest.fn()]),
-  useInitialAddressFieldValues: jest.fn().mockReturnValue([{}, jest.fn()]),
-  usePatientUuidMap: jest.fn().mockReturnValue([{}, jest.fn()]),
-}));
+vi.mock('./patient-registration-hooks', async () => {
+  const actual = (await vi.importActual('./patient-registration-hooks')) as object;
+  const defaultInitialFormValues = {
+    additionalFamilyName: '',
+    additionalGivenName: '',
+    additionalMiddleName: '',
+    addNameInLocalLanguage: false,
+    address: {},
+    birthdate: '',
+    birthdateEstimated: false,
+    deathCause: '',
+    deathDate: undefined,
+    deathTime: undefined,
+    deathTimeFormat: 'AM',
+    familyName: '',
+    gender: '',
+    givenName: '',
+    identifiers: {},
+    isDead: false,
+    middleName: '',
+    monthsEstimated: 0,
+    nonCodedCauseOfDeath: '',
+    patientUuid: 'new-patient-uuid',
+    relationships: [],
+    telephoneNumber: '',
+    yearsEstimated: 0,
+  } as FormValues;
+
+  return {
+    ...actual,
+    useInitialFormValues: vi.fn().mockReturnValue([defaultInitialFormValues, vi.fn()]),
+    useInitialAddressFieldValues: vi.fn().mockReturnValue([{}, vi.fn()]),
+    usePatientUuidMap: vi.fn().mockReturnValue([{}, vi.fn()]),
+  };
+});
 
 const mockResourcesContextValue = {
   addressTemplate: mockedAddressTemplate as AddressTemplate,
@@ -113,7 +149,7 @@ const mockResourcesContextValue = {
     sessionId: 'JSESSION',
     currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
   },
-  relationshipTypes: [],
+  relationshipTypes: { results: [] },
   identifierTypes: [],
 };
 
@@ -161,7 +197,6 @@ const mockOpenmrsConfig: RegistrationConfig = {
         useQuickSearch: true,
         searchAddressByLevel: true,
       },
-      requiredAddressFields: [],
     },
     causeOfDeath: {
       conceptUuid: 'cause-of-death-concept-uuid',
@@ -226,24 +261,26 @@ const fillRequiredFields = async () => {
   const demographicsSection = await screen.findByLabelText('Demographics Section');
   const givenNameInput = within(demographicsSection).getByLabelText(/first/i) as HTMLInputElement;
   const familyNameInput = within(demographicsSection).getByLabelText(/family/i) as HTMLInputElement;
-  const dateInput = within(demographicsSection).getByRole('spinbutton', {
-    name: /day, date of birth/i,
-  }) as HTMLInputElement;
-  const monthInput = within(demographicsSection).getByRole('spinbutton', {
-    name: /month, date of birth/i,
-  }) as HTMLInputElement;
-  const yearInput = within(demographicsSection).getByRole('spinbutton', {
-    name: /year, date of birth/i,
-  }) as HTMLInputElement;
-  const genderInput = within(demographicsSection).getByLabelText(/Male/) as HTMLSelectElement;
+
   await user.type(givenNameInput, 'Paul');
   await user.type(familyNameInput, 'Gaihre');
-  await user.clear(dateInput);
-  await user.type(dateInput, '02');
-  await user.clear(monthInput);
-  await user.type(monthInput, '08');
-  await user.clear(yearInput);
-  await user.type(yearInput, '1993');
+
+  // Set birthdate using the date picker's public API
+  let dateOfBirthInput: HTMLInputElement;
+  const birthDateString = '1993-08-02';
+
+  try {
+    // Approach 1: Find as textbox (like appointments test)
+    dateOfBirthInput = within(demographicsSection).getByRole('textbox', { name: /date of birth/i }) as HTMLInputElement;
+  } catch (e) {
+    // Approach 2: Find by label
+    dateOfBirthInput = within(demographicsSection).getByLabelText(/date of birth/i) as HTMLInputElement;
+  }
+
+  fireEvent.change(dateOfBirthInput, { target: { value: birthDateString } });
+  fireEvent.blur(dateOfBirthInput);
+
+  const genderInput = within(demographicsSection).getByLabelText(/Male/) as HTMLSelectElement;
   await user.click(genderInput);
 };
 
@@ -253,12 +290,12 @@ describe('Registering a new patient', () => {
       ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
       ...mockOpenmrsConfig,
     });
-    mockSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
+    mockSavePatient.mockResolvedValue({ data: { uuid: 'new-pt-uuid' }, ok: true } as any);
   });
 
   it('should render all the required fields and sections', async () => {
     renderWithContext(
-      <PatientRegistration isOffline={false} savePatientForm={jest.fn()} />,
+      <PatientRegistration isOffline={false} savePatientForm={vi.fn()} />,
       ResourcesContextProvider,
       mockResourcesContextValue,
     );
@@ -286,8 +323,7 @@ describe('Registering a new patient', () => {
     expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
   });
 
-  // FIXME the register patient button is missing
-  it.skip('saves the patient without extra info', async () => {
+  it('saves the patient without extra info', async () => {
     const user = userEvent.setup();
 
     renderWithContext(
@@ -297,10 +333,11 @@ describe('Registering a new patient', () => {
     );
 
     await fillRequiredFields();
-    await user.click(await screen.findByText(/Register Patient/i));
+    const registerButton = await screen.findByRole('button', { name: /register patient/i });
+    await user.click(registerButton);
     expect(mockSavePatient).toHaveBeenCalledWith(
       expect.objectContaining({
-        identifiers: [], //TODO when the identifer story is finished: { identifier: '', identifierType: '05a29f94-c0ed-11e2-94be-8c13b969e334', location: '' },
+        identifiers: [], // Note: Identifier story may need test data update when complete
         person: {
           addresses: expect.arrayContaining([expect.any(Object)]),
           attributes: [],
@@ -319,7 +356,7 @@ describe('Registering a new patient', () => {
 
   it('should not save the patient if validation fails', async () => {
     const user = userEvent.setup();
-    const mockSavePatientForm = jest.fn();
+    const mockSavePatientForm = vi.fn();
 
     renderWithContext(
       <PatientRegistration isOffline={false} savePatientForm={mockSavePatientForm} />,
@@ -333,8 +370,7 @@ describe('Registering a new patient', () => {
     expect(mockSavePatientForm).not.toHaveBeenCalled();
   });
 
-  // FIXME: the register patient button is missing
-  it.skip('renders and saves registration obs', async () => {
+  it('renders and saves registration obs', async () => {
     const user = userEvent.setup();
 
     mockSaveEncounter.mockResolvedValue({} as unknown as FetchResponse);
@@ -355,7 +391,8 @@ describe('Registering a new patient', () => {
     const nationality = within(customSection).getByLabelText('Nationality');
     await user.selectOptions(nationality, 'USA');
 
-    await user.click(screen.getByText(/Register Patient/i));
+    const registerButton = await screen.findByRole('button', { name: /register patient/i });
+    await user.click(registerButton);
 
     expect(mockSavePatient).toHaveBeenCalled();
 
@@ -372,8 +409,7 @@ describe('Registering a new patient', () => {
     );
   });
 
-  // FIXME register patient button is missing
-  it.skip('retries saving registration obs after a failed attempt', async () => {
+  it('retries saving registration obs after a failed attempt', async () => {
     const user = userEvent.setup();
 
     mockUseConfig.mockReturnValue(configWithObs);
@@ -391,7 +427,7 @@ describe('Registering a new patient', () => {
 
     mockSaveEncounter.mockRejectedValue({ status: 400, responseBody: { error: { message: 'an error message' } } });
 
-    const registerPatientButton = screen.getByText(/Register Patient/i);
+    const registerPatientButton = await screen.findByRole('button', { name: /register patient/i });
 
     await user.click(registerPatientButton);
 
@@ -423,13 +459,13 @@ describe('Updating an existing patient record', () => {
         patientUuid: mockPatient.id,
       };
     });
-    mockSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
+    mockSavePatient.mockResolvedValue({ data: { uuid: 'new-pt-uuid' }, ok: true } as any);
     mockUseParams.mockReturnValue({ patientUuid: mockPatient.id });
   });
 
   it('edits patient demographics', async () => {
     const user = userEvent.setup();
-    const mockSavePatientForm = jest.fn();
+    const mockSavePatientForm = vi.fn();
 
     mockUseInitialFormValues.mockReturnValue([
       {
@@ -480,7 +516,7 @@ describe('Updating an existing patient record', () => {
         telephoneNumber: '',
         yearsEstimated: 0,
       } as FormValues,
-      jest.fn(),
+      vi.fn(),
     ]);
 
     renderWithContext(
@@ -497,8 +533,6 @@ describe('Updating an existing patient record', () => {
 
     expect(screen.getByLabelText(/first name/i)).toHaveValue(mockPatient.name[0].given[0]);
     expect(screen.getByLabelText(/family name/i)).toHaveValue(mockPatient.name[0].family);
-    // FIXME: Fix the mock so that this value is visible
-    // expect(screen.getByLabelText(/date of birth/i)).toHaveValue(mockPatient.birthDate);
     expect(
       screen.getByRole('radio', {
         name: /^male$/i,

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

@@ -85,7 +85,7 @@ export interface PatientRegistration {
     isNewPatient: boolean;
     formValues: FormValues;
     patientUuidMap: PatientUuidMapType;
-    initialAddressFieldValues: Record<string, any>;
+    initialAddressFieldValues: Partial<Record<AddressProperties, string>>;
     capturePhotoProps: CapturePhotoProps;
     currentLocation: string;
     initialIdentifierValues: FormValues['identifiers'];
@@ -201,22 +201,6 @@ export interface CapturePhotoProps {
   dateTime: string;
 }
 
-export interface AddressValidationSchemaType {
-  name: string;
-  label: string;
-  regex: RegExp;
-  regexFormat: string;
-}
-
-export interface CodedPersonAttributeConfig {
-  personAttributeUuid: string;
-  conceptUuid: string;
-}
-
-export interface TextBasedPersonAttributeConfig {
-  personAttributeUuid: string;
-  validationRegex: string;
-}
 export interface PatientIdentifierResponse {
   uuid: string;
   identifier: string;
@@ -251,6 +235,11 @@ export interface PersonAttributeResponse {
   };
 }
 
+export interface ConceptAnswers {
+  display: string;
+  uuid: string;
+}
+
 export interface ConceptResponse {
   uuid: string;
   display: string;
@@ -262,9 +251,18 @@ export interface ConceptResponse {
   setMembers: Array<ConceptAnswers>;
 }
 
-export interface ConceptAnswers {
-  display: string;
+export interface RelationshipType {
   uuid: string;
+  display: string;
+  aIsToB: string;
+  bIsToA: string;
+  displayAIsToB?: string;
+  displayBIsToA?: string;
+  description?: string;
+}
+
+export interface RelationshipTypesResponse {
+  results: Array<RelationshipType>;
 }
 
 export type AddressProperties =
@@ -311,12 +309,3 @@ export interface AddressTemplate {
   elementRegexFormats: ExtensibleAddressProperties;
   requiredElements: Array<AddressProperties> | null;
 }
-
-// https://rest.openmrs.org/#address-template
-export interface RestAddressTemplate {
-  uuid: string;
-  description: string;
-  property: string;
-  display: string;
-  value: string;
-}

package/src/patient-registration/section/death-info/death-info-section.test.tsx

@@ -1,47 +1,143 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Form, Formik } from 'formik';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { type FormValues } from '../../patient-registration.types';
-import { renderWithContext } from 'tools';
 import { initialFormValues } from '../../patient-registration.component';
 import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
 import { DeathInfoSection } from './death-info-section.component';
 
-const initialContextValues = {
-  currentPhoto: 'data:image/png;base64,1234567890',
-  identifierTypes: [],
-  inEditMode: false,
-  initialFormValues: {} as FormValues,
-  isOffline: false,
-  setCapturePhotoProps: jest.fn(),
-  setFieldValue: jest.fn(),
-  setFieldTouched: jest.fn(),
-  setInitialFormValues: jest.fn(),
-  validationSchema: null,
-  values: {
-    isDead: true,
-  } as FormValues,
-};
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
 
-describe('Death info section', () => {
-  const renderDeathInfoSection = (isDead) => {
-    initialContextValues.values.isDead = isDead;
-
-    renderWithContext(
-      <Formik initialValues={initialFormValues} onSubmit={jest.fn()}>
-        <Form>
-          <DeathInfoSection fields={[]} />
-        </Form>
-      </Formik>,
-      PatientRegistrationContextProvider,
-      initialContextValues,
-    );
+/**
+ * Helper to render DeathInfoSection with Formik for state-dependent tests.
+ */
+function renderDeathInfoSectionWithFormik(fields: string[] = [], initialValues: Partial<FormValues> = {}) {
+  const defaultValues = {
+    isDead: false,
+    ...initialValues,
   };
 
-  it('shows fields for recording death info when the patient is marked as dead', () => {
-    renderDeathInfoSection(true);
+  let formValuesRef: FormValues = { ...initialFormValues, ...defaultValues } as FormValues;
+
+  const utils = render(
+    <Formik initialValues={defaultValues} onSubmit={() => {}}>
+      {({ setFieldValue, values }) => {
+        formValuesRef = { ...initialFormValues, ...values } as FormValues;
+        return (
+          <Form>
+            <PatientRegistrationContextProvider
+              value={{
+                identifierTypes: [],
+                values: formValuesRef,
+                validationSchema: null,
+                inEditMode: false,
+                setFieldValue: setFieldValue as any,
+                setCapturePhotoProps: vi.fn(),
+                setFieldTouched: vi.fn().mockResolvedValue(undefined),
+                currentPhoto: '',
+                isOffline: false,
+                initialFormValues: formValuesRef,
+              }}>
+              <DeathInfoSection fields={fields} />
+            </PatientRegistrationContextProvider>
+          </Form>
+        );
+      }}
+    </Formik>,
+  );
+
+  return {
+    ...utils,
+    getFormValues: () => formValuesRef,
+  };
+}
+
+describe('Death info section', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldDefinitions: [],
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders the section with checkbox', () => {
+      renderDeathInfoSectionWithFormik();
+
+      expect(screen.getByRole('region', { name: /death info section/i })).toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: /is dead/i })).toBeInTheDocument();
+    });
+
+    it('shows checkbox as checked when isDead is true', () => {
+      renderDeathInfoSectionWithFormik([], { isDead: true });
+
+      const checkbox = screen.getByRole('checkbox', { name: /is dead/i });
+      expect(checkbox).toBeChecked();
+    });
+
+    it('shows checkbox as unchecked when isDead is false', () => {
+      renderDeathInfoSectionWithFormik([], { isDead: false });
+
+      const checkbox = screen.getByRole('checkbox', { name: /is dead/i });
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+
+  describe('User interaction', () => {
+    it('toggles death info fields when user clicks the checkbox', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderDeathInfoSectionWithFormik([]);
+
+      const checkbox = screen.getByRole('checkbox', { name: /is dead/i });
+      expect(checkbox).not.toBeChecked();
+
+      // Click to check
+      await user.click(checkbox);
+
+      await waitFor(() => {
+        expect(getFormValues().isDead).toBe(true);
+      });
+
+      await waitFor(() => {
+        expect(checkbox).toBeChecked();
+      });
+
+      // Click to uncheck
+      await user.click(checkbox);
+
+      await waitFor(() => {
+        expect(getFormValues().isDead).toBe(false);
+      });
+
+      await waitFor(() => {
+        expect(checkbox).not.toBeChecked();
+      });
+    });
+
+    it('updates form values when user toggles the checkbox', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderDeathInfoSectionWithFormik([]);
+
+      const checkbox = screen.getByRole('checkbox', { name: /is dead/i });
+      expect(checkbox).not.toBeChecked();
+      expect(getFormValues().isDead).toBe(false);
+
+      // Check the checkbox
+      await user.click(checkbox);
+
+      expect(checkbox).toBeChecked();
+      expect(getFormValues().isDead).toBe(true);
 
-    expect(screen.getByRole('region', { name: /death info section/i })).toBeInTheDocument();
-    expect(screen.getByRole('checkbox', { name: /is dead/i })).toBeInTheDocument();
+      // Uncheck the checkbox
+      await user.click(checkbox);
+      await waitFor(() => {
+        expect(checkbox).not.toBeChecked();
+      });
+      expect(getFormValues().isDead).toBe(false);
+    });
   });
 });