From d91df5c8096bc1ec3ea75e4e883ad25849d95595 Mon Sep 17 00:00:00 2001
From: Daniel Bisgrove <daniel@bizz-websites.com>
Date: Fri, 11 Oct 2024 14:15:09 -0400
Subject: [PATCH] fixup! 6. Fixing the main RC page as it is different from the
 old MPDX.

---
 .../AccountsListLayout/List/List.test.tsx     | 40 ++++++-------
 .../List/ListItem/ListItem.test.tsx           | 56 +++++++++----------
 2 files changed, 47 insertions(+), 49 deletions(-)

diff --git a/src/components/Reports/AccountsListLayout/List/List.test.tsx b/src/components/Reports/AccountsListLayout/List/List.test.tsx
index 42ea76537a..1a83f3b5ed 100644
--- a/src/components/Reports/AccountsListLayout/List/List.test.tsx
+++ b/src/components/Reports/AccountsListLayout/List/List.test.tsx
@@ -2,13 +2,17 @@ import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import TestRouter from '__tests__/util/TestRouter';
 import theme from 'src/theme';
 import { AccountsList as List } from './List';
 
 const onCheckToggle = jest.fn();
-
+const accountListId = 'accountListId';
+const router = {
+  query: { accountListId },
+  isReady: true,
+};
 const orgName = 'test org';
-
 const accounts = [
   {
     active: false,
@@ -21,31 +25,27 @@ const accounts = [
   },
 ];
 
+const Components = () => (
+  <ThemeProvider theme={theme}>
+    <TestRouter router={router}>
+      <List
+        organizationName={orgName}
+        accounts={accounts}
+        onCheckToggle={onCheckToggle}
+      />
+    </TestRouter>
+  </ThemeProvider>
+);
+
 describe('AccountsGroupList', () => {
   it('default', async () => {
-    const { queryByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <List
-          organizationName={orgName}
-          accounts={accounts}
-          onCheckToggle={onCheckToggle}
-        />
-      </ThemeProvider>,
-    );
+    const { queryByTestId } = render(<Components />);
 
     expect(queryByTestId('AccountsGroupList')).toBeInTheDocument();
   });
 
   it('should be check event called', async () => {
-    const { queryByTestId, getByRole } = render(
-      <ThemeProvider theme={theme}>
-        <List
-          organizationName={orgName}
-          accounts={accounts}
-          onCheckToggle={onCheckToggle}
-        />
-      </ThemeProvider>,
-    );
+    const { queryByTestId, getByRole } = render(<Components />);
 
     expect(queryByTestId('AccountsGroupList')).toBeInTheDocument();
     userEvent.click(getByRole('checkbox'));
diff --git a/src/components/Reports/AccountsListLayout/List/ListItem/ListItem.test.tsx b/src/components/Reports/AccountsListLayout/List/ListItem/ListItem.test.tsx
index 0744f424e5..6c55ccb516 100644
--- a/src/components/Reports/AccountsListLayout/List/ListItem/ListItem.test.tsx
+++ b/src/components/Reports/AccountsListLayout/List/ListItem/ListItem.test.tsx
@@ -2,16 +2,21 @@ import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import TestRouter from '__tests__/util/TestRouter';
 import {
   afterTestResizeObserver,
   beforeTestResizeObserver,
 } from '__tests__/util/windowResizeObserver';
 import theme from 'src/theme';
-import { AccountListItem as ListItem } from './ListItem';
+import { Account, AccountListItem as ListItem } from './ListItem';
 
 const onCheckToggle = jest.fn();
-
-const account = {
+const accountListId = 'accountListId';
+const router = {
+  query: { accountListId },
+  isReady: true,
+};
+const defaultAccount: Account = {
   active: false,
   id: 'test-id-111',
   balance: 3500,
@@ -21,35 +26,31 @@ const account = {
   name: 'Test Account',
 };
 
+const Components = ({ account = defaultAccount }: { account?: Account }) => (
+  <ThemeProvider theme={theme}>
+    <TestRouter router={router}>
+      <ListItem account={account} onCheckToggle={onCheckToggle} />
+    </TestRouter>
+  </ThemeProvider>
+);
+
 describe('AccountItem', () => {
   it('default', async () => {
-    const { getByRole, getByText } = render(
-      <ThemeProvider theme={theme}>
-        <ListItem account={account} onCheckToggle={onCheckToggle} />
-      </ThemeProvider>,
-    );
+    const { getByRole, getByText } = render(<Components />);
 
     expect(getByRole('checkbox')).not.toBeChecked();
-    expect(getByText(account.name)).toBeInTheDocument();
+    expect(getByText(defaultAccount.name as string)).toBeInTheDocument();
   });
 
   it('should be check event called', async () => {
-    const { getByRole } = render(
-      <ThemeProvider theme={theme}>
-        <ListItem account={account} onCheckToggle={onCheckToggle} />
-      </ThemeProvider>,
-    );
+    const { getByRole } = render(<Components />);
 
     userEvent.click(getByRole('checkbox'));
     expect(onCheckToggle).toHaveBeenCalled();
   });
 
   it('should not render chart', async () => {
-    const { queryByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <ListItem account={account} onCheckToggle={onCheckToggle} />
-      </ThemeProvider>,
-    );
+    const { queryByTestId } = render(<Components />);
 
     expect(queryByTestId('AccountItemChart')).not.toBeInTheDocument();
   });
@@ -73,16 +74,13 @@ describe('AccountItem', () => {
       ];
 
       const { queryByTestId } = render(
-        <ThemeProvider theme={theme}>
-          <ListItem
-            account={{
-              ...account,
-              active: true,
-              entryHistories: entryHistoriesMock,
-            }}
-            onCheckToggle={onCheckToggle}
-          />
-        </ThemeProvider>,
+        <Components
+          account={{
+            ...defaultAccount,
+            active: true,
+            entryHistories: entryHistoriesMock,
+          }}
+        />,
       );
 
       expect(queryByTestId('AccountItemChart')).toBeInTheDocument();