Fix inline email address editing

CruGlobal · Jul 19, 2024 · 17b3df4 · 17b3df4
1 parent 73a395c
commit 17b3df4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.test.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.test.tsx
@@ -6,13 +6,14 @@ import { DateTime } from 'luxon';
 import TestWrapper from '__tests__/util/TestWrapper';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { render, waitFor } from '__tests__/util/testingLibraryReactMock';
+import { PersonEmailAddressInput } from 'src/graphql/types.generated';
 import theme from '../../../theme';
 import { EmailAddressesMutation } from './AddEmailAddress.generated';
 import {
   FixEmailAddressPerson,
   FixEmailAddressPersonProps,
 } from './FixEmailAddressPerson';
-import { EmailAddressData } from './FixEmailAddresses';
+import { EmailAddressData, PersonEmailAddresses } from './FixEmailAddresses';
 import { GetInvalidEmailAddressesQuery } from './FixEmailAddresses.generated';
 import { mockInvalidEmailAddressesResponse } from './FixEmailAddressesMocks';
 
@@ -48,6 +49,14 @@ const TestComponent = ({ mocks }: { mocks: ApolloErgonoMockMap }) => {
   const handleChangeMock = jest.fn();
   const handleDeleteModalOpenMock = jest.fn();
   const handleChangePrimaryMock = jest.fn();
+  const toDelete = [] as PersonEmailAddressInput[];
+  const dataState = {
+    id: {
+      emailAddresses: testData.emailAddresses as EmailAddressData[],
+      toDelete,
+    },
+  } as { [key: string]: PersonEmailAddresses };
+
   return (
     <ThemeProvider theme={theme}>
       <TestWrapper>
@@ -58,10 +67,11 @@ const TestComponent = ({ mocks }: { mocks: ApolloErgonoMockMap }) => {
           mocks={mocks}
         >
           <FixEmailAddressPerson
-            toDelete={[]}
+            toDelete={toDelete}
             name={testData.name}
             key={testData.name}
             personId={testData.personId}
+            dataState={dataState}
             contactId={testData.contactId}
             emailAddresses={testData.emailAddresses}
             handleChange={handleChangeMock}

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.tsx
@@ -23,7 +23,7 @@ import { dateFormatShort } from 'src/lib/intlFormat';
 import theme from '../../../theme';
 import { ConfirmButtonIcon } from '../ConfirmButtonIcon';
 import EmailValidationForm from './EmailValidationForm';
-import { EmailAddressData } from './FixEmailAddresses';
+import { EmailAddressData, PersonEmailAddresses } from './FixEmailAddresses';
 
 const PersonCard = styled(Box)(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
@@ -96,6 +96,7 @@ export interface FixEmailAddressPersonProps {
   name: string;
   emailAddresses?: EmailAddressData[];
   personId: string;
+  dataState: { [key: string]: PersonEmailAddresses };
   toDelete: PersonEmailAddressInput[];
   contactId: string;
   handleChange: (
@@ -112,6 +113,7 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
   name,
   emailAddresses,
   personId,
+  dataState,
   contactId,
   handleChange,
   handleDelete,
@@ -130,7 +132,7 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
         personId: personId,
         isPrimary: email.primary,
       })) || [],
-    [emailAddresses],
+    [emailAddresses, dataState],
   );
 
   const handleContactNameClick = () => {

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx
@@ -273,17 +273,16 @@ describe('FixPhoneNumbers-Home', () => {
     ).toBeInTheDocument();
   });
 
-  //TODO: Fix during MPDX-7946
-  it.skip('should modify first email of first contact', async () => {
+  it('should modify first email of first contact', async () => {
     const { getByTestId } = render(<Components />);
     await waitFor(() => {
       expect(getByTestId('textfield-testid-0')).toBeInTheDocument();
     });
-    const firstInput = getByTestId('textfield-testid-0') as HTMLInputElement;
+    const firstInput = getByTestId('textfield-testid-0');
 
-    expect(firstInput.value).toBe('[email protected]');
+    expect(firstInput).toHaveValue('[email protected]');
     userEvent.type(firstInput, '123');
-    expect(firstInput.value).toBe('[email protected]');
+    expect(firstInput).toHaveValue('[email protected]');
   });
 
   describe('setContactFocus()', () => {

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
@@ -104,7 +104,7 @@ export interface EmailAddressData {
   destroy?: boolean;
 }
 
-interface PersonEmailAddresses {
+export interface PersonEmailAddresses {
   emailAddresses: EmailAddressData[];
   toDelete: PersonEmailAddressInput[];
 }
@@ -279,6 +279,7 @@ export const FixEmailAddresses: React.FC<FixEmailAddressesProps> = ({
                     name={`${person.firstName} ${person.lastName}`}
                     key={person.id}
                     personId={person.id}
+                    dataState={dataState}
                     emailAddresses={dataState[person.id]?.emailAddresses}
                     toDelete={dataState[person.id]?.toDelete}
                     contactId={person.contactId}