Update type for Address form.

apps/modernization-ui/src/apps/patient/add/extended/AddPatientExtendedForm.tsx

@@ -1,5 +1,4 @@
-import { AdministrativeEntry, PhoneEmailEntry } from 'apps/patient/data/entry';
-import { AddressFields } from 'apps/patient/profile/addresses/AddressEntry';
+import { AddressEntry, AdministrativeEntry, PhoneEmailEntry } from 'apps/patient/data/entry';
 import { NameEntry } from 'apps/patient/profile/names/NameEntry';
 import { RaceEntry } from 'apps/patient/profile/race/RaceEntry';
 import { internalizeDate } from 'date';
@@ -16,7 +15,7 @@ import styles from './add-patient-extended-form.module.scss';
 // Once all sections have been updated with proper types this will be removed
 type ExtendedPatientCreationForm = {
     administrative: AdministrativeEntry;
-    address: AddressFields[];
+    address: AddressEntry[];
     phone: PhoneEmailEntry[];
     race: RaceEntry[];
     name: NameEntry[];

apps/modernization-ui/src/apps/patient/add/extended/inputs/address/AddressMultiEntry.tsx

@@ -1,48 +1,44 @@
-import { AddressFields } from 'apps/patient/profile/addresses/AddressEntry';
-import { AddressEntryFields } from 'apps/patient/profile/addresses/AddressEntryFields';
+import { AddressEntry } from 'apps/patient/data/entry';
 import { internalizeDate } from 'date';
 import { MultiValueEntry } from 'design-system/entry/multi-value/MultiValueEntry';
 import { Column } from 'design-system/table';
 import { AddressView } from './AddressView';
-import { usePatientAddressCodedValues } from 'apps/patient/profile/addresses/usePatientAddressCodedValues';
-import { useLocationCodedValues } from 'location';
+import { AddressEntryFields } from 'apps/patient/data/address/AddressEntryFields';
 
-const defaultValue: AddressFields = {
+const defaultValue: AddressEntry = {
     asOf: internalizeDate(new Date()),
-    type: '',
-    use: '',
+    type: { name: '', value: '' },
+    use: { name: '', value: '' },
     address1: '',
     address2: '',
     city: '',
-    state: '',
+    state: { name: '', value: '' },
     zipcode: '',
-    county: '',
-    country: '',
+    county: { name: '', value: '' },
+    country: { name: '', value: '' },
     censusTract: '',
     comment: ''
 };
 
 type Props = {
-    onChange: (data: AddressFields[]) => void;
+    onChange: (data: AddressEntry[]) => void;
     isDirty: (isDirty: boolean) => void;
 };
 export const AddressMultiEntry = ({ onChange, isDirty }: Props) => {
-    const coded = usePatientAddressCodedValues();
-    const location = useLocationCodedValues();
     const renderForm = () => <AddressEntryFields />;
-    const renderView = (entry: AddressFields) => <AddressView entry={entry} />;
+    const renderView = (entry: AddressEntry) => <AddressView entry={entry} />;
 
-    const columns: Column<AddressFields>[] = [
+    const columns: Column<AddressEntry>[] = [
         { id: 'addressAsOf', name: 'As of', render: (v) => v.asOf },
-        { id: 'addressType', name: 'Type', render: (v) => coded.types.find((t) => t.value === v.type)?.name },
+        { id: 'addressType', name: 'Type', render: (v) => v.type.name },
         { id: 'address', name: 'Address', render: (v) => v.address1 },
         { id: 'city', name: 'City', render: (v) => v.city },
-        { id: 'state', name: 'State', render: (v) => location.states.all.find((s) => s.value === v.state)?.name },
+        { id: 'state', name: 'State', render: (v) => v.state?.name },
         { id: 'zip', name: 'Zip', render: (v) => v.zipcode }
     ];
 
     return (
-        <MultiValueEntry<AddressFields>
+        <MultiValueEntry<AddressEntry>
             id="section-Address"
             title="Address"
             defaultValues={defaultValue}

apps/modernization-ui/src/apps/patient/add/extended/inputs/address/AddressView.spec.tsx

@@ -1,41 +1,18 @@
 import { render } from '@testing-library/react';
+import { AddressEntry } from 'apps/patient/data/entry';
 import { AddressView } from './AddressView';
-import { AddressFields } from 'apps/patient/profile/addresses/AddressEntry';
 
-const mockPatientAddressCodedValues = {
-    types: [{ name: 'House', value: 'H' }],
-    uses: [{ name: 'Home', value: 'HM' }]
-};
-
-jest.mock('apps/patient/profile/addresses/usePatientAddressCodedValues', () => ({
-    usePatientAddressCodedValues: () => mockPatientAddressCodedValues
-}));
-
-const mockLocationCodedValues = {
-    states: {
-        all: [{ name: 'StateName', value: '1' }]
-    },
-    counties: {
-        byState: (state: string) => [{ name: 'CountyName', value: '2' }]
-    },
-    countries: [{ name: 'CountryName', value: '3' }]
-};
-
-jest.mock('location/useLocationCodedValues', () => ({
-    useLocationCodedValues: () => mockLocationCodedValues
-}));
-
-const entry: AddressFields = {
+const entry: AddressEntry = {
     asOf: '12/25/2020',
-    type: 'H',
-    use: 'HM',
+    type: { name: 'House', value: 'H' },
+    use: { name: 'Home', value: 'HM' },
     address1: '123 main st',
     address2: '2nd floor',
     city: 'city',
-    state: '1',
+    state: { name: 'StateName', value: '1' },
     zipcode: '12345',
-    county: '2',
-    country: '3',
+    county: { name: 'CountyName', value: '2' },
+    country: { name: 'CountryName', value: '3' },
     censusTract: '22222',
     comment: 'comment'
 };

apps/modernization-ui/src/apps/patient/add/extended/inputs/address/AddressView.tsx

@@ -1,29 +1,23 @@
-import { AddressFields } from 'apps/patient/profile/addresses/AddressEntry';
-import { usePatientAddressCodedValues } from 'apps/patient/profile/addresses/usePatientAddressCodedValues';
+import { AddressEntry } from 'apps/patient/data/entry';
 import { DataDisplay } from 'design-system/data-display/DataDisplay';
-import { useLocationCodedValues } from 'location';
 
 type Props = {
-    entry: AddressFields;
+    entry: AddressEntry;
 };
 export const AddressView = ({ entry }: Props) => {
-    const coded = usePatientAddressCodedValues();
-    const location = useLocationCodedValues();
-    const counties = location.counties.byState(entry.state ?? '');
-
     return (
         <>
             <DataDisplay title="Address as of" value={entry.asOf} required />
-            <DataDisplay title="Type" value={coded.types.find((e) => e.value === entry.type)?.name} required />
-            <DataDisplay title="Use" value={coded.uses.find((e) => e.value === entry.use)?.name} required />
+            <DataDisplay title="Type" value={entry.type.name} required />
+            <DataDisplay title="Use" value={entry.use.name} required />
             <DataDisplay title="Street address 1" value={entry.address1} />
             <DataDisplay title="Street address 2" value={entry.address2} />
             <DataDisplay title="City" value={entry.city} />
-            <DataDisplay title="State" value={location.states.all.find((s) => s.value === entry.state)?.name} />
+            <DataDisplay title="State" value={entry.state?.name} />
             <DataDisplay title="Zip" value={entry.zipcode} />
-            <DataDisplay title="County" value={counties.find((c) => c.value === entry.county)?.name} />
+            <DataDisplay title="County" value={entry.county?.name} />
             <DataDisplay title="Census tract" value={entry.censusTract} />
-            <DataDisplay title="Country" value={location.countries.find((c) => c.value === entry.country)?.name} />
+            <DataDisplay title="Country" value={entry.country?.name} />
             <DataDisplay title="Address comments" value={entry.comment} />
         </>
     );

apps/modernization-ui/src/apps/patient/data/address/AddressEntryFields.spec.tsx

@@ -0,0 +1,149 @@
+import { fireEvent, render, waitFor, screen } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-dom/test-utils';
+import { FormProvider, useForm } from 'react-hook-form';
+import { AddressEntry } from '../entry';
+import { AddressEntryFields } from './AddressEntryFields';
+import userEvent from '@testing-library/user-event';
+
+const mockPatientAddressCodedValues = {
+    types: [{ name: 'House', value: 'H' }],
+    uses: [{ name: 'Home', value: 'HM' }]
+};
+
+jest.mock('apps/patient/profile/addresses/usePatientAddressCodedValues', () => ({
+    usePatientAddressCodedValues: () => mockPatientAddressCodedValues
+}));
+
+const mockLocationCodedValues = {
+    states: {
+        all: [{ name: 'StateName', value: '1' }]
+    },
+    counties: {
+        byState: (state: string) => [{ name: 'CountyName', value: '2' }]
+    },
+    countries: [{ name: 'CountryName', value: '3' }]
+};
+
+jest.mock('location/useLocationCodedValues', () => ({
+    useLocationCodedValues: () => mockLocationCodedValues
+}));
+
+const form = renderHook(() =>
+    useForm<AddressEntry>({
+        mode: 'onBlur',
+        defaultValues: {
+            asOf: undefined,
+            type: undefined,
+            use: undefined,
+            address1: '',
+            address2: '',
+            city: '',
+            state: undefined,
+            zipcode: '',
+            county: undefined,
+            country: undefined,
+            censusTract: '',
+            comment: ''
+        }
+    })
+).result.current;
+
+describe('PhoneEmailEntryFields', () => {
+    it('should render the proper labels', () => {
+        const { getByLabelText } = render(
+            <FormProvider {...form}>
+                <AddressEntryFields />
+            </FormProvider>
+        );
+
+        expect(getByLabelText('Address as of')).toBeInTheDocument();
+        expect(getByLabelText('Type')).toBeInTheDocument();
+        expect(getByLabelText('Use')).toBeInTheDocument();
+        expect(getByLabelText('Street address 1')).toBeInTheDocument();
+        expect(getByLabelText('Street address 2')).toBeInTheDocument();
+        expect(getByLabelText('City')).toBeInTheDocument();
+        expect(getByLabelText('State')).toBeInTheDocument();
+        expect(getByLabelText('Zip')).toBeInTheDocument();
+        expect(getByLabelText('County')).toBeInTheDocument();
+        expect(getByLabelText('Census tract')).toBeInTheDocument();
+        expect(getByLabelText('Country')).toBeInTheDocument();
+        expect(getByLabelText('Address comments')).toBeInTheDocument();
+    });
+
+    it('should require type', async () => {
+        const { getByLabelText, getByText } = render(
+            <FormProvider {...form}>
+                <AddressEntryFields />
+            </FormProvider>
+        );
+
+        const typeInput = getByLabelText('Type');
+        act(() => {
+            fireEvent.blur(typeInput);
+        });
+        await waitFor(() => {
+            expect(getByText('Type is required.')).toBeInTheDocument();
+        });
+    });
+
+    it('should require use', async () => {
+        const { getByLabelText, getByText } = render(
+            <FormProvider {...form}>
+                <AddressEntryFields />
+            </FormProvider>
+        );
+
+        const useInput = getByLabelText('Use');
+        act(() => {
+            fireEvent.blur(useInput);
+        });
+        await waitFor(() => {
+            expect(getByText('Use is required.')).toBeInTheDocument();
+        });
+    });
+
+    it('should require as of', async () => {
+        const { getByLabelText, getByText } = render(
+            <FormProvider {...form}>
+                <AddressEntryFields />
+            </FormProvider>
+        );
+
+        const asOf = getByLabelText('Address as of');
+        act(() => {
+            fireEvent.blur(asOf);
+        });
+        await waitFor(() => {
+            expect(getByText('As of date is required.')).toBeInTheDocument();
+        });
+    });
+
+    it('should be valid with as of, type, and use', async () => {
+        const { getByLabelText } = render(
+            <FormProvider {...form}>
+                <AddressEntryFields />
+            </FormProvider>
+        );
+
+        const asOf = getByLabelText('Address as of');
+        const type = getByLabelText('Type');
+        const use = getByLabelText('Use');
+        await screen.findByText('Use');
+
+        act(() => {
+            userEvent.paste(asOf, '01/20/2020');
+            fireEvent.blur(asOf);
+            userEvent.selectOptions(use, 'HM');
+            fireEvent.blur(use);
+            userEvent.selectOptions(type, 'H');
+            fireEvent.blur(type);
+        });
+
+        await waitFor(() => {
+            expect(form.getFieldState('asOf').invalid).toBeFalsy();
+            expect(form.getFieldState('type').invalid).toBeFalsy();
+            expect(form.getFieldState('use').invalid).toBeFalsy();
+        });
+    });
+});