From 0e6ff39150eb740bb3d4fef2d23481cbb6a28d44 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Thu, 3 Oct 2024 15:14:00 -0700
Subject: [PATCH 1/4] Add the users name on coaching list and detail

---
 .../CoachingDetail/CoachingDetail.tsx         |  6 +-
 .../Coaching/CoachingRow/CoachingRow.tsx      | 61 ++++++++------
 .../Coaching/LoadCoachingList.graphql         |  7 ++
 .../Coaching/LoadCoachingList.test.tsx        | 80 +------------------
 4 files changed, 48 insertions(+), 106 deletions(-)

diff --git a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
index 87a376503..c97a28d0c 100644
--- a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
+++ b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
@@ -171,7 +171,7 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
           <>
             <CoachingMainTitleContainer>
               <Box style={{ flexGrow: 1 }}>
-                <Typography variant="h5" m={1}>
+                <Typography variant="h5" mx={1}>
                   <Hidden mdUp>
                     <IconButton
                       onClick={() => setDrawerVisible(!drawerVisible)}
@@ -183,6 +183,10 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
                   </Hidden>
                   {accountListData?.name}
                 </Typography>
+                <Typography
+                  mx={1}
+                  variant="subtitle1"
+                >{`${accountListData?.users.nodes[0]?.firstName} ${accountListData?.users.nodes[0]?.lastName}`}</Typography>
               </Box>
               <Box style={{ flexGrow: 1 }}>
                 <AppealProgress
diff --git a/src/components/Coaching/CoachingRow/CoachingRow.tsx b/src/components/Coaching/CoachingRow/CoachingRow.tsx
index 1358bb227..bf1c332b8 100644
--- a/src/components/Coaching/CoachingRow/CoachingRow.tsx
+++ b/src/components/Coaching/CoachingRow/CoachingRow.tsx
@@ -1,7 +1,7 @@
 import NextLink from 'next/link';
 import React, { useState } from 'react';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { Box, Button, Link, Typography } from '@mui/material';
+import { Box, Button, Link, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useRequiredSession } from 'src/hooks/useRequiredSession';
@@ -22,10 +22,10 @@ const CoachingRowWrapper = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1),
 }));
 
