Merge pull request #969 from CruGlobal/MPDX-7956-Fix-Email-Addresses-…

…Contact-Name-Link

MPDX-7956 Fix Email Addresses Contact Name Link

pages/accountLists/[accountListId]/tools/fixEmailAddresses/[[...contactId]].page.test.tsx

@@ -0,0 +1,104 @@
+import { useRouter } from 'next/router';
+import { ThemeProvider } from '@mui/material/styles';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ErgonoMockShape } from 'graphql-ergonomock';
+import { getSession } from 'next-auth/react';
+import { SnackbarProvider } from 'notistack';
+import { I18nextProvider } from 'react-i18next';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { mockInvalidEmailAddressesResponse } from 'src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks';
+import { InvalidAddressesQuery } from 'src/components/Tool/FixMailingAddresses/GetInvalidAddresses.generated';
+import i18n from 'src/lib/i18n';
+import theme from 'src/theme';
+import FixEmailAddressesPage from './[[...contactId]].page';
+
+jest.mock('next-auth/react');
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+jest.mock('src/lib/helpScout', () => ({
+  suggestArticles: jest.fn(),
+}));
+jest.mock('notistack', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('notistack'),
+  useSnackbar: () => {
+    return {
+      enqueueSnackbar: jest.fn(),
+    };
+  },
+}));
+
+const pushFn = jest.fn();
+const accountListId = 'account-list-1';
+const contactId = 'contactId';
+const session = {
+  expires: '2021-10-28T14:48:20.897Z',
+  user: {
+    email: 'Chair Library Bed',
+    image: null,
+    name: 'Dung Tapestry',
+    token: 'superLongJwtString',
+  },
+};
+const Components = ({
+  mockNodes = mockInvalidEmailAddressesResponse,
+}: {
+  mockNodes?: ErgonoMockShape[];
+}) => (
+  <ThemeProvider theme={theme}>
+    <TestRouter>
+      <GqlMockedProvider<{
+        InvalidAddresses: InvalidAddressesQuery;
+      }>
+        mocks={{
+          GetInvalidEmailAddresses: {
+            people: {
+              nodes: mockNodes,
+            },
+          },
+        }}
+      >
+        <I18nextProvider i18n={i18n}>
+          <SnackbarProvider>
+            <FixEmailAddressesPage />
+          </SnackbarProvider>
+        </I18nextProvider>
+      </GqlMockedProvider>
+    </TestRouter>
+  </ThemeProvider>
+);
+
+describe('FixEmailAddressesPage', () => {
+  beforeEach(() => {
+    (getSession as jest.Mock).mockResolvedValue(session);
+    (useRouter as jest.Mock).mockReturnValue({
+      query: {
+        accountListId,
+      },
+      isReady: true,
+      push: pushFn,
+    });
+  });
+
+  it('should open up contact details', async () => {
+    const { getByText, queryByTestId } = render(<Components />);
+    await waitFor(() =>
+      expect(queryByTestId('loading')).not.toBeInTheDocument(),
+    );
+
+    const contactName = getByText('Test Contact');
+
+    expect(contactName).toBeInTheDocument();
+    userEvent.click(contactName);
+
+    await waitFor(() => {
+      expect(pushFn).toHaveBeenCalledWith(
+        `/accountLists/${accountListId}/tools/fixEmailAddresses/${contactId}`,
+      );
+    });
+  });
+});

src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.test.tsx

@@ -10,6 +10,7 @@ import { FixEmailAddressPerson } from './FixEmailAddressPerson';
 const testData = {
   name: 'Test Contact',
   id: 'testid',
+  contactId: 'contactTestId',
   emails: [
     {
       source: 'DonorHub',
@@ -43,6 +44,7 @@ describe('FixEmailAddresses-Contact', () => {
             name={testData.name}
             key={testData.name}
             personId={testData.id}
+            contactId={testData.contactId}
             emails={testData.emails}
             handleChange={handleChangeMock}
             handleDelete={handleDeleteModalOpenMock}
@@ -77,6 +79,7 @@ describe('FixEmailAddresses-Contact', () => {
             name={testData.name}
             key={testData.name}
             personId={testData.id}
+            contactId={testData.contactId}
             emails={testData.emails}
             handleChange={handleChangeMock}
             handleDelete={handleDeleteModalOpenMock}

src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.tsx

@@ -96,6 +96,7 @@ interface FixEmailAddressPersonProps {
   emails: EmailAddressData[];
   personId: string;
   toDelete: PersonEmailAddressInput[];
+  contactId: string;
   handleChange: (
     personId: string,
     numberIndex: number,
@@ -111,12 +112,11 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
   name,
   emails,
   personId,
+  contactId,
   handleChange,
   handleDelete,
   handleAdd,
   handleChangePrimary,
-  // Remove below line when function is being used.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   setContactFocus,
 }) => {
   const { t } = useTranslation();
@@ -140,10 +140,7 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
   };
 
   const handleContactNameClick = () => {
-    // This currently doesn't work as we need to add the contactId onto the person graphQL endpoint.
-    // I've asked Andrew to add it here: https://cru-main.slack.com/archives/CG47BDCG6/p1718721024211409
-    // You'll need that to run the below function
-    // setContactFocus(id);
+    setContactFocus(contactId);
   };
 
   return (