@ampath/esm-patient-registration-app 6.0.1-pre.98 → 9.2.0-next.12

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

@@ -0,0 +1,140 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
+import { Formik, Form, useFormikContext } from 'formik';
+import { renderWithContext } from 'tools';
+import { type Resources } from '../../../offline.resources';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { useAddressHierarchy, useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { mockedAddressTemplate, mockedAddressOptions, mockedOrderedFields } from '__mocks__';
+import { ResourcesContextProvider } from '../../../resources-context';
+import AddressSearchComponent from './address-search.component';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+const mockUseAddressHierarchy = jest.mocked(useAddressHierarchy);
+const mockUseOrderedAddressHierarchyLevels = jest.mocked(useOrderedAddressHierarchyLevels);
+const mockUseFormikContext = useFormikContext as jest.Mock;
+
+jest.mock('./address-hierarchy.resource', () => ({
+  ...(jest.requireActual('./address-hierarchy.resource') as jest.Mock),
+  useAddressHierarchy: jest.fn(),
+  useOrderedAddressHierarchyLevels: jest.fn(),
+}));
+
+jest.mock('../../patient-registration.resource', () => ({
+  ...(jest.requireActual('../../../patient-registration.resource') as jest.Mock),
+  useAddressHierarchy: jest.fn(),
+}));
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as jest.Mock),
+  useFormikContext: jest.fn(() => ({})),
+}));
+
+const allFields = mockedAddressTemplate.lines
+  .flat()
+  .filter((field) => field.isToken === 'IS_ADDR_TOKEN')
+  .map(({ codeName, displayText }) => ({
+    id: codeName,
+    name: codeName,
+    label: displayText,
+  }));
+const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
+allFields.sort((existingField1, existingField2) => orderMap[existingField1.name] - orderMap[existingField2.name]);
+
+async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
+  const mockResourcesContextValue = { addressTemplate } as unknown as Resources;
+
+  await renderWithContext(
+    <Formik initialValues={{}} onSubmit={null}>
+      <Form>
+        <PatientRegistrationContextProvider value={{ setFieldValue: jest.fn() } as any}>
+          <AddressSearchComponent addressLayout={allFields} />
+        </PatientRegistrationContextProvider>
+      </Form>
+    </Formik>,
+    ResourcesContextProvider,
+    mockResourcesContextValue,
+  );
+}
+
+const setFieldValue = jest.fn();
+
+describe('Testing address search bar', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: true,
+            searchAddressByLevel: false,
+          },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+    mockUseOrderedAddressHierarchyLevels.mockReturnValue({
+      orderedFields: mockedOrderedFields,
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    });
+    mockUseFormikContext.mockReturnValue({
+      setFieldValue,
+    });
+  });
+
+  it('should render the search bar', () => {
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: [],
+      error: null,
+      isLoading: false,
+    });
+
+    renderAddressHierarchy();
+
+    const searchbox = screen.getByRole('searchbox');
+    expect(searchbox).toBeInTheDocument();
+
+    const ul = screen.queryByRole('list');
+    expect(ul).not.toBeInTheDocument();
+  });
+
+  it("should render only the results for the search term matched address' parents", async () => {
+    const user = userEvent.setup();
+
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: mockedAddressOptions,
+      error: null,
+      isLoading: false,
+    });
+
+    renderAddressHierarchy();
+
+    const searchString = 'nea';
+    const separator = ' > ';
+    const options: Set<string> = new Set();
+
+    mockedAddressOptions.forEach((address) => {
+      const values = address.split(separator);
+      values.forEach((val, index) => {
+        if (val.toLowerCase().includes(searchString.toLowerCase())) {
+          options.add(values.slice(0, index + 1).join(separator));
+        }
+      });
+    });
+
+    const addressOptions = [...options];
+    addressOptions.forEach(async (address) => {
+      const optionElement = screen.getByText(address);
+      expect(optionElement).toBeInTheDocument();
+      await user.click(optionElement);
+      const values = address.split(separator);
+      allFields.map(({ name }, index) => {
+        expect(setFieldValue).toHaveBeenCalledWith(`address.${name}`, values?.[index]);
+      });
+    });
+  });
+});

