refactor: [M3-7800] - Clean up new QueryClient() pattern in unit te…

…sts (#10217) * clean up `new QueryClient()` in unit tests * Added changeset: Clean up `new QueryClient()` pattern in unit tests --------- Co-authored-by: Banks Nussman <[email protected]>
linode · Feb 26, 2024 · ca52738 · ca52738
1 parent 02bdf6d
commit ca52738
Show file tree

Hide file tree

Showing 27 changed files with 71 additions and 355 deletions.
diff --git a/packages/manager/.changeset/pr-10217-tech-stories-1708960982000.md b/packages/manager/.changeset/pr-10217-tech-stories-1708960982000.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Clean up `new QueryClient()` pattern in unit tests ([#10217](https://github.com/linode/manager/pull/10217))
diff --git a/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.test.tsx b/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.test.tsx
@@ -1,6 +1,5 @@
 import { render, waitFor } from '@testing-library/react';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 
 import {
   abuseTicketNotificationFactory,
@@ -43,9 +42,7 @@ describe('Abuse ticket banner', () => {
         );
       })
     );
-    const { queryAllByText } = render(
-      wrapWithTheme(<AbuseTicketBanner />, { queryClient: new QueryClient() })
-    );
+    const { queryAllByText } = render(wrapWithTheme(<AbuseTicketBanner />));
 
     await waitFor(() => {
       expect(queryAllByText(/2 open abuse tickets/)).toHaveLength(1);
@@ -59,9 +56,7 @@ describe('Abuse ticket banner', () => {
         return res(ctx.json(makeResourcePage([mockAbuseTicket])));
       })
     );
-    const { getByTestId } = renderWithTheme(<AbuseTicketBanner />, {
-      queryClient: new QueryClient(),
-    });
+    const { getByTestId } = renderWithTheme(<AbuseTicketBanner />);
 
     await waitFor(() => {
       const link = getByTestId(TICKET_TESTID);
@@ -76,9 +71,7 @@ describe('Abuse ticket banner', () => {
         return res(ctx.json(makeResourcePage(mockAbuseTickets)));
       })
     );
-    const { getByTestId } = renderWithTheme(<AbuseTicketBanner />, {
-      queryClient: new QueryClient(),
-    });
+    const { getByTestId } = renderWithTheme(<AbuseTicketBanner />);
 
     await waitFor(() => {
       const link = getByTestId(TICKET_TESTID);
@@ -92,9 +85,7 @@ describe('Abuse ticket banner', () => {
         return res(ctx.json(makeResourcePage([])));
       })
     );
-    const { queryByTestId } = renderWithTheme(<AbuseTicketBanner />, {
-      queryClient: new QueryClient(),
-    });
+    const { queryByTestId } = renderWithTheme(<AbuseTicketBanner />);
 
     expect(queryByTestId(TICKET_TESTID)).toBeNull();
   });

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.test.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.test.tsx
@@ -1,7 +1,6 @@
 import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 
 import { profileFactory, sshKeyFactory } from 'src/factories';
 import { accountUserFactory } from 'src/factories/accountUsers';
@@ -51,8 +50,7 @@ describe('UserSSHKeyPanel', () => {
         })
       );
       const { getByText } = renderWithTheme(
-        <UserSSHKeyPanel authorizedUsers={[]} setAuthorizedUsers={vi.fn()} />,
-        { queryClient: new QueryClient() }
+        <UserSSHKeyPanel authorizedUsers={[]} setAuthorizedUsers={vi.fn()} />
       );
       await waitFor(() => {
         expect(getByText('my-ssh-key', { exact: false })).toBeInTheDocument();
@@ -75,8 +73,7 @@ describe('UserSSHKeyPanel', () => {
         })
       );
       const { getByText } = renderWithTheme(
-        <UserSSHKeyPanel authorizedUsers={[]} setAuthorizedUsers={vi.fn()} />,
-        { queryClient: new QueryClient() }
+        <UserSSHKeyPanel authorizedUsers={[]} setAuthorizedUsers={vi.fn()} />
       );
       await waitFor(() => {
         expect(getByText('test-user', { exact: false })).toBeInTheDocument();
@@ -104,8 +101,7 @@ describe('UserSSHKeyPanel', () => {
       };
 
       const { getByRole, getByText } = renderWithTheme(
-        <UserSSHKeyPanel {...props} />,
-        { queryClient: new QueryClient() }
+        <UserSSHKeyPanel {...props} />
       );
       await waitFor(() => {
         expect(getByText('test-user')).toBeInTheDocument();

diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx
@@ -1,6 +1,5 @@
 import { fireEvent, waitFor } from '@testing-library/react';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 
 import {
   LINODE_CREATE_FLOW_TEXT,
@@ -10,12 +9,7 @@ import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
 import { SelectFirewallPanel } from './SelectFirewallPanel';
 
-const queryClient = new QueryClient();
-
 beforeAll(() => mockMatchMedia());
-afterEach(() => {
-  queryClient.clear();
-});
 
 const testId = 'select-firewall-panel';
 
@@ -27,10 +21,7 @@ describe('SelectFirewallPanel', () => {
         handleFirewallChange={vi.fn()}
         helperText={<span>Testing</span>}
         selectedFirewallId={-1}
-      />,
-      {
-        queryClient,
-      }
+      />
     );
 
     await waitFor(() => {
@@ -48,7 +39,6 @@ describe('SelectFirewallPanel', () => {
       />,
       {
         flags: { firewallNodebalancer: true },
-        queryClient,
       }
     );
 
@@ -73,7 +63,6 @@ describe('SelectFirewallPanel', () => {
       />,
       {
         flags: { firewallNodebalancer: true },
-        queryClient,
       }
     );
 

diff --git a/packages/manager/src/components/TagsPanel/TagsPanel.test.tsx b/packages/manager/src/components/TagsPanel/TagsPanel.test.tsx
@@ -1,27 +1,16 @@
 import { fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { TagsPanel } from './TagsPanel';
 
-import type { TagsPanelProps } from './TagsPanel';
-import userEvent from '@testing-library/user-event';
-
-const queryClient = new QueryClient();
-
-const renderWithQueryClient = (ui: React.ReactElement<TagsPanelProps>) => {
-  return renderWithTheme(
-    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
-  );
-};
-
 describe('TagsPanel', () => {
   it('renders TagsPanel component with existing tags', async () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
-    const { getByLabelText, getByText } = renderWithQueryClient(
+    const { getByLabelText, getByText } = renderWithTheme(
       <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
     );
 
@@ -40,7 +29,7 @@ describe('TagsPanel', () => {
   it('creates a new tag successfully', async () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
-    const { getByLabelText, getByText } = renderWithQueryClient(
+    const { getByLabelText, getByText } = renderWithTheme(
       <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
     );
 
@@ -61,18 +50,19 @@ describe('TagsPanel', () => {
   it('displays an error message for invalid tag creation', async () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
-    const { getByLabelText, getByText } = renderWithQueryClient(
+    const { getByLabelText, getByText } = renderWithTheme(
       <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
     );
 
-    fireEvent.click(getByText('Add a tag'));
+    await userEvent.click(getByText('Add a tag'));
 
     fireEvent.change(getByLabelText('Create or Select a Tag'), {
       target: { value: 'yz' },
     });
 
     const newTagItem = getByText('Create "yz"');
-    fireEvent.click(newTagItem);
+
+    await userEvent.click(newTagItem);
 
     await waitFor(() =>
       expect(
@@ -84,11 +74,7 @@ describe('TagsPanel', () => {
   it('deletes a tag successfully', async () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
-    const {
-      getByLabelText,
-      getByText,
-      queryByLabelText,
-    } = renderWithQueryClient(
+    const { getByLabelText, getByText, queryByLabelText } = renderWithTheme(
       <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
     );
 
@@ -106,7 +92,7 @@ describe('TagsPanel', () => {
   it('prevents creation or deletion of tags when disabled', async () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
-    const { getByText, queryByLabelText, queryByText } = renderWithQueryClient(
+    const { getByText, queryByLabelText, queryByText } = renderWithTheme(
       <TagsPanel disabled tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
     );
 

diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.test.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.test.tsx
@@ -4,12 +4,10 @@ import {
   within,
 } from '@testing-library/react';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 
 import { accountMaintenanceFactory } from 'src/factories';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { rest, server } from 'src/mocks/testServer';
-import { queryPresets } from 'src/queries/base';
 import { parseAPIDate } from 'src/utilities/date';
 import { formatDate } from 'src/utilities/formatDate';
 import {
@@ -21,14 +19,7 @@ import {
 import { MaintenanceTable } from './MaintenanceTable';
 import { MaintenanceTableRow } from './MaintenanceTableRow';
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: queryPresets.oneTimeFetch },
-});
-
 beforeAll(() => mockMatchMedia());
-afterEach(() => {
-  queryClient.clear();
-});
 
 const loadingTestId = 'table-row-loading';
 
@@ -93,7 +84,7 @@ describe('Maintenance Table', () => {
       })
     );
 
-    renderWithTheme(<MaintenanceTable type="pending" />, { queryClient });
+    renderWithTheme(<MaintenanceTable type="pending" />);
 
     expect(await screen.findByTestId('table-row-empty')).toBeInTheDocument();
 

diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx
@@ -1,7 +1,6 @@
 import { fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 import { Router } from 'react-router-dom';
 
 import { databaseTypeFactory } from 'src/factories';
@@ -12,28 +11,19 @@ import { mockMatchMedia } from 'src/utilities/testHelpers';
 
 import DatabaseCreate from './DatabaseCreate';
 
-const queryClient = new QueryClient();
 const loadingTestId = 'circle-progress';
 
 beforeAll(() => mockMatchMedia());
-afterEach(() => {
-  queryClient.clear();
-});
 
 describe('Database Create', () => {
   it('should render loading state', () => {
-    const { getByTestId } = renderWithTheme(<DatabaseCreate />, {
-      queryClient,
-    });
+    const { getByTestId } = renderWithTheme(<DatabaseCreate />);
     expect(getByTestId(loadingTestId)).toBeInTheDocument();
   });
 
   it('should render inputs', async () => {
     const { getAllByTestId, getAllByText } = renderWithTheme(
-      <DatabaseCreate />,
-      {
-        queryClient,
-      }
+      <DatabaseCreate />
     );
     await waitForElementToBeRemoved(getAllByTestId(loadingTestId));
 
@@ -74,10 +64,7 @@ describe('Database Create', () => {
     const { getAllByText, getByTestId } = renderWithTheme(
       <Router history={history}>
         <DatabaseCreate />
-      </Router>,
-      {
-        queryClient,
-      }
+      </Router>
     );
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx
@@ -1,18 +1,12 @@
 import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 
 import { databaseFactory } from 'src/factories';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
 import AccessControls from './AccessControls';
 
-const queryClient = new QueryClient();
-
 beforeAll(() => mockMatchMedia());
-afterEach(() => {
-  queryClient.clear();
-});
 
 describe('Access Controls', () => {
   it('Should have a Remove button for each IP listed in the table', () => {

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.test.tsx
@@ -1,6 +1,5 @@
 import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 
 import { databaseFactory } from 'src/factories';
 import { IPv4List } from 'src/factories/databases';
@@ -10,12 +9,7 @@ import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 import AccessControls from './AccessControls';
 import AddAccessControlDrawer from './AddAccessControlDrawer';
 
-const queryClient = new QueryClient();
-
 beforeAll(() => mockMatchMedia());
-afterEach(() => {
-  queryClient.clear();
-});
 
 describe('Add Access Controls drawer', () => {
   const database = databaseFactory.build();