@ampath/esm-patient-registration-app 6.0.1-pre.6

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

@@ -0,0 +1,187 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { usePersonAttributeType } from './person-attributes.resource';
+import { PersonAttributeField } from './person-attribute-field.component';
+import { useConceptAnswers } from '../field.resource';
+import { Form, Formik } from 'formik';
+import { type FieldDefinition } from '../../../config-schema';
+
+jest.mock('./person-attributes.resource'); // Mock the usePersonAttributeType hook
+jest.mock('../field.resource'); // Mock the useConceptAnswers hook
+
+jest.mock('formik', () => ({
+  ...jest.requireActual('formik'),
+}));
+
+const mockedUsePersonAttributeType = usePersonAttributeType as jest.Mock;
+const mockedUseConceptAnswers = useConceptAnswers as jest.Mock;
+
+let fieldDefinition: FieldDefinition;
+
+describe('PersonAttributeField', () => {
+  let mockPersonAttributeType = {
+    format: 'java.lang.String',
+    display: 'Referred by',
+    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+  };
+
+  beforeEach(() => {
+    fieldDefinition = {
+      id: 'referredby',
+      name: 'Referred by',
+      type: 'person attribute',
+      uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+      answerConceptSetUuid: '6682d17f-0777-45e4-a39b-93f77eb3531c',
+      validation: {
+        matches: '',
+        required: true,
+      },
+      showHeading: true,
+    };
+    mockedUsePersonAttributeType.mockReturnValue({
+      data: mockPersonAttributeType,
+      isLoading: false,
+      error: null,
+      uuid: '14d4f066-15f5-102d-96e4-000c29c2a5d7d',
+    });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  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');
+  });
+
+  it('should not show heading if showHeading is false', () => {
+    fieldDefinition = {
+      ...fieldDefinition,
+      showHeading: false,
+    };
+
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <PersonAttributeField fieldDefinition={fieldDefinition} />
+        </Form>
+      </Formik>,
+    );
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('renders the coded attribute field for Concept format', () => {
+    mockedUsePersonAttributeType.mockReturnValue({
+      data: { ...mockPersonAttributeType, format: 'org.openmrs.Concept' },
+      isLoading: false,
+      error: null,
+    });
+
+    fieldDefinition = {
+      id: 'referredby',
+      ...fieldDefinition,
+      label: 'Referred by',
+    };
+
+    mockedUseConceptAnswers.mockReturnValueOnce({
+      data: [
+        { uuid: '1', display: 'Option 1' },
+        { uuid: '2', display: 'Option 2' },
+      ],
+      isLoading: false,
+    });
+
+    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('renders an error notification if attribute type has unknown format', () => {
+    mockedUsePersonAttributeType.mockReturnValue({
+      data: { ...mockPersonAttributeType, format: 'unknown' },
+      isLoading: false,
+      error: null,
+    });
+
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <PersonAttributeField fieldDefinition={fieldDefinition} />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText(/Patient attribute type has unknown format/i)).toBeInTheDocument();
+  });
+  it('renders an error notification if unable to fetch attribute type', () => {
+    mockedUsePersonAttributeType.mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: new Error('Failed to fetch attribute type'),
+    });
+
+    fieldDefinition = {
+      uuid: 'attribute-uuid',
+      label: 'Attribute',
+      showHeading: false,
+    };
+
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <PersonAttributeField fieldDefinition={fieldDefinition} />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText(/Unable to fetch person attribute type/i)).toBeInTheDocument();
+  });
+
+  it('renders a skeleton if attribute type is loading', () => {
+    mockedUsePersonAttributeType.mockReturnValue({
+      data: null,
+      isLoading: true,
+      error: null,
+    });
+
+    fieldDefinition = {
+      uuid: 'attribute-uuid',
+      label: 'Attribute',
+      showHeading: true,
+    };
+
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <PersonAttributeField fieldDefinition={fieldDefinition} />
+        </Form>
+      </Formik>,
+    );
+    const input = screen.findByLabelText(/Reffered by/i);
+    expect(screen.getByText(/Attribute/i)).toBeInTheDocument();
+    expect(input).not.toBeNull(); // checks that the input is not rendered when the attribute type is loading
+  });
+});

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

