[MPDX-8363] Fix flaky suggested contact status tests

src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.test.tsx

@@ -20,6 +20,7 @@ import { dispatch } from 'src/lib/analytics';
 import theme from 'src/theme';
 import useTaskModal from '../../../../../hooks/useTaskModal';
 import { TaskModalEnum } from '../../TaskModal';
+import { ContactStatusQuery } from '../Inputs/SuggestedContactStatus/SuggestedContactStatus.generated';
 import { taskModalTests } from '../TaskModalTests';
 import TaskModalCompleteForm from './TaskModalCompleteForm';
 
@@ -76,9 +77,15 @@ const Components = ({ mocks = {}, taskOverrides, props }: ComponentsProps) => (
       <ThemeProvider theme={theme}>
         <GqlMockedProvider<{
           LoadConstant: LoadConstantsQuery;
+          ContactStatus: ContactStatusQuery;
         }>
           mocks={{
             LoadConstants: loadConstantsMockData,
+            ContactStatus: {
+              contact: {
+                status: null,
+              },
+            },
             ...mocks,
           }}
           onCall={mutationSpy}
@@ -127,7 +134,7 @@ describe('TaskModalCompleteForm', () => {
     });
 
     it("doesn't render suggested contact status when multiple contacts", async () => {
-      const { queryByText, findByRole } = render(
+      const { queryByRole, findByRole } = render(
         <Components
           taskOverrides={{ activityType: ActivityTypeEnum.AppointmentInPerson }}
         />,
@@ -142,15 +149,13 @@ describe('TaskModalCompleteForm', () => {
 
       await waitFor(() => {
         expect(
-          queryByText(
-            "Change the contact's status to: CONTACT_FOR_APPOINTMENT",
-          ),
+          queryByRole('checkbox', { name: /^Change the contact's status/ }),
         ).not.toBeInTheDocument();
       });
     });
 
     it('renders suggested status when single contact', async () => {
-      const { getByRole, getByText, findByRole } = render(
+      const { getByRole, findByRole } = render(
         <Components
           taskOverrides={{
             activityType: ActivityTypeEnum.AppointmentInPerson,
@@ -169,16 +174,15 @@ describe('TaskModalCompleteForm', () => {
         );
       });
 
-      await waitFor(() => {
-        expect(
-          getByText("Change the contact's status to:"),
-        ).toBeInTheDocument();
-        expect(getByText('Initiate for Appointment')).toBeInTheDocument();
-      });
+      expect(
+        await findByRole('checkbox', {
+          name: "Change the contact's status to: Initiate for Appointment",
+        }),
+      ).toBeInTheDocument();
     });
 
     it('does not render suggested status when the Phase Constant does not provide a suggested status', async () => {
-      const { getByRole, queryByText, findByRole } = render(
+      const { getByRole, queryByRole, findByRole } = render(
         <Components
           taskOverrides={{
             activityType: ActivityTypeEnum.InitiationEmail,
@@ -199,7 +203,7 @@ describe('TaskModalCompleteForm', () => {
 
       await waitFor(() => {
         expect(
-          queryByText("Change the contact's status to:"),
+          queryByRole('checkbox', { name: /^Change the contact's status/ }),
         ).not.toBeInTheDocument();
       });
     });
@@ -383,7 +387,7 @@ describe('TaskModalCompleteForm', () => {
 
   it('saves contacts new status', async () => {
     const completedAt = DateTime.local(2015, 1, 5, 1, 2).toISO();
-    const { findByRole, getByText, findByText } = render(
+    const { findByRole, getByText } = render(
       <Components
         taskOverrides={{
           activityType: ActivityTypeEnum.AppointmentInPerson,
@@ -400,8 +404,11 @@ describe('TaskModalCompleteForm', () => {
     userEvent.click(await findByRole('combobox', { name: 'Next Action' }));
     userEvent.click(await findByRole('option', { name: 'Thank You Note' }));
 
-    userEvent.click(await findByText("Change the contact's status to:"));
-    expect(getByText('Partner - Special')).toBeInTheDocument();
+    userEvent.click(
+      await findByRole('checkbox', {
+        name: "Change the contact's status to: Partner - Special",
+      }),
+    );
 
     userEvent.click(getByText('Save'));
     await waitFor(() =>

src/components/Task/Modal/Form/Inputs/SuggestedContactStatus/SuggestedContactStatus.graphql

@@ -1,5 +1,6 @@
 query ContactStatus($accountListId: ID!, $contactId: ID!) {
   contact(accountListId: $accountListId, id: $contactId) {
+    id
     status
   }
 }

src/components/Task/Modal/Form/Inputs/SuggestedContactStatus/SuggestedContactStatus.test.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from '@emotion/react';
 import { render, waitFor } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { LoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated';
 import { loadConstantsMockData } from 'src/components/Constants/LoadConstantsMock';
 import { StatusEnum } from 'src/graphql/types.generated';
 import i18n from 'src/lib/i18n';
@@ -11,6 +12,7 @@ import {
   FormikHandleChange,
   SuggestedContactStatus,
 } from './SuggestedContactStatus';
+import { ContactStatusQuery } from './SuggestedContactStatus.generated';
 
 const handleChange: FormikHandleChange = jest.fn();
 const accountListId = 'abc';
@@ -31,14 +33,15 @@ const Components = ({
 }: ComponentsProps) => (
   <ThemeProvider theme={theme}>
     <I18nextProvider i18n={i18n}>
-      <GqlMockedProvider
+      <GqlMockedProvider<{
+        LoadConstants: LoadConstantsQuery;
+        ContactStatus: ContactStatusQuery;
+      }>
         mocks={{
           LoadConstants: loadConstantsMockData,
           ContactStatus: {
-            data: {
-              contact: {
-                status: contactStatusQueryMock || null,
-              },
+            contact: {
+              status: contactStatusQueryMock || null,
             },
           },
         }}
@@ -59,7 +62,7 @@ const Components = ({
 
 describe('SuggestedContactStatus', () => {
   it("doesn't render suggested contact status when there are multiple contacts", async () => {
-    const { queryByText } = render(
+    const { queryByRole } = render(
       <Components
         suggestedContactStatus={StatusEnum.ContactForAppointment}
         contactIds={['contact-1', 'contact-2']}
@@ -68,14 +71,14 @@ describe('SuggestedContactStatus', () => {
     );
     await waitFor(() => {
       expect(
-        queryByText("Change the contact's status to:"),
+        queryByRole('checkbox', { name: /^Change the contact's status/ }),
       ).not.toBeInTheDocument();
     });
   });
 
   it("doesn't render suggested contact status when suggested status is the same as the current status", async () => {
     const sameStatus = StatusEnum.ContactForAppointment;
-    const { queryByText } = render(
+    const { queryByRole } = render(
       <Components
         suggestedContactStatus={sameStatus}
         contactIds={['contact-1']}
@@ -84,13 +87,13 @@ describe('SuggestedContactStatus', () => {
     );
     await waitFor(() => {
       expect(
-        queryByText("Change the contact's status to:"),
+        queryByRole('checkbox', { name: /^Change the contact's status/ }),
       ).not.toBeInTheDocument();
     });
   });
 
   it("doesn't render suggested contact status when the current contact is a Prayer, Special or Financial Partner", async () => {
-    const { queryByText } = render(
+    const { queryByRole } = render(
       <Components
         suggestedContactStatus={StatusEnum.ContactForAppointment}
         contactIds={['contact-1']}
@@ -99,35 +102,35 @@ describe('SuggestedContactStatus', () => {
     );
     await waitFor(() => {
       expect(
-        queryByText("Change the contact's status to:"),
+        queryByRole('checkbox', { name: /^Change the contact's status/ }),
       ).not.toBeInTheDocument();
     });
   });
 
   it('renders suggested status when single contact and checks contact status with gql call', async () => {
-    const { getByText } = render(
+    const { findByRole } = render(
       <Components
         suggestedContactStatus={StatusEnum.ContactForAppointment}
         contactIds={['contact-1']}
         contactStatusQueryMock={StatusEnum.NeverContacted}
       />,
     );
-    await waitFor(() => {
-      expect(mutationSpy).toHaveBeenCalledTimes(2);
+
+    await waitFor(() =>
       expect(mutationSpy).toHaveGraphqlOperation('ContactStatus', {
         accountListId: accountListId,
         contactId: 'contact-1',
-      });
-    });
-
-    await waitFor(
-      () => expect(getByText('Initiate for Appointment')).toBeInTheDocument(),
-      { timeout: 3000 },
+      }),
     );
+    expect(
+      await findByRole('checkbox', {
+        name: "Change the contact's status to: Initiate for Appointment",
+      }),
+    ).toBeInTheDocument();
   });
 
   it('does not send a ContactStatus graphql request when the current contacts status is provided', async () => {
-    const { getByText } = render(
+    const { findByRole } = render(
       <Components
         suggestedContactStatus={StatusEnum.ContactForAppointment}
         contactIds={['contact-1']}
@@ -136,23 +139,16 @@ describe('SuggestedContactStatus', () => {
       />,
     );
 
-    await waitFor(() => {
-      expect(mutationSpy).toHaveBeenCalledTimes(1);
-      expect(mutationSpy).toHaveGraphqlOperation('LoadConstants', {});
-    });
-    await waitFor(
-      () => {
-        expect(
-          getByText("Change the contact's status to:"),
-        ).toBeInTheDocument();
-        expect(getByText('Initiate for Appointment')).toBeInTheDocument();
-      },
-      { timeout: 3000 },
-    );
+    expect(
+      await findByRole('checkbox', {
+        name: "Change the contact's status to: Initiate for Appointment",
+      }),
+    ).toBeInTheDocument();
+    expect(mutationSpy).not.toHaveGraphqlOperation('ContactStatus');
   });
 
   it('renders suggested status when the contact has no status', async () => {
-    const { getByText } = render(
+    const { findByRole } = render(
       <Components
         suggestedContactStatus={StatusEnum.ContactForAppointment}
         contactIds={['contact-1']}
@@ -161,14 +157,10 @@ describe('SuggestedContactStatus', () => {
       />,
     );
 
-    await waitFor(
-      () => {
-        expect(
-          getByText("Change the contact's status to:"),
-        ).toBeInTheDocument();
-        expect(getByText('Initiate for Appointment')).toBeInTheDocument();
-      },
-      { timeout: 3000 },
-    );
+    expect(
+      await findByRole('checkbox', {
+        name: "Change the contact's status to: Initiate for Appointment",
+      }),
+    ).toBeInTheDocument();
   });
 });

src/components/Task/Modal/Form/Inputs/SuggestedContactStatus/SuggestedContactStatus.tsx

@@ -84,7 +84,7 @@ export const SuggestedContactStatus: React.FC<SuggestedContactStatusProps> = ({
               values={{
                 status: contactStatuses[suggestedContactStatus]?.translated,
               }}
-              components={{ italic: <i />, bold: <strong /> }}
+              components={{ bold: <strong /> }}
             />
           }
         />

src/hooks/useContactPartnershipStatuses.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useApiConstants } from 'src/components/Constants/UseApiConstants';
 import { PhaseEnum, StatusEnum } from 'src/graphql/types.generated';
@@ -50,19 +51,25 @@ export const useContactPartnershipStatuses = () => {
   //     translated: "Appointment Scheduled"
   //   }
   // }
-  const contactStatuses: ContactStatuses = phases
-    ? phases?.reduce((acc, phase) => {
-        phase?.contactStatuses?.map((status) => {
-          const statusName = statuses?.find(({ id }) => status === id)?.value;
-          acc[status] = {
-            name: statusName,
-            translated: getLocalizedContactStatus(t, status),
-            phase: phase.id,
-          };
-        });
-        return acc;
-      }, otherStatuses)
-    : otherStatuses;
+  const contactStatuses: ContactStatuses = useMemo(
+    () =>
+      phases
+        ? phases?.reduce((acc, phase) => {
+            phase?.contactStatuses?.map((status) => {
+              const statusName = statuses?.find(
+                ({ id }) => status === id,
+              )?.value;
+              acc[status] = {
+                name: statusName,
+                translated: getLocalizedContactStatus(t, status),
+                phase: phase.id,
+              };
+            });
+            return acc;
+          }, otherStatuses)
+        : otherStatuses,
+    [phases],
+  );
 
   //   statusMap: {
   //     "Never Ask": "NEVER_ASK",