-const CoachingNameText = styled(Typography)(({ theme }) => ({
-  margin: theme.spacing(2),
+const CoachingNameText = styled(Typography)(() => ({
+  margin: 0,
   cursor: 'pointer',
-  display: 'flex',
+  display: 'inline',
 }));
 
 export const CoachingRow: React.FC<Props> = ({
@@ -37,6 +37,7 @@ export const CoachingRow: React.FC<Props> = ({
     id,
     monthlyGoal,
     currency,
+    users,
     name,
     totalPledges,
     receivedPledges,
@@ -64,28 +65,36 @@ export const CoachingRow: React.FC<Props> = ({
   return (
     <>
       <CoachingRowWrapper role="listitem">
-        <CoachingNameText variant="h6" color="primary">
-          <NextLink
-            href={{
-              pathname: '/accountLists/[accountListId]/coaching/[coachingId]',
-              query: { accountListId: accountListId, coachingId: id },
-            }}
-            passHref
-          >
-            <Link flex={1} underline="hover">
-              {name}
-            </Link>
-          </NextLink>
-          <Button
-            onClick={(event) => {
-              event.preventDefault();
-              setConfirmingDelete(true);
-            }}
-            aria-label={t('Remove Access')}
-          >
-            <VisibilityOff />
-          </Button>
-        </CoachingNameText>
+        <Box display="flex">
+          <Box flex={1}>
+            <CoachingNameText variant="h6" color="primary">
+              <NextLink
+                href={{
+                  pathname:
+                    '/accountLists/[accountListId]/coaching/[coachingId]',
+                  query: { accountListId: accountListId, coachingId: id },
+                }}
+                passHref
+              >
+                <Link underline="hover">{name}</Link>
+              </NextLink>
+            </CoachingNameText>
+            <Typography variant="subtitle1">{`${users.nodes[0].firstName} ${users.nodes[0].lastName}`}</Typography>
+          </Box>
+          <Box>
+            <Tooltip title={t('Remove Access')}>
+              <Button
+                onClick={(event) => {
+                  event.preventDefault();
+                  setConfirmingDelete(true);
+                }}
+                aria-label={t('Remove Access')}
+              >
+                <VisibilityOff />
+              </Button>
+            </Tooltip>
+          </Box>
+        </Box>
         <AppealProgress
           currency={currency}
           goal={calculatedMonthlyGoal}
diff --git a/src/components/Coaching/LoadCoachingList.graphql b/src/components/Coaching/LoadCoachingList.graphql
index ecb837df1..e521e1871 100644
--- a/src/components/Coaching/LoadCoachingList.graphql
+++ b/src/components/Coaching/LoadCoachingList.graphql
@@ -27,6 +27,13 @@ fragment CoachedPerson on CoachingAccountList {
     pledgesAmountProcessed
     pledgesAmountTotal
   }
+  users {
+    nodes {
+      firstName
+      lastName
+      id
+    }
+  }
   currency
   monthlyGoal
   balance
diff --git a/src/components/Coaching/LoadCoachingList.test.tsx b/src/components/Coaching/LoadCoachingList.test.tsx
index 41b5d591a..7487d6c16 100644
--- a/src/components/Coaching/LoadCoachingList.test.tsx
+++ b/src/components/Coaching/LoadCoachingList.test.tsx
@@ -17,85 +17,7 @@ describe('LoadCoaching', () => {
       },
     );
     await waitForNextUpdate();
-    expect(result.current.data?.coachingAccountLists).toMatchInlineSnapshot(`
-      Object {
-        "__typename": "CoachingAccountListConnection",
-        "nodes": Array [
-          Object {
-            "__typename": "CoachingAccountList",
-            "balance": 64.55430394702351,
-            "currency": "CAD",
-            "id": "7671408",
-            "monthlyGoal": 12,
-            "name": "Diamond Sword Restaurant",
-            "primaryAppeal": Object {
-              "__typename": "CoachingAppeal",
-              "active": false,
-              "amount": 71.24003484887974,
-              "amountCurrency": "EUR",
-              "id": "4377364",
-              "name": "Pebble Solid Triangle",
-              "pledgesAmountNotReceivedNotProcessed": 70.20389802275804,
-              "pledgesAmountProcessed": 36.11248127960118,
-              "pledgesAmountTotal": 96.17510597010335,
-            },
-            "receivedPledges": 79.3262861684276,
-            "totalPledges": 50.50755229029304,
-          },
-          Object {
-            "__typename": "CoachingAccountList",
-            "balance": 20.84220615982889,
-            "currency": "EUR",
-            "id": "8465485",
-            "monthlyGoal": 73,
-            "name": "Egg Compass Rocket",
-            "primaryAppeal": Object {
-              "__typename": "CoachingAppeal",
-              "active": true,
-              "amount": 57.02668130320204,
-              "amountCurrency": "CAD",
-              "id": "2268928",
-              "name": "Chess Board Mosquito",
-              "pledgesAmountNotReceivedNotProcessed": 11.708288466314501,
-              "pledgesAmountProcessed": 94.3774669075171,
-              "pledgesAmountTotal": 12.70780215832432,
-            },
-            "receivedPledges": 22.600969051965148,
-            "totalPledges": 66.2952785316502,
-          },
-          Object {
-            "__typename": "CoachingAccountList",
-            "balance": 66.76403183825539,
-            "currency": "EUR",
-            "id": "1819981",
-            "monthlyGoal": 42,
-            "name": "Leather jacket Onion Pocket",
-            "primaryAppeal": Object {
-              "__typename": "CoachingAppeal",
-              "active": true,
-              "amount": 7.701867972597047,
-              "amountCurrency": "CAD",
-              "id": "5425736",
-              "name": "Snail",
-              "pledgesAmountNotReceivedNotProcessed": 60.6603194388847,
-              "pledgesAmountProcessed": 22.219772841760978,
-              "pledgesAmountTotal": 16.959686277380897,
-            },
-            "receivedPledges": 59.9470658594177,
-            "totalPledges": 67.6666019807398,
-          },
-        ],
-        "pageInfo": Object {
-          "__typename": "PageInfo",
-          "endCursor": "Arm Bible Circus",
-          "hasNextPage": false,
-          "hasPreviousPage": true,
-          "startCursor": "Drum Baby Rock",
-        },
-        "totalCount": 7,
-        "totalPageCount": 59,
-      }
-    `);
+    expect(result.current.data?.coachingAccountLists.nodes.length).toBe(3);
   });
   it('test list view', () => {
     const { getAllByRole } = render(

From 68209c7e0801f3a0b5e89fdc8bf28c8c4f4012a6 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Thu, 3 Oct 2024 23:14:20 -0700
Subject: [PATCH 2/4] Add balance and multiple users

---
 .../Coaching/CoachingDetail/CoachingDetail.tsx  | 11 +++++++----
 .../Coaching/CoachingRow/CoachingRow.tsx        | 17 ++++++++++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
index c97a28d0c..83bcb323d 100644
--- a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
+++ b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
@@ -135,6 +135,10 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
 
   const handleCloseDrawer = () => setDrawerVisible(false);
 
+  const usersList = accountListData?.users.nodes
+    .map((user) => user.firstName + ' ' + user.lastName)
+    .join(', ');
+
   const sidebarDrawer = useMediaQuery<Theme>((theme) =>
     theme.breakpoints.down('md'),
   );
@@ -183,10 +187,9 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
                   </Hidden>
                   {accountListData?.name}
                 </Typography>
-                <Typography
-                  mx={1}
-                  variant="subtitle1"
-                >{`${accountListData?.users.nodes[0]?.firstName} ${accountListData?.users.nodes[0]?.lastName}`}</Typography>
+                <Typography mx={1} variant="subtitle1">
+                  {usersList}
+                </Typography>
               </Box>
               <Box style={{ flexGrow: 1 }}>
                 <AppealProgress
diff --git a/src/components/Coaching/CoachingRow/CoachingRow.tsx b/src/components/Coaching/CoachingRow/CoachingRow.tsx
index bf1c332b8..63f822a67 100644
--- a/src/components/Coaching/CoachingRow/CoachingRow.tsx
+++ b/src/components/Coaching/CoachingRow/CoachingRow.tsx
@@ -4,7 +4,9 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { Box, Button, Link, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { useLocale } from 'src/hooks/useLocale';
 import { useRequiredSession } from 'src/hooks/useRequiredSession';
+import { currencyFormat } from 'src/lib/intlFormat';
 import { Confirmation } from '../../common/Modal/Confirmation/Confirmation';
 import { AppealProgress } from '../AppealProgress/AppealProgress';
 import { CoachedPersonFragment } from '../LoadCoachingList.generated';
@@ -39,12 +41,14 @@ export const CoachingRow: React.FC<Props> = ({
     currency,
     users,
     name,
+    balance,
     totalPledges,
     receivedPledges,
     primaryAppeal,
   } = coachingAccount;
 
   const { t } = useTranslation();
+  const locale = useLocale();
 
   const calculatedMonthlyGoal = monthlyGoal ?? 0;
   const appealCurrencyCode = primaryAppeal?.amountCurrency ?? 'USD';
@@ -62,6 +66,10 @@ export const CoachingRow: React.FC<Props> = ({
     },
   });
 
+  const usersList = users.nodes
+    .map((user) => user.firstName + ' ' + user.lastName)
+    .join(', ');
+
   return (
     <>
       <CoachingRowWrapper role="listitem">
@@ -79,9 +87,16 @@ export const CoachingRow: React.FC<Props> = ({
                 <Link underline="hover">{name}</Link>
               </NextLink>
             </CoachingNameText>
-            <Typography variant="subtitle1">{`${users.nodes[0].firstName} ${users.nodes[0].lastName}`}</Typography>
+            <Typography variant="subtitle1">{usersList}</Typography>
           </Box>
           <Box>
+            <Typography
+              variant="h6"
+              sx={{ float: 'left', marginInline: '5px' }}
+            >
+              {t('Balance:')}{' '}
+              {balance && currencyFormat(balance, currency, locale)}
+            </Typography>
             <Tooltip title={t('Remove Access')}>
               <Button
                 onClick={(event) => {

From fa803c26bfe4f6d462e14162748a25f2cf84e969 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Fri, 4 Oct 2024 08:31:37 -0700
Subject: [PATCH 3/4] Add test and adjust Coaching detail styles

---
 .../CoachingDetail/CoachingDetail.test.tsx    | 35 ++++++++++++---
 src/components/Coaching/CoachingList.tsx      | 16 +++----
 .../Coaching/CoachingRow/CoachingRow.test.tsx | 17 ++++++--
 .../Coaching/CoachingRow/CoachingRow.tsx      | 13 ++----
 .../Coaching/LoadCoachingList.test.tsx        | 43 -------------------
 5 files changed, 52 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/Coaching/LoadCoachingList.test.tsx

diff --git a/src/components/Coaching/CoachingDetail/CoachingDetail.test.tsx b/src/components/Coaching/CoachingDetail/CoachingDetail.test.tsx
index 11af77363..2be83b504 100644
--- a/src/components/Coaching/CoachingDetail/CoachingDetail.test.tsx
+++ b/src/components/Coaching/CoachingDetail/CoachingDetail.test.tsx
@@ -59,16 +59,28 @@ const TestComponent: React.FC<TestComponentProps> = ({
         mocks={{
           LoadCoachingDetail: {
             coachingAccountList: {
-              name: 'John Doe',
+              name: 'John Doe Account',
               currency: 'USD',
               monthlyGoal,
+              users: {
+                nodes: [
+                  { firstName: 'John', lastName: 'Doe' },
+                  { firstName: 'Sally', lastName: 'Doe' },
+                ],
+              },
             },
           },
           LoadAccountListCoachingDetail: {
             accountList: {
-              name: 'John Doe',
+              name: 'John Doe Account',
               currency: 'USD',
               monthlyGoal,
+              users: {
+                nodes: [
+                  { firstName: 'John', lastName: 'Doe' },
+                  { firstName: 'Sally', lastName: 'Doe' },
+                ],
+              },
             },
           },
           LoadCoachingCommitments: {
@@ -130,10 +142,13 @@ describe('LoadCoachingDetail', () => {
     { type: AccountListTypeEnum.Own, name: 'own' },
   ])('$name account list', ({ type: accountListType }) => {
     it('view', async () => {
-      const { findByRole, getByText } = render(
+      const { findByRole, getByText, findByText } = render(
         <TestComponent accountListType={accountListType} monthlyGoal={55} />,
       );
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
+      expect(await findByText('John Doe, Sally Doe')).toBeVisible();
       expect(getByText('Monthly $55')).toBeVisible();
       expect(getByText('Monthly Giving')).toBeVisible();
     });
@@ -142,7 +157,9 @@ describe('LoadCoachingDetail', () => {
       const { findByRole, getByText } = render(
         <TestComponent accountListType={accountListType} />,
       );
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
       expect(getByText('Monthly $0')).toBeVisible();
       expect(getByText('Monthly Giving')).toBeVisible();
     });
@@ -154,7 +171,9 @@ describe('LoadCoachingDetail', () => {
 
       const { findByRole, getByRole, queryByRole } = render(<TestComponent />);
 
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
       expect(getByRole('heading', { name: 'Coaching' })).toBeInTheDocument();
       expect(
         queryByRole('button', {
@@ -169,7 +188,9 @@ describe('LoadCoachingDetail', () => {
 
       const { findByRole, getByRole, queryByRole } = render(<TestComponent />);
 
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
       expect(
         queryByRole('heading', { name: 'Coaching' }),
       ).not.toBeInTheDocument();
diff --git a/src/components/Coaching/CoachingList.tsx b/src/components/Coaching/CoachingList.tsx
index 947a3cb95..234410e79 100644
--- a/src/components/Coaching/CoachingList.tsx
+++ b/src/components/Coaching/CoachingList.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
+import { Spa } from '@mui/icons-material';
 import { Box, Divider, Skeleton, Typography } from '@mui/material';
-// TODO: This icon is not defined on @mui/icons-material, find replacement.
-// import { EcoOutlined } from '@mui/icons-material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { CoachingRow } from './CoachingRow/CoachingRow';
@@ -13,7 +12,7 @@ interface CoachingListProps {
 
 const CoachingListWrapper = styled(Box)(({ theme }) => ({
   width: '100%',
-  padding: theme.spacing(1),
+  padding: theme.spacing(0, 1),
 }));
 const CoachingTitleWrapper = styled(Box)(({ theme }) => ({
   width: '100%',
@@ -23,13 +22,13 @@ const CoachingTitleWrapper = styled(Box)(({ theme }) => ({
   alignContent: 'center',
 }));
 
-// const CoachingTitleIcon = styled(EcoOutlined)(({ theme }) => ({
-//   margin: theme.spacing(1),
-// }));
+const CoachingTitleIcon = styled(Spa)(({ theme }) => ({
+  margin: theme.spacing(1),
+}));
 
 const CoachingListTitle = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.primary,
-  margin: theme.spacing(1),
+  margin: 0,
 }));
 
 const CoachingLoading = styled(Skeleton)(() => ({
@@ -47,9 +46,8 @@ export const CoachingList: React.FC<CoachingListProps> = ({
 
   return (
     <CoachingListWrapper>
-      <Divider />
       <CoachingTitleWrapper>
-        {/* <CoachingTitleIcon /> */}
+        <CoachingTitleIcon />
         <CoachingListTitle variant="h6">
           {t('Staff You Coach')}
         </CoachingListTitle>
diff --git a/src/components/Coaching/CoachingRow/CoachingRow.test.tsx b/src/components/Coaching/CoachingRow/CoachingRow.test.tsx
index c1672972c..28b80d20d 100644
--- a/src/components/Coaching/CoachingRow/CoachingRow.test.tsx
+++ b/src/components/Coaching/CoachingRow/CoachingRow.test.tsx
@@ -26,9 +26,16 @@ const TestComponent: React.FC = () => {
     {
       mocks: {
         id: 'coaching-account',
-        name: 'John Doe',
+        name: 'John Doe Account',
         currency: 'USD',
         primaryAppeal: null,
+        balance: 100,
+        users: {
+          nodes: [
+            { firstName: 'John', lastName: 'Doe' },
+            { firstName: 'Sally', lastName: 'Doe' },
+          ],
+        },
       },
     },
   );
@@ -49,9 +56,13 @@ const TestComponent: React.FC = () => {
 
 describe('CoachingRow', () => {
   it('renders', async () => {
-    const { getByRole } = render(<TestComponent />);
+    const { getByRole, getByText } = render(<TestComponent />);
 
-    expect(getByRole('heading', { name: 'John Doe' })).toBeInTheDocument();
+    expect(
+      getByRole('heading', { name: 'John Doe Account' }),
+    ).toBeInTheDocument();
+    expect(getByText('John Doe, Sally Doe')).toBeInTheDocument();
+    expect(getByText('Balance: $100')).toBeInTheDocument();
   });
 
   it('deletes coaching account list', async () => {
diff --git a/src/components/Coaching/CoachingRow/CoachingRow.tsx b/src/components/Coaching/CoachingRow/CoachingRow.tsx
index 63f822a67..15b0d8dbd 100644
--- a/src/components/Coaching/CoachingRow/CoachingRow.tsx
+++ b/src/components/Coaching/CoachingRow/CoachingRow.tsx
@@ -24,12 +24,6 @@ const CoachingRowWrapper = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1),
 }));
 
-const CoachingNameText = styled(Typography)(() => ({
-  margin: 0,
-  cursor: 'pointer',
-  display: 'inline',
-}));
-
 export const CoachingRow: React.FC<Props> = ({
   coachingAccount,
   accountListId,
@@ -75,7 +69,7 @@ export const CoachingRow: React.FC<Props> = ({
       <CoachingRowWrapper role="listitem">
         <Box display="flex">
           <Box flex={1}>
-            <CoachingNameText variant="h6" color="primary">
+            <Typography variant="h6" display="inline">
               <NextLink
                 href={{
                   pathname:
@@ -86,7 +80,7 @@ export const CoachingRow: React.FC<Props> = ({
               >
                 <Link underline="hover">{name}</Link>
               </NextLink>
-            </CoachingNameText>
+            </Typography>
             <Typography variant="subtitle1">{usersList}</Typography>
           </Box>
           <Box>
@@ -94,8 +88,7 @@ export const CoachingRow: React.FC<Props> = ({
               variant="h6"
               sx={{ float: 'left', marginInline: '5px' }}
             >
-              {t('Balance:')}{' '}
-              {balance && currencyFormat(balance, currency, locale)}
+              {t('Balance:')} {currencyFormat(balance, currency, locale)}
             </Typography>
             <Tooltip title={t('Remove Access')}>
               <Button
diff --git a/src/components/Coaching/LoadCoachingList.test.tsx b/src/components/Coaching/LoadCoachingList.test.tsx
deleted file mode 100644
index 7487d6c16..000000000
--- a/src/components/Coaching/LoadCoachingList.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { render } from '__tests__/util/testingLibraryReactMock';
-import { CoachingList } from './CoachingList';
-import {
-  LoadCoachingListQuery,
-  useLoadCoachingListQuery,
-} from './LoadCoachingList.generated';
-
-describe('LoadCoaching', () => {
-  it('query correct', async () => {
-    const { result, waitForNextUpdate } = renderHook(
-      () => useLoadCoachingListQuery(),
-      {
-        wrapper: GqlMockedProvider,
-      },
-    );
-    await waitForNextUpdate();
-    expect(result.current.data?.coachingAccountLists.nodes.length).toBe(3);
-  });
-  it('test list view', () => {
-    const { getAllByRole } = render(
-      <GqlMockedProvider<{ LoadCoachingList: LoadCoachingListQuery }>
-        mocks={{
-          LoadCoachingList: {
-            coachingAccountLists: {
-              totalCount: 3,
-              nodes: [
-                { currency: 'USD', primaryAppeal: { amountCurrency: 'EUR' } },
-                { currency: 'USD', primaryAppeal: { amountCurrency: 'EUR' } },
-                { currency: 'USD', primaryAppeal: { amountCurrency: 'JPN' } },
-              ],
-            },
-          },
-        }}
-      >
-        <CoachingList accountListId="account-list-id" />
-      </GqlMockedProvider>,
-    );
-    expect(getAllByRole('listitem').length).toMatchInlineSnapshot(`3`);
-  });
-});

From a1e4d1c15d4028c9ced40e9df69d9327c2ab5ec6 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Fri, 4 Oct 2024 12:27:13 -0700
Subject: [PATCH 4/4] Try to fix flakey test

---
 .../SuggestedContactStatus.test.tsx           | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/Task/Modal/Form/Inputs/SuggestedContactStatus/SuggestedContactStatus.test.tsx b/src/components/Task/Modal/Form/Inputs/SuggestedContactStatus/SuggestedContactStatus.test.tsx
index 4d22d2495..12dbcd51a 100644
--- a/src/components/Task/Modal/Form/Inputs/SuggestedContactStatus/SuggestedContactStatus.test.tsx
+++ b/src/components/Task/Modal/Form/Inputs/SuggestedContactStatus/SuggestedContactStatus.test.tsx
@@ -105,7 +105,7 @@ describe('SuggestedContactStatus', () => {
   });
 
   it('renders suggested status when single contact and checks contact status with gql call', async () => {
-    const { findByText } = render(
+    const { getByText } = render(
       <Components
         suggestedContactStatus={StatusEnum.ContactForAppointment}
         contactIds={['contact-1']}
@@ -114,16 +114,16 @@ describe('SuggestedContactStatus', () => {
     );
     await waitFor(() => {
       expect(mutationSpy).toHaveBeenCalledTimes(2);
-      expect(mutationSpy.mock.calls[0][0].operation).toMatchObject({
-        operationName: 'ContactStatus',
-        variables: {
-          accountListId: accountListId,
-          contactId: 'contact-1',
-        },
+      expect(mutationSpy).toHaveGraphqlOperation('ContactStatus', {
+        accountListId: accountListId,
+        contactId: 'contact-1',
       });
     });
 
-    expect(await findByText('Initiate for Appointment')).toBeInTheDocument();
+    await waitFor(
+      () => expect(getByText('Initiate for Appointment')).toBeInTheDocument(),
+      { timeout: 3000 },
+    );
   });
 
   it('does not send a ContactStatus graphql request when the current contacts status is provided', async () => {
@@ -138,13 +138,17 @@ describe('SuggestedContactStatus', () => {
 
     await waitFor(() => {
       expect(mutationSpy).toHaveBeenCalledTimes(1);
-      expect(mutationSpy.mock.calls[0][0].operation).toMatchObject({
-        operationName: 'LoadConstants',
-        variables: {},
-      });
-      expect(getByText("Change the contact's status to:")).toBeInTheDocument();
-      expect(getByText('Initiate for Appointment')).toBeInTheDocument();
+      expect(mutationSpy).toHaveGraphqlOperation('LoadConstants', {});
     });
+    await waitFor(
+      () => {
+        expect(
+          getByText("Change the contact's status to:"),
+        ).toBeInTheDocument();
+        expect(getByText('Initiate for Appointment')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
   });
 
   it('renders suggested status when the contact has no status', async () => {
@@ -157,11 +161,14 @@ describe('SuggestedContactStatus', () => {
       />,
     );
 
-    await waitFor(() => {
-      expect(getByText("Change the contact's status to:")).toBeInTheDocument();
-    });
-    await waitFor(() =>
-      expect(getByText('Initiate for Appointment')).toBeInTheDocument(),
+    await waitFor(
+      () => {
+        expect(
+          getByText("Change the contact's status to:"),
+        ).toBeInTheDocument();
+        expect(getByText('Initiate for Appointment')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
     );
   });
 });