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

package/src/patient-registration/field/person-attributes/person-attribute-field.test.tsx

@@ -1,23 +1,27 @@
 import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
 import { Form, Formik } from 'formik';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { type FieldDefinition } from '../../../config-schema';
 import { usePersonAttributeType } from './person-attributes.resource';
 import { useConceptAnswers } from '../field.resource';
 import { PersonAttributeField } from './person-attribute-field.component';
+import { initialFormValues } from '../../patient-registration.component';
+import { type FormValues } from '../../patient-registration.types';
 
-jest.mock('./person-attributes.resource', () => ({
-  ...jest.requireActual('./person-attributes.resource'),
-  usePersonAttributeType: jest.fn(),
+vi.mock('./person-attributes.resource', async () => ({
+  ...((await vi.importActual('./person-attributes.resource')) as object),
+  usePersonAttributeType: vi.fn(),
 }));
 
-jest.mock('../field.resource', () => ({
-  ...jest.requireActual('../field.resource'),
-  useConceptAnswers: jest.fn(),
+vi.mock('../field.resource', async () => ({
+  ...((await vi.importActual('../field.resource')) as object),
+  useConceptAnswers: vi.fn(),
 }));
 
-const mockUsePersonAttributeType = jest.mocked(usePersonAttributeType);
-const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+const mockUsePersonAttributeType = vi.mocked(usePersonAttributeType);
+const mockUseConceptAnswers = vi.mocked(useConceptAnswers);
 
 const mockPersonAttributeType = {
   format: 'java.lang.String',
@@ -27,17 +31,38 @@ const mockPersonAttributeType = {
   description: 'The person who referred the patient',
 };
 
-let fieldDefinition: FieldDefinition = {
-  id: 'referredby',
-  label: 'Referred by',
-  type: 'person attribute',
-  uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
-  answerConceptSetUuid: '6682d17f-0777-45e4-a39b-93f77eb3531c',
-  validation: {
-    matches: '',
-    required: true,
-  },
-  showHeading: true,
+/**
+ * Helper to render PersonAttributeField with Formik render props for state-dependent tests.
+ */
+const renderPersonAttributeFieldWithFormik = (
+  fieldDefinition: FieldDefinition,
+  initialValues: Partial<FormValues> = {},
+  options?: { enableReinitialize?: boolean },
+) => {
+  const defaultValues = {
+    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>
+            <PersonAttributeField fieldDefinition={fieldDefinition} />
+          </Form>
+        );
+      }}
+    </Formik>,
+  );
+
+  return {
+    ...utils,
+    getFormValues: () => formValuesRef,
+  };
 };
 
 describe('PersonAttributeField', () => {
@@ -49,145 +74,238 @@ describe('PersonAttributeField', () => {
     });
   });
 
-  it('renders the text input field for String format', () => {
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <PersonAttributeField fieldDefinition={fieldDefinition} />
-        </Form>
-      </Formik>,
-    );
-
-    const input = screen.getByLabelText(/Referred by/i) as HTMLInputElement;
-    expect(screen.getByRole('heading')).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(input.type).toBe('text');
+  describe('Loading and error states', () => {
+    it('renders a skeleton if attribute type is loading', async () => {
+      mockUsePersonAttributeType.mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      const fieldDefinition: FieldDefinition = {
+        id: 'referredBy',
+        uuid: 'attribute-uuid',
+        label: 'Attribute',
+        showHeading: true,
+        type: 'person attribute',
+      };
+
+      renderPersonAttributeFieldWithFormik(fieldDefinition);
+
+      await screen.findByRole('heading', { name: /attribute/i });
+      expect(screen.queryByLabelText(/referred by/i)).not.toBeInTheDocument();
+    });
+
+    it('renders an error notification if unable to fetch attribute type', () => {
+      mockUsePersonAttributeType.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error('Failed to fetch attribute type'),
+      });
+
+      const fieldDefinition: FieldDefinition = {
+        id: 'referredBy',
+        uuid: 'attribute-uuid',
+        label: 'Attribute',
+        showHeading: false,
+        type: 'person attribute',
+      };
+
+      renderPersonAttributeFieldWithFormik(fieldDefinition);
+
+      // Check for the specific error message text
+      expect(screen.getByText(/Unable to fetch person attribute type/i)).toBeInTheDocument();
+    });
+
+    it('renders an error notification if attribute type has unknown format', () => {
+      mockUsePersonAttributeType.mockReturnValue({
+        data: { ...mockPersonAttributeType, format: 'unknown' },
+        isLoading: false,
+        error: null,
+      });
+
+      const fieldDefinition: FieldDefinition = {
+        id: 'referredby',
+        label: 'Referred by',
+        type: 'person attribute',
+        uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+        validation: {
+          matches: '',
+          required: true,
+        },
+        showHeading: true,
+      };
+
+      renderPersonAttributeFieldWithFormik(fieldDefinition);
+
+      // Check for the specific error message text
+      expect(screen.getByText(/Patient attribute type has unknown format/i)).toBeInTheDocument();
+      expect(screen.getByText(/unknown/i)).toBeInTheDocument();
+    });
   });
 
-  it('should not show heading if showHeading is false', () => {
-    fieldDefinition = {
-      ...fieldDefinition,
-      showHeading: false,
-    };
+  describe('Heading display', () => {
+    it('shows heading when showHeading is true', () => {
+      const fieldDefinition: FieldDefinition = {
+        id: 'referredby',
+        label: 'Referred by',
+        type: 'person attribute',
+        uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+        validation: {
+          matches: '',
+          required: true,
+        },
+        showHeading: true,
+      };
+
+      renderPersonAttributeFieldWithFormik(fieldDefinition);
 
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <PersonAttributeField fieldDefinition={fieldDefinition} />
-        </Form>
-      </Formik>,
-    );
+      expect(screen.getByRole('heading', { name: /referred by/i })).toBeInTheDocument();
+    });
+
+    it('does not show heading when showHeading is false', () => {
+      const fieldDefinition: FieldDefinition = {
+        id: 'referredby',
+        label: 'Referred by',
+        type: 'person attribute',
+        uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+        validation: {
+          matches: '',
+          required: true,
+        },
+        showHeading: false,
+      };
 
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+      renderPersonAttributeFieldWithFormik(fieldDefinition);
+
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    });
   });
 
-  it('renders the coded attribute field for Concept format', () => {
-    fieldDefinition = {
+  describe('String format (text input)', () => {
+    const textFieldDefinition: FieldDefinition = {
       id: 'referredby',
-      ...fieldDefinition,
       label: 'Referred by',
+      type: 'person attribute',
+      uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+      validation: {
+        matches: '',
+        required: false,
+      },
+      showHeading: true,
     };
 
-    mockUsePersonAttributeType.mockReturnValue({
-      data: { ...mockPersonAttributeType, format: 'org.openmrs.Concept' },
-      isLoading: false,
-      error: null,
-    });
+    it('renders a text input field for String format', () => {
+      renderPersonAttributeFieldWithFormik(textFieldDefinition);
 
-    mockUseConceptAnswers.mockReturnValueOnce({
-      data: [
-        { uuid: '1', display: 'Option 1' },
-        { uuid: '2', display: 'Option 2' },
-      ],
-      error: null,
-      isLoading: false,
+      const input = screen.getByRole('textbox', { name: /referred by/i });
+      expect(input).toBeInTheDocument();
     });
 
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <PersonAttributeField fieldDefinition={fieldDefinition} />
-        </Form>
-      </Formik>,
-    );
-
-    const input = screen.getByLabelText(/Referred by/i) as HTMLInputElement;
-    expect(input).toBeInTheDocument();
-    expect(input.type).toBe('select-one');
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-    expect(screen.getByText('Option 2')).toBeInTheDocument();
-  });
+    it('allows user to enter text', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderPersonAttributeFieldWithFormik(textFieldDefinition);
 
-  it('renders an error notification if attribute type has unknown format', () => {
-    mockUsePersonAttributeType.mockReturnValue({
-      data: { ...mockPersonAttributeType, format: 'unknown' },
-      isLoading: false,
-      error: null,
+      const input = screen.getByRole('textbox', { name: /referred by/i }) as HTMLInputElement;
+      await user.type(input, 'Dr. Smith');
+
+      await waitFor(() => {
+        expect(getFormValues().attributes['4dd56a75-14ab-4148-8700-1f4f704dc5b0']).toBe('Dr. Smith');
+      });
     });
 
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <PersonAttributeField fieldDefinition={fieldDefinition} />
-        </Form>
-      </Formik>,
-    );
+    it('renders as required when configured', () => {
+      renderPersonAttributeFieldWithFormik({
+        ...textFieldDefinition,
+        validation: {
+          matches: '',
+          required: true,
+        },
+      });
 
-    expect(screen.getByText('Error')).toBeInTheDocument();
-    expect(screen.getByText(/Patient attribute type has unknown format/i)).toBeInTheDocument();
-  });
+      const input = screen.getByRole('textbox', { name: /referred by/i });
+      expect(input).toBeRequired();
+    });
 
-  it('renders an error notification if unable to fetch attribute type', () => {
-    mockUsePersonAttributeType.mockReturnValue({
-      data: null,
-      isLoading: false,
-      error: new Error('Failed to fetch attribute type'),
+    it('renders as optional when not required', () => {
+      renderPersonAttributeFieldWithFormik(textFieldDefinition);
+
+      const input = screen.getByRole('textbox', { name: /referred by/i });
+      expect(input).not.toBeRequired();
     });
+  });
 
-    fieldDefinition = {
-      id: 'referredBy',
-      uuid: 'attribute-uuid',
-      label: 'Attribute',
-      showHeading: false,
+  describe('Concept format (coded select)', () => {
+    const codedFieldDefinition: FieldDefinition = {
+      id: 'referredby',
+      label: 'Referred by',
       type: 'person attribute',
+      uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+      answerConceptSetUuid: '6682d17f-0777-45e4-a39b-93f77eb3531c',
+      validation: {
+        matches: '',
+        required: false,
+      },
+      showHeading: true,
     };
 
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <PersonAttributeField fieldDefinition={fieldDefinition} />
-        </Form>
-      </Formik>,
-    );
+    beforeEach(() => {
+      mockUsePersonAttributeType.mockReturnValue({
+        data: { ...mockPersonAttributeType, format: 'org.openmrs.Concept' },
+        isLoading: false,
+        error: null,
+      });
 
-    expect(screen.getByText('Error')).toBeInTheDocument();
-    expect(screen.getByText(/Unable to fetch person attribute type/i)).toBeInTheDocument();
-  });
+      mockUseConceptAnswers.mockReturnValue({
+        data: [
+          { uuid: '1', display: 'Option 1' },
+          { uuid: '2', display: 'Option 2' },
+        ],
+        error: null,
+        isLoading: false,
+      });
+    });
 
-  it('renders a skeleton if attribute type is loading', async () => {
-    mockUsePersonAttributeType.mockReturnValue({
-      data: null,
-      isLoading: true,
-      error: null,
+    it('renders a select field for Concept format', () => {
+      renderPersonAttributeFieldWithFormik(codedFieldDefinition);
+
+      const select = screen.getByRole('combobox', { name: /referred by/i });
+      expect(select).toBeInTheDocument();
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
     });
 
-    fieldDefinition = {
-      id: 'referredBy',
-      uuid: 'attribute-uuid',
-      label: 'Attribute',
-      showHeading: true,
-      type: 'person attribute',
-    };
+    it('allows user to select an option', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderPersonAttributeFieldWithFormik(codedFieldDefinition);
 
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <PersonAttributeField fieldDefinition={fieldDefinition} />
-        </Form>
-      </Formik>,
-    );
+      const select = screen.getByRole('combobox', { name: /referred by/i }) as HTMLSelectElement;
+      await user.selectOptions(select, '1');
 
-    await screen.findByRole('heading', { name: /attribute/i });
-    expect(screen.queryByLabelText(/referred by/i)).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(getFormValues().attributes['4dd56a75-14ab-4148-8700-1f4f704dc5b0']).toBe('1');
+      });
+      expect(select.value).toBe('1');
+    });
+
+    it('renders as required when configured', () => {
+      renderPersonAttributeFieldWithFormik({
+        ...codedFieldDefinition,
+        validation: {
+          matches: '',
+          required: true,
+        },
+      });
+
+      const select = screen.getByRole('combobox', { name: /referred by/i });
+      expect(select).toBeRequired();
+    });
+
+    it('renders as optional when not required', () => {
+      renderPersonAttributeFieldWithFormik(codedFieldDefinition);
+
+      const select = screen.getByRole('combobox', { name: /referred by/i });
+      expect(select).not.toBeRequired();
+    });
   });
 });

package/src/patient-registration/field/person-attributes/person-attributes.resource.ts

@@ -5,7 +5,7 @@ import { type PersonAttributeTypeResponse } from '../../patient-registration.typ
 export function usePersonAttributeType(personAttributeTypeUuid: string): {
   data: PersonAttributeTypeResponse;
   isLoading: boolean;
-  error: any;
+  error: Error | undefined;
 } {
   const { data, error, isLoading } = useSWRImmutable<FetchResponse<PersonAttributeTypeResponse>>(
     `${restBaseUrl}/personattributetype/${personAttributeTypeUuid}`,

package/src/patient-registration/field/person-attributes/text-person-attribute-field.test.tsx

@@ -1,90 +1,118 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { vi, describe, it, expect } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Form, Formik } from 'formik';
 import { TextPersonAttributeField } from './text-person-attribute-field.component';
 
-describe('TextPersonAttributeField', () => {
-  const mockPersonAttributeType = {
-    format: 'java.lang.String',
-    display: 'Referred by',
-    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
-    description: 'Referred by',
-    name: 'Referred by',
-  };
+const mockPersonAttributeType = {
+  format: 'java.lang.String',
+  display: 'Referred by',
+  uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+  description: 'Referred by',
+  name: 'Referred by',
+};
+
+/**
+ * Helper to render TextPersonAttributeField with Formik for state-dependent tests.
+ */
+const renderTextPersonAttributeField = (
+  props: {
+    id?: string;
+    label?: string;
+    validationRegex?: string;
+    required?: boolean;
+  } = {},
+) => {
+  const utils = render(
+    <Formik initialValues={{}} onSubmit={() => {}}>
+      <Form>
+        <TextPersonAttributeField
+          id={props.id || 'attributeId'}
+          personAttributeType={mockPersonAttributeType}
+          label={props.label}
+          validationRegex={props.validationRegex}
+          required={props.required}
+        />
+      </Form>
+    </Formik>,
+  );
+
+  return utils;
+};
 
+describe('TextPersonAttributeField', () => {
   it('renders the input field with a label', () => {
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <TextPersonAttributeField
-            id="attributeId"
-            personAttributeType={mockPersonAttributeType}
-            label="Custom Label"
-          />
-        </Form>
-      </Formik>,
-    );
+    renderTextPersonAttributeField({ label: 'Custom Label' });
 
     expect(screen.getByRole('textbox', { name: /custom label \(optional\)/i })).toBeInTheDocument();
   });
 
   it('renders the input field with the default label if label prop is not provided', () => {
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <TextPersonAttributeField id="attributeId" personAttributeType={mockPersonAttributeType} />
-        </Form>
-      </Formik>,
-    );
+    renderTextPersonAttributeField();
 
     expect(screen.getByRole('textbox', { name: /referred by \(optional\)/i })).toBeInTheDocument();
   });
 
-  it('validates the input with the provided validationRegex', async () => {
-    const user = userEvent.setup();
-    const validationRegex = '^[A-Z]+$'; // Accepts only uppercase letters
-
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <TextPersonAttributeField
-            id="attributeId"
-            personAttributeType={mockPersonAttributeType}
-            validationRegex={validationRegex}
-          />
-        </Form>
-      </Formik>,
-    );
-
-    const textbox = screen.getByRole('textbox', { name: /referred by \(optional\)/i });
-    expect(textbox).toBeInTheDocument();
-
-    // Valid input: "ABC"
-    await user.type(textbox, 'ABC');
-    await user.tab();
-
-    expect(screen.queryByText(/invalid input/i)).not.toBeInTheDocument();
-    await user.clear(textbox);
-
-    // // Invalid input: "abc" (contains lowercase letters)
-    await user.type(textbox, 'abc');
-    await user.tab();
-    expect(screen.getByText(/invalid input/i)).toBeInTheDocument();
+  describe('Input validation', () => {
+    it('validates the input with the provided validationRegex', async () => {
+      const user = userEvent.setup();
+      const validationRegex = '^[A-Z]+$'; // Accepts only uppercase letters
+
+      renderTextPersonAttributeField({ validationRegex });
+
+      const textbox = screen.getByRole('textbox', { name: /referred by \(optional\)/i });
+      expect(textbox).toBeInTheDocument();
+
+      // Valid input: "ABC"
+      await user.type(textbox, 'ABC');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.queryByText(/invalid input/i)).not.toBeInTheDocument();
+      });
+      await user.clear(textbox);
+
+      // Invalid input: "abc" (contains lowercase letters)
+      await user.type(textbox, 'abc');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.getByText(/invalid input/i)).toBeInTheDocument();
+      });
+    });
+
+    it('does not show error for valid input matching regex', async () => {
+      const user = userEvent.setup();
+      const validationRegex = '^[A-Z]+$';
+
+      renderTextPersonAttributeField({ validationRegex });
+
+      const textbox = screen.getByRole('textbox', { name: /referred by \(optional\)/i });
+      await user.type(textbox, 'VALID');
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.queryByText(/invalid input/i)).not.toBeInTheDocument();
+      });
+    });
   });
 
-  it('renders the input field as required when required prop is true', () => {
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <TextPersonAttributeField id="attributeId" personAttributeType={mockPersonAttributeType} required />
-        </Form>
-      </Formik>,
-    );
-    const textbox = screen.getByRole('textbox', { name: /referred by/i });
-
-    // Required attribute should be truthy on the input element
-    expect(textbox).toBeInTheDocument();
-    expect(textbox).toBeRequired();
+  describe('Required field', () => {
+    it('renders the input field as required when required prop is true', () => {
+      renderTextPersonAttributeField({ required: true });
+      const textbox = screen.getByRole('textbox', { name: /referred by/i });
+
+      expect(textbox).toBeInTheDocument();
+      expect(textbox).toBeRequired();
+    });
+
+    it('renders as optional when required prop is false', () => {
+      renderTextPersonAttributeField({ required: false });
+      const textbox = screen.getByRole('textbox', { name: /referred by \(optional\)/i });
+
+      expect(textbox).toBeInTheDocument();
+      expect(textbox).not.toBeRequired();
+    });
   });
 });