richie 2.25.0b2.dev98__tar.gz → 2.25.0b2.dev101__tar.gz

{richie-2.25.0b2.dev98 → richie-2.25.0b2.dev101}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: richie
-Version: 2.25.0b2.dev98
+Version: 2.25.0b2.dev101
 Summary: A CMS to build learning portals for open education
 Author-email: "Open FUN (France Université Numérique)" <fun.dev@fun-mooc.fr>
 License: MIT License

{richie-2.25.0b2.dev98 → richie-2.25.0b2.dev101}/src/frontend/jest/setup.ts

@@ -1,5 +1,6 @@
 // Extend jest matchers with jest-dom's
 import '@testing-library/jest-dom';
+import fetchMock from 'fetch-mock';
 import { Request, Response } from 'node-fetch';
 import { FactoryConfig } from 'utils/test/factories/factories';
 
@@ -33,4 +34,6 @@ beforeAll(() => {
 
 afterEach(() => {
   FactoryConfig.resetUniqueStore();
+  fetchMock.restore();
+  jest.clearAllMocks();
 });

richie-2.25.0b2.dev101/src/frontend/js/utils/test/render.tsx

@@ -0,0 +1,72 @@
+import { RenderResult, screen, render as testingLibraryRender } from '@testing-library/react';
+import React, { ReactElement } from 'react';
+import { Nullable } from 'types/utils';
+import { AppWrapperProps } from './wrappers/types';
+import { JoanieAppWrapper } from './wrappers/JoanieAppWrapper';
+
+//  ------- setup -------
+
+type CustomRenderResult = Omit<RenderResult, 'rerender'> & {
+  elementContainer: Nullable<HTMLElement>;
+  rerender: (
+    element: ReactElement,
+    options?: Partial<Omit<AppWrapperProps, 'testingLibraryOptions'>>,
+  ) => void;
+};
+
+type RenderFunction = (
+  element: ReactElement,
+  options?: Partial<AppWrapperProps>,
+) => CustomRenderResult;
+
+/**
+ *
+ * Custom render method base on react-testing-library render method.
+ * This will render {@param element} in JSDom and read options to configure context and render.
+ * It also override react-testing-library rerender method to also wrap the provided component in
+ * the same contexts.
+ *
+ * The provided {@param element} is to be wrapped in :
+ * - react router (react-router-dom)
+ * - react i18n context (react-intl)
+ * - query context (react-query)
+ *
+ * This function uses default values:
+ * options.intlOptions.locale : 'en'
+ * options.routerOptions.path : '/'
+ * options.queryOptions.client : {@see queryClient}
+ *
+ *
+ * @param element element to wrap in application contexts and test
+ * @param options options to configure and/or customize wrapped context for the test {@see RenderOptions}
+ * @returns an object with all values return by react-testing-library render methods
+ * and an other property {@property elementContainer} refering to the exact element containing the {@param element} to test
+ *
+ *
+ * @example
+ * customRender(<SomeComponentToTest />);
+ * customRender(<SomeComponentToTest />, { wrapper: WrapperPresentationalApp });
+ */
+export const render: RenderFunction = (
+  element: ReactElement,
+  options?: Partial<AppWrapperProps>,
+) => {
+  const Wrapper = options?.wrapper === undefined ? JoanieAppWrapper : options?.wrapper;
+  const renderResult = testingLibraryRender(
+    Wrapper === null ? element : <Wrapper {...options}>{element}</Wrapper>,
+    options?.testingLibraryOptions,
+  );
+
+  return {
+    ...renderResult,
+    elementContainer: screen.queryByTestId('test-component-container'),
+    rerender: (
+      rerenderElement: ReactElement,
+      rerenderOptions?: Partial<Omit<AppWrapperProps, 'testingLibraryOptions'>>,
+    ) => {
+      return renderResult.rerender(
+        Wrapper === null ? element : <Wrapper {...rerenderOptions}>{rerenderElement}</Wrapper>,
+      );
+    },
+  };
+};

richie-2.25.0b2.dev101/src/frontend/js/utils/test/wrappers/IntlWrapper.tsx

@@ -0,0 +1,23 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+import { IntlProvider, ReactIntlErrorCode } from 'react-intl';
+
+export interface IntlWrapperProps extends PropsWithChildren, ComponentProps<typeof IntlProvider> {}
+
+export const IntlWrapper = ({ children, ...options }: IntlWrapperProps) => (
+  <IntlProvider
+    onError={(err) => {
+      // https://github.com/formatjs/formatjs/issues/465
+      if (
+        err.code === ReactIntlErrorCode.MISSING_TRANSLATION ||
+        err.code === ReactIntlErrorCode.MISSING_DATA
+      ) {
+        return;
+      }
+      throw err;
+    }}
+    {...options}
+    locale={options?.locale || 'en'}
+  >
+    {children}
+  </IntlProvider>
+);

richie-2.25.0b2.dev101/src/frontend/js/utils/test/wrappers/JoanieAppWrapper.tsx

@@ -0,0 +1,42 @@
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { PropsWithChildren } from 'react';
+import fetchMock from 'fetch-mock';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { RouterWrapper } from './RouterWrapper';
+import { AppWrapperProps } from './types';
+
+export const setupJoanieSession = () => {
+  beforeEach(() => {
+    // JoanieSessionProvider inital requests
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  return {
+    nbSessionApiRequest: 3,
+  };
+};
+
+export const JoanieSessionWrapper = ({ children }: PropsWithChildren) => {
+  return <JoanieSessionProvider>{children}</JoanieSessionProvider>;
+};
+
+export const JoanieAppWrapper = ({
+  children,
+  options,
+}: PropsWithChildren<{ options?: AppWrapperProps }>) => {
+  return (
+    <IntlWrapper {...(options?.intlOptions || { locale: 'en' })}>
+      <CunninghamProvider>
+        <ReactQueryWrapper {...(options?.queryOptions || {})}>
+          <JoanieSessionWrapper>
+            <RouterWrapper {...options?.routerOptions}>{children}</RouterWrapper>
+          </JoanieSessionWrapper>
+        </ReactQueryWrapper>
+      </CunninghamProvider>
+    </IntlWrapper>
+  );
+};

richie-2.25.0b2.dev101/src/frontend/js/utils/test/wrappers/PresentationalAppWrapper.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { IntlWrapper } from './IntlWrapper';
+import { RouterWrapper } from './RouterWrapper';
+import { AppWrapperProps } from './types';
+
+export const PresentationalAppWrapper = ({
+  children,
+  options,
+}: PropsWithChildren<{ options?: AppWrapperProps }>) => {
+  return (
+    <IntlWrapper {...(options?.intlOptions || { locale: 'en' })}>
+      <CunninghamProvider>
+        <RouterWrapper {...options?.routerOptions}>{children}</RouterWrapper>
+      </CunninghamProvider>
+    </IntlWrapper>
+  );
+};

richie-2.25.0b2.dev101/src/frontend/js/utils/test/wrappers/ReactQueryWrapper.tsx

@@ -0,0 +1,16 @@
+import { QueryClient } from '@tanstack/query-core';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+import { createTestQueryClient } from '../createTestQueryClient';
+
+interface ReactQueryWrapperProps extends PropsWithChildren {
+  client?: QueryClient;
+}
+
+export const ReactQueryWrapper = ({ children, client }: ReactQueryWrapperProps) => {
+  return (
+    <QueryClientProvider client={client ?? createTestQueryClient({ user: true })}>
+      {children}
+    </QueryClientProvider>
+  );
+};

richie-2.25.0b2.dev101/src/frontend/js/utils/test/wrappers/RouterWrapper.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+import { RouteObject, RouterProvider, createMemoryRouter } from 'react-router-dom';
+import { Maybe } from 'types/utils';
+
+export interface RouterWrapperProps extends PropsWithChildren {
+  routes?: RouteObject[];
+  path?: string;
+  initialEntries?: Maybe<string[]>;
+}
+
+export const RouterWrapper = ({
+  children,
+  routes = [],
+  path = '/',
+  initialEntries,
+}: RouterWrapperProps) => {
+  const router = createMemoryRouter(
+    routes.length > 0
+      ? routes
+      : [
+          {
+            path,
+            element: children,
+          },
+        ],
+    { initialEntries: initialEntries || [path] },
+  );
+  return <RouterProvider router={router} />;
+};

richie-2.25.0b2.dev101/src/frontend/js/utils/test/wrappers/types.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { QueryClient } from '@tanstack/query-core';
+import { RenderOptions as TestingLibraryRenderOptions } from '@testing-library/react';
+import { Nullable } from 'types/utils';
+import { IntlWrapperProps } from './IntlWrapper';
+import { RouterWrapperProps } from './RouterWrapper';
+
+interface QueryOptions {
+  client: QueryClient;
+}
+
+/**
+ * Options to configure the render of a component for a test
+ *
+ * @property testingLibraryOptions options provided by react-testing-library to the render method
+ * @property intlOptions options to configure i18n context
+ * @property routerOptions options to configure router and routes in the test
+ * @property queryOptions options to configure a custom client used by react-query for a test
+ */
+export interface AppWrapperProps {
+  wrapper?: Nullable<(props: PropsWithChildren<{ options?: AppWrapperProps }>) => JSX.Element>;
+  intlOptions?: IntlWrapperProps;
+  queryOptions?: QueryOptions;
+  routerOptions?: RouterWrapperProps;
+  testingLibraryOptions?: TestingLibraryRenderOptions;
+}

richie-2.25.0b2.dev101/src/frontend/js/widgets/Dashboard/components/NavigateWithParams/index.spec.tsx

@@ -0,0 +1,53 @@
+import { screen } from '@testing-library/react';
+import { Outlet } from 'react-router-dom';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import LocationDisplay from 'utils/test/LocationDisplay';
+import { render } from 'utils/test/render';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
+import NavigateWithParams from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory().one(),
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    replace: jest.fn(),
+  },
+}));
+
+describe('<NavigateWithParams />', () => {
+  it('should navigate with parent route params', async () => {
+    const routes = [
+      {
+        path: '/:testId',
+        element: (
+          <div>
+            <h1>NavigateWithParams test</h1>
+            <Outlet />
+          </div>
+        ),
+        children: [
+          {
+            index: true,
+            element: <NavigateWithParams to="/:testId/childRoute" replace />,
+          },
+          {
+            path: '/:testId/childRoute',
+            element: (
+              <div>
+                <h2>NavigateWithParams child route</h2>
+                <LocationDisplay />
+              </div>
+            ),
+          },
+        ],
+      },
+    ];
+    render(<RouterWrapper routes={routes} initialEntries={['/myTestId']} />, { wrapper: null });
+    expect(await screen.findByRole('heading', { name: /NavigateWithParams test/ }));
+    expect(screen.getByRole('heading', { name: /NavigateWithParams child route/ }));
+    expect(screen.getByTestId('test-location-display')).toHaveTextContent('/myTestId/childRoute');
+  });
+});