@@ -0,0 +1,20 @@
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+
+export function usePersonAttributeType(personAttributeTypeUuid: string): {
+  data: PersonAttributeTypeResponse;
+  isLoading: boolean;
+  error: any;
+} {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<PersonAttributeTypeResponse>>(
+    `/ws/rest/v1/personattributetype/${personAttributeTypeUuid}`,
+    openmrsFetch,
+  );
+
+  return {
+    data: data?.data,
+    isLoading,
+    error,
+  };
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Field } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../input/basic-input/input/input.component';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import styles from './../field.scss';
+
+export interface TextPersonAttributeFieldProps {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  validationRegex?: string;
+  label?: string;
+  required?: boolean;
+}
+
+export function TextPersonAttributeField({
+  id,
+  personAttributeType,
+  validationRegex,
+  label,
+  required,
+}: TextPersonAttributeFieldProps) {
+  const { t } = useTranslation();
+
+  const validateInput = (value: string) => {
+    if (!value || !validationRegex || validationRegex === '' || typeof validationRegex !== 'string' || value === '') {
+      return;
+    }
+    const regex = new RegExp(validationRegex);
+    if (regex.test(value)) {
+      return;
+    } else {
+      return t('invalidInput', 'Invalid Input');
+    }
+  };
+
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Field name={fieldName} validate={validateInput}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={id}
+              name={`person-attribute-${personAttributeType.uuid}`}
+              labelText={label ?? personAttributeType?.display}
+              invalid={errors[fieldName] && touched[fieldName]}
+              {...field}
+              required={required}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } 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',
+  };
+
+  it('renders the input field with a label', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <TextPersonAttributeField
+            id="attributeId"
+            personAttributeType={mockPersonAttributeType}
+            label="Custom Label"
+          />
+        </Form>
+      </Formik>,
+    );
+
+    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>,
+    );
+
+    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();
+  });
+
+  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();
+  });
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PersonAttributeField } from '../person-attributes/person-attribute-field.component';
+import { useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
+
+export function PhoneField() {
+  const config = useConfig<RegistrationConfig>();
+
+  const fieldDefinition = {
+    id: 'phone',
+    type: 'person attribute',
+    uuid: config.fieldConfigurations.phone.personAttributeUuid,
+    showHeading: false,
+  };
+  return <PersonAttributeField fieldDefinition={fieldDefinition} />;
+}

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

@@ -0,0 +1,67 @@
+import { FormManager } from './form-manager';
+import { type FormValues } from './patient-registration.types';
+
+jest.mock('./patient-registration.resource');
+
+const formValues: FormValues = {
+  patientUuid: '',
+  givenName: '',
+  middleName: '',
+  familyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  additionalFamilyName: '',
+  addNameInLocalLanguage: false,
+  gender: '',
+  birthdate: '',
+  yearsEstimated: 1000,
+  monthsEstimated: 11,
+  birthdateEstimated: false,
+  telephoneNumber: '',
+  isDead: false,
+  deathDate: 'string',
+  deathCause: 'string',
+  relationships: [],
+  address: {
+    address1: '',
+    address2: '',
+    cityVillage: '',
+    stateProvince: 'New York',
+    country: 'string',
+    postalCode: 'string',
+  },
+  identifiers: {
+    foo: {
+      identifierUuid: 'aUuid',
+      identifierName: 'Foo',
+      required: false,
+      initialValue: 'foo',
+      identifierValue: 'foo',
+      identifierTypeUuid: 'identifierType',
+      preferred: true,
+      autoGeneration: false,
+      selectedSource: {
+        uuid: 'some-uuid',
+        name: 'unique',
+        autoGenerationOption: { manualEntryEnabled: true, automaticGenerationEnabled: false },
+      },
+    },
+  },
+};
+
+describe('FormManager', () => {
+  describe('createIdentifiers', () => {
+    it('uses the uuid of a field name if it exists', async () => {
+      const result = await FormManager.savePatientIdentifiers(true, undefined, formValues.identifiers, {}, 'Nyc');
+      expect(result).toEqual([
+        {
+          uuid: 'aUuid',
+          identifier: 'foo',
+          identifierType: 'identifierType',
+          location: 'Nyc',
+          preferred: true,
+        },
+      ]);
+    });
+  });
+});