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

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

@@ -1,40 +1,107 @@
 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 { screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { renderWithContext } from 'tools';
-import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
-import { type FormValues } from '../../patient-registration.types';
-import {
-  type PatientRegistrationContextProps,
-  PatientRegistrationContextProvider,
-} from '../../patient-registration-context';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { getValidationSchema } from '../../validation/patient-registration-validation';
 import { GenderField } from './gender-field.component';
+import { type FormValues } from '../../patient-registration.types';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+
+/**
+ * Helper to render GenderField with Formik render props for state-dependent tests.
+ * Returns the render result and a ref to access form values.
+ */
+const renderGenderFieldWithFormik = (
+  initialValues: Partial<FormValues> = {},
+  options?: { enableReinitialize?: boolean; withValidation?: boolean },
+) => {
+  const defaultValues = {
+    gender: '',
+    ...initialValues,
+  };
+
+  let formValuesRef: FormValues = { ...initialFormValues, ...defaultValues } as FormValues;
+  const config = mockUseConfig();
+  const validationSchema = options?.withValidation
+    ? getValidationSchema(config, (key: string, defaultValue: string) => defaultValue)
+    : null;
 
-const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
-
-const mockContextValues: PatientRegistrationContextProps = {
-  currentPhoto: null,
-  identifierTypes: [],
-  inEditMode: false,
-  initialFormValues: {
-    gender: 'male',
-  } as FormValues,
-  isOffline: false,
-  setCapturePhotoProps: jest.fn(),
-  setFieldTouched: jest.fn(),
-  setFieldValue: jest.fn(),
-  validationSchema: esmPatientRegistrationSchema,
-  values: {
-    gender: 'male',
-  } as FormValues,
+  const utils = render(
+    <Formik
+      initialValues={defaultValues}
+      onSubmit={() => {}}
+      enableReinitialize={options?.enableReinitialize}
+      validationSchema={validationSchema || undefined}
+      validateOnChange={true}
+      validateOnBlur={true}>
+      {({ setFieldValue, values, setFieldTouched, errors, touched }) => {
+        formValuesRef = { ...initialFormValues, ...values } as FormValues;
+        return (
+          <Form>
+            <PatientRegistrationContextProvider
+              value={{
+                identifierTypes: [],
+                values: formValuesRef,
+                validationSchema: validationSchema,
+                inEditMode: false,
+                setFieldValue: setFieldValue as any,
+                setCapturePhotoProps: vi.fn(),
+                setFieldTouched: setFieldTouched as any,
+                currentPhoto: '',
+                isOffline: false,
+                initialFormValues: formValuesRef,
+              }}>
+              <GenderField />
+            </PatientRegistrationContextProvider>
+          </Form>
+        );
+      }}
+    </Formik>,
+  );
+
+  return {
+    ...utils,
+    getFormValues: () => formValuesRef,
+  };
 };
 
-jest.mock('formik', () => ({
-  ...(jest.requireActual('formik') as any),
-  useField: jest.fn(() => [{}, {}]),
-}));
+/**
+ * Helper to render GenderField with mocked Formik functions (for simple rendering tests).
+ */
+const renderGenderField = (initialValues: Partial<FormValues> = {}) => {
+  const defaultValues = {
+    gender: '',
+    ...initialValues,
+  };
+
+  return render(
+    <Formik initialValues={defaultValues} onSubmit={() => {}}>
+      <Form>
+        <PatientRegistrationContextProvider
+          value={{
+            identifierTypes: [],
+            values: { ...initialFormValues, ...defaultValues } as FormValues,
+            validationSchema: null,
+            inEditMode: false,
+            setFieldValue: vi.fn().mockResolvedValue(undefined),
+            setCapturePhotoProps: vi.fn(),
+            setFieldTouched: vi.fn().mockResolvedValue(undefined),
+            currentPhoto: '',
+            isOffline: false,
+            initialFormValues: { ...initialFormValues, ...defaultValues } as FormValues,
+          }}>
+          <GenderField />
+        </PatientRegistrationContextProvider>
+      </Form>
+    </Formik>,
+  );
+};
 
 describe('GenderField', () => {
   beforeEach(() => {
@@ -50,6 +117,14 @@ describe('GenderField', () => {
             value: 'female',
             label: 'Female',
           },
+          {
+            value: 'other',
+            label: 'Other',
+          },
+          {
+            value: 'unknown',
+            label: 'Unknown',
+          },
         ],
         name: {
           displayMiddleName: false,
@@ -63,37 +138,148 @@ describe('GenderField', () => {
     });
   });
 
-  it('has a label', () => {
-    renderWithContext(
-      <Formik initialValues={{}} onSubmit={null}>
-        <Form>
-          <GenderField />
-        </Form>
-      </Formik>,
-      PatientRegistrationContextProvider,
-      mockContextValues,
-    );
+  it('renders the gender field with all options', () => {
+    renderGenderField();
 
     expect(screen.getByRole('heading', { name: /sex/i })).toBeInTheDocument();
     expect(screen.getByLabelText(/^male/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/female/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/other/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/unknown/i)).toBeInTheDocument();
   });
 
-  it('checks an option', async () => {
-    const user = userEvent.setup();
+  describe('Gender selection', () => {
+    it('updates form value when user selects female', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderGenderFieldWithFormik({ gender: 'male' });
 
-    renderWithContext(
-      <Formik initialValues={{}} onSubmit={null}>
-        <Form>
-          <GenderField />
-        </Form>
-      </Formik>,
-      PatientRegistrationContextProvider,
-      mockContextValues,
-    );
-
-    await user.click(screen.getByText(/female/i));
-    expect(screen.getByLabelText(/female/i)).toBeChecked();
-    expect(screen.getByLabelText(/^male/i)).not.toBeChecked();
+      await user.click(screen.getByText(/female/i));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/female/i)).toBeChecked();
+      });
+      expect(screen.getByLabelText(/^male/i)).not.toBeChecked();
+      expect(getFormValues().gender).toBe('female');
+    });
+
+    it('updates form value when user selects male', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderGenderFieldWithFormik({ gender: 'female' });
+
+      await user.click(screen.getByText(/^male/i));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/^male/i)).toBeChecked();
+      });
+      expect(screen.getByLabelText(/female/i)).not.toBeChecked();
+      expect(getFormValues().gender).toBe('male');
+    });
+
+    it('updates form value when user selects other', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderGenderFieldWithFormik();
+
+      await user.click(screen.getByText(/other/i));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/other/i)).toBeChecked();
+      });
+      expect(getFormValues().gender).toBe('other');
+    });
+
+    it('updates form value when user selects unknown', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderGenderFieldWithFormik({ gender: 'male' });
+
+      await user.click(screen.getByText(/unknown/i));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/unknown/i)).toBeChecked();
+      });
+      expect(screen.getByLabelText(/^male/i)).not.toBeChecked();
+      expect(getFormValues().gender).toBe('unknown');
+    });
+
+    it('displays the initial gender value correctly', () => {
+      renderGenderFieldWithFormik({ gender: 'female' });
+
+      expect(screen.getByLabelText(/female/i)).toBeChecked();
+      expect(screen.getByLabelText(/^male/i)).not.toBeChecked();
+    });
+
+    it('allows switching between all gender options', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderGenderFieldWithFormik();
+
+      // Select male
+      await user.click(screen.getByText(/^male/i));
+      await waitFor(() => {
+        expect(getFormValues().gender).toBe('male');
+      });
+
+      // Switch to female
+      await user.click(screen.getByText(/female/i));
+      await waitFor(() => {
+        expect(getFormValues().gender).toBe('female');
+      });
+
+      // Switch to other
+      await user.click(screen.getByText(/other/i));
+      await waitFor(() => {
+        expect(getFormValues().gender).toBe('other');
+      });
+
+      // Switch to unknown
+      await user.click(screen.getByText(/unknown/i));
+      await waitFor(() => {
+        expect(getFormValues().gender).toBe('unknown');
+      });
+    });
+  });
+
+  describe('Validation error display', () => {
+    it('does not show error when field is not touched', () => {
+      renderGenderFieldWithFormik({ gender: '' }, { withValidation: true });
+
+      expect(screen.queryByText(/gender is required/i)).not.toBeInTheDocument();
+    });
+
+    it('shows error message when user selects a gender and then form is validated', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderGenderFieldWithFormik({ gender: '' }, { withValidation: true });
+
+      // Initially no error (field not touched)
+      expect(screen.queryByText(/gender is required/i)).not.toBeInTheDocument();
+
+      // User selects a valid gender - this marks field as touched
+      await user.click(screen.getByText(/^male/i));
+
+      await waitFor(() => {
+        expect(getFormValues().gender).toBe('male');
+      });
+
+      // After valid selection, no error should appear (user-visible)
+      expect(screen.queryByText(/gender is required/i)).not.toBeInTheDocument();
+      expect(screen.getByLabelText(/^male/i)).toBeChecked();
+    });
+
+    it('clears error message when valid gender is selected', async () => {
+      const user = userEvent.setup();
+      renderGenderFieldWithFormik({ gender: '' }, { withValidation: true });
+
+      // Initially no error (field not touched)
+      expect(screen.queryByText(/gender is required/i)).not.toBeInTheDocument();
+
+      // Select a valid gender option - this will mark field as touched
+      await user.click(screen.getByText(/^male/i));
+
+      // Wait for selection to be applied (user-visible)
+      await waitFor(() => {
+        expect(screen.getByLabelText(/^male/i)).toBeChecked();
+      });
+
+      // Error should not appear after valid selection (user-visible)
+      expect(screen.queryByText(/gender is required/i)).not.toBeInTheDocument();
+    });
   });
 });

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

@@ -1,144 +1,146 @@
-import React, { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { SkeletonText } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
-import { usePatientRegistrationContext } from '../../patient-registration-context';
-import { useResourcesContext } from '../../../resources-context';
-import type {
-  FormValues,
-  IdentifierSource,
-  PatientIdentifierType,
-  PatientIdentifierValue,
-} from '../../patient-registration.types';
-import IdentifierInput from '../../input/custom-input/identifier/identifier-input.component';
-import styles from '../field.scss';
-
-export function setIdentifierSource(
-  identifierSource: IdentifierSource,
-  identifierValue: string,
-  initialValue: string,
-): {
-  identifierValue: string;
-  autoGeneration: boolean;
-  selectedSource: IdentifierSource;
-} {
-  const autoGeneration = identifierSource?.autoGenerationOption?.automaticGenerationEnabled;
-  const manualEntryEnabled = identifierSource?.autoGenerationOption?.manualEntryEnabled;
-  return {
-    selectedSource: identifierSource,
-    autoGeneration,
-    identifierValue:
-      autoGeneration && !manualEntryEnabled
-        ? 'auto-generated'
-        : identifierValue !== 'auto-generated'
-          ? identifierValue
-          : initialValue,
-  };
-}
-
-export function initializeIdentifier(
-  identifierType: PatientIdentifierType,
-  identifierProps,
-  identifierTypeOverrides?: Array<{ identifierTypeUuid: string; required?: boolean }>,
-): PatientIdentifierValue {
-  // Check if there's an override for this identifier type
-  const override = identifierTypeOverrides?.find((override) => override.identifierTypeUuid === identifierType.uuid);
-  const isRequired =
-    override?.required !== undefined ? override.required : identifierType.isPrimary || identifierType.required;
-
-  return {
-    identifierTypeUuid: identifierType.uuid,
-    identifierName: identifierType.name,
-    preferred: identifierType.isPrimary,
-    initialValue: '',
-    required: isRequired,
-    ...identifierProps,
-    ...setIdentifierSource(
-      identifierProps?.selectedSource ?? identifierType.identifierSources?.[0],
-      identifierProps?.identifierValue,
-      identifierProps?.initialValue ?? '',
-    ),
-  };
-}
-
-export function deleteIdentifierType(identifiers: FormValues['identifiers'], identifierFieldName) {
-  return Object.fromEntries(Object.entries(identifiers).filter(([fieldName]) => fieldName !== identifierFieldName));
-}
-
-export const Identifiers: React.FC = () => {
-  const { identifierTypes } = useResourcesContext();
-  const isLoading = !identifierTypes?.length;
-  const { values, setFieldValue, initialFormValues, isOffline } = usePatientRegistrationContext();
-  const { t } = useTranslation();
-  const config = useConfig();
-  const { defaultPatientIdentifierTypes, identifierTypeOverrides } = config;
-
-  useEffect(() => {
-    if (identifierTypes) {
-      const identifiers = {};
-      identifierTypes
-        .filter(
-          (type) =>
-            type.isPrimary ||
-            type.required ||
-            !!defaultPatientIdentifierTypes?.find(
-              (defaultIdentifierTypeUuid) => defaultIdentifierTypeUuid === type.uuid,
-            ),
-        )
-        .filter((type) => !values.identifiers[type.fieldName])
-        .forEach((type) => {
-          identifiers[type.fieldName] = initializeIdentifier(
-            type,
-            values.identifiers[type.uuid] ?? initialFormValues.identifiers[type.uuid] ?? {},
-            identifierTypeOverrides,
-          );
-        });
-      /*
-        Identifier value should only be updated if there is any update in the
-        identifier values, otherwise, if the below 'if' clause is removed, it will
-        fall into an infinite run.
-      */
-      if (Object.keys(identifiers).length) {
-        setFieldValue('identifiers', {
-          ...values.identifiers,
-          ...identifiers,
-        });
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    identifierTypes,
-    setFieldValue,
-    defaultPatientIdentifierTypes,
-    identifierTypeOverrides,
-    values.identifiers,
-    initializeIdentifier,
-  ]);
-
-  if (isLoading && !isOffline) {
-    return (
-      <div className={styles.halfWidthInDesktopView}>
-        <div className={styles.identifierLabelText}>
-          <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
-        </div>
-        <SkeletonText
-          // @ts-expect-error
-          role="progressbar"
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.halfWidthInDesktopView}>
-      <div className={styles.identifierLabelText}>
-        <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
-      </div>
-      <div>
-        {Object.entries(values.identifiers).map(([fieldName, identifier]) => (
-          <IdentifierInput key={fieldName} fieldName={fieldName} patientIdentifier={identifier} />
-        ))}
-      </div>
-    </div>
-  );
-};
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, SkeletonText } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { useLayoutType, useConfig, isDesktop, UserHasAccess } from '@openmrs/esm-framework';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import { useResourcesContext } from '../../../resources-context';
+import type {
+  FormValues,
+  IdentifierSource,
+  PatientIdentifierType,
+  PatientIdentifierValue,
+} from '../../patient-registration.types';
+import IdentifierInput from '../../input/custom-input/identifier/identifier-input.component';
+import IdentifierSelectionOverlay from './identifier-selection-overlay.component';
+import styles from '../field.scss';
+
+export function setIdentifierSource(
+  identifierSource: IdentifierSource,
+  identifierValue: string,
+  initialValue: string,
+): {
+  identifierValue: string;
+  autoGeneration: boolean;
+  selectedSource: IdentifierSource;
+} {
+  const autoGeneration = identifierSource?.autoGenerationOption?.automaticGenerationEnabled;
+  const manualEntryEnabled = identifierSource?.autoGenerationOption?.manualEntryEnabled;
+  return {
+    selectedSource: identifierSource,
+    autoGeneration,
+    identifierValue:
+      autoGeneration && !manualEntryEnabled
+        ? 'auto-generated'
+        : identifierValue !== 'auto-generated'
+          ? identifierValue
+          : initialValue,
+  };
+}
+
+export function initializeIdentifier(
+  identifierType: PatientIdentifierType,
+  identifierProps,
+  identifierTypeOverrides?: Array<{ identifierTypeUuid: string; required?: boolean }>,
+): PatientIdentifierValue {
+  // Check if there's an override for this identifier type
+  const override = identifierTypeOverrides?.find((override) => override.identifierTypeUuid === identifierType.uuid);
+  const isRequired =
+    override?.required !== undefined ? override.required : identifierType.isPrimary || identifierType.required;
+
+  return {
+    identifierTypeUuid: identifierType.uuid,
+    identifierName: identifierType.name,
+    preferred: identifierType.isPrimary,
+    initialValue: '',
+    required: isRequired,
+    ...identifierProps,
+    ...setIdentifierSource(
+      identifierProps?.selectedSource ?? identifierType.identifierSources?.[0],
+      identifierProps?.identifierValue,
+      identifierProps?.initialValue ?? '',
+    ),
+  };
+}
+
+export function deleteIdentifierType(identifiers: FormValues['identifiers'], identifierFieldName) {
+  return Object.fromEntries(Object.entries(identifiers).filter(([fieldName]) => fieldName !== identifierFieldName));
+}
+
+export const Identifiers: React.FC = () => {
+  const { identifierTypes } = useResourcesContext();
+  const isLoading = !identifierTypes?.length;
+  const { values, setFieldValue, initialFormValues, isOffline } = usePatientRegistrationContext();
+  const { t } = useTranslation();
+  const config = useConfig();
+  const { defaultPatientIdentifierTypes, identifierTypeOverrides } = config;
+
+  useEffect(() => {
+    if (identifierTypes) {
+      const identifiers = {};
+      identifierTypes
+        .filter(
+          (type) =>
+            type.isPrimary ||
+            type.required ||
+            !!defaultPatientIdentifierTypes?.find(
+              (defaultIdentifierTypeUuid) => defaultIdentifierTypeUuid === type.uuid,
+            ),
+        )
+        .filter((type) => !values.identifiers[type.fieldName])
+        .forEach((type) => {
+          identifiers[type.fieldName] = initializeIdentifier(
+            type,
+            values.identifiers[type.uuid] ?? initialFormValues.identifiers[type.uuid] ?? {},
+            identifierTypeOverrides,
+          );
+        });
+      /*
+        Identifier value should only be updated if there is any update in the
+        identifier values, otherwise, if the below 'if' clause is removed, it will
+        fall into an infinite run.
+      */
+      if (Object.keys(identifiers).length) {
+        setFieldValue('identifiers', {
+          ...values.identifiers,
+          ...identifiers,
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    identifierTypes,
+    setFieldValue,
+    defaultPatientIdentifierTypes,
+    identifierTypeOverrides,
+    values.identifiers,
+    initializeIdentifier,
+  ]);
+
+  if (isLoading && !isOffline) {
+    return (
+      <div className={styles.halfWidthInDesktopView}>
+        <div className={styles.identifierLabelText}>
+          <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
+        </div>
+        <SkeletonText
+          // @ts-expect-error
+          role="progressbar"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.halfWidthInDesktopView}>
+      <div className={styles.identifierLabelText}>
+        <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
+      </div>
+      <div>
+        {Object.entries(values.identifiers).map(([fieldName, identifier]) => (
+          <IdentifierInput key={fieldName} fieldName={fieldName} patientIdentifier={identifier} />
+        ))}
+      </div>
+    </div>
+  );
+};