{richie-2.25.0b2.dev98 → richie-2.25.0b2.dev101}/src/frontend/js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/components/OrganizationLinks/index.spec.tsx

@@ -1,20 +1,16 @@
-import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { IntlProvider } from 'react-intl';
+import { screen } from '@testing-library/react';
 import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { render } from 'utils/test/render';
+import { PresentationalAppWrapper } from 'utils/test/wrappers/PresentationalAppWrapper';
 import OrganizationLinks from '.';
 
 describe('OrganizationLinks', () => {
   it('should render successfully organization with logo', () => {
     const organization = OrganizationFactory({ title: 'Organization 1' }).one();
 
-    render(
-      <IntlProvider locale="en">
-        <MemoryRouter>
-          <OrganizationLinks organizations={[organization]} />
-        </MemoryRouter>
-      </IntlProvider>,
-    );
+    render(<OrganizationLinks organizations={[organization]} />, {
+      wrapper: PresentationalAppWrapper,
+    });
 
     // A link to the organization should be rendered
     const link = screen.getByRole('link', { name: 'Organization 1' });
@@ -34,13 +30,9 @@ describe('OrganizationLinks', () => {
   it('should render successfully organization with abbr', () => {
     const organization = OrganizationFactory({ title: 'Organization 1', logo: null }).one();
 
-    render(
-      <IntlProvider locale="en">
-        <MemoryRouter>
-          <OrganizationLinks organizations={[organization]} />
-        </MemoryRouter>
-      </IntlProvider>,
-    );
+    render(<OrganizationLinks organizations={[organization]} />, {
+      wrapper: PresentationalAppWrapper,
+    });
 
     // A link to the organization should be rendered
     const link = screen.getByRole('link', { name: 'Organization 1' });

{richie-2.25.0b2.dev98 → richie-2.25.0b2.dev101}/src/frontend/js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/index.spec.tsx

@@ -1,23 +1,15 @@
 import fetchMock from 'fetch-mock';
-import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider, createIntl } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { PropsWithChildren } from 'react';
-import { CunninghamProvider } from '@openfun/cunningham-react';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
+import { screen } from '@testing-library/react';
+import { createIntl } from 'react-intl';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import {
   TEACHER_DASHBOARD_ROUTE_LABELS,
   TeacherDashboardPaths,
 } from 'widgets/Dashboard/utils/teacherRouteMessages';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { OrganizationFactory } from 'utils/test/factories/joanie';
 import { messages as organizationLinksMessages } from 'widgets/Dashboard/components/TeacherDashboardProfileSidebar/components/OrganizationLinks';
-
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { TeacherDashboardProfileSidebar } from '.';
 
 jest.mock('utils/context', () => ({
@@ -37,39 +29,17 @@ jest.mock('utils/indirection/window', () => ({
 const intl = createIntl({ locale: 'en' });
 
 describe('<TeacherDashboardProfileSidebar/>', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
-        <JoanieSessionProvider>
-          <MemoryRouter>
-            <CunninghamProvider>{children}</CunninghamProvider>
-          </MemoryRouter>
-        </JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  );
+  const joanieSessionData = setupJoanieSession();
+
   let nbApiRequest: number;
   beforeEach(() => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
-
-    // JoanieSessionProvider inital requests
-    nbApiRequest = 3;
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-  });
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
+    nbApiRequest = joanieSessionData.nbSessionApiRequest;
   });
 
   it('should display menu items', async () => {
     nbApiRequest += 1; // call to organizations
-    render(
-      <Wrapper>
-        <TeacherDashboardProfileSidebar />
-      </Wrapper>,
-    );
+    render(<TeacherDashboardProfileSidebar />);
 
     expect(
       screen.getByRole('link', {
@@ -90,11 +60,7 @@ describe('<TeacherDashboardProfileSidebar/>', () => {
       overwriteRoutes: true,
     });
     nbApiRequest += 1; // call to organizations
-    render(
-      <Wrapper>
-        <TeacherDashboardProfileSidebar />
-      </Wrapper>,
-    );
+    render(<TeacherDashboardProfileSidebar />);
     expect(await screen.findByTestId('organization-links')).toBeInTheDocument();
     expect(fetchMock.calls()).toHaveLength(nbApiRequest);
 

{richie-2.25.0b2.dev98 → richie-2.25.0b2.dev101}/src/richie.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: richie
-Version: 2.25.0b2.dev98
+Version: 2.25.0b2.dev101
 Summary: A CMS to build learning portals for open education
 Author-email: "Open FUN (France Université Numérique)" <fun.dev@fun-mooc.fr>
 License: MIT License

{richie-2.25.0b2.dev98 → richie-2.25.0b2.dev101}/src/richie.egg-info/SOURCES.txt

@@ -575,6 +575,7 @@ src/frontend/js/utils/test/expectUrlMatchLocationDisplayed.ts
 src/frontend/js/utils/test/isTestEnv.ts
 src/frontend/js/utils/test/mockCourseProductWithOrder.ts
 src/frontend/js/utils/test/mockPaginatedResponse.ts
+src/frontend/js/utils/test/render.tsx
 src/frontend/js/utils/test/factories/factories.spec.ts
 src/frontend/js/utils/test/factories/factories.ts
 src/frontend/js/utils/test/factories/helper.spec.ts
@@ -583,6 +584,12 @@ src/frontend/js/utils/test/factories/joanie.spec.ts
 src/frontend/js/utils/test/factories/joanie.ts
 src/frontend/js/utils/test/factories/reactQuery.ts
 src/frontend/js/utils/test/factories/richie.ts
+src/frontend/js/utils/test/wrappers/IntlWrapper.tsx
+src/frontend/js/utils/test/wrappers/JoanieAppWrapper.tsx
+src/frontend/js/utils/test/wrappers/PresentationalAppWrapper.tsx
+src/frontend/js/utils/test/wrappers/ReactQueryWrapper.tsx
+src/frontend/js/utils/test/wrappers/RouterWrapper.tsx
+src/frontend/js/utils/test/wrappers/types.ts
 src/frontend/js/widgets/index.spec.tsx
 src/frontend/js/widgets/index.tsx
 src/frontend/js/widgets/Dashboard/_styles.scss

richie-2.25.0b2.dev98/src/frontend/js/widgets/Dashboard/components/NavigateWithParams/index.spec.tsx

@@ -1,62 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createMemoryRouter, Outlet, RouterProvider } from 'react-router-dom';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import LocationDisplay from 'utils/test/LocationDisplay';
-import NavigateWithParams from '.';
-
-jest.mock('utils/context', () => ({
-  __esModule: true,
-  default: mockRichieContextFactory().one(),
-}));
-
-jest.mock('utils/indirection/window', () => ({
-  location: {
-    replace: jest.fn(),
-  },
-}));
-
-interface RenderTestRouterProps {
-  url?: string;
-}
-
-const renderTestRouter = ({ url = '/myTestId' }: RenderTestRouterProps = {}) => {
-  const routes = [
-    {
-      path: '/:testId',
-      element: (
-        <div>
-          <h1>NavigateWithParams test</h1>
-          <Outlet />
-        </div>
-      ),
-      children: [
-        {
-          index: true,
-          element: <NavigateWithParams to="/:testId/childRoute" replace />,
-        },
-        {
-          path: '/:testId/childRoute',
-          element: (
-            <div>
-              <h2>NavigateWithParams child route</h2>
-              <LocationDisplay />
-            </div>
-          ),
-        },
-      ],
-    },
-  ];
-
-  const router = createMemoryRouter(routes, { initialEntries: [url] });
-
-  return render(<RouterProvider router={router} />);
-};
-
-describe('<NavigateWithParams />', () => {
-  it('should navigate with parent route params', async () => {
-    renderTestRouter();
-    expect(await screen.findByRole('heading', { name: /NavigateWithParams test/ }));
-    expect(screen.getByRole('heading', { name: /NavigateWithParams child route/ }));
-    expect(screen.getByTestId('test-location-display')).toHaveTextContent('/myTestId/childRoute');
-  });
-});