refactor(tests): wrap tests explicitly with provider [EE-6686] (#11090)

app/react/portainer/HomeView/BackupFailedPanel.test.tsx

@@ -1,20 +1,17 @@
 import { http, HttpResponse } from 'msw';
+import { render } from '@testing-library/react';
 
 import { server } from '@/setup-tests/server';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
 import { isoDate } from '@/portainer/filters/filters';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { BackupFailedPanel } from './BackupFailedPanel';
 
 test('when backup failed, should show message', async () => {
   const timestamp = 1500;
-  server.use(
-    http.get('/api/backup/s3/status', () =>
-      HttpResponse.json({ Failed: true, TimestampUTC: timestamp })
-    )
-  );
 
-  const { findByText } = renderWithQueryClient(<BackupFailedPanel />);
+  const { findByText } = renderComponent({ failed: true, timestamp });
 
   await expect(
     findByText(
@@ -27,14 +24,27 @@ test('when backup failed, should show message', async () => {
 });
 
 test("when user is using less nodes then allowed he shouldn't see message", async () => {
-  server.use(
-    http.get('/api/backup/s3/status', () =>
-      HttpResponse.json({ Failed: false })
-    )
-  );
-  const { findByText } = renderWithQueryClient(<BackupFailedPanel />);
+  const { findByText } = renderComponent({ failed: false });
 
   await expect(
     findByText('The latest automated backup has failed at', { exact: false })
   ).rejects.toBeTruthy();
 });
+
+function renderComponent({
+  failed,
+  timestamp,
+}: {
+  failed: boolean;
+  timestamp?: number;
+}) {
+  server.use(
+    http.get('/api/backup/s3/status', () =>
+      HttpResponse.json({ Failed: failed, TimestampUTC: timestamp })
+    )
+  );
+
+  const Wrapped = withTestQueryProvider(withTestRouter(BackupFailedPanel));
+
+  return render(<Wrapped />);
+}

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx

@@ -1,16 +1,18 @@
 import { http, HttpResponse } from 'msw';
+import { render } from '@testing-library/react';
 
 import {
   EnvironmentGroup,
   EnvironmentGroupId,
 } from '@/react/portainer/environments/environment-groups/types';
 import { Environment } from '@/react/portainer/environments/types';
-import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
 import { Tag } from '@/portainer/tags/types';
 import { createMockEnvironment } from '@/react-tools/test-mocks';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
 import { server } from '@/setup-tests/server';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { EnvironmentItem } from './EnvironmentItem';
 
@@ -43,15 +45,17 @@ function renderComponent(
 
   server.use(http.get('/api/tags', () => HttpResponse.json(tags)));
 
-  return renderWithQueryClient(
-    <UserContext.Provider value={{ user }}>
-      <EnvironmentItem
-        isActive={false}
-        onClickBrowse={() => {}}
-        onClickDisconnect={() => {}}
-        environment={env}
-        groupName={group.Name}
-      />
-    </UserContext.Provider>
+  const Wrapped = withTestQueryProvider(
+    withTestRouter(withUserProvider(EnvironmentItem, user))
+  );
+
+  return render(
+    <Wrapped
+      isActive={false}
+      onClickBrowse={() => {}}
+      onClickDisconnect={() => {}}
+      environment={env}
+      groupName={group.Name}
+    />
   );
 }

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.test.tsx

@@ -1,10 +1,12 @@
 import { http, HttpResponse } from 'msw';
+import { render } from '@testing-library/react';
 
 import { Environment } from '@/react/portainer/environments/types';
-import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
 import { server } from '@/setup-tests/server';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { EnvironmentList } from './EnvironmentList';
 
@@ -49,10 +51,12 @@ async function renderComponent(
     )
   );
 
-  const queries = renderWithQueryClient(
-    <UserContext.Provider value={{ user }}>
-      <EnvironmentList onClickBrowse={vi.fn()} onRefresh={vi.fn()} />
-    </UserContext.Provider>
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(withTestRouter(EnvironmentList), user)
+  );
+
+  const queries = render(
+    <Wrapped onClickBrowse={vi.fn()} onRefresh={vi.fn()} />
   );
 
   await expect(queries.findByText('Environments')).resolves.toBeVisible();

app/react/portainer/HomeView/LicenseNodePanel.test.tsx

@@ -1,7 +1,8 @@
 import { http, HttpResponse } from 'msw';
+import { render } from '@testing-library/react';
 
 import { server } from '@/setup-tests/server';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { LicenseType } from '../licenses/types';
 
@@ -17,7 +18,7 @@ test('when user is using more nodes then allowed he should see message', async (
     http.get('/api/system/nodes', () => HttpResponse.json({ nodes: used }))
   );
 
-  const { findByText } = renderWithQueryClient(<LicenseNodePanel />);
+  const { findByText } = renderComponent();
 
   await expect(
     findByText(
@@ -36,7 +37,7 @@ test("when user is using less nodes then allowed he shouldn't see message", asyn
     http.get('/api/system/nodes', () => HttpResponse.json({ nodes: used }))
   );
 
-  const { findByText } = renderWithQueryClient(<LicenseNodePanel />);
+  const { findByText } = renderComponent();
 
   await expect(
     findByText(
@@ -44,3 +45,9 @@ test("when user is using less nodes then allowed he shouldn't see message", asyn
     )
   ).rejects.toBeTruthy();
 });
+
+function renderComponent() {
+  const Wrapped = withTestQueryProvider(LicenseNodePanel);
+
+  return render(<Wrapped />);
+}

app/react/portainer/access-control/AccessControlForm/AccessControlForm.stories.tsx

@@ -1,9 +1,10 @@
 import { Meta, Story } from '@storybook/react';
-import { useMemo, useState } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { useState } from 'react';
 
-import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
+import { Role, User } from '@/portainer/users/types';
+import { isPureAdmin } from '@/portainer/users/user.helpers';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
 
 import { parseAccessControlFormData } from '../utils';
 
@@ -16,41 +17,25 @@ const meta: Meta = {
 
 export default meta;
 
-enum Role {
-  Admin = 1,
-  User,
-}
-
-const testQueryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-});
-
 interface Args {
   userRole: Role;
 }
 
 function Template({ userRole }: Args) {
-  const isAdmin = userRole === Role.Admin;
-  const defaults = parseAccessControlFormData(isAdmin, 0);
+  const defaults = parseAccessControlFormData(
+    isPureAdmin({ Role: userRole } as User),
+    0
+  );
 
   const [value, setValue] = useState(defaults);
 
-  const userProviderState = useMemo(
-    () => ({ user: new UserViewModel({ Role: userRole }) }),
-    [userRole]
+  const Wrapped = withUserProvider(
+    AccessControlForm,
+    new UserViewModel({ Role: userRole })
   );
 
   return (
-    <QueryClientProvider client={testQueryClient}>
-      <UserContext.Provider value={userProviderState}>
-        <AccessControlForm
-          values={value}
-          onChange={setValue}
-          errors={{}}
-          environmentId={1}
-        />
-      </UserContext.Provider>
-    </QueryClientProvider>
+    <Wrapped values={value} onChange={setValue} errors={{}} environmentId={1} />
   );
 }
 
@@ -61,5 +46,5 @@ AdminAccessControl.args = {
 
 export const NonAdminAccessControl: Story<Args> = Template.bind({});
 NonAdminAccessControl.args = {
-  userRole: Role.User,
+  userRole: Role.Standard,
 };

app/react/portainer/access-control/AccessControlForm/AccessControlForm.test.tsx

@@ -1,12 +1,14 @@
 import { http, HttpResponse } from 'msw';
+import { render, within } from '@testing-library/react';
 
 import { server } from '@/setup-tests/server';
-import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
-import { renderWithQueryClient, within } from '@/react-tools/test-utils';
 import { Team, TeamId } from '@/react/portainer/users/teams/types';
 import { createMockTeams } from '@/react-tools/test-mocks';
 import { UserId } from '@/portainer/users/types';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { withTestRouter } from '@/react/test-utils/withRouter';
 
 import { ResourceControlOwnership, AccessControlFormData } from '../types';
 import { ResourceControlViewModel } from '../models/ResourceControlViewModel';
@@ -304,7 +306,6 @@ async function renderComponent(
   { isAdmin = false, hideTitle = false, teams, users }: AdditionalProps = {}
 ) {
   const user = new UserViewModel({ Username: 'user', Role: isAdmin ? 1 : 2 });
-  const state = { user };
 
   if (teams) {
     server.use(http.get('/api/teams', () => HttpResponse.json(teams)));
@@ -314,16 +315,18 @@ async function renderComponent(
     server.use(http.get('/api/users', () => HttpResponse.json(users)));
   }
 
-  const renderResult = renderWithQueryClient(
-    <UserContext.Provider value={state}>
-      <AccessControlForm
-        environmentId={1}
-        errors={{}}
-        values={values}
-        onChange={onChange}
-        hideTitle={hideTitle}
-      />
-    </UserContext.Provider>
+  const Wrapped = withTestRouter(
+    withTestQueryProvider(withUserProvider(AccessControlForm, user))
+  );
+
+  const renderResult = render(
+    <Wrapped
+      environmentId={1}
+      errors={{}}
+      values={values}
+      onChange={onChange}
+      hideTitle={hideTitle}
+    />
   );
 
   await expect(

app/react/portainer/access-control/AccessControlPanel/AccessControlPaneDetails.test.tsx

@@ -1,11 +1,13 @@
 import _ from 'lodash';
 import { http, HttpResponse } from 'msw';
+import { render } from '@testing-library/react';
 
 import { createMockTeams, createMockUsers } from '@/react-tools/test-mocks';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
 import { server } from '@/setup-tests/server';
 import { Role } from '@/portainer/users/types';
 import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import {
   ResourceControlOwnership,
@@ -145,9 +147,11 @@ async function renderComponent(
   resourceType: ResourceControlType = ResourceControlType.Container,
   resourceControl?: ResourceControlViewModel
 ) {
-  const WithUser = withUserProvider(AccessControlPanelDetails);
-  const queries = renderWithQueryClient(
-    <WithUser resourceControl={resourceControl} resourceType={resourceType} />
+  const Wrapped = withTestQueryProvider(
+    withTestRouter(withUserProvider(AccessControlPanelDetails))
+  );
+  const queries = render(
+    <Wrapped resourceControl={resourceControl} resourceType={resourceType} />
   );
   await expect(queries.findByText('Ownership')).resolves.toBeVisible();
 

app/react/portainer/account/CreateAccessTokenView/CreateUserAccessToken.test.tsx

@@ -1,8 +1,10 @@
 import userEvent from '@testing-library/user-event';
+import { render, waitFor } from '@testing-library/react';
 
-import { renderWithQueryClient, waitFor } from '@/react-tools/test-utils';
 import { UserViewModel } from '@/portainer/models/user';
-import { UserContext } from '@/react/hooks/useUser';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { CreateUserAccessToken } from './CreateUserAccessToken';
 
@@ -33,9 +35,9 @@ test('the button is disabled when all fields are blank and enabled when all fiel
 function renderComponent() {
   const user = new UserViewModel({ Username: 'user' });
 
-  return renderWithQueryClient(
-    <UserContext.Provider value={{ user }}>
-      <CreateUserAccessToken />
-    </UserContext.Provider>
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(withTestRouter(CreateUserAccessToken), user)
   );
+
+  return render(<Wrapped />);
 }

app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/CustomTemplatesVariablesField.test.tsx

@@ -1,7 +1,6 @@
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
-
-import { render, screen } from '@/react-tools/test-utils';
+import { render, screen } from '@testing-library/react';
 
 import {
   CustomTemplatesVariablesField,

app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/VariableFieldItem.test.tsx

@@ -1,7 +1,6 @@
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
-
-import { render, screen } from '@/react-tools/test-utils';
+import { render, screen } from '@testing-library/react';
 
 import { VariableFieldItem } from './VariableFieldItem';
 

app/react/portainer/templates/app-templates/AppTemplatesListItem.test.tsx

@@ -1,7 +1,6 @@
 import userEvent from '@testing-library/user-event';
 import { PropsWithChildren } from 'react';
-
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { AppTemplatesListItem } from './AppTemplatesListItem';
 import { TemplateViewModel } from './view-model';

app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamAssociationSelector.test.tsx

@@ -1,6 +1,8 @@
-import { UserContext } from '@/react/hooks/useUser';
+import { render } from '@testing-library/react';
+
 import { UserViewModel } from '@/portainer/models/user';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
 
 import { TeamAssociationSelector } from './TeamAssociationSelector';
 
@@ -13,9 +15,9 @@ test('renders correctly', () => {
 function renderComponent() {
   const user = new UserViewModel({ Username: 'user' });
 
-  return renderWithQueryClient(
-    <UserContext.Provider value={{ user }}>
-      <TeamAssociationSelector users={[]} memberships={[]} teamId={3} />
-    </UserContext.Provider>
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(TeamAssociationSelector, user)
   );
+
+  return render(<Wrapped users={[]} memberships={[]} teamId={3} />);
 }

app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.test.tsx

@@ -1,6 +1,8 @@
-import { UserContext } from '@/react/hooks/useUser';
+import { render } from '@testing-library/react';
+
 import { UserViewModel } from '@/portainer/models/user';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { TeamMembersList } from './TeamMembersList';
 
@@ -13,11 +15,11 @@ test('renders correctly', () => {
 function renderComponent() {
   const user = new UserViewModel({ Username: 'user' });
 
-  return renderWithQueryClient(
-    <UserContext.Provider value={{ user }}>
-      <TeamMembersList users={[]} roles={{}} teamId={3} />
-    </UserContext.Provider>
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(TeamMembersList, user)
   );
+
+  return render(<Wrapped users={[]} roles={{}} teamId={3} />);
 }
 
 test.todo('when users list is empty, add all users button is disabled');

app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.test.tsx

@@ -1,6 +1,8 @@
-import { UserContext } from '@/react/hooks/useUser';
+import { render } from '@testing-library/react';
+
 import { UserViewModel } from '@/portainer/models/user';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
 
 import { UsersList } from './UsersList';
 
@@ -12,11 +14,10 @@ test('renders correctly', () => {
 
 function renderComponent() {
   const user = new UserViewModel({ Username: 'user' });
-  return renderWithQueryClient(
-    <UserContext.Provider value={{ user }}>
-      <UsersList users={[]} teamId={3} />
-    </UserContext.Provider>
-  );
+
+  const Wrapped = withTestQueryProvider(withUserProvider(UsersList, user));
+
+  return render(<Wrapped users={[]} teamId={3} />);
 }
 
 test.todo('when users list is empty, add all users button is disabled');

app/react/portainer/users/teams/ListView/CreateTeamForm/CreateTeamForm.test.tsx

@@ -1,12 +1,15 @@
 import userEvent from '@testing-library/user-event';
+import { render, waitFor } from '@testing-library/react';
 
-import { renderWithQueryClient, waitFor } from '@/react-tools/test-utils';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { CreateTeamForm } from './CreateTeamForm';
 
 test('filling the name should make the submit button clickable and emptying it should make it disabled', async () => {
-  const { findByLabelText, findByText } = renderWithQueryClient(
-    <CreateTeamForm users={[]} teams={[]} />
+  const Wrapped = withTestQueryProvider(CreateTeamForm);
+
+  const { findByLabelText, findByText } = render(
+    <Wrapped users={[]} teams={[]} />
   );
 
   const button = await findByText('Create team');