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

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

@@ -0,0 +1,294 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { Field } from './field.component';
+import type { AddressTemplate, FormValues } from '../patient-registration.types';
+import { type Resources, ResourcesContext } from '../../offline.resources';
+import { PatientRegistrationContext } from '../patient-registration-context';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(),
+}));
+
+const predefinedAddressTemplate = {
+  uuid: 'test-address-template-uuid',
+  property: 'layout.address.format',
+  description: 'Test Address Template',
+  display:
+    'Layout - Address Format = <org.openmrs.layout.address.AddressTemplate>\n     <nameMappings class="properties">\n       <property name="postalCode" value="Location.postalCode"/>\n       <property name="address2" value="Location.address2"/>\n       <property name="address1" value="Location.address1"/>\n       <property name="country" value="Location.country"/>\n       <property name="stateProvince" value="Location.stateProvince"/>\n       <property name="cityVillage" value="Location.cityVillage"/>\n     </nameMappings>\n     <sizeMappings class="properties">\n       <property name="postalCode" value="10"/>\n       <property name="address2" value="40"/>\n       <property name="address1" value="40"/>\n       <property name="country" value="10"/>\n       <property name="stateProvince" value="10"/>\n       <property name="cityVillage" value="10"/>\n     </sizeMappings>\n     <lineByLineFormat>\n       <string>address1</string>\n       <string>address2</string>\n       <string>cityVillage stateProvince country postalCode</string>\n     </lineByLineFormat>\n   </org.openmrs.layout.address.AddressTemplate>',
+  value:
+    '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
+};
+
+const mockedIdentifierTypes = [
+  {
+    fieldName: 'openMrsId',
+    format: '',
+    identifierSources: [
+      {
+        uuid: '8549f706-7e85-4c1d-9424-217d50a2988b',
+        name: 'Generator for OpenMRS ID',
+        description: 'Generator for OpenMRS ID',
+        baseCharacterSet: '0123456789ACDEFGHJKLMNPRTUVWXY',
+        prefix: '',
+      },
+    ],
+    isPrimary: true,
+    name: 'OpenMRS ID',
+    required: true,
+    uniquenessBehavior: 'UNIQUE' as const,
+    uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+  },
+  {
+    fieldName: 'idCard',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'ID Card',
+    required: false,
+    uniquenessBehavior: 'UNIQUE' as const,
+    uuid: 'b4143563-16cd-4439-b288-f83d61670fc8',
+  },
+  {
+    fieldName: 'legacyId',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Legacy ID',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '22348099-3873-459e-a32e-d93b17eda533',
+  },
+  {
+    fieldName: 'oldIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'Old Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d79403a-c2cc-11de-8d13-0010c6dffd0f',
+  },
+  {
+    fieldName: 'openMrsIdentificationNumber',
+    format: '',
+    identifierSources: [],
+    isPrimary: false,
+    name: 'OpenMRS Identification Number',
+    required: false,
+    uniquenessBehavior: null,
+    uuid: '8d793bee-c2cc-11de-8d13-0010c6dffd0f',
+  },
+];
+
+const mockResourcesContextValue: Resources = {
+  addressTemplate: predefinedAddressTemplate as unknown as AddressTemplate,
+  currentSession: {
+    authenticated: true,
+    sessionId: 'JSESSION',
+    currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+  },
+  relationshipTypes: [],
+  identifierTypes: [...mockedIdentifierTypes],
+};
+
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {} as FormValues,
+};
+
+describe('Field', () => {
+  let ContextWrapper;
+
+  beforeEach(() => {
+    ContextWrapper = ({ children }) => (
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={jest.fn()}>
+          <Form>
+            <PatientRegistrationContext.Provider value={initialContextValues}>
+              {children}
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render NameField component when name prop is "name"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        name: {
+          displayMiddleName: true,
+          unidentifiedPatient: true,
+          defaultUnknownGivenName: 'UNKNOWN',
+          defaultUnknownFamilyName: 'UNKNOWN',
+        },
+      },
+    }));
+
+    render(<Field name="name" />, { wrapper: ContextWrapper });
+
+    expect(screen.getByText('Full Name')).toBeInTheDocument();
+  });
+
+  it('should render GenderField component when name prop is "gender"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        gender: [
+          {
+            value: 'Male',
+            label: 'Male',
+            id: 'male',
+          },
+        ],
+      },
+    }));
+
+    render(<Field name="gender" />, { wrapper: ContextWrapper });
+
+    expect(screen.getByLabelText('Male')).toBeInTheDocument();
+  });
+
+  it('should render DobField component when name prop is "dob"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        dob: {
+          minAgeLimit: 0,
+          maxAgeLimit: 120,
+        },
+      },
+    }));
+    render(<Field name="dob" />, { wrapper: ContextWrapper });
+    expect(screen.getByText('Birth')).toBeInTheDocument();
+  });
+
+  it('should render AddressComponent component when name prop is "address"', () => {
+    jest.mock('./address/address-hierarchy.resource', () => ({
+      ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+      useOrderedAddressHierarchyLevels: jest.fn(),
+    }));
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: false,
+            useQuickSearch: false,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+
+    render(<Field name="address" />, { wrapper: ContextWrapper });
+
+    expect(screen.getByText('Address')).toBeInTheDocument();
+  });
+
+  it('should render Identifiers component when name prop is "id"', () => {
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      defaultPatientIdentifierTypes: ['OpenMRS ID'],
+    }));
+
+    const openmrsID = {
+      name: 'OpenMRS ID',
+      fieldName: 'openMrsId',
+      required: true,
+      uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+      format: null,
+      isPrimary: true,
+      identifierSources: [
+        {
+          uuid: '691eed12-c0f1-11e2-94be-8c13b969e334',
+          name: 'Generator 1 for OpenMRS ID',
+          autoGenerationOption: {
+            manualEntryEnabled: false,
+            automaticGenerationEnabled: true,
+          },
+        },
+        {
+          uuid: '01af8526-cea4-4175-aa90-340acb411771',
+          name: 'Generator 2 for OpenMRS ID',
+          autoGenerationOption: {
+            manualEntryEnabled: true,
+            automaticGenerationEnabled: true,
+          },
+        },
+      ],
+      identifierUuid: 'openmrs-identifier-uuid',
+      identifierTypeUuid: 'openmrs-id-identifier-type-uuid',
+      initialValue: '12345',
+      identifierValue: '12345',
+      identifierName: 'OpenMRS ID',
+      preferred: true,
+      selectedSource: {
+        uuid: 'openmrs-id-selected-source-uuid',
+        name: 'Generator 1 for OpenMRS ID',
+        autoGenerationOption: {
+          manualEntryEnabled: false,
+          automaticGenerationEnabled: true,
+        },
+      },
+      autoGenerationSource: null,
+    };
+
+    const updatedContextValues = {
+      currentPhoto: 'data:image/png;base64,1234567890',
+      identifierTypes: [],
+      inEditMode: false,
+      initialFormValues: { identifiers: { openmrsID } } as unknown as FormValues,
+      isOffline: false,
+      setCapturePhotoProps: jest.fn(),
+      setFieldValue: jest.fn(),
+      setInitialFormValues: jest.fn(),
+      validationSchema: null,
+      values: { identifiers: { openmrsID } } as unknown as FormValues,
+    };
+
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={jest.fn()}>
+          <Form>
+            <PatientRegistrationContext.Provider value={updatedContextValues}>
+              <Field name="id" />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByText('Identifiers')).toBeInTheDocument();
+  });
+
+  it('should return null and report an error for an invalid field name', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldDefinitions: [{ id: 'weight' }],
+    }));
+    let error = null;
+
+    try {
+      render(<Field name="invalidField" />);
+    } catch (err) {
+      error = err;
+    }
+
+    expect(error).toMatch(/Invalid field name 'invalidField'. Valid options are /);
+    expect(screen.queryByTestId('invalid-field')).not.toBeInTheDocument();
+
+    consoleError.mockRestore();
+  });
+});

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

@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import { RadioButton, RadioButtonGroup } from '@carbon/react';
+import styles from '../field.scss';
+import { useTranslation } from 'react-i18next';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { useField } from 'formik';
+import { type RegistrationConfig } from '../../../config-schema';
+import { useConfig } from '@openmrs/esm-framework';
+
+export const GenderField: React.FC = () => {
+  const { fieldConfigurations } = useConfig() as RegistrationConfig;
+  const { t } = useTranslation();
+  const [field, meta] = useField('gender');
+  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const fieldConfigs = fieldConfigurations?.gender;
+
+  const setGender = (gender: string) => {
+    setFieldValue('gender', gender);
+  };
+  /**
+   * DO NOT REMOVE THIS COMMENT HERE, ADDS TRANSLATION FOR SEX OPTIONS
+   * t('male', 'Male')
+   * t('female', 'Female')
+   * t('other', 'Other')
+   * t('unknown', 'Unknown')
+   */
+
+  return (
+    <div className={styles.halfWidthInDesktopView}>
+      <h4 className={styles.productiveHeading02Light}>{t('sexFieldLabelText', 'Sex')}</h4>
+      <div className={styles.sexField}>
+        <p className="cds--label">{t('genderLabelText', 'Sex')}</p>
+        <RadioButtonGroup name="gender" orientation="vertical" onChange={setGender} valueSelected={field.value}>
+          {fieldConfigs.map((option) => (
+            <RadioButton
+              key={option.label ?? option.value}
+              id={`gender-option-${option.value}`}
+              value={option.value}
+              labelText={t(option.label ?? option.value, option.label ?? option.value)}
+            />
+          ))}
+        </RadioButtonGroup>
+        {meta.touched && meta.error && (
+          <div className={styles.radioFieldError}>{t(meta.error, 'Gender is required')}</div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { render } from '@testing-library/react';
+import { GenderField } from './gender-field.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...(jest.requireActual('@openmrs/esm-framework') as any),
+  useConfig: jest.fn(() => ({
+    fieldConfigurations: {
+      gender: [
+        {
+          value: 'male',
+          label: 'Male',
+        },
+      ],
+      name: {
+        displayMiddleName: false,
+        unidentifiedPatient: false,
+        defaultUnknownGivenName: '',
+        defaultUnknownFamilyName: '',
+      },
+    },
+  })),
+}));
+
+jest.mock('react', () => ({
+  ...(jest.requireActual('react') as any),
+  useContext: jest.fn(() => ({
+    setFieldValue: jest.fn(),
+  })),
+}));
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as any),
+  useField: jest.fn(() => [{}, {}]),
+}));
+
+describe('GenderField', () => {
+  const renderComponent = () => {
+    return render(
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <GenderField />
+        </Form>
+      </Formik>,
+    );
+  };
+
+  it('has a label', () => {
+    expect(renderComponent().getAllByText('Sex')).toBeTruthy();
+  });
+
+  it('checks an option', async () => {
+    const user = userEvent.setup();
+    const component = renderComponent();
+    expect(component.getByLabelText('Male').getAttribute('value')).toBe('male');
+  });
+});

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

@@ -0,0 +1,144 @@
+import React, { useCallback, useContext, 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 IdentifierSelectionOverlay from './identifier-selection-overlay.component';
+import { IdentifierInput } from '../../input/custom-input/identifier/identifier-input.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import {
+  type FormValues,
+  type IdentifierSource,
+  type PatientIdentifierType,
+  type PatientIdentifierValue,
+} from '../../patient-registration.types';
+import { ResourcesContext } from '../../../offline.resources';
+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;
+  return {
+    selectedSource: identifierSource,
+    autoGeneration,
+    identifierValue: autoGeneration
+      ? 'auto-generated'
+      : identifierValue !== 'auto-generated'
+        ? identifierValue
+        : initialValue,
+  };
+}
+
+export function initializeIdentifier(identifierType: PatientIdentifierType, identifierProps): PatientIdentifierValue {
+  return {
+    identifierTypeUuid: identifierType.uuid,
+    identifierName: identifierType.name,
+    preferred: identifierType.isPrimary,
+    initialValue: '',
+    required: identifierType.isPrimary || identifierType.required,
+    ...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 } = useContext(ResourcesContext);
+  const isLoading = !identifierTypes;
+  const { values, setFieldValue, initialFormValues, isOffline } = useContext(PatientRegistrationContext);
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const [showIdentifierOverlay, setShowIdentifierOverlay] = useState(false);
+  const config = useConfig();
+  const { defaultPatientIdentifierTypes } = config;
+
+  useEffect(() => {
+    // Initialization
+    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] ?? {},
+          );
+        });
+      /*
+        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, values.identifiers, initializeIdentifier]);
+
+  const closeIdentifierSelectionOverlay = useCallback(
+    () => setShowIdentifierOverlay(false),
+    [setShowIdentifierOverlay],
+  );
+
+  if (isLoading && !isOffline) {
+    return (
+      <div data-testid="loading-skeleton" className={styles.halfWidthInDesktopView}>
+        <div className={styles.identifierLabelText}>
+          <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
+        </div>
+        <SkeletonText />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.halfWidthInDesktopView}>
+      <UserHasAccess privilege={['Get Identifier Types', 'Add Patient Identifiers']}>
+        <div className={styles.identifierLabelText}>
+          <h4 className={styles.productiveHeading02Light}>{t('idFieldLabelText', 'Identifiers')}</h4>
+          <Button
+            kind="ghost"
+            className={styles.setIDNumberButton}
+            onClick={() => setShowIdentifierOverlay(true)}
+            size={isDesktop(layout) ? 'sm' : 'md'}>
+            {t('configure', 'Configure')} <ArrowRight size={16} />
+          </Button>
+        </div>
+      </UserHasAccess>
+      <div>
+        {Object.entries(values.identifiers).map(([fieldName, identifier]) => (
+          <IdentifierInput key={fieldName} fieldName={fieldName} patientIdentifier={identifier} />
+        ))}
+        {showIdentifierOverlay && (
+          <IdentifierSelectionOverlay setFieldValue={setFieldValue} closeOverlay={closeIdentifierSelectionOverlay} />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { Identifiers } from './id-field.component';
+import { type Resources, ResourcesContext } from '../../../offline.resources';
+import { Form, Formik } from 'formik';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { openmrsID, mockedIdentifierTypes } from '__mocks__';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn().mockImplementation(() => ({
+    defaultPatientIdentifierTypes: ['OpenMRS ID'],
+  })),
+}));
+
+describe('Identifiers', () => {
+  const mockResourcesContextValue = {
+    addressTemplate: {},
+    currentSession: {
+      authenticated: true,
+      sessionId: 'JSESSION',
+      currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+    },
+    relationshipTypes: [],
+    identifierTypes: [...mockedIdentifierTypes],
+  } as Resources;
+
+  it('should render loading skeleton when identifier types are loading', () => {
+    render(
+      <ResourcesContext.Provider value={[]}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
+                setInitialFormValues: jest.fn(),
+                values: {
+                  identifiers: { openmrsID },
+                },
+              }}>
+              <Identifiers />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+    expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
+  });
+
+  it('should render identifier inputs when identifier types are loaded', () => {
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
+                setInitialFormValues: jest.fn(),
+                values: {
+                  identifiers: { openmrsID },
+                },
+              }}>
+              <Identifiers />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    expect(screen.getByText('Identifiers')).toBeInTheDocument();
+    const configureButton = screen.getByRole('button', { name: 'Configure' });
+    expect(configureButton).toBeInTheDocument();
+    expect(configureButton).toBeEnabled();
+  });
+
+  it('should open identifier selection overlay when "Configure" button is clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                initialFormValues: { identifiers: { ...mockedIdentifierTypes[0] } },
+                setInitialFormValues: jest.fn(),
+                values: {
+                  identifiers: { openmrsID },
+                },
+              }}>
+              <Identifiers />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    const configureButton = screen.getByRole('button', { name: 'Configure' });
+    await user.click(configureButton);
+
+    expect(screen.getByRole('button', { name: 'Close overlay' })).toBeInTheDocument();
+  });
+});