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

package/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx

@@ -1,7 +1,7 @@
-/* eslint-disable testing-library/no-node-access */
 import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
 import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { Form, Formik } from 'formik';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../../config-schema';
@@ -69,7 +69,7 @@ const mockResourcesContextValue: Resources = {
     sessionId: 'JSESSION',
     currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
   },
-  relationshipTypes: [],
+  relationshipTypes: { results: [] },
   identifierTypes: [...mockIdentifierTypes],
 };
 
@@ -96,19 +96,42 @@ const mockContextValues: PatientRegistrationContextProps = {
   identifierTypes: [],
   initialFormValues: mockInitialFormValues,
   isOffline: false,
-  setCapturePhotoProps: jest.fn(),
-  setFieldValue: jest.fn(),
-  setInitialFormValues: jest.fn(),
-  setFieldTouched: jest.fn(),
+  setCapturePhotoProps: vi.fn(),
+  setFieldValue: vi.fn(),
+  setInitialFormValues: vi.fn(),
+  setFieldTouched: vi.fn(),
   validationSchema: null,
   values: mockInitialFormValues,
 };
 
-const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
 
-describe('identifier input', () => {
-  mockUseConfig.mockReturnValue({
-    ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+/**
+ * Helper to render IdentifierInput component with Formik.
+ */
+function renderIdentifierInput(
+  patientIdentifier: PatientIdentifierValue,
+  fieldName: string = 'openMrsId',
+  initialValues: Record<string, any> = {},
+) {
+  return renderWithContext(
+    <Formik initialValues={initialValues} onSubmit={vi.fn()}>
+      <Form>
+        <PatientRegistrationContextProvider value={mockContextValues}>
+          <IdentifierInput patientIdentifier={patientIdentifier} fieldName={fieldName} />
+        </PatientRegistrationContextProvider>
+      </Form>
+    </Formik>,
+    ResourcesContextProvider,
+    mockResourcesContextValue,
+  );
+}
+
+describe('IdentifierInput component', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+    });
   });
 
   const fieldName = 'openMrsId';
@@ -129,207 +152,248 @@ describe('identifier input', () => {
     required: true,
   } as PatientIdentifierValue;
 
-  const setupIdentifierInput = (patientIdentifier: PatientIdentifierValue, initialValues = {}) => {
-    renderWithContext(
-      <Formik initialValues={initialValues} onSubmit={jest.fn()}>
-        <Form>
-          <PatientRegistrationContextProvider value={mockContextValues}>
-            <IdentifierInput patientIdentifier={patientIdentifier} fieldName={fieldName} />
-          </PatientRegistrationContextProvider>
-        </Form>
-      </Formik>,
-      ResourcesContextProvider,
-      mockResourcesContextValue,
-    );
-  };
-
-  it('shows the identifier input', () => {
-    openmrsID.autoGeneration = false;
-    setupIdentifierInput(openmrsID as PatientIdentifierValue);
-    expect(screen.getByLabelText(openmrsID.identifierName)).toBeInTheDocument();
-  });
+  describe('Rendering', () => {
+    it('shows the identifier input', () => {
+      renderIdentifierInput({ ...openmrsID, autoGeneration: false });
+      expect(screen.getByLabelText(openmrsID.identifierName)).toBeInTheDocument();
+    });
 
-  it('displays an edit button when there is an initial value', async () => {
-    // setup
-    openmrsID.autoGeneration = false;
-    openmrsID.required = false;
-    openmrsID.initialValue = '1002UU9';
-    openmrsID.identifierValue = '1002UU9';
-    // replay
-    setupIdentifierInput(openmrsID as PatientIdentifierValue);
-    expect(screen.getByText('Edit')).toBeInTheDocument();
-  });
+    it('displays an edit button when there is an initial value and field is not required', () => {
+      renderIdentifierInput({
+        ...openmrsID,
+        autoGeneration: false,
+        required: false,
+        initialValue: '1002UU9',
+        identifierValue: '1002UU9',
+      });
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
 
-  it('hides the edit button when the identifier is required', async () => {
-    // setup
-    openmrsID.autoGeneration = false;
-    openmrsID.required = true;
-    openmrsID.initialValue = '1002UU9';
-    openmrsID.identifierValue = '1002UU9';
-    // replay
-    setupIdentifierInput(openmrsID);
-    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-  });
+    it('hides the edit button when the identifier is required', () => {
+      renderIdentifierInput({
+        ...openmrsID,
+        autoGeneration: false,
+        required: true,
+        initialValue: '1002UU9',
+        identifierValue: '1002UU9',
+      });
+      expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    });
 
-  it('displays a delete button when the identifier is not a default type', () => {
-    // setup
-    openmrsID.required = false;
-    // replay
-    setupIdentifierInput(openmrsID);
-    expect(screen.getByText('Delete')).toBeInTheDocument();
+    it('displays a delete button when the identifier is not a default type', () => {
+      renderIdentifierInput({
+        ...openmrsID,
+        required: false,
+      });
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
   });
 
-  describe('auto-generated identifier', () => {
+  describe('Auto-generated identifier', () => {
     it('hides the input when the identifier is auto-generated', () => {
-      openmrsID.autoGeneration = true;
-      setupIdentifierInput(openmrsID);
+      renderIdentifierInput({
+        ...openmrsID,
+        autoGeneration: true,
+      });
       expect(screen.getByTestId('identifier-input')).toHaveAttribute('type', 'hidden');
     });
 
-    it("displays 'Auto-Generated' when the indentifier has auto generation", () => {
-      openmrsID.autoGeneration = true;
-      setupIdentifierInput(openmrsID);
-      expect(screen.getByTestId('identifier-placeholder').innerHTML).toBe('Auto-generated');
+    it("displays 'Auto-Generated' when the identifier has auto generation", () => {
+      renderIdentifierInput({
+        ...openmrsID,
+        autoGeneration: true,
+      });
+      const placeholder = screen.getByTestId('identifier-placeholder');
+      expect(placeholder).toHaveTextContent('Auto-generated');
       expect(screen.getByTestId('identifier-input')).toBeDisabled();
     });
 
-    describe('manual entry allowed', () => {
-      openmrsID.selectedSource = {
-        autoGenerationOption: {
-          manualEntryEnabled: true,
-        },
-      } as IdentifierSource;
-
-      it('shows the edit button', () => {
-        openmrsID.autoGeneration = true;
-        setupIdentifierInput(openmrsID);
+    describe('Manual entry allowed', () => {
+      it('shows the edit button when manual entry is enabled', () => {
+        renderIdentifierInput({
+          ...openmrsID,
+          autoGeneration: true,
+          required: false,
+          selectedSource: {
+            uuid: '01af8526-cea4-4175-aa90-340acb411771',
+            name: 'Generator 2 for OpenMRS ID',
+            autoGenerationOption: {
+              manualEntryEnabled: true,
+              automaticGenerationEnabled: true,
+            },
+          } as IdentifierSource,
+        });
         expect(screen.getByText('Edit')).toBeInTheDocument();
       });
 
-      describe('edit button clicked', () => {
-        it('displays an empty input field', async () => {
+      describe('Edit button interaction', () => {
+        it('displays an empty input field when edit button is clicked', async () => {
           const user = userEvent.setup();
-          openmrsID.autoGeneration = true;
-          openmrsID.required = false;
-          openmrsID.selectedSource = {
-            autoGenerationOption: {
-              manualEntryEnabled: true,
+          renderIdentifierInput(
+            {
+              ...openmrsID,
+              autoGeneration: true,
+              required: false,
+              selectedSource: {
+                ...openmrsID.selectedSource,
+                autoGenerationOption: {
+                  manualEntryEnabled: true,
+                  automaticGenerationEnabled: true,
+                },
+              } as IdentifierSource,
             },
-          } as IdentifierSource;
-          setupIdentifierInput(openmrsID);
+            fieldName,
+          );
+
           const editButton = screen.getByTestId('edit-button');
           await user.click(editButton);
-          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('');
+
+          await waitFor(() => {
+            expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('');
+          });
         });
 
         it('displays an input field with the identifier value if it exists', async () => {
           const user = userEvent.setup();
-          openmrsID.autoGeneration = true;
-          openmrsID.required = false;
-          openmrsID.selectedSource = {
-            autoGenerationOption: {
-              manualEntryEnabled: true,
+          renderIdentifierInput(
+            {
+              ...openmrsID,
+              autoGeneration: true,
+              required: false,
+              selectedSource: {
+                ...openmrsID.selectedSource,
+                autoGenerationOption: {
+                  manualEntryEnabled: true,
+                  automaticGenerationEnabled: true,
+                },
+              } as IdentifierSource,
             },
-          } as IdentifierSource;
-          setupIdentifierInput(openmrsID, { identifiers: { [fieldName]: { identifierValue: '10001V' } } });
+            fieldName,
+            { identifiers: { [fieldName]: { identifierValue: '10001V' } } },
+          );
+
           const editButton = screen.getByTestId('edit-button');
           await user.click(editButton);
-          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('10001V');
+
+          await waitFor(() => {
+            expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('10001V');
+          });
         });
       });
     });
   });
 
-  it('validates identifier format correctly for identifier types with regex formats', async () => {
-    const user = userEvent.setup();
-
-    const ssnIdentifier = {
-      ...openmrsID,
-      autoGeneration: false,
-      format: '^[A-Z]{1}-[0-9]{7}$',
-      identifierName: 'SSN',
-      identifierTypeUuid: 'a71403f3-8584-4289-ab41-2b4e5570bd45',
-      identifierValue: undefined,
-      initialValue: '',
-      required: true,
-      selectedSource: {
-        uuid: '01af8526-cea4-4175-aa90-340acb411771',
-        name: 'Generator 2 for SSN',
-        autoGenerationOption: {
-          manualEntryEnabled: true,
-          automaticGenerationEnabled: false,
+  describe('Format validation', () => {
+    it('validates identifier format correctly for identifier types with regex formats', async () => {
+      const user = userEvent.setup();
+
+      const ssnIdentifier = {
+        ...openmrsID,
+        autoGeneration: false,
+        format: '^[A-Z]{1}-[0-9]{7}$',
+        identifierName: 'SSN',
+        identifierTypeUuid: 'a71403f3-8584-4289-ab41-2b4e5570bd45',
+        identifierValue: undefined,
+        initialValue: '',
+        required: true,
+        selectedSource: {
+          uuid: '01af8526-cea4-4175-aa90-340acb411771',
+          name: 'Generator 2 for SSN',
+          autoGenerationOption: {
+            manualEntryEnabled: true,
+            automaticGenerationEnabled: false,
+          },
+        } as IdentifierSource,
+      };
+
+      const mockSetFieldTouched = vi.fn();
+      const mockSetFieldValue = vi.fn();
+      const testContextValues = {
+        ...mockContextValues,
+        setFieldTouched: mockSetFieldTouched,
+        setFieldValue: mockSetFieldValue,
+        values: {
+          ...mockInitialFormValues,
+          identifiers: {
+            [fieldName]: ssnIdentifier,
+          },
         },
-      } as IdentifierSource,
-    };
-
-    const mockSetFieldTouched = jest.fn();
-    const mockSetFieldValue = jest.fn();
-    const testContextValues = {
-      ...mockContextValues,
-      setFieldTouched: mockSetFieldTouched,
-      setFieldValue: mockSetFieldValue,
-      values: {
-        ...mockInitialFormValues,
+      };
+
+      const initialValues = {
         identifiers: {
-          [fieldName]: ssnIdentifier,
+          [fieldName]: {
+            identifierValue: '',
+          },
         },
-      },
-    };
+      };
 
-    const initialValues = {
-      identifiers: {
-        [fieldName]: {
-          identifierValue: '',
-        },
-      },
-    };
-
-    renderWithContext(
-      <Formik initialValues={initialValues} onSubmit={jest.fn()}>
-        <Form>
-          <PatientRegistrationContextProvider value={testContextValues}>
-            <IdentifierInput patientIdentifier={ssnIdentifier} fieldName={fieldName} />
-          </PatientRegistrationContextProvider>
-        </Form>
-      </Formik>,
-      ResourcesContextProvider,
-      mockResourcesContextValue,
-    );
-
-    const input = screen.getByRole('textbox', {
-      name: /ssn/i,
-    });
+      renderWithContext(
+        <Formik initialValues={initialValues} onSubmit={vi.fn()}>
+          <Form>
+            <PatientRegistrationContextProvider value={testContextValues}>
+              <IdentifierInput patientIdentifier={ssnIdentifier} fieldName={fieldName} />
+            </PatientRegistrationContextProvider>
+          </Form>
+        </Formik>,
+        ResourcesContextProvider,
+        mockResourcesContextValue,
+      );
+
+      const input = screen.getByRole('textbox', {
+        name: /ssn/i,
+      });
+
+      // Valid case
+      await user.type(input, 'A-1234567');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(input).toHaveValue('A-1234567');
+      });
+
+      await waitFor(() => {
+        expect(input).not.toHaveClass('cds--text-input--invalid');
+      });
+
+      expect(screen.queryByText(/identifier should be/i)).not.toBeInTheDocument();
+
+      // Invalid cases
+      await user.clear(input);
+      await user.type(input, 'A-0010902aaa'); // Extra characters
+      await user.tab();
+
+      await waitFor(() => {
+        expect(input).toHaveClass('cds--text-input--invalid');
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
+      });
+
+      await user.clear(input);
+      await user.type(input, 'a-1234567'); // Lowercase letter
+      await user.tab();
 
-    // Valid cases
-    await user.type(input, 'A-1234567');
-    await user.tab();
-    expect(input).toHaveValue('A-1234567');
-    expect(input).not.toHaveClass('cds--text-input--invalid');
-    expect(screen.queryByText(/identifier should be/i)).not.toBeInTheDocument();
-
-    // Invalid cases
-    await user.clear(input);
-    await user.type(input, 'A-0010902aaa'); // Extra characters
-    await user.tab();
-    expect(input).toHaveClass('cds--text-input--invalid');
-    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
-
-    await user.clear(input);
-    await user.type(input, 'a-1234567'); // Lowercase letter
-    await user.tab();
-    expect(input).toHaveClass('cds--text-input--invalid');
-    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
-
-    await user.clear(input);
-    await user.type(input, 'AB-1234567'); // Two letters
-    await user.tab();
-    expect(input).toHaveClass('cds--text-input--invalid');
-    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
-
-    await user.clear(input);
-    await user.type(input, 'A-123456'); // Only 6 digits
-    await user.tab();
-    expect(input).toHaveClass('cds--text-input--invalid');
-    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(input).toHaveClass('cds--text-input--invalid');
+      });
+
+      await user.clear(input);
+      await user.type(input, 'AB-1234567'); // Two letters
+      await user.tab();
+
+      await waitFor(() => {
+        expect(input).toHaveClass('cds--text-input--invalid');
+      });
+
+      await user.clear(input);
+      await user.type(input, 'A-123456'); // Only 6 digits
+      await user.tab();
+
+      await waitFor(() => {
+        expect(input).toHaveClass('cds--text-input--invalid');
+      });
+    });
   });
 });

package/src/patient-registration/input/custom-input/identifier/utils.test.ts

@@ -1,4 +1,5 @@
 import { isUniqueIdentifierTypeForOffline, shouldBlockPatientIdentifierInOfflineMode } from './utils';
+import { vi, describe, it, expect } from 'vitest';
 
 interface IdentifierTypeOptions {
   uniquenessBehavior?: 'UNIQUE' | 'LOCATION' | 'NON_UNIQUE';
@@ -31,23 +32,57 @@ function createIdentifierType(options: IdentifierTypeOptions) {
 describe('shouldBlockPatientIdentifierInOfflineMode function', () => {
   it('should return false if identifierType is not unique', () => {
     const identifierType = createIdentifierType({ uniquenessBehavior: null });
-
     const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
 
     expect(result).toBe(false);
   });
 
-  it('should return false if identifierType is unique and no manual entry is enabled', () => {
-    const identifierType = createIdentifierType({ uniquenessBehavior: null });
+  it('should return false if identifierType is NON_UNIQUE', () => {
+    const identifierType = createIdentifierType({ uniquenessBehavior: 'NON_UNIQUE' });
+    const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+    expect(result).toBe(false);
+  });
 
+  it('should return false if identifierType is unique but has automatic generation only (no manual entry)', () => {
+    const identifierType = createIdentifierType({
+      uniquenessBehavior: 'UNIQUE',
+      manualEntryEnabled: false,
+      automaticGenerationEnabled: true,
+    });
     const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
 
     expect(result).toBe(false);
   });
 
   it('should return true if identifierType is unique and manual entry is enabled', () => {
-    const identifierType = createIdentifierType({ manualEntryEnabled: true, uniquenessBehavior: 'UNIQUE' });
+    const identifierType = createIdentifierType({
+      uniquenessBehavior: 'UNIQUE',
+      manualEntryEnabled: true,
+      automaticGenerationEnabled: false,
+    });
+    const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+    expect(result).toBe(true);
+  });
 
+  it('should return true if identifierType is unique and both manual entry and auto generation are enabled', () => {
+    const identifierType = createIdentifierType({
+      uniquenessBehavior: 'UNIQUE',
+      manualEntryEnabled: true,
+      automaticGenerationEnabled: true,
+    });
+    const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+    expect(result).toBe(true);
+  });
+
+  it('should return true if identifierType is unique with LOCATION behavior and manual entry enabled', () => {
+    const identifierType = createIdentifierType({
+      uniquenessBehavior: 'LOCATION',
+      manualEntryEnabled: true,
+      automaticGenerationEnabled: false,
+    });
     const result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
 
     expect(result).toBe(true);
@@ -57,7 +92,6 @@ describe('shouldBlockPatientIdentifierInOfflineMode function', () => {
 describe('isUniqueIdentifierTypeForOffline function', () => {
   it('should return true if uniquenessBehavior is UNIQUE', () => {
     const identifierType = createIdentifierType({ uniquenessBehavior: 'UNIQUE' });
-
     const result = isUniqueIdentifierTypeForOffline(identifierType);
 
     expect(result).toBe(true);
@@ -65,15 +99,20 @@ describe('isUniqueIdentifierTypeForOffline function', () => {
 
   it('should return true if uniquenessBehavior is LOCATION', () => {
     const identifierType = createIdentifierType({ uniquenessBehavior: 'LOCATION' });
-
     const result = isUniqueIdentifierTypeForOffline(identifierType);
 
     expect(result).toBe(true);
   });
 
-  it('should return false for other uniqueness behaviors', () => {
-    const identifierType = createIdentifierType({ uniquenessBehavior: null });
+  it('should return false if uniquenessBehavior is NON_UNIQUE', () => {
+    const identifierType = createIdentifierType({ uniquenessBehavior: 'NON_UNIQUE' });
+    const result = isUniqueIdentifierTypeForOffline(identifierType);
 
+    expect(result).toBe(false);
+  });
+
+  it('should return false if uniquenessBehavior is null or undefined', () => {
+    const identifierType = createIdentifierType({ uniquenessBehavior: null });
     const result = isUniqueIdentifierTypeForOffline(identifierType);
 
     expect(result).toBe(false);

package/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
 import { v4 } from 'uuid';
 import { type FormValues } from '../../patient-registration.types';
 import styles from './../input.scss';
@@ -17,8 +18,8 @@ export const dummyFormValues: FormValues = {
   additionalMiddleName: '',
   additionalFamilyName: 'Smitty',
   addNameInLocalLanguage: true,
-  gender: 'Male',
-  birthdate: new Date(2020, 1, 1) as any,
+  gender: 'male',
+  birthdate: new Date(2020, 1, 1),
   yearsEstimated: 1,
   monthsEstimated: 2,
   birthdateEstimated: true,
@@ -42,15 +43,14 @@ export const dummyFormValues: FormValues = {
 };
 
 export const DummyDataInput: React.FC<DummyDataInputProps> = ({ setValues }) => {
+  const { t } = useTranslation();
   return (
-    <main>
-      <button
-        className={classNames('omrs-btn omrs-filled-neutral', styles.dummyData)}
-        onClick={() => setValues(dummyFormValues)}
-        type="button"
-        aria-label="Dummy Data Input">
-        Input Dummy Data
-      </button>
-    </main>
+    <Button
+      kind="tertiary"
+      onClick={() => setValues(dummyFormValues)}
+      className={styles.dummyData}
+      aria-label={t('inputDummyData', 'Input Dummy Data')}>
+      {t('inputDummyData', 'Input Dummy Data')}
+    </Button>
   );
 };