richie-education 2.25.0-b2.dev148 → 2.25.0-b2.dev152

package/js/widgets/Dashboard/components/DashboardItem/index.spec.tsx

@@ -1,6 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
+import { screen } from '@testing-library/react';
 import { userEvent } from '@storybook/testing-library';
+import { PropsWithChildren } from 'react';
+import { render } from 'utils/test/render';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
 import { DashboardSubItemsList } from './DashboardSubItemsList';
 import { DashboardSubItem } from './DashboardSubItem';
 import { DashboardItem, DEMO_IMAGE_URL } from '.';
@@ -14,6 +16,7 @@ describe('<DashboardItem />', () => {
         imageUrl={DEMO_IMAGE_URL}
         footer="Hi, i'm the footer"
       />,
+      { wrapper: null },
     );
 
     expect(screen.getByText('Become a React pro')).toBeInTheDocument();
@@ -34,6 +37,7 @@ describe('<DashboardItem />', () => {
         footer="Hi, i'm the footer"
         mode="compact"
       />,
+      { wrapper: null },
     );
 
     expect(screen.getByText("Hi, i'm the footer")).toBeInTheDocument();
@@ -54,6 +58,7 @@ describe('<DashboardItem />', () => {
           ]}
         />
       </DashboardItem>,
+      { wrapper: null },
     );
 
     screen.getByText('Sub 1');
@@ -63,27 +68,27 @@ describe('<DashboardItem />', () => {
 
   it('renders a DashboardItem with more dropdown', async () => {
     render(
-      <IntlProvider locale="en">
-        <DashboardItem
-          title="Become a React pro"
-          code="Ref. 123"
-          imageUrl={DEMO_IMAGE_URL}
-          more={
-            <>
-              <li>
-                <div className="selector__list__link">Copy</div>
-              </li>
-              <li>
-                <div className="selector__list__link">Duplicate</div>
-              </li>
-              <li>
-                <div className="selector__list__link">Delete</div>
-              </li>
-            </>
-          }
-        />
-        ,
-      </IntlProvider>,
+      <DashboardItem
+        title="Become a React pro"
+        code="Ref. 123"
+        imageUrl={DEMO_IMAGE_URL}
+        more={
+          <>
+            <li>
+              <div className="selector__list__link">Copy</div>
+            </li>
+            <li>
+              <div className="selector__list__link">Duplicate</div>
+            </li>
+            <li>
+              <div className="selector__list__link">Delete</div>
+            </li>
+          </>
+        }
+      />,
+      {
+        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+      },
     );
 
     expect(screen.queryByText('Copy')).not.toBeInTheDocument();

package/js/widgets/Dashboard/components/DashboardLayoutRoute/index.spec.tsx

@@ -1,13 +1,9 @@
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { screen } from '@testing-library/react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { render } from 'utils/test/render';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { DashboardLayoutRoute } from '.';
 
 jest.mock('utils/context', () => ({
@@ -18,56 +14,62 @@ jest.mock('utils/context', () => ({
   }).one(),
 }));
 
-const renderDashboardLayoutRoute = ({ renderLayout }: { renderLayout: boolean }) => {
-  const user = UserFactory().one();
-  const routes = [
-    {
-      path: '/',
-      children: [
-        {
-          path: '/dashboard',
-          handle: {
-            renderLayout: false,
-          },
-          element: <DashboardLayoutRoute />,
-          children: [
-            {
-              path: '/dashboard/page',
-              handle: {
-                renderLayout,
-              },
-              element: (
-                <div>
-                  <h1>Awesome page title</h1>
-                </div>
-              ),
-            },
-          ],
+const getRoutes = ({ renderLayout }: { renderLayout: boolean }) => [
+  {
+    path: '/',
+    children: [
+      {
+        path: '/dashboard',
+        handle: {
+          renderLayout: false,
         },
-      ],
-    },
-  ];
-  const router = createMemoryRouter(routes, { initialEntries: ['/dashboard/page'] });
-  return render(
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user })}>
-        <JoanieSessionProvider>
-          <RouterProvider router={router} />
-        </JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>,
-  );
-};
+        element: <DashboardLayoutRoute />,
+        children: [
+          {
+            path: '/dashboard/page',
+            handle: {
+              renderLayout,
+            },
+            element: (
+              <div>
+                <h1>Awesome page title</h1>
+              </div>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+];
 
 describe('<DashboardLayoutRoute/>', () => {
+  setupJoanieSession();
+
   it('should display DashboardLayout', async () => {
-    renderDashboardLayoutRoute({ renderLayout: false });
+    render(
+      <RouterWrapper
+        initialEntries={['/dashboard/page']}
+        routes={getRoutes({ renderLayout: false })}
+      />,
+      {
+        wrapper: BaseJoanieAppWrapper,
+      },
+    );
+
     expect(await screen.findByRole('heading', { name: 'Awesome page title' })).toBeInTheDocument();
     expect(screen.queryByTestId('location-display-/dashboard/page')).toBeInTheDocument();
   });
 
   it('should not display DashboardLayout', async () => {
-    renderDashboardLayoutRoute({ renderLayout: true });
+    render(
+      <RouterWrapper
+        initialEntries={['/dashboard/page']}
+        routes={getRoutes({ renderLayout: true })}
+      />,
+      {
+        wrapper: BaseJoanieAppWrapper,
+      },
+    );
     expect(await screen.findByRole('heading', { name: 'Awesome page title' })).toBeInTheDocument();
     expect(screen.queryByTestId('location-display-/dashboard/page')).not.toBeInTheDocument();
   });

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.spec.tsx

@@ -1,18 +1,14 @@
-import { render, screen } from '@testing-library/react';
-import { PropsWithChildren } from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
+import { screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
 import queryString from 'query-string';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { PER_PAGE } from 'settings';
 import { ContractResourceQuery, ContractState } from 'types/Joanie';
 import { ContractFactory } from 'utils/test/factories/joanie';
 import { ContractActions } from 'utils/AbilitiesHelper/types';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import { MenuLink } from '../..';
 import ContractNavLink from '.';
 
@@ -25,25 +21,11 @@ jest.mock('utils/context', () => ({
 }));
 
 describe('<ContractNavLink />', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <QueryClientProvider client={createTestQueryClient({ user: true })}>
-      <IntlProvider locale="en">
-        <JoanieSessionProvider>
-          <MemoryRouter>{children}</MemoryRouter>
-        </JoanieSessionProvider>
-      </IntlProvider>
-    </QueryClientProvider>
-  );
+  setupJoanieSession();
 
   beforeEach(() => {
-    // JoanieSessionProvider queries
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
+    // useDefaultOrganization hook request organization list
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
   });
 
   it('should render a ContractNavLink with route and label when neither organizationId and courseProductRelationId are given', () => {
@@ -52,11 +34,7 @@ describe('<ContractNavLink />', () => {
       label: 'My contract navigation link',
     };
 
-    render(
-      <Wrapper>
-        <ContractNavLink link={link} />
-      </Wrapper>,
-    );
+    render(<ContractNavLink link={link} />);
 
     expect(screen.getByRole('link', { name: 'My contract navigation link' })).toBeInTheDocument();
     expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
@@ -108,17 +86,16 @@ describe('<ContractNavLink />', () => {
             results: [ContractFactory({ abilities: contractAbilities }).one()],
           },
         );
+
         render(
-          <Wrapper>
-            <ContractNavLink
-              link={{
-                to: '/dummy/url/',
-                label: 'My contract navigation link',
-              }}
-              organizationId={organizationId}
-              courseProductRelationId={courseProductRelationId}
-            />
-          </Wrapper>,
+          <ContractNavLink
+            link={{
+              to: '/dummy/url/',
+              label: 'My contract navigation link',
+            }}
+            organizationId={organizationId}
+            courseProductRelationId={courseProductRelationId}
+          />,
         );
 
         expect(
@@ -216,16 +193,14 @@ describe('<ContractNavLink />', () => {
           },
         );
         render(
-          <Wrapper>
-            <ContractNavLink
-              link={{
-                to: '/dummy/url/',
-                label: 'My contract navigation link',
-              }}
-              organizationId={organizationId}
-              courseProductRelationId={courseProductRelationId}
-            />
-          </Wrapper>,
+          <ContractNavLink
+            link={{
+              to: '/dummy/url/',
+              label: 'My contract navigation link',
+            }}
+            organizationId={organizationId}
+            courseProductRelationId={courseProductRelationId}
+          />,
         );
 
         expect(

package/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.spec.tsx

@@ -1,22 +1,17 @@
-import { render, screen } from '@testing-library/react';
-import { PropsWithChildren } from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import { render } from 'utils/test/render';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import { MenuLink } from '../..';
 import MenuNavLink from '.';
 
 describe('<MenuNavLink />', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => <MemoryRouter>{children} </MemoryRouter>;
   it('should render a MenuNavLink with route and label', () => {
     const link: MenuLink = {
       to: '/dummy/url/',
       label: 'My navigation link',
     };
 
-    render(
-      <Wrapper>
-        <MenuNavLink link={link} />
-      </Wrapper>,
-    );
+    render(<MenuNavLink link={link} />, { wrapper: RouterWrapper });
 
     expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
     expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
@@ -28,11 +23,7 @@ describe('<MenuNavLink />', () => {
       label: 'My navigation link',
     };
 
-    render(
-      <Wrapper>
-        <MenuNavLink link={link} badgeCount={999} />
-      </Wrapper>,
-    );
+    render(<MenuNavLink link={link} badgeCount={999} />, { wrapper: RouterWrapper });
 
     expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
     expect(screen.getByText('999')).toBeInTheDocument();

package/js/widgets/Dashboard/components/ProtectedOutlet/AuthenticatedOutlet.spec.tsx

@@ -1,10 +1,10 @@
-import { render, screen } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { screen } from '@testing-library/react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { location } from 'utils/indirection/window';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { render } from 'utils/test/render';
+import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import AuthenticatedOutlet from './AuthenticatedOutlet';
 
 jest.mock('utils/context', () => ({
@@ -19,58 +19,32 @@ jest.mock('utils/indirection/window', () => ({
 }));
 
 describe('<AuthenticatedOutlet />', () => {
-  const AuthenticatedRouter = ({
-    redirectTo,
-    client,
-    ...routerOptions
-  }: {
-    redirectTo?: string;
-    client: QueryClient;
-    [key: PropertyKey]: any;
-  }) => {
-    const routes = [
-      {
-        path: '/',
-        element: <AuthenticatedOutlet redirectTo="/forbidden" />,
-        children: [
-          {
-            path: '/restricted',
-            element: <div data-testid="route-restricted" />,
-          },
-        ],
-      },
-      {
-        path: '*',
-        element: <div data-testid="route-forbidden" />,
-      },
-    ];
-
-    const router = createMemoryRouter(routes, { ...routerOptions });
-
-    return (
-      <QueryClientProvider client={client}>
-        <BaseSessionProvider>
-          <RouterProvider router={router} />
-        </BaseSessionProvider>
-      </QueryClientProvider>
-    );
-  };
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('should display child route if user is authenticated', () => {
+  it('should display child route if user is authenticated', async () => {
     render(
-      <AuthenticatedRouter
-        client={createTestQueryClient({ user: true })}
-        redirectTo="/forbidden"
+      <RouterWrapper
         initialEntries={['/restricted']}
+        routes={[
+          {
+            path: '/',
+            element: <AuthenticatedOutlet redirectTo="/forbidden" />,
+            children: [
+              {
+                path: '/restricted',
+                element: <div data-testid="route-restricted" />,
+              },
+            ],
+          },
+          {
+            path: '*',
+            element: <div data-testid="route-forbidden" />,
+          },
+        ]}
       />,
+      { wrapper: BaseAppWrapper },
     );
 
     // The restricted route should be rendered
-    screen.getByTestId('route-restricted');
+    await screen.findByTestId('route-restricted');
 
     // location.replace should not have been called
     expect(location.replace).not.toBeCalled();
@@ -78,11 +52,26 @@ describe('<AuthenticatedOutlet />', () => {
 
   it('should redirect to provided path if user is anonymous', () => {
     render(
-      <AuthenticatedRouter
-        client={createTestQueryClient()}
-        redirectTo="/forbidden"
+      <RouterWrapper
         initialEntries={['/restricted']}
+        routes={[
+          {
+            path: '/',
+            element: <AuthenticatedOutlet redirectTo="/forbidden" />,
+            children: [
+              {
+                path: '/restricted',
+                element: <div data-testid="route-restricted" />,
+              },
+            ],
+          },
+          {
+            path: '*',
+            element: <div data-testid="route-forbidden" />,
+          },
+        ]}
       />,
+      { wrapper: BaseAppWrapper, queryOptions: { client: createTestQueryClient() } },
     );
 
     // The restricted route should not be rendered
@@ -94,7 +83,26 @@ describe('<AuthenticatedOutlet />', () => {
 
   it('should redirect to "/" if user is anonymous and no redirect path is provided', () => {
     render(
-      <AuthenticatedRouter client={createTestQueryClient()} initialEntries={['/restricted']} />,
+      <RouterWrapper
+        initialEntries={['/restricted']}
+        routes={[
+          {
+            path: '/',
+            element: <AuthenticatedOutlet redirectTo="/forbidden" />,
+            children: [
+              {
+                path: '/restricted',
+                element: <div data-testid="route-restricted" />,
+              },
+            ],
+          },
+          {
+            path: '*',
+            element: <div data-testid="route-forbidden" />,
+          },
+        ]}
+      />,
+      { wrapper: BaseAppWrapper, queryOptions: { client: createTestQueryClient() } },
     );
 
     // The restricted route should not be rendered

package/js/widgets/Dashboard/components/ProtectedOutlet/ProtectedOutlet.spec.tsx

@@ -1,6 +1,7 @@
-import { screen, render } from '@testing-library/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { screen } from '@testing-library/react';
 import { location } from 'utils/indirection/window';
+import { render } from 'utils/test/render';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import ProtectedOutlet from './ProtectedOutlet';
 
 jest.mock('utils/indirection/window', () => ({
@@ -10,45 +11,28 @@ jest.mock('utils/indirection/window', () => ({
 }));
 
 describe('<ProtectedOutlet />', () => {
-  const ProtectedRouter = ({
-    isAllowed,
-    redirectTo,
-    ...routerOptions
-  }: {
-    isAllowed: Boolean;
-    redirectTo?: string;
-    [key: PropertyKey]: any;
-  }) => {
-    const router = createMemoryRouter(
-      [
-        {
-          path: '/',
-          element: <ProtectedOutlet isAllowed={isAllowed} redirectTo={redirectTo} />,
-          children: [
-            {
-              path: '/restricted',
-              element: <div data-testid="route-restricted" />,
-            },
-          ],
-        },
-        {
-          path: '*',
-          element: <div data-testid="route-forbidden" />,
-        },
-      ],
-      { ...routerOptions },
-    );
-
-    return <RouterProvider router={router} />;
-  };
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
   it('should display child route if isAllowed is true', () => {
     render(
-      <ProtectedRouter isAllowed={true} redirectTo="/forbidden" initialEntries={['/restricted']} />,
+      <RouterWrapper
+        initialEntries={['/restricted']}
+        routes={[
+          {
+            path: '/',
+            element: <ProtectedOutlet isAllowed={true} redirectTo="/forbidden" />,
+            children: [
+              {
+                path: '/restricted',
+                element: <div data-testid="route-restricted" />,
+              },
+            ],
+          },
+          {
+            path: '*',
+            element: <div data-testid="route-forbidden" />,
+          },
+        ]}
+      />,
+      { wrapper: null },
     );
 
     // The restricted route should be rendered
@@ -59,8 +43,28 @@ describe('<ProtectedOutlet />', () => {
   });
 
   it('should redirect to provided path if isAllowed is false', () => {
-    render(<ProtectedRouter isAllowed={false} redirectTo="/forbidden" initialEntries={['/']} />);
-
+    render(
+      <RouterWrapper
+        initialEntries={['/']}
+        routes={[
+          {
+            path: '/',
+            element: <ProtectedOutlet isAllowed={false} redirectTo="/forbidden" />,
+            children: [
+              {
+                path: '/restricted',
+                element: <div data-testid="route-restricted" />,
+              },
+            ],
+          },
+          {
+            path: '*',
+            element: <div data-testid="route-forbidden" />,
+          },
+        ]}
+      />,
+      { wrapper: null },
+    );
     // The restricted route should not be rendered
     expect(screen.queryByTestId('route-restricted')).toBeNull();
 
@@ -69,7 +73,28 @@ describe('<ProtectedOutlet />', () => {
   });
 
   it('should redirect to "/" if isAllowed is false and no redirect path is provided', () => {
-    render(<ProtectedRouter isAllowed={false} initialEntries={['/']} />);
+    render(
+      <RouterWrapper
+        initialEntries={['/']}
+        routes={[
+          {
+            path: '/',
+            element: <ProtectedOutlet isAllowed={false} />,
+            children: [
+              {
+                path: '/restricted',
+                element: <div data-testid="route-restricted" />,
+              },
+            ],
+          },
+          {
+            path: '*',
+            element: <div data-testid="route-forbidden" />,
+          },
+        ]}
+      />,
+      { wrapper: null },
+    );
 
     // The restricted route should not be rendered
     expect(screen.queryByTestId('route-restricted')).toBeNull();