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

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

@@ -0,0 +1,346 @@
+import React from 'react';
+import { vi, describe, it, expect, test, beforeEach, type Mock } from 'vitest';
+import { Form, Formik } from 'formik';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getDefaultsFromConfigSchema, useConfig, useLayoutType, isDesktop } from '@openmrs/esm-framework';
+import { mockPatient, mockSession } from '__mocks__';
+import { renderWithContext } from 'tools';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../config-schema';
+import {
+  PatientRegistrationContextProvider,
+  type PatientRegistrationContextProps,
+} from '../../patient-registration-context';
+import { ResourcesContextProvider } from '../../../resources-context';
+import PatientIdentifierOverlay from './identifier-selection-overlay.component';
+import type { AddressTemplate, FormValues, PatientIdentifierType } from '../../patient-registration.types';
+import type { Resources } from '../../../offline.resources';
+
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+const mockUseLayoutType = vi.mocked(useLayoutType);
+const mockIsDesktop = vi.mocked(isDesktop);
+
+// Mock identifier types
+const mockIdentifierTypes: PatientIdentifierType[] = [
+  {
+    uuid: 'openmrs-id-uuid',
+    name: 'OpenMRS ID',
+    fieldName: 'openMrsId',
+    format: '^[0-9]{5,6}$',
+    formatDescription: 'Format: 5-6 digits',
+    required: true,
+    isPrimary: true,
+    uniquenessBehavior: 'UNIQUE',
+    identifierSources: [
+      {
+        uuid: 'source-1-uuid',
+        name: 'Auto-generated',
+        autoGenerationOption: {
+          automaticGenerationEnabled: true,
+          manualEntryEnabled: false,
+        },
+      },
+    ],
+  },
+  {
+    uuid: 'passport-id-uuid',
+    name: 'Passport Number',
+    fieldName: 'passportId',
+    format: '',
+    required: false,
+    isPrimary: false,
+    uniquenessBehavior: 'NON_UNIQUE',
+    identifierSources: [
+      {
+        uuid: 'source-2-uuid',
+        name: 'Manual Entry',
+        autoGenerationOption: {
+          automaticGenerationEnabled: false,
+          manualEntryEnabled: true,
+        },
+      },
+    ],
+  },
+  {
+    uuid: 'national-id-uuid',
+    name: 'National ID',
+    fieldName: 'nationalId',
+    format: '',
+    required: false,
+    isPrimary: false,
+    uniquenessBehavior: 'NON_UNIQUE',
+    identifierSources: [],
+  },
+];
+
+const mockResourcesContextValue: Resources = {
+  addressTemplate: {} as AddressTemplate,
+  currentSession: mockSession.data,
+  identifierTypes: mockIdentifierTypes,
+  relationshipTypes: { results: [] },
+} as Resources;
+
+const mockInitialFormValues: FormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  birthdate: null,
+  birthdateEstimated: false,
+  deathCause: '',
+  deathDate: '',
+  deathTime: '',
+  deathTimeFormat: 'AM' as 'AM' | 'PM',
+  nonCodedCauseOfDeath: '',
+  familyName: 'Doe',
+  gender: 'male',
+  givenName: 'John',
+  identifiers: {},
+  isDead: false,
+  middleName: 'Test',
+  monthsEstimated: 0,
+  patientUuid: mockPatient.uuid,
+  relationships: [],
+  telephoneNumber: '',
+  yearsEstimated: 0,
+};
+
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: null,
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: vi.fn(),
+  setFieldValue: vi.fn(),
+  setInitialFormValues: vi.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+} as unknown as PatientRegistrationContextProps;
+
+/**
+ * Helper to render PatientIdentifierOverlay with Formik.
+ */
+function renderIdentifierSelectionOverlay(
+  contextValues: PatientRegistrationContextProps = mockContextValues,
+  resourcesContextValue: Resources = mockResourcesContextValue,
+) {
+  const mockSetFieldValue = vi.fn();
+  const mockCloseOverlay = vi.fn();
+
+  const utils = renderWithContext(
+    <Formik initialValues={{}} onSubmit={() => {}}>
+      <Form>
+        <PatientRegistrationContextProvider value={contextValues}>
+          <PatientIdentifierOverlay setFieldValue={mockSetFieldValue} closeOverlay={mockCloseOverlay} />
+        </PatientRegistrationContextProvider>
+      </Form>
+    </Formik>,
+    ResourcesContextProvider,
+    resourcesContextValue,
+  );
+
+  return {
+    ...utils,
+    mockSetFieldValue,
+    mockCloseOverlay,
+  };
+}
+
+describe('PatientIdentifierOverlay component', () => {
+  beforeEach(() => {
+    mockIsDesktop.mockReturnValue(true);
+    mockUseLayoutType.mockReturnValue('desktop' as any);
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      defaultPatientIdentifierTypes: [],
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders overlay with header', () => {
+      renderIdentifierSelectionOverlay();
+
+      // Header text appears in the overlay header (may appear in both header and button)
+      const headers = screen.queryAllByText(/configure identifiers/i);
+      expect(headers.length).toBeGreaterThan(0);
+    });
+
+    it('renders instruction text', () => {
+      renderIdentifierSelectionOverlay();
+
+      expect(screen.getByText(/select the identifiers you'd like to add for this patient/i)).toBeInTheDocument();
+    });
+
+    it('renders all identifier types as checkboxes', () => {
+      renderIdentifierSelectionOverlay();
+
+      expect(screen.getByLabelText('OpenMRS ID')).toBeInTheDocument();
+      expect(screen.getByLabelText('Passport Number')).toBeInTheDocument();
+      expect(screen.getByLabelText('National ID')).toBeInTheDocument();
+    });
+
+    it('renders search input when there are more than 7 identifier types', () => {
+      const manyIdentifierTypes = Array.from({ length: 8 }, (_, i) => ({
+        ...mockIdentifierTypes[0],
+        uuid: `uuid-${i}`,
+        name: `Identifier ${i}`,
+        fieldName: `identifier${i}`,
+        required: false,
+        isPrimary: false,
+      }));
+
+      renderIdentifierSelectionOverlay(mockContextValues, {
+        ...mockResourcesContextValue,
+        identifierTypes: manyIdentifierTypes,
+      });
+
+      // Search input has both labelText and placeholder with same text, so use getAllByLabelText
+      expect(screen.getAllByLabelText(/search identifier/i).length).toBeGreaterThan(0);
+    });
+
+    it('does not render search input when there are 7 or fewer identifier types', () => {
+      renderIdentifierSelectionOverlay();
+
+      expect(screen.queryByRole('searchbox', { name: /search identifier/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('User interaction', () => {
+    it('allows selecting an identifier type', async () => {
+      const user = userEvent.setup();
+      const { mockSetFieldValue } = renderIdentifierSelectionOverlay();
+
+      const passportCheckbox = screen.getByLabelText('Passport Number');
+      await user.click(passportCheckbox);
+
+      expect(passportCheckbox).toBeChecked();
+    });
+
+    it('allows deselecting an identifier type', async () => {
+      const user = userEvent.setup();
+      renderIdentifierSelectionOverlay();
+
+      const passportCheckbox = screen.getByLabelText('Passport Number');
+      await user.click(passportCheckbox);
+      expect(passportCheckbox).toBeChecked();
+
+      await user.click(passportCheckbox);
+      expect(passportCheckbox).not.toBeChecked();
+    });
+
+    it('displays identifier source options when identifier is selected and has sources', async () => {
+      const user = userEvent.setup();
+      renderIdentifierSelectionOverlay();
+
+      const passportCheckbox = screen.getByLabelText('Passport Number');
+      await user.click(passportCheckbox);
+
+      await waitFor(() => {
+        expect(screen.getByText(/source/i)).toBeInTheDocument();
+      });
+      expect(screen.getByLabelText('Manual Entry')).toBeInTheDocument();
+    });
+
+    it('allows selecting identifier source', async () => {
+      const user = userEvent.setup();
+      renderIdentifierSelectionOverlay();
+
+      const passportCheckbox = screen.getByLabelText('Passport Number');
+      await user.click(passportCheckbox);
+
+      await waitFor(() => {
+        const sourceRadio = screen.getByLabelText('Manual Entry');
+        expect(sourceRadio).toBeInTheDocument();
+      });
+
+      const sourceRadio = screen.getByLabelText('Manual Entry');
+      await user.click(sourceRadio);
+
+      expect(sourceRadio).toBeChecked();
+    });
+
+    it('filters identifier types when searching', async () => {
+      const user = userEvent.setup();
+      const manyIdentifierTypes = Array.from({ length: 8 }, (_, i) => {
+        if (i < 3) {
+          return mockIdentifierTypes[i];
+        }
+        return {
+          ...mockIdentifierTypes[0],
+          uuid: `test-uuid-${i}`,
+          name: `Test Identifier ${i}`,
+          fieldName: `testId${i}`,
+          required: false,
+          isPrimary: false,
+        };
+      });
+
+      renderIdentifierSelectionOverlay(mockContextValues, {
+        ...mockResourcesContextValue,
+        identifierTypes: manyIdentifierTypes,
+      });
+
+      // Search input has both labelText and placeholder with same text, get the first one
+      const searchInputs = screen.getAllByLabelText(/search identifier/i);
+      const searchInput = searchInputs[0];
+      await user.type(searchInput, 'Passport');
+
+      expect(screen.getByLabelText('Passport Number')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Test Identifier 3')).not.toBeInTheDocument();
+    });
+
+    it('calls setFieldValue and closeOverlay when Configure button is clicked', async () => {
+      const user = userEvent.setup();
+      const { mockSetFieldValue, mockCloseOverlay } = renderIdentifierSelectionOverlay();
+
+      const passportCheckbox = screen.getByLabelText('Passport Number');
+      await user.click(passportCheckbox);
+
+      const configureButton = screen.getByRole('button', { name: /configure identifiers/i });
+      await user.click(configureButton);
+
+      expect(mockSetFieldValue).toHaveBeenCalledWith('identifiers', expect.any(Object));
+      expect(mockCloseOverlay).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls closeOverlay when Cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      const { mockCloseOverlay } = renderIdentifierSelectionOverlay();
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      await user.click(cancelButton);
+
+      expect(mockCloseOverlay).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Disabled states', () => {
+    it('disables primary identifier type checkbox', () => {
+      renderIdentifierSelectionOverlay();
+
+      const openmrsIdCheckbox = screen.getByLabelText('OpenMRS ID');
+      expect(openmrsIdCheckbox).toBeDisabled();
+    });
+
+    it('disables required identifier type checkbox', () => {
+      renderIdentifierSelectionOverlay();
+
+      const openmrsIdCheckbox = screen.getByLabelText('OpenMRS ID');
+      expect(openmrsIdCheckbox).toBeDisabled();
+    });
+
+    it('disables identifier type that is in defaultPatientIdentifierTypes', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        defaultPatientIdentifierTypes: ['passport-id-uuid'],
+      });
+
+      renderIdentifierSelectionOverlay();
+
+      const passportCheckbox = screen.getByLabelText('Passport Number');
+      expect(passportCheckbox).toBeDisabled();
+    });
+  });
+});

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

@@ -122,8 +122,8 @@ export const NameField = () => {
                 size="md"
                 selectedIndex={isPatientUnknown ? 1 : 0}
                 onChange={toggleNameKnown}>
-                <Switch name="known" text={t('yes', 'Yes')} />
-                <Switch name="unknown" text={t('no', 'No')} />
+                <Switch name="known">{t('yes', 'Yes')}</Switch>
+                <Switch name="unknown">{t('no', 'No')}</Switch>
               </ContentSwitcher>
             </>
           )}

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

@@ -0,0 +1,282 @@
+import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { render, screen, waitFor } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { NameField, unidentifiedPatientAttributeTypeUuid } from './name-field.component';
+import { type FormValues } from '../../patient-registration.types';
+
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+
+/**
+ * Helper to render NameField with Formik render props for state-dependent tests.
+ */
+const renderNameFieldWithFormik = (
+  initialValues: Partial<FormValues> = {},
+  options?: { enableReinitialize?: boolean },
+) => {
+  const defaultValues: Partial<FormValues> = {
+    givenName: '',
+    familyName: '',
+    middleName: '',
+    attributes: {
+      [unidentifiedPatientAttributeTypeUuid]: 'false',
+      ...(initialValues.attributes || {}),
+    },
+    ...initialValues,
+  };
+
+  let formValuesRef: FormValues = { ...initialFormValues, ...defaultValues } as FormValues;
+
+  const utils = render(
+    <Formik initialValues={defaultValues} onSubmit={() => {}} enableReinitialize={options?.enableReinitialize}>
+      {({ setFieldValue, values, setFieldTouched }) => {
+        formValuesRef = { ...initialFormValues, ...values } as FormValues;
+        return (
+          <Form>
+            <PatientRegistrationContextProvider
+              value={{
+                identifierTypes: [],
+                values: formValuesRef,
+                validationSchema: null,
+                inEditMode: false,
+                setFieldValue: setFieldValue as any,
+                setCapturePhotoProps: vi.fn(),
+                setFieldTouched: setFieldTouched as any,
+                currentPhoto: '',
+                isOffline: false,
+                initialFormValues: formValuesRef,
+              }}>
+              <NameField />
+            </PatientRegistrationContextProvider>
+          </Form>
+        );
+      }}
+    </Formik>,
+  );
+
+  return {
+    ...utils,
+    getFormValues: () => formValuesRef,
+  };
+};
+
+describe('NameField', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        name: {
+          displayCapturePhoto: false,
+          allowUnidentifiedPatients: true,
+          defaultUnknownGivenName: 'UNKNOWN',
+          defaultUnknownFamilyName: 'UNKNOWN',
+          displayMiddleName: true,
+          displayReverseFieldOrder: false,
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+
+  it('renders the name field with all inputs', () => {
+    renderNameFieldWithFormik();
+
+    expect(screen.getByRole('heading', { name: /full name/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/first name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/family name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/middle name/i)).toBeInTheDocument();
+  });
+
+  describe('Unidentified patient toggle', () => {
+    it('shows toggle when allowUnidentifiedPatients is enabled', () => {
+      renderNameFieldWithFormik();
+
+      expect(screen.getByText(/patient's name is known\?/i)).toBeInTheDocument();
+      expect(screen.getByRole('tab', { name: /yes/i })).toBeInTheDocument();
+      expect(screen.getByRole('tab', { name: /no/i })).toBeInTheDocument();
+    });
+
+    it('hides name inputs when patient is unknown', async () => {
+      const user = userEvent.setup();
+      renderNameFieldWithFormik({
+        attributes: {
+          [unidentifiedPatientAttributeTypeUuid]: 'false',
+        },
+      });
+
+      await user.click(screen.getByRole('tab', { name: /no/i }));
+
+      await waitFor(() => {
+        expect(screen.queryByLabelText(/first name/i)).not.toBeInTheDocument();
+      });
+      expect(screen.queryByLabelText(/family name/i)).not.toBeInTheDocument();
+    });
+
+    it('shows name inputs when patient is known', () => {
+      renderNameFieldWithFormik({
+        attributes: {
+          [unidentifiedPatientAttributeTypeUuid]: 'false',
+        },
+      });
+
+      expect(screen.getByLabelText(/first name/i)).toBeInTheDocument();
+      expect(screen.getByLabelText(/family name/i)).toBeInTheDocument();
+    });
+
+    it('sets unknown name values when user selects unknown', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderNameFieldWithFormik(
+        {
+          attributes: {
+            [unidentifiedPatientAttributeTypeUuid]: 'false',
+          },
+          givenName: 'John',
+          familyName: 'Doe',
+        },
+        { enableReinitialize: true },
+      );
+
+      await user.click(screen.getByRole('tab', { name: /no/i }));
+
+      // Wait for UI to update - name inputs should be hidden
+      await waitFor(() => {
+        expect(screen.queryByLabelText(/first name/i)).not.toBeInTheDocument();
+      });
+
+      // Verify name values were set to UNKNOWN (user-visible through form state)
+      await waitFor(() => {
+        const formValues = getFormValues();
+        expect(formValues.givenName).toBe('UNKNOWN');
+      });
+      const formValues = getFormValues();
+      expect(formValues.familyName).toBe('UNKNOWN');
+    });
+
+    it('shows name inputs when user switches from unknown to known', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderNameFieldWithFormik(
+        {
+          attributes: {
+            [unidentifiedPatientAttributeTypeUuid]: 'true',
+          },
+          givenName: 'UNKNOWN',
+          familyName: 'UNKNOWN',
+        },
+        { enableReinitialize: true },
+      );
+
+      // Verify initial state - patient is unknown
+      const initialValues = getFormValues();
+      expect(initialValues.attributes?.[unidentifiedPatientAttributeTypeUuid]).toBe('true');
+
+      // When patient is unknown, name inputs should be hidden (component logic: !isPatientUnknown)
+      // But the component may render them initially before the attribute value is processed
+      // Let's just verify the toggle works
+      await user.click(screen.getByRole('tab', { name: /yes/i }));
+
+      // Wait for UI to update - name inputs should appear (user-visible behavior)
+      await waitFor(() => {
+        expect(screen.getByLabelText(/first name/i)).toBeInTheDocument();
+      });
+      expect(screen.getByLabelText(/family name/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Name input', () => {
+    it('allows user to enter first name', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderNameFieldWithFormik();
+
+      const firstNameInput = screen.getByLabelText(/first name/i) as HTMLInputElement;
+      await user.type(firstNameInput, 'John');
+
+      await waitFor(() => {
+        expect(getFormValues().givenName).toBe('John');
+      });
+    });
+
+    it('allows user to enter family name', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderNameFieldWithFormik();
+
+      const familyNameInput = screen.getByLabelText(/family name/i) as HTMLInputElement;
+      await user.type(familyNameInput, 'Doe');
+
+      await waitFor(() => {
+        expect(getFormValues().familyName).toBe('Doe');
+      });
+    });
+
+    it('allows user to enter middle name when displayMiddleName is enabled', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderNameFieldWithFormik();
+
+      const middleNameInput = screen.getByLabelText(/middle name/i) as HTMLInputElement;
+      await user.type(middleNameInput, 'Michael');
+
+      await waitFor(() => {
+        expect(getFormValues().middleName).toBe('Michael');
+      });
+    });
+
+    it('hides middle name when displayMiddleName is disabled', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          name: {
+            displayCapturePhoto: false,
+            allowUnidentifiedPatients: true,
+            defaultUnknownGivenName: 'UNKNOWN',
+            defaultUnknownFamilyName: 'UNKNOWN',
+            displayMiddleName: false,
+            displayReverseFieldOrder: false,
+          },
+        } as RegistrationConfig['fieldConfigurations'],
+      });
+
+      renderNameFieldWithFormik();
+
+      expect(screen.queryByLabelText(/middle name/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Field order', () => {
+    it('renders fields in default order when displayReverseFieldOrder is false', () => {
+      renderNameFieldWithFormik();
+
+      const inputs = screen.getAllByRole('textbox');
+      const firstNameIndex = inputs.findIndex((input) => (input as HTMLInputElement).id === 'givenName');
+      const familyNameIndex = inputs.findIndex((input) => (input as HTMLInputElement).id === 'familyName');
+
+      expect(firstNameIndex).toBeLessThan(familyNameIndex);
+    });
+
+    it('renders fields in reverse order when displayReverseFieldOrder is true', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          name: {
+            displayCapturePhoto: false,
+            allowUnidentifiedPatients: true,
+            defaultUnknownGivenName: 'UNKNOWN',
+            defaultUnknownFamilyName: 'UNKNOWN',
+            displayMiddleName: true,
+            displayReverseFieldOrder: true,
+          },
+        } as RegistrationConfig['fieldConfigurations'],
+      });
+
+      renderNameFieldWithFormik();
+
+      const inputs = screen.getAllByRole('textbox');
+      const familyNameIndex = inputs.findIndex((input) => (input as HTMLInputElement).id === 'familyName');
+      const firstNameIndex = inputs.findIndex((input) => (input as HTMLInputElement).id === 'givenName');
+
+      expect(familyNameIndex).toBeLessThan(firstNameIndex);
+    });
+  });
+});