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

app/react/components/Badge/Badge.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { Badge } from './Badge';
 

app/react/components/BoxSelector/BoxSelector.test.tsx

@@ -1,6 +1,5 @@
 import { Rocket } from 'lucide-react';
-
-import { render, fireEvent } from '@/react-tools/test-utils';
+import { render, fireEvent } from '@testing-library/react';
 
 import { BoxSelector } from './BoxSelector';
 import { BoxSelectorOption, Value } from './types';

app/react/components/DashboardItem/DashboardItem.test.tsx

@@ -1,6 +1,5 @@
 import { User } from 'lucide-react';
-
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { DashboardItem } from './DashboardItem';
 

app/react/components/DetailsTable/DetailsTable.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { DetailsTable } from './index';
 

app/react/components/EdgeIndicator.test.tsx

@@ -1,5 +1,8 @@
+import { render } from '@testing-library/react';
+
 import { createMockEnvironment } from '@/react-tools/test-mocks';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
+
+import { withTestQueryProvider } from '../test-utils/withTestQuery';
 
 import { EdgeIndicator } from './EdgeIndicator';
 
@@ -31,8 +34,10 @@ async function renderComponent(
   environment.EdgeCheckinInterval = checkInInterval;
   environment.QueryDate = queryDate;
 
-  const queries = renderWithQueryClient(
-    <EdgeIndicator environment={environment} showLastCheckInDate />
+  const Wrapped = withTestQueryProvider(EdgeIndicator);
+
+  const queries = render(
+    <Wrapped environment={environment} showLastCheckInDate />
   );
 
   await expect(queries.findByRole('status')).resolves.toBeVisible();

app/react/components/ImageConfigFieldset/ImageConfigFieldset.test.tsx

@@ -1,9 +1,10 @@
 import { FormikErrors } from 'formik';
 import { ComponentProps } from 'react';
 import { HttpResponse } from 'msw';
+import { render, fireEvent } from '@testing-library/react';
 
-import { renderWithQueryClient, fireEvent } from '@/react-tools/test-utils';
 import { http, server } from '@/setup-tests/server';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { ImageConfigFieldset } from './ImageConfigFieldset';
 import { Values } from './types';
@@ -16,20 +17,20 @@ vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
 }));
 
 it('should render SimpleForm when useRegistry is true', () => {
-  const { getByText } = render({ values: { useRegistry: true } });
+  const { getByText } = renderComponent({ values: { useRegistry: true } });
 
   expect(getByText('Advanced mode')).toBeInTheDocument();
 });
 
 it('should render AdvancedForm when useRegistry is false', () => {
-  const { getByText } = render({ values: { useRegistry: false } });
+  const { getByText } = renderComponent({ values: { useRegistry: false } });
 
   expect(getByText('Simple mode')).toBeInTheDocument();
 });
 
 it('should call setFieldValue with useRegistry set to false when "Advanced mode" button is clicked', () => {
   const setFieldValue = vi.fn();
-  const { getByText } = render({
+  const { getByText } = renderComponent({
     values: { useRegistry: true },
     setFieldValue,
   });
@@ -41,7 +42,7 @@ it('should call setFieldValue with useRegistry set to false when "Advanced mode"
 
 it('should call setFieldValue with useRegistry set to true when "Simple mode" button is clicked', () => {
   const setFieldValue = vi.fn();
-  const { getByText } = render({
+  const { getByText } = renderComponent({
     values: { useRegistry: false },
     setFieldValue,
   });
@@ -51,7 +52,7 @@ it('should call setFieldValue with useRegistry set to true when "Simple mode" bu
   expect(setFieldValue).toHaveBeenCalledWith('useRegistry', true);
 });
 
-function render({
+function renderComponent({
   values = {
     useRegistry: true,
     registryId: 123,
@@ -73,8 +74,10 @@ function render({
     http.get('/api/endpoints/:id', () => HttpResponse.json({}))
   );
 
-  return renderWithQueryClient(
-    <ImageConfigFieldset
+  const Wrapped = withTestQueryProvider(ImageConfigFieldset);
+
+  return render(
+    <Wrapped
       values={{
         useRegistry: true,
         registryId: 123,

app/react/components/NavTabs/NavTabs.test.tsx

@@ -1,5 +1,7 @@
-import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
+
+import { withTestRouter } from '@/react/test-utils/withRouter';
 
 import { NavTabs, Option } from './NavTabs';
 
@@ -32,6 +34,7 @@ test('should show selected id content', async () => {
 });
 
 test('should call onSelect when clicked with id', async () => {
+  const user = userEvent.setup();
   const options = [
     { children: 'Content 1', id: 'option1', label: 'Option 1' },
     { children: 'Content 2', id: 'option2', label: 'Option 2' },
@@ -42,7 +45,7 @@ test('should call onSelect when clicked with id', async () => {
   const { findByText } = renderComponent(options, options[1].id, onSelect);
 
   const heading = await findByText(options[0].label);
-  await userEvent.click(heading);
+  await user.click(heading);
 
   expect(onSelect).toHaveBeenCalledWith(options[0].id);
 });
@@ -52,7 +55,9 @@ function renderComponent(
   selectedId?: string | number,
   onSelect?: (id: string | number) => void
 ) {
+  const Wrapped = withTestRouter(NavTabs);
+
   return render(
-    <NavTabs options={options} selectedId={selectedId} onSelect={onSelect} />
+    <Wrapped options={options} selectedId={selectedId} onSelect={onSelect} />
   );
 }

app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { Breadcrumbs } from './Breadcrumbs';
 

app/react/components/PageHeader/HeaderTitle.test.tsx

@@ -1,8 +1,9 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { render } from '@testing-library/react';
 
-import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
-import { render } from '@/react-tools/test-utils';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { HeaderContainer } from './HeaderContainer';
 import { HeaderTitle } from './HeaderTitle';
@@ -14,7 +15,8 @@ test('should not render without a wrapping HeaderContainer', async () => {
 
   const title = 'title';
   function renderComponent() {
-    return render(<HeaderTitle title={title} />);
+    const Wrapped = withTestQueryProvider(HeaderTitle);
+    return render(<Wrapped title={title} />);
   }
 
   expect(renderComponent).toThrowErrorMatchingSnapshot();
@@ -25,19 +27,22 @@ test('should not render without a wrapping HeaderContainer', async () => {
 test('should display a HeaderTitle', async () => {
   const username = 'username';
   const user = new UserViewModel({ Username: username });
-  const queryClient = new QueryClient();
 
   const title = 'title';
-  const { queryByText } = render(
-    <QueryClientProvider client={queryClient}>
-      <UserContext.Provider value={{ user }}>
+
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(
+      withTestRouter(() => (
         <HeaderContainer>
           <HeaderTitle title={title} />
         </HeaderContainer>
-      </UserContext.Provider>
-    </QueryClientProvider>
+      )),
+      user
+    )
   );
 
+  const { queryByText } = render(<Wrapped />);
+
   const heading = queryByText(title);
   expect(heading).toBeVisible();
 

app/react/components/PageHeader/PageHeader.test.tsx

@@ -1,6 +1,9 @@
-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 { withTestRouter } from '@/react/test-utils/withRouter';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { PageHeader } from './PageHeader';
 
@@ -8,13 +11,13 @@ test('should display a PageHeader', async () => {
   const username = 'username';
   const user = new UserViewModel({ Username: username });
 
-  const title = 'title';
-  const { queryByText } = renderWithQueryClient(
-    <UserContext.Provider value={{ user }}>
-      <PageHeader title={title} />
-    </UserContext.Provider>
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(withTestRouter(PageHeader), user)
   );
 
+  const title = 'title';
+  const { queryByText } = render(<Wrapped title={title} />);
+
   const heading = queryByText(title);
   expect(heading).toBeVisible();
 

app/react/components/TagSelector/TagSelector.test.tsx

@@ -1,9 +1,11 @@
 import { http, HttpResponse } from 'msw';
 import { Mock } from 'vitest';
+import { render } from '@testing-library/react';
 
 import { Tag, TagId } from '@/portainer/tags/types';
-import { renderWithQueryClient } from '@/react-tools/test-utils';
 import { server } from '@/setup-tests/server';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
 import { TagSelector } from './TagSelector';
 
@@ -54,8 +56,10 @@ async function renderComponent(
 ) {
   server.use(http.get('/api/tags', () => HttpResponse.json(tags)));
 
-  const queries = renderWithQueryClient(
-    <TagSelector value={value} allowCreate={allowCreate} onChange={onChange} />
+  const Wrapped = withTestQueryProvider(withTestRouter(TagSelector));
+
+  const queries = render(
+    <Wrapped value={value} allowCreate={allowCreate} onChange={onChange} />
   );
 
   const tagElement = await queries.findAllByText('tags', { exact: false });

app/react/components/buttons/AddButton.test.tsx

@@ -1,11 +1,34 @@
-import { render } from '@/react-tools/test-utils';
+import { UIView } from '@uirouter/react';
+import { render } from '@testing-library/react';
+
+import { withTestRouter } from '@/react/test-utils/withRouter';
 
 import { AddButton } from './AddButton';
 
 function renderDefault({
   label = 'default label',
 }: Partial<{ label: string }> = {}) {
-  return render(<AddButton to="">{label}</AddButton>);
+  const Wrapped = withTestRouter(AddButton, {
+    stateConfig: [
+      {
+        name: 'root',
+        url: '/',
+
+        component: () => (
+          <>
+            <div>Root</div>
+            <UIView />
+          </>
+        ),
+      },
+      {
+        name: 'root.new',
+        url: 'new',
+      },
+    ],
+    route: 'root',
+  });
+  return render(<Wrapped to="">{label}</Wrapped>);
 }
 
 test('should display a AddButton component', async () => {

app/react/components/buttons/Button.test.tsx

@@ -1,5 +1,5 @@
-import { fireEvent, render } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { Button, Props } from './Button';
 

app/react/components/buttons/ButtonGroup.test.tsx

@@ -1,5 +1,5 @@
-import { render } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
+import { render } from '@testing-library/react';
 
 import { ButtonGroup, Props } from './ButtonGroup';
 

app/react/components/buttons/LoadingButton.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { LoadingButton } from './LoadingButton';
 

app/react/components/form-components/FileUpload/FileUploadField.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@/react-tools/test-utils';
+import { fireEvent, render } from '@testing-library/react';
 
 import { FileUploadField } from './FileUploadField';
 

app/react/components/form-components/FileUpload/FileUploadForm.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { FileUploadForm } from './FileUploadForm';
 

app/react/components/form-components/Slider/Slider.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@/react-tools/test-utils';
+import { render } from '@testing-library/react';
 
 import { Slider, Props } from './Slider';
 

app/react/components/form-components/SwitchField/Switch.test.tsx

@@ -1,5 +1,5 @@
-import { render } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
+import { render } from '@testing-library/react';
 
 import { Switch, Props } from './Switch';
 

app/react/components/form-components/SwitchField/SwitchField.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@/react-tools/test-utils';
+import { render, fireEvent } from '@testing-library/react';
 
 import { SwitchField, Props } from './SwitchField';
 

app/react/components/ui-router.test.tsx

@@ -0,0 +1,39 @@
+import { UISref, UIView } from '@uirouter/react';
+import { render, screen } from '@testing-library/react';
+
+import { withTestRouter } from '@/react/test-utils/withRouter';
+
+function RelativePathLink() {
+  return (
+    <UISref to=".custom">
+      <span>Link</span>
+    </UISref>
+  );
+}
+
+test.todo('should render a link with relative path', () => {
+  const WrappedComponent = withTestRouter(RelativePathLink, {
+    stateConfig: [
+      {
+        name: 'parent',
+        url: '/',
+
+        component: () => (
+          <>
+            <div>parent</div>
+            <UIView />
+          </>
+        ),
+      },
+      {
+        name: 'parent.custom',
+        url: 'custom',
+      },
+    ],
+    route: 'parent',
+  });
+
+  render(<WrappedComponent />);
+
+  expect(screen.getByText('Link')).toBeInTheDocument();
+});