@kenyaemr/esm-patient-registration-app 4.5.4 → 4.5.5

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 { 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.tsx

@@ -1,6 +1,6 @@
 import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
-import { PersonAttributeTypeResponse } from '../../patient-registration-types';
+import { PersonAttributeTypeResponse } from '../../patient-registration.types';
 
 export function usePersonAttributeType(personAttributeTypeUuid: string): {
   data: PersonAttributeTypeResponse;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import styles from './../field.scss';
-import { Input } from '../../input/basic-input/input/input.component';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { PersonAttributeTypeResponse } from '../../patient-registration-types';
+import { Input } from '../../input/basic-input/input/input.component';
+import styles from './../field.scss';
+import { PersonAttributeTypeResponse } from '../../patient-registration.types';
 
 export interface TextPersonAttributeFieldProps {
   id: string;

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/form-manager.test.ts

@@ -1,5 +1,5 @@
 import { FormManager } from './form-manager';
-import { FormValues } from './patient-registration-types';
+import { FormValues } from './patient-registration.types';
 
 jest.mock('./patient-registration.resource');
 

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

@@ -10,7 +10,7 @@ import {
   PatientRegistration,
   RelationshipValue,
   Encounter,
-} from './patient-registration-types';
+} from './patient-registration.types';
 import {
   addPatientIdentifier,
   deletePatientIdentifier,

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

@@ -4,36 +4,6 @@ import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
 import { Input } from './input.component';
 
-describe.skip('number input', () => {
-  const setupInput = async () => {
-    render(
-      <Formik initialValues={{ number: 0 }} onSubmit={null}>
-        <Form>
-          <Input id="number" type="number" labelText="Number" name="number" />
-        </Form>
-      </Formik>,
-    );
-    return screen.getByLabelText('Number (optional)') as HTMLInputElement;
-  };
-
-  it('exists', async () => {
-    const input = await setupInput();
-    expect(input.type).toEqual('number');
-  });
-
-  it('can input data', async () => {
-    const user = userEvent.setup();
-
-    const input = await setupInput();
-    const expected = 1;
-
-    await user.type(input, expected.toString());
-    await user.tab();
-
-    expect(input.valueAsNumber).toEqual(expected);
-  });
-});
-
 describe('text input', () => {
   const setupInput = async () => {
     render(
@@ -100,108 +70,3 @@ describe('text input', () => {
     expect(screen.getByLabelText('Text (optional)')).toBeInTheDocument();
   });
 });
-
-describe.skip('telephone number input', () => {
-  const setupInput = async () => {
-    render(
-      <Formik initialValues={{ telephoneNumber: '' }} onSubmit={null}>
-        <Form>
-          <Input id="tel" labelText="Telephone Number" name="telephoneNumber" placeholder="Enter telephone number" />
-        </Form>
-      </Formik>,
-    );
-    return screen.getByLabelText('telephoneNumber') as HTMLInputElement;
-  };
-
-  it('exists', async () => {
-    const input = await setupInput();
-    expect(input.type).toEqual('tel');
-  });
-
-  it('can input data', async () => {
-    const user = userEvent.setup();
-
-    const input = await setupInput();
-    const expected = '0800001066';
-
-    await user.type(input, expected);
-    await user.tab();
-
-    expect(input.value).toEqual(expected);
-  });
-});
-
-describe.skip('date input', () => {
-  const setupInput = async () => {
-    render(
-      <Formik initialValues={{ date: '' }} onSubmit={null}>
-        <Form>
-          <Input id="date" labelText="date" name="date" />
-        </Form>
-      </Formik>,
-    );
-    return screen.getByLabelText('date') as HTMLInputElement;
-  };
-
-  it('exists', async () => {
-    const input = await setupInput();
-    expect(input.type).toEqual('date');
-  });
-
-  it('can input data', async () => {
-    const user = userEvent.setup();
-
-    const input = await setupInput();
-    const expected = '1990-09-10';
-
-    await user.type(input, expected);
-    await user.tab();
-
-    expect(input.value).toEqual(expected);
-  });
-});
-
-describe.skip('checkbox input', () => {
-  const setupInput = async () => {
-    render(
-      <Formik initialValues={{ checkbox: false }} onSubmit={null}>
-        <Form>
-          <Input id="checkbox" labelText="checkbox" name="checkbox" />
-        </Form>
-      </Formik>,
-    );
-    return screen.getByLabelText('checkbox') as HTMLInputElement;
-  };
-
-  it('exists', async () => {
-    const input = await setupInput();
-    expect(input.type).toEqual('checkbox');
-  });
-
-  it('can input data', async () => {
-    const user = userEvent.setup();
-    const input = await setupInput();
-
-    const expected = true;
-
-    await user.click(input);
-    await user.tab();
-
-    expect(input.checked).toEqual(expected);
-  });
-
-  it('can update data', async () => {
-    const user = userEvent.setup();
-    const input = await setupInput();
-
-    const expected = false;
-
-    await user.click(input);
-    await user.tab();
-
-    await user.click(input);
-    await user.tab();
-
-    expect(input.checked).toEqual(expected);
-  });
-});

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { render, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
 import { SelectInput } from './select-input.component';
 
@@ -21,16 +22,16 @@ describe('the select input', () => {
   });
 
   it('can input data', async () => {
+    const user = userEvent.setup();
     const input = await setupSelect();
     const expected = 'A Option';
 
-    fireEvent.change(input, { target: { value: expected } });
-    fireEvent.blur(input);
+    await user.selectOptions(input, expected);
 
     await waitFor(() => expect(input.value).toEqual(expected));
   });
 
-  it('should show optional label if the input is not required', () => {
+  it('should show optional label if the input is not required', async () => {
     render(
       <Formik initialValues={{ select: '' }} onSubmit={null}>
         <Form>
@@ -38,6 +39,9 @@ describe('the select input', () => {
         </Form>
       </Formik>,
     );
+
+    await waitFor(() => expect(screen.findByRole('combobox')));
+
     const selectInput = screen.getByRole('combobox', { name: 'Select (optional)' }) as HTMLSelectElement;
     expect(selectInput.labels).toHaveLength(1);
     expect(selectInput.labels[0]).toHaveTextContent('Select (optional)');

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

@@ -94,20 +94,22 @@ const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInpu
       </Layer>
       <div className={styles.comboInputEntries}>
         {showEntries && (
-          <div id="downshift-1-menu" style={{ height: filteredEntries.length > 5 ? "15rem" : "" }} className="cds--list-box__menu" role="listbox">
+          <div id="downshift-1-menu" className="cds--list-box__menu" role="listbox">
             {filteredEntries.map((entry, indx) => (
               <div
                 key={indx}
                 id="downshift-1-item-0"
                 role="option"
-                className={`cds--list-box__menu-item ${indx === highlightedEntry && 'cds--list-box__menu-item--highlighted'
-                  }`}
+                className={`cds--list-box__menu-item ${
+                  indx === highlightedEntry && 'cds--list-box__menu-item--highlighted'
+                }`}
                 tabIndex={-1}
                 aria-selected="true"
                 onClick={() => handleOptionClick(entry)}>
                 <div
-                  className={`cds--list-box__menu-item__option ${styles.comboInputItemOption} ${entry === value && 'cds--list-box__menu-item--active'
-                    }`}>
+                  className={`cds--list-box__menu-item__option ${styles.comboInputItemOption} ${
+                    entry === value && 'cds--list-box__menu-item--active'
+                  }`}>
                   {entry}
                   {entry === value && <SelectionTick />}
                 </div>
@@ -116,7 +118,7 @@ const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInpu
           </div>
         )}
       </div>
-    </div >
+    </div>
   );
 };
 

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

@@ -7,7 +7,7 @@ import { ResourcesContext } from '../../../../offline.resources';
 import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
 import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
 import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
-import { PatientIdentifierValue } from '../../../patient-registration-types';
+import { PatientIdentifierValue } from '../../../patient-registration.types';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { Input } from '../../basic-input/input/input.component';
 import styles from '../../input.scss';

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

@@ -0,0 +1,81 @@
+import { isUniqueIdentifierTypeForOffline, shouldBlockPatientIdentifierInOfflineMode } from './utils';
+
+interface IdentifierTypeOptions {
+  uniquenessBehavior?: 'UNIQUE' | 'LOCATION' | 'NON_UNIQUE';
+  manualEntryEnabled?: boolean;
+  automaticGenerationEnabled?: boolean;
+}
+
+function createIdentifierType(options: IdentifierTypeOptions) {
+  return {
+    uniquenessBehavior: options.uniquenessBehavior,
+    identifierSources: [
+      {
+        uuid: 'identifier-source-uuid',
+        name: 'Identifier Source Name',
+        autoGenerationOption: {
+          manualEntryEnabled: options.manualEntryEnabled,
+          automaticGenerationEnabled: options.automaticGenerationEnabled,
+        },
+      },
+    ],
+    name: 'Identifier Type Name',
+    required: true,
+    uuid: 'identifier-type-uuid',
+    fieldName: 'identifierFieldName',
+    format: 'identifierFormat',
+    isPrimary: true,
+  };
+}
+
+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 });
+
+    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 result = shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+    expect(result).toBe(true);
+  });
+});
+
+describe('isUniqueIdentifierTypeForOffline function', () => {
+  it('should return true if uniquenessBehavior is UNIQUE', () => {
+    const identifierType = createIdentifierType({ uniquenessBehavior: 'UNIQUE' });
+
+    const result = isUniqueIdentifierTypeForOffline(identifierType);
+
+    expect(result).toBe(true);
+  });
+
+  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 });
+
+    const result = isUniqueIdentifierTypeForOffline(identifierType);
+
+    expect(result).toBe(false);
+  });
+});

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

@@ -1,4 +1,4 @@
-import { FetchedPatientIdentifierType, PatientIdentifierType } from '../../../patient-registration-types';
+import { FetchedPatientIdentifierType, PatientIdentifierType } from '../../../patient-registration.types';
 
 export function shouldBlockPatientIdentifierInOfflineMode(identifierType: PatientIdentifierType) {
   // Patient Identifiers which are unique and can be manually entered are prohibited while offline because

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { v4 } from 'uuid';
-import { FormValues } from '../../patient-registration-types';
+import { FormValues } from '../../patient-registration.types';
 import styles from './../input.scss';
 
 interface DummyDataInputProps {

package/src/patient-registration/patient-registration-context.ts

@@ -1,7 +1,7 @@
 import { useConfig } from '@openmrs/esm-framework';
 import { createContext, SetStateAction } from 'react';
 import { RegistrationConfig } from '../config-schema';
-import { FormValues, CapturePhotoProps } from './patient-registration-types';
+import { FormValues, CapturePhotoProps } from './patient-registration.types';
 
 export interface PatientRegistrationContextProps {
   identifierTypes: Array<any>;

package/src/patient-registration/patient-registration-hooks.ts

@@ -16,7 +16,7 @@ import {
   ObsResponse,
   ConceptAnswers,
   Encounter,
-} from './patient-registration-types';
+} from './patient-registration.types';
 import {
   getAddressFieldValuesFromFhirPatient,
   getFormValuesFromFhirPatient,

package/src/patient-registration/patient-registration-utils.ts

@@ -6,7 +6,7 @@ import {
   PatientUuidMapType,
   PatientIdentifierValue,
   Encounter,
-} from './patient-registration-types';
+} from './patient-registration.types';
 import { parseDate } from '@openmrs/esm-framework';
 import camelCase from 'lodash-es/camelCase';
 import capitalize from 'lodash-es/capitalize';