package/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { Field, useField } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, Layer, Select, SelectItem, SelectSkeleton, TextInput } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
+import { useConceptAnswers } from '../field.resource';
+import styles from '../field.scss';
+
+export const CauseOfDeathField: React.FC = () => {
+  const { t } = useTranslation();
+  const { fieldConfigurations, freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
+  const [deathCause, deathCauseMeta] = useField('deathCause');
+
+  const conceptUuid = fieldConfigurations?.causeOfDeath?.conceptUuid;
+  const required = fieldConfigurations?.causeOfDeath?.required;
+
+  const {
+    data: conceptAnswers,
+    isLoading: isLoadingConceptAnswers,
+    error: errorLoadingConceptAnswers,
+  } = useConceptAnswers(conceptUuid);
+
+  const answers = useMemo(() => {
+    if (!isLoadingConceptAnswers && conceptAnswers) {
+      return conceptAnswers.map((answer) => ({ ...answer, label: answer.display }));
+    }
+    return [];
+  }, [conceptAnswers, isLoadingConceptAnswers]);
+
+  if (isLoadingConceptAnswers) {
+    return (
+      <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+        <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of death')}</h4>
+        <SelectSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <h4 className={styles.productiveHeading02Light}>{t('causeOfDeathInputLabel', 'Cause of death')}</h4>
+      {errorLoadingConceptAnswers || !conceptUuid ? (
+        <InlineNotification
+          hideCloseButton
+          kind="error"
+          title={t('errorFetchingCodedCausesOfDeath', 'Error fetching coded causes of death')}
+          subtitle={t('refreshOrContactAdmin', 'Try refreshing the page or contact your system administrator')}
+        />
+      ) : (
+        <>
+          <Field name="deathCause">
+            {({ field, form: { touched, errors }, meta }) => {
+              return (
+                <Layer>
+                  <Select
+                    {...field}
+                    id="deathCause"
+                    invalid={errors.deathCause && touched.deathCause}
+                    invalidText={errors.deathCause?.message}
+                    labelText={t('causeOfDeathInputLabel', 'Cause of Death')}
+                    name="deathCause"
+                    required={required}>
+                    <SelectItem id="empty-default-option" value={null} text={t('selectAnOption', 'Select an option')} />
+                    {answers.map((answer) => (
+                      <SelectItem id={answer.uuid} key={answer.uuid} text={answer.label} value={answer.uuid} />
+                    ))}
+                  </Select>
+                </Layer>
+              );
+            }}
+          </Field>
+          {deathCause.value === freeTextFieldConceptUuid && (
+            <div className={styles.nonCodedCauseOfDeath}>
+              <Field name="nonCodedCauseOfDeath">
+                {({ field, form: { touched, errors }, meta }) => {
+                  return (
+                    <Layer>
+                      <TextInput
+                        {...field}
+                        id="nonCodedCauseOfDeath"
+                        invalid={errors?.nonCodedCauseOfDeath && touched.nonCodedCauseOfDeath}
+                        invalidText={errors?.nonCodedCauseOfDeath?.message}
+                        labelText={t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
+                        placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
+                      />
+                    </Layer>
+                  );
+                }}
+              </Field>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -1,24 +1,18 @@
-import { useConfig } from '@openmrs/esm-framework';
 import React from 'react';
-import { type RegistrationConfig } from '../../config-schema';
+import { useConfig } from '@openmrs/esm-framework';
 import { AddressField } from './address/custom-address-field.component';
 import { ObsField } from './obs/obs-field.component';
 import { PersonAttributeField } from './person-attributes/person-attribute-field.component';
-import { useField } from 'formik';
+import { type RegistrationConfig } from '../../config-schema';
 
 export interface CustomFieldProps {
   name: string;
 }
 
 export function CustomField({ name }: CustomFieldProps) {
-  const config = useConfig() as RegistrationConfig;
+  const config = useConfig<RegistrationConfig>();
   const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
 
-  const [{ value }] = useField(`attributes.${fieldDefinition.showWhenExpression?.field}`);
-  if (fieldDefinition.showWhenExpression && value !== fieldDefinition.showWhenExpression.value) {
-    return null;
-  }
-
   if (fieldDefinition.type === 'person attribute') {
     return <PersonAttributeField fieldDefinition={fieldDefinition} />;
   } else if (fieldDefinition.type === 'obs') {

package/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { Layer, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
+import type { FormValues } from '../../patient-registration.types';
+import styles from '../field.scss';
+
+export const DateAndTimeOfDeathField: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={classNames(styles.dodField, styles.halfWidthInDesktopView)}>
+      <h4 className={styles.productiveHeading02Light}>{t('deathDateInputLabel', 'Date of Death')}</h4>
+      <span>
+        <DeathDateField />
+        <DeathTimeField />
+      </span>
+    </div>
+  );
+};
+
+function DeathDateField() {
+  const { values, setFieldValue } = usePatientRegistrationContext();
+  const [deathDate, deathDateMeta] = useField<keyof FormValues>('deathDate');
+  const { t } = useTranslation();
+  const today = dayjs().hour(23).minute(59).second(59).toDate();
+  const onDateChange = useCallback(
+    (selectedDate: Date) => {
+      setFieldValue(
+        'deathDate',
+        selectedDate ? dayjs(selectedDate).hour(0).minute(0).second(0).millisecond(0).toDate() : undefined,
+      );
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <Layer>
+      <OpenmrsDatePicker
+        {...deathDate}
+        id="deathDate"
+        invalidText={t(deathDateMeta.error)}
+        invalid={!!(deathDateMeta.touched && deathDateMeta.error)}
+        isRequired={values.isDead}
+        labelText={t('deathDateInputLabel', 'Date of death')}
+        maxDate={today}
+        onChange={onDateChange}
+      />
+    </Layer>
+  );
+}
+
+function DeathTimeField() {
+  const { t } = useTranslation();
+  const [deathTimeField, deathTimeMeta] = useField<keyof FormValues>('deathTime');
+  const [deathTimeFormatField, deathTimeFormatMeta] = useField<keyof FormValues>('deathTimeFormat');
+
+  return (
+    <Layer>
+      <TimePicker
+        {...deathTimeField}
+        id="time-picker"
+        labelText={t('timeOfDeathInputLabel', 'Time of death (hh:mm)')}
+        className={styles.timeOfDeathField}
+        pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
+        invalid={!!(deathTimeMeta.touched && deathTimeMeta.error)}
+        invalidText={t(deathTimeMeta.error)}>
+        <TimePickerSelect
+          {...deathTimeFormatField}
+          id="time-format-picker"
+          aria-label={t('timeFormat', 'Time Format')}
+          invalid={!!deathTimeFormatMeta.touched && deathTimeFormatMeta.error}
+          invalidText={t(deathTimeFormatMeta.error)}>
+          <SelectItem value="AM" text="AM" />
+          <SelectItem value="PM" text="PM" />
+        </TimePickerSelect>
+      </TimePicker>
+    </Layer>
+  );
+}

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

@@ -1,10 +1,9 @@
-import React, { type ChangeEvent, useCallback, useContext } from 'react';
-import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
+import React, { type ChangeEvent, useCallback } from 'react';
+import { ContentSwitcher, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
-import { generateFormatting } from '../../date-util';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+import { usePatientRegistrationContext } from '../../patient-registration-context';
 import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
@@ -31,8 +30,7 @@ export const DobField: React.FC = () => {
   const [birthdate, birthdateMeta] = useField('birthdate');
   const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
   const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
-  const { setFieldValue } = useContext(PatientRegistrationContext);
-  const { format, placeHolder, dateFormat } = generateFormatting(['d', 'm', 'Y'], '/');
+  const { setFieldValue, setFieldTouched } = usePatientRegistrationContext();
   const today = new Date();
 
   const onToggle = useCallback(
@@ -41,15 +39,17 @@ export const DobField: React.FC = () => {
       setFieldValue('birthdate', '');
       setFieldValue('yearsEstimated', 0);
       setFieldValue('monthsEstimated', '');
+      setFieldTouched('birthdateEstimated', true, false);
     },
-    [setFieldValue],
+    [setFieldTouched, setFieldValue],
   );
 
   const onDateChange = useCallback(
     (birthdate: Date) => {
       setFieldValue('birthdate', birthdate);
+      setFieldTouched('birthdate', true, false);
     },
-    [setFieldValue],
+    [setFieldValue, setFieldTouched],
   );
 
   const onEstimatedYearsChange = useCallback(
@@ -82,7 +82,10 @@ export const DobField: React.FC = () => {
     setFieldValue('yearsEstimated', years);
     setFieldValue('monthsEstimated', months > 0 ? months : '');
     setFieldValue('birthdate', calcBirthdate(years, months, dateOfBirth));
-  }, [setFieldValue, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
+    setFieldTouched('yearsEstimated', true, false);
+    setFieldTouched('monthsEstimated', true, false);
+    setFieldTouched('birthdate', true, false);
+  }, [setFieldValue, setFieldTouched, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
 
   return (
     <div className={styles.halfWidthInDesktopView}>
@@ -90,7 +93,7 @@ export const DobField: React.FC = () => {
       {(allowEstimatedBirthDate || dobUnknown) && (
         <div className={styles.dobField}>
           <div className={styles.dobContentSwitcherLabel}>
-            <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+            <span className={styles.label01}>{t('dobToggleLabelText', 'Date of birth known?')}</span>
           </div>
           <ContentSwitcher onChange={onToggle} selectedIndex={dobUnknown ? 1 : 0}>
             <Switch name="known" text={t('yes', 'Yes')} />
@@ -103,56 +106,58 @@ export const DobField: React.FC = () => {
           <div className={styles.dobField}>
             <OpenmrsDatePicker
               id="birthdate"
+              data-testid="birthdate"
               {...birthdate}
-              dateFormat={dateFormat}
               onChange={onDateChange}
-              //maxDate={today}
-              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
-              invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-              invalidText={birthdateMeta.error && t(birthdateMeta.error)}
+              onBlur={() => setFieldTouched('birthdate', true, false)}
+              maxDate={today}
+              labelText={t('dateOfBirthLabelText', 'Date of birth')}
+              isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              invalidText={t(birthdateMeta.error)}
               value={birthdate.value}
-              carbonOptions={{
-                placeholder: placeHolder,
-              }}
             />
           </div>
         ) : (
           <div className={styles.grid}>
             <div className={styles.dobField}>
-              <Layer>
-                <TextInput
-                  id="yearsEstimated"
-                  type="number"
-                  name={yearsEstimated.name}
-                  onChange={onEstimatedYearsChange}
-                  labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
-                  invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
-                  invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
-                  value={yearsEstimated.value}
-                  min={0}
-                  required
-                  {...yearsEstimated}
-                  onBlur={updateBirthdate}
-                />
-              </Layer>
+              <TextInput
+                id="yearsEstimated"
+                type="number"
+                name={yearsEstimated.name}
+                onChange={onEstimatedYearsChange}
+                labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
+                invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
+                value={yearsEstimated.value}
+                min={0}
+                required
+                {...yearsEstimated}
+                onBlur={(e) => {
+                  yearsEstimated.onBlur(e);
+                  setFieldTouched('yearsEstimated', true, false);
+                  updateBirthdate();
+                }}
+              />
             </div>
             <div className={styles.dobField}>
-              <Layer>
-                <TextInput
-                  id="monthsEstimated"
-                  type="number"
-                  name={monthsEstimated.name}
-                  onChange={onEstimatedMonthsChange}
-                  labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
-                  invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
-                  invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
-                  value={monthsEstimated.value}
-                  min={0}
-                  {...monthsEstimated}
-                  required={!yearsEstimateMeta.value}
-                  onBlur={updateBirthdate}
-                />
-              </Layer>
+              <TextInput
+                id="monthsEstimated"
+                type="number"
+                name={monthsEstimated.name}
+                onChange={onEstimatedMonthsChange}
+                labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
+                invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
+                invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
+                value={monthsEstimated.value}
+                min={0}
+                {...monthsEstimated}
+                required={!yearsEstimateMeta.value}
+                onBlur={(e) => {
+                  monthsEstimated.onBlur(e);
+                  setFieldTouched('monthsEstimated', true, false);
+                  updateBirthdate();
+                }}
+              />
             </div>
           </div>
         )}

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { DobField } from './dob.component';
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+describe('Dob', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        dateOfBirth: {
+          allowEstimatedDateOfBirth: true,
+          useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
+
+  it('renders the fields in the birth section of the registration form', async () => {
+    render(
+      <Formik initialValues={{ birthdate: '' }} onSubmit={() => {}}>
+        <Form>
+          <PatientRegistrationContextProvider
+            value={{
+              identifierTypes: [],
+              values: initialFormValues,
+              validationSchema: null,
+              inEditMode: false,
+              setFieldValue: () => {},
+              setCapturePhotoProps: (value) => {},
+              setFieldTouched: () => {},
+              currentPhoto: '',
+              isOffline: false,
+              initialFormValues: initialFormValues,
+            }}>
+            <DobField />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByRole('heading', { name: /birth/i })).toBeInTheDocument();
+    expect(screen.getByText(/date of birth known?/i)).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /no/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /yes/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /yes/i })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: /no/i })).toHaveAttribute('aria-selected', 'false');
+    expect(screen.getByLabelText(/date of birth/i)).toBeInTheDocument();
+  });
+
+  it('typing in the date picker input sets the date of birth', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Formik initialValues={{ birthdate: '' }} onSubmit={() => {}}>
+        <Form>
+          <PatientRegistrationContextProvider
+            value={{
+              identifierTypes: [],
+              values: initialFormValues,
+              validationSchema: null,
+              inEditMode: false,
+              setFieldValue: () => {},
+              setCapturePhotoProps: (value) => {},
+              currentPhoto: '',
+              isOffline: false,
+              initialFormValues: initialFormValues,
+              setFieldTouched: () => {},
+            }}>
+            <DobField />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+    );
+
+    const dateOfBirthInput = screen.getByLabelText(/date of birth/i);
+    expect(dateOfBirthInput).toBeInTheDocument();
+    await user.clear(dateOfBirthInput);
+    await user.type(dateOfBirthInput, '10/10/2022');
+    // FIXME: Make the date input work
+    // expect(dateOfBirthInput).toHaveValue('10/10/2022');
+  });
+});

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

@@ -1,12 +1,14 @@
 import React from 'react';
-import { NameField } from './name/name-field.component';
-import { GenderField } from './gender/gender-field.component';
-import { Identifiers } from './id/id-field.component';
-import { DobField } from './dob/dob.component';
 import { reportError, useConfig } from '@openmrs/esm-framework';
 import { builtInFields, type RegistrationConfig } from '../../config-schema';
-import { CustomField } from './custom-field.component';
 import { AddressComponent } from './address/address-field.component';
+import { CauseOfDeathField } from './cause-of-death/cause-of-death.component';
+import { CustomField } from './custom-field.component';
+import { DateAndTimeOfDeathField } from './date-and-time-of-death/date-and-time-of-death.component';
+import { DobField } from './dob/dob.component';
+import { GenderField } from './gender/gender-field.component';
+import { Identifiers } from './id/id-field.component';
+import { NameField } from './name/name-field.component';
 import { PhoneField } from './phone/phone-field.component';
 
 export interface FieldProps {
@@ -14,7 +16,7 @@ export interface FieldProps {
 }
 
 export function Field({ name }: FieldProps) {
-  const config = useConfig() as RegistrationConfig;
+  const config = useConfig<RegistrationConfig>();
   if (
     !(builtInFields as ReadonlyArray<string>).includes(name) &&
     !config.fieldDefinitions.some((def) => def.id == name)
@@ -35,6 +37,10 @@ export function Field({ name }: FieldProps) {
       return <GenderField />;
     case 'dob':
       return <DobField />;
+    case 'dateAndTimeOfDeath':
+      return <DateAndTimeOfDeathField />;
+    case 'causeOfDeath':
+      return <CauseOfDeathField />;
     case 'address':
       return <AddressComponent />;
     case 'id':