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

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { vi, describe, it, expect, beforeEach, type Mock } from 'vitest';
+import { Formik, Form } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { PhoneField } from './phone-field.component';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { type FormValues } from '../../patient-registration.types';
+
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+
+// Mock PersonAttributeField since PhoneField is a wrapper around it
+vi.mock('../person-attributes/person-attribute-field.component', () => ({
+  PersonAttributeField: ({ fieldDefinition }) => (
+    <div data-testid="phone-field">
+      <label htmlFor="phone-input">Phone</label>
+      <input id="phone-input" name="phone" data-field-uuid={fieldDefinition.uuid} />
+    </div>
+  ),
+}));
+
+/**
+ * Helper to render PhoneField.
+ */
+const renderPhoneField = () => {
+  return render(
+    <Formik initialValues={{}} onSubmit={() => {}}>
+      <Form>
+        <PatientRegistrationContextProvider
+          value={{
+            identifierTypes: [],
+            values: initialFormValues,
+            validationSchema: null,
+            inEditMode: false,
+            setFieldValue: vi.fn().mockResolvedValue(undefined),
+            setCapturePhotoProps: vi.fn(),
+            setFieldTouched: vi.fn().mockResolvedValue(undefined),
+            currentPhoto: '',
+            isOffline: false,
+            initialFormValues: initialFormValues,
+          }}>
+          <PhoneField />
+        </PatientRegistrationContextProvider>
+      </Form>
+    </Formik>,
+  );
+};
+
+describe('PhoneField', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        phone: {
+          personAttributeUuid: 'phone-uuid-123',
+          validation: {
+            required: false,
+            matches: null,
+          },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+
+  it('renders the phone field', () => {
+    renderPhoneField();
+
+    expect(screen.getByTestId('phone-field')).toBeInTheDocument();
+    expect(screen.getByLabelText(/phone/i)).toBeInTheDocument();
+  });
+
+  it('passes correct field definition to PersonAttributeField', () => {
+    renderPhoneField();
+
+    const phoneInput = screen.getByLabelText(/phone/i);
+    expect(phoneInput).toHaveAttribute('data-field-uuid', 'phone-uuid-123');
+  });
+
+  it('uses configured person attribute UUID', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        phone: {
+          personAttributeUuid: 'custom-phone-uuid',
+          validation: {
+            required: false,
+            matches: null,
+          },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    renderPhoneField();
+
+    const phoneInput = screen.getByLabelText(/phone/i);
+    expect(phoneInput).toHaveAttribute('data-field-uuid', 'custom-phone-uuid');
+  });
+});

package/src/patient-registration/form-manager.test.ts

@@ -1,13 +1,14 @@
 import { FormManager } from './form-manager';
+import { vi, describe, it, expect } from 'vitest';
 import { type FormValues } from './patient-registration.types';
 import { generateIdentifier } from './patient-registration.resource';
 
-jest.mock('./patient-registration.resource', () => ({
-  ...jest.requireActual('./patient-registration.resource'),
-  generateIdentifier: jest.fn(),
+vi.mock('./patient-registration.resource', async () => ({
+  ...((await vi.importActual('./patient-registration.resource')) as object),
+  generateIdentifier: vi.fn(),
 }));
 
-const mockGenerateIdentifier = generateIdentifier as jest.Mock;
+const mockGenerateIdentifier = vi.mocked(generateIdentifier);
 
 const formValues: FormValues = {
   patientUuid: '',
@@ -76,7 +77,7 @@ describe('FormManager', () => {
     it('should generate identifier if it has autoGeneration and manual entry disabled', async () => {
       formValues.identifiers.foo.autoGeneration = true;
       formValues.identifiers.foo.selectedSource.autoGenerationOption.manualEntryEnabled = false;
-      mockGenerateIdentifier.mockResolvedValue({ data: { identifier: '10001V' } });
+      mockGenerateIdentifier.mockResolvedValue({ data: { identifier: '10001V' } } as any);
       await FormManager.savePatientIdentifiers(true, undefined, formValues.identifiers, {}, 'Nyc');
       expect(mockGenerateIdentifier.mock.calls).toHaveLength(1);
     });

package/src/patient-registration/form-manager.ts

@@ -10,6 +10,7 @@ import {
 } from '@openmrs/esm-framework';
 import { patientRegistration } from '../constants';
 import {
+  type AddressProperties,
   type AttributeValue,
   type CapturePhotoProps,
   type Encounter,
@@ -36,11 +37,13 @@ import {
 } from './patient-registration.resource';
 import { type RegistrationConfig } from '../config-schema';
 
+type AddressFieldValues = Partial<Record<AddressProperties, string>>;
+
 export type SavePatientForm = (
   isNewPatient: boolean,
   values: FormValues,
   patientUuidMap: PatientUuidMapType,
-  initialAddressFieldValues: Record<string, any>,
+  initialAddressFieldValues: AddressFieldValues,
   capturePhotoProps: CapturePhotoProps,
   currentLocation: string,
   initialIdentifierValues: FormValues['identifiers'],
@@ -303,7 +306,7 @@ export class FormManager {
     isNewPatient: boolean,
     values: FormValues,
     patientUuidMap: PatientUuidMapType,
-    initialAddressFieldValues: Record<string, any>,
+    initialAddressFieldValues: AddressFieldValues,
     identifiers: Array<PatientIdentifier>,
     config?: RegistrationConfig,
   ): Patient {

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

@@ -3,125 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Layer, TextInput } from '@carbon/react';
 import { useField } from 'formik';
 
-// FIXME Temporarily imported here
-export interface TextInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'id' | 'size' | 'value'> {
-  /**
-   * Specify an optional className to be applied to the `<input>` node
-   */
-  className?: string;
-
-  /**
-   * Optionally provide the default value of the `<input>`
-   */
-  defaultValue?: string | number;
-
-  /**
-   * Specify whether the `<input>` should be disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Specify whether to display the character counter
-   */
-  enableCounter?: boolean;
-
-  /**
-   * Provide text that is used alongside the control label for additional help
-   */
-  helperText?: React.ReactNode;
-
-  /**
-   * Specify whether you want the underlying label to be visually hidden
-   */
-  hideLabel?: boolean;
-
-  /**
-   * Specify a custom `id` for the `<input>`
-   */
-  id: string;
-
-  /**
-   * `true` to use the inline version.
-   */
-  inline?: boolean;
-
-  /**
-   * Specify whether the control is currently invalid
-   */
-  invalid?: boolean;
-
-  /**
-   * Provide the text that is displayed when the control is in an invalid state
-   */
-  invalidText?: React.ReactNode;
-
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control
-   */
-  labelText: React.ReactNode;
-
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make tile background color same as container background color.
-   * 'The `light` prop for `TextInput` has ' +
-   'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
-   */
-  light?: boolean;
-
-  /**
-   * Max character count allowed for the input. This is needed in order for enableCounter to display
-   */
-  maxCount?: number;
-
-  /**
-   * Optionally provide an `onChange` handler that is called whenever `<input>`
-   * is updated
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-  /**
-   * Optionally provide an `onClick` handler that is called whenever the
-   * `<input>` is clicked
-   */
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * Specify the placeholder attribute for the `<input>`
-   */
-  placeholder?: string;
-
-  /**
-   * Whether the input should be read-only
-   */
-  readOnly?: boolean;
-
-  /**
-   * Specify the size of the Text Input. Currently supports the following:
-   */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-
-  /**
-   * Specify the type of the `<input>`
-   */
-  type?: string;
-
-  /**
-   * Specify the value of the `<input>`
-   */
-  value?: string | number | undefined;
-
-  /**
-   * Specify whether the control is currently in warning state
-   */
-  warn?: boolean;
-
-  /**
-   * Provide the text that is displayed when the control is in warning state
-   */
-  warnText?: React.ReactNode;
-}
+export type TextInputProps = React.ComponentProps<typeof TextInput>;
 
 interface InputProps extends TextInputProps {
   checkWarning?(value: string): string;
@@ -146,9 +28,9 @@ export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
     t('numberInNameDubious')
     t('yearsEstimateRequired')
     t('deathdayIsRequired', 'Death date is required when the patient is marked as deceased.')
-    t('deathdayInvalidDate', 'Date of death is invalid')
+    t('deathdayBeforeBirthday', 'Death date and time cannot be before the birthday')
     t('deathCauseRequired', 'Cause of death is required')
-    t('nonCodedCauseOfDeathRequired', 'Non-coded cause of death is required')
+    t('nonCodedCauseOfDeathRequiredWhenSelected', 'Non-coded cause of death is required')
   */
 
   const value = field.value || '';

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

@@ -1,72 +1,172 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { vi, describe, it, expect, test } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
 import { Input } from './input.component';
 
-describe('text input', () => {
-  const setupInput = async () => {
-    render(
-      <Formik initialValues={{ text: '' }} onSubmit={() => {}}>
-        <Form>
-          <Input
-            id="text"
-            labelText="Text"
-            name="text"
-            placeholder="Enter text"
-            required
-            checkWarning={(value) => {
-              if (value.length > 5) {
-                return 'name should be of 5 char';
-              }
-            }}
-          />
-        </Form>
-      </Formik>,
-    );
-    return screen.getByLabelText('Text') as HTMLInputElement;
+/**
+ * Helper to render Input component with Formik.
+ */
+function renderInput(
+  props: {
+    name?: string;
+    labelText?: string;
+    required?: boolean;
+    checkWarning?: (value: string) => string | undefined;
+    placeholder?: string;
+  } = {},
+  initialValues: Record<string, string> = {},
+) {
+  const defaultProps = {
+    id: 'text',
+    name: 'text',
+    labelText: 'Text',
+    placeholder: 'Enter text',
+    required: false,
+    ...props,
   };
 
-  it('exists', async () => {
-    const input = await setupInput();
-    expect(input.type).toEqual('text');
-  });
+  return render(
+    <Formik initialValues={{ text: '', ...initialValues }} onSubmit={() => {}}>
+      <Form>
+        <Input {...defaultProps} />
+      </Form>
+    </Formik>,
+  );
+}
+
+describe('Input component', () => {
+  describe('Rendering', () => {
+    it('renders the input field', () => {
+      renderInput();
 
-  it('can input valid data without warning', async () => {
-    const user = userEvent.setup();
+      const input = screen.getByLabelText('Text (optional)') as HTMLInputElement;
+      expect(input).toBeInTheDocument();
+      expect(input.type).toBe('text');
+    });
 
-    const input = await setupInput();
-    const userInput = 'text';
+    it('shows required label when field is required', () => {
+      renderInput({ required: true });
 
-    await user.type(input, userInput);
-    await user.tab();
+      expect(screen.getByLabelText('Text')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Text (optional)')).not.toBeInTheDocument();
+    });
 
-    expect(input.value).toEqual(userInput);
-    expect(screen.queryByText('name should be of 5 char')).not.toBeInTheDocument();
+    it('shows optional label when field is not required', () => {
+      renderInput({ required: false });
+
+      expect(screen.getByLabelText('Text (optional)')).toBeInTheDocument();
+    });
   });
 
-  it('should show a warning when the invalid input is entered', async () => {
-    const user = userEvent.setup();
+  describe('User interaction', () => {
+    it('allows user to type and updates the input value', async () => {
+      const user = userEvent.setup();
+      renderInput({ required: true });
+
+      const input = screen.getByLabelText('Text') as HTMLInputElement;
+      await user.type(input, 'test value');
 
-    const input = await setupInput();
-    const userInput = 'Hello World';
+      expect(input.value).toBe('test value');
+    });
 
-    await userEvent.clear(input);
+    it('updates form values when user types', async () => {
+      const user = userEvent.setup();
+      let formValues: Record<string, string> = {};
 
-    await user.type(input, userInput);
-    await user.tab();
+      render(
+        <Formik initialValues={{ text: '' }} onSubmit={() => {}}>
+          {({ values }) => {
+            formValues = values as Record<string, string>;
+            return (
+              <Form>
+                <Input id="text" name="text" labelText="Text" required />
+              </Form>
+            );
+          }}
+        </Formik>,
+      );
 
-    expect(screen.getByText('name should be of 5 char')).toBeInTheDocument();
+      const input = screen.getByLabelText('Text') as HTMLInputElement;
+      await user.type(input, 'typed value');
+
+      await waitFor(() => {
+        expect(formValues.text).toBe('typed value');
+      });
+    });
   });
 
-  it('should show the correct label text if the field is not required', () => {
-    render(
-      <Formik initialValues={{ text: '' }} onSubmit={() => {}}>
-        <Form>
-          <Input id="text" labelText="Text" name="text" placeholder="Enter text" />
-        </Form>
-      </Formik>,
-    );
-    expect(screen.getByLabelText('Text (optional)')).toBeInTheDocument();
+  describe('Warning validation', () => {
+    it('shows warning when checkWarning returns a warning message', async () => {
+      const user = userEvent.setup();
+      renderInput({
+        required: true,
+        checkWarning: (value) => {
+          if (value.length > 5) {
+            return 'name should be of 5 char';
+          }
+        },
+      });
+
+      const input = screen.getByLabelText('Text') as HTMLInputElement;
+      await user.type(input, 'Hello World');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.getByText('name should be of 5 char')).toBeInTheDocument();
+      });
+    });
+
+    it('does not show warning when input is valid', async () => {
+      const user = userEvent.setup();
+      renderInput({
+        required: true,
+        checkWarning: (value) => {
+          if (value.length > 5) {
+            return 'name should be of 5 char';
+          }
+        },
+      });
+
+      const input = screen.getByLabelText('Text') as HTMLInputElement;
+      await user.type(input, 'text');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.queryByText('name should be of 5 char')).not.toBeInTheDocument();
+      });
+    });
+
+    it('clears warning when user corrects input', async () => {
+      const user = userEvent.setup();
+      renderInput({
+        required: true,
+        checkWarning: (value) => {
+          if (value.length > 5) {
+            return 'name should be of 5 char';
+          }
+        },
+      });
+
+      const input = screen.getByLabelText('Text') as HTMLInputElement;
+
+      // Type invalid value
+      await user.type(input, 'Hello World');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.getByText('name should be of 5 char')).toBeInTheDocument();
+      });
+
+      // Clear and type valid value
+      await user.clear(input);
+      await user.type(input, 'text');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.queryByText('name should be of 5 char')).not.toBeInTheDocument();
+      });
+    });
   });
 });