richie-education 2.25.0-b2.dev103 → 2.25.0-b2.dev110

package/js/api/joanie.ts

@@ -190,6 +190,9 @@ export const getRoutes = () => {
       products: {
         get: `${baseUrl}/courses/:course_id/products/:id/`,
       },
+      orders: {
+        get: `${baseUrl}/courses/:course_id/orders/:id/`,
+      },
     },
     courseRuns: {
       get: `${baseUrl}/course-runs/:id/`,
@@ -464,6 +467,16 @@ const API = (): Joanie.API => {
           return fetchWithJWT(buildApiUrl(ROUTES.courses.products.get, filters)).then(checkStatus);
         },
       },
+      orders: {
+        get: async (filters?: Joanie.CourseOrderResourceQuery) => {
+          if (!filters || !filters.course_id) {
+            throw new Error('A course_id is required to fetch a course order');
+          }
+          return fetchWithJWT(buildApiUrl(ROUTES.courses.orders.get, filters), {
+            method: 'GET',
+          }).then(checkStatus);
+        },
+      },
     },
     courseRuns: {
       get: (filters: Joanie.CourseRunFilters) => {

package/js/hooks/useCourseOrders/index.ts

@@ -0,0 +1,32 @@
+import { defineMessages } from 'react-intl';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
+import { API, CourseOrderResourceQuery, NestedCourseOrder } from 'types/Joanie';
+
+const messages = defineMessages({
+  errorGet: {
+    id: 'hooks.useCourseOrders.errorSelect',
+    description: 'Error message shown to the user when orders fetch request fails.',
+    defaultMessage: 'An error occurred while fetching orders. Please retry later.',
+  },
+  errorNotFound: {
+    id: 'hooks.useCourseOrders.errorNotFound',
+    description: 'Error message shown to the user when no orders matches.',
+    defaultMessage: 'Cannot find orders',
+  },
+});
+
+const props: UseResourcesProps<
+  NestedCourseOrder,
+  CourseOrderResourceQuery,
+  API['courses']['orders']
+> = {
+  queryKey: ['courses', 'orders'],
+  apiInterface: () => useJoanieApi().courses.orders,
+  session: true,
+  messages,
+};
+
+export const useCourseOrder = useResource(props);
+
+export const useCourseOrders = useResources(props);

package/js/{pages/TeacherDashboardContractsLayout/hooks → hooks}/useDefaultOrganizationId/index.spec.tsx

@@ -1,30 +1,21 @@
-import { QueryClientProvider } from '@tanstack/react-query';
-import { PropsWithChildren } from 'react';
-import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { renderHook, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { OrganizationFactory } from 'utils/test/factories/joanie';
 import { Organization } from 'types/Joanie';
+import { JoanieAppWrapper, setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import useDefaultOrganizationId from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     authentication: { backend: 'fonzie', endpoint: 'https://demo.test' },
-    joanie_backend: { endpoint: 'https://joanie.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
 
-interface WrapperProps {
-  routePath: string;
-  initialEntry: string;
-}
-
 describe('useDefaultOrganizationId', () => {
+  setupJoanieSession();
   const organizations: {
     routeOrganization: Organization;
     queryOrganization: Organization;
@@ -35,33 +26,6 @@ describe('useDefaultOrganizationId', () => {
     userOrganizationList: OrganizationFactory().many(2),
   };
 
-  const Wrapper = ({ children, routePath, initialEntry }: PropsWithChildren<WrapperProps>) => {
-    return (
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <JoanieSessionProvider>
-            <MemoryRouter initialEntries={[initialEntry]}>
-              <Routes>
-                <Route path={routePath} element={children} />
-              </Routes>
-            </MemoryRouter>
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>
-    );
-  };
-
-  beforeEach(() => {
-    // Joanie provider's calls
-    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
-  });
-
   it.each([
     {
       testLabel: 'route organization before query',
@@ -112,16 +76,16 @@ describe('useDefaultOrganizationId', () => {
       }
 
       fetchMock.get(
-        'https://joanie.test/api/v1.0/organizations/',
+        'https://joanie.endpoint/api/v1.0/organizations/',
         [...userOrganizationList, routeOrganization, queryOrganization].filter(
           (organization) => organization !== undefined,
         ),
       );
       const { result } = renderHook(useDefaultOrganizationId, {
         wrapper: ({ children }) => (
-          <Wrapper routePath={routePath} initialEntry={initialEntry}>
+          <JoanieAppWrapper routerOptions={{ path: routePath, initialEntries: [initialEntry] }}>
             {children}
-          </Wrapper>
+          </JoanieAppWrapper>
         ),
       });
 

package/js/hooks/useOrganizations/index.ts

@@ -1,6 +1,6 @@
 import { defineMessages } from 'react-intl';
 
-import { Organization } from 'types/Joanie';
+import { API, Organization, OrganizationResourceQuery } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { useResource, useResources, UseResourcesProps } from '../useResources';
 
@@ -21,11 +21,11 @@ const messages = defineMessages({
  * Joanie Api hook to retrieve organizations
  * owned by the authenticated user.
  */
-const props: UseResourcesProps<Organization> = {
+const props: UseResourcesProps<Organization, OrganizationResourceQuery, API['organizations']> = {
   queryKey: ['organizations'],
   apiInterface: () => useJoanieApi().organizations,
   session: true,
   messages,
 };
-export const useOrganizations = useResources<Organization>(props);
-export const useOrganization = useResource<Organization>(props);
+export const useOrganizations = useResources<Organization, OrganizationResourceQuery>(props);
+export const useOrganization = useResource<Organization, OrganizationResourceQuery>(props);

package/js/hooks/useResources/index.tsx

@@ -40,6 +40,8 @@ export interface UseResourcesCallbackProps<
   TResourceQuery extends ResourcesQuery = ResourcesQuery,
   TApiResource extends ApiResourceInterface<TData> = ApiResourceInterface<TData>,
 > extends UseResourcesProps<TData, TResourceQuery, TApiResource> {
+  // TODO(rlecellier): we've cases where fitlers should be required.
+  // like in useCourseOrder where the course_id filter must be set.
   filters?: TResourceQuery;
   queryOptions?: Omit<QueryOptions<TData>, 'queryFn' | 'queryKey'>;
 }

package/js/pages/TeacherDashboardContractsLayout/TeacherDashboardContracts/index.spec.tsx

@@ -1,25 +1,21 @@
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { CunninghamProvider } from '@openfun/cunningham-react';
 import fetchMock from 'fetch-mock';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { getAllByRole } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError } from 'utils/test/expectBanner';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import TeacherDashboardContracts from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
-    joanie_backend: { endpoint: 'https://joanie.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
 
@@ -34,36 +30,8 @@ jest.mock('components/ContractFrame', () => ({
   }) => isOpen && <p>ContractFrame opened for {organizationId}</p>,
 }));
 
-const Wrapper = ({ path, initialEntry }: { path: string; initialEntry: string }) => {
-  return (
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <JoanieSessionProvider>
-          <CunninghamProvider>
-            <MemoryRouter initialEntries={[initialEntry]}>
-              <Routes>
-                <Route path={path} element={<TeacherDashboardContracts />} />
-              </Routes>
-            </MemoryRouter>
-          </CunninghamProvider>
-        </JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  );
-};
-
 describe('pages/TeacherDashboardContracts', () => {
-  beforeEach(() => {
-    // Joanie providers calls
-    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
-    jest.resetAllMocks();
-  });
+  setupJoanieSession();
 
   it('should render a list of contracts for a course product relation', async () => {
     const contracts = ContractFactory({
@@ -74,24 +42,24 @@ describe('pages/TeacherDashboardContracts', () => {
     const defaultOrganization = organizations[0];
 
     // OrganizationContractFilter request all organizations forwho the user have access
-    fetchMock.get(`https://joanie.test/api/v1.0/organizations/`, organizations);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, organizations);
     // TeacherDashboardContracts request a paginated list of contracts to display
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=2&signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=2&signature_state=signed&page=1&page_size=25`,
       { results: contracts, count: 0, previous: null, next: null },
     );
     // useTeacherContractsToSign request all contract to sign, without pagination
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed&course_product_relation_id=2`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed&course_product_relation_id=2`,
       { results: [], count: 0, previous: null, next: null },
     );
 
-    render(
-      <Wrapper
-        path="/courses/:courseId/products/:courseProductRelationId/contracts"
-        initialEntry="/courses/1/products/2/contracts"
-      />,
-    );
+    render(<TeacherDashboardContracts />, {
+      routerOptions: {
+        path: '/courses/:courseId/products/:courseProductRelationId/contracts',
+        initialEntries: ['/courses/1/products/2/contracts'],
+      },
+    });
 
     await expectNoSpinner();
 
@@ -139,21 +107,24 @@ describe('pages/TeacherDashboardContracts', () => {
       organization_signed_on: Date.toString(),
     }).many(3);
 
+    // OrganizationContractFilter request all organizations forwho the user have access
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
       { results: contracts, count: 0, previous: null, next: null },
     );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
       { results: [], count: 0, previous: null, next: null },
     );
 
-    render(
-      <Wrapper
-        path="/organizations/:organizationId/contracts"
-        initialEntry="/organizations/1/contracts"
-      />,
-    );
+    render(<TeacherDashboardContracts />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/contracts',
+        initialEntries: ['/organizations/1/contracts'],
+      },
+    });
 
     await expectNoSpinner();
 
@@ -193,21 +164,23 @@ describe('pages/TeacherDashboardContracts', () => {
   });
 
   it('should render an empty table if there are no contracts', async () => {
+    // OrganizationContractFilter request all organizations forwho the user have access
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
       { results: [], count: 0, previous: null, next: null },
     );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
       { results: [], count: 0, previous: null, next: null },
     );
 
-    render(
-      <Wrapper
-        path="/organizations/:organizationId/contracts"
-        initialEntry="/organizations/1/contracts"
-      />,
-    );
+    render(<TeacherDashboardContracts />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/contracts',
+        initialEntries: ['/organizations/1/contracts'],
+      },
+    });
 
     await expectNoSpinner();
 
@@ -239,25 +212,27 @@ describe('pages/TeacherDashboardContracts', () => {
       abilities: { sign: true },
     }).many(3);
 
+    // OrganizationContractFilter request all organizations forwho the user have access
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
       { results: [], count: 0, previous: null, next: null },
     );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed&page=1&page_size=25`,
       { results: contracts, count: 3, previous: null, next: null },
     );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
       { results: contracts, count: 3, previous: null, next: null },
     );
 
-    render(
-      <Wrapper
-        path="/organizations/:organizationId/contracts"
-        initialEntry="/organizations/1/contracts?signature_state=half_signed"
-      />,
-    );
+    render(<TeacherDashboardContracts />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/contracts',
+        initialEntries: ['/organizations/1/contracts?signature_state=half_signed'],
+      },
+    });
 
     await expectNoSpinner();
 
@@ -306,21 +281,24 @@ describe('pages/TeacherDashboardContracts', () => {
   });
 
   it('should render an error banner if an error occured during contracts fetching', async () => {
+    // OrganizationContractFilter request all organizations forwho the user have access
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
       HttpStatusCode.NOT_FOUND,
     );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
       HttpStatusCode.NOT_FOUND,
     );
 
-    render(
-      <Wrapper
-        path="/organizations/:organizationId/contracts"
-        initialEntry="/organizations/1/contracts"
-      />,
-    );
+    render(<TeacherDashboardContracts />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/contracts',
+        initialEntries: ['/organizations/1/contracts'],
+      },
+    });
 
     await expectNoSpinner();
     await expectBannerError('An error occurred while fetching contracts. Please retry later.');
@@ -328,21 +306,28 @@ describe('pages/TeacherDashboardContracts', () => {
 
   it('should hide organization filter when user only have one organization', async () => {
     const defaultOrganization = OrganizationFactory().one();
-    fetchMock.get('https://joanie.test/api/v1.0/organizations/', [defaultOrganization]);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', [defaultOrganization]);
 
     const contracts = ContractFactory({
       student_signed_on: Date.toString(),
       abilities: { sign: true },
     }).many(3);
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=signed&page=1&page_size=25`,
       { results: [], count: 0, previous: null, next: null },
     );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed`,
       { results: contracts, count: 3, previous: null, next: null },
     );
-    render(<Wrapper path="/" initialEntry="" />);
+
+    render(<TeacherDashboardContracts />, {
+      routerOptions: {
+        path: '/',
+        initialEntries: ['/'],
+      },
+    });
+
     await expectNoSpinner();
 
     // Signature state filter should have been rendered

package/js/pages/TeacherDashboardContractsLayout/components/ContractFiltersBar/index.spec.tsx

@@ -1,50 +1,25 @@
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { CunninghamProvider } from '@openfun/cunningham-react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { PropsWithChildren } from 'react';
+import { screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { userEvent } from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { ContractState } from 'types/Joanie';
 import { OrganizationFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { noop } from 'utils';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import ContractFiltersBar from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
-    joanie_backend: { endpoint: 'https://joanie.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
 
 describe('<ContractFiltersBar/>', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => {
-    return (
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <JoanieSessionProvider>
-            <CunninghamProvider>{children}</CunninghamProvider>
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>
-    );
-  };
-
-  beforeEach(() => {
-    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
-    jest.resetAllMocks();
-  });
+  setupJoanieSession();
 
   it('should render SignatureState and Organization filters with default value', async () => {
     const filterChange = jest.fn();
@@ -54,13 +29,9 @@ describe('<ContractFiltersBar/>', () => {
       organization_id: organizations[1].id,
     };
 
-    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', organizations);
 
-    render(
-      <Wrapper>
-        <ContractFiltersBar onFiltersChange={filterChange} defaultValues={defaultValues} />
-      </Wrapper>,
-    );
+    render(<ContractFiltersBar onFiltersChange={filterChange} defaultValues={defaultValues} />);
 
     await waitFor(() => expectNoSpinner());
 
@@ -101,16 +72,14 @@ describe('<ContractFiltersBar/>', () => {
       organization_id: organizations[0].id,
     };
 
-    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', organizations);
 
     render(
-      <Wrapper>
-        <ContractFiltersBar
-          onFiltersChange={noop}
-          defaultValues={defaultValues}
-          hideFilterSignatureState={true}
-        />
-      </Wrapper>,
+      <ContractFiltersBar
+        onFiltersChange={noop}
+        defaultValues={defaultValues}
+        hideFilterSignatureState={true}
+      />,
     );
 
     await waitFor(() => expectNoSpinner());
@@ -132,16 +101,14 @@ describe('<ContractFiltersBar/>', () => {
       organization_id: organizations[0].id,
     };
 
-    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', organizations);
 
     render(
-      <Wrapper>
-        <ContractFiltersBar
-          onFiltersChange={noop}
-          defaultValues={defaultValues}
-          hideFilterOrganization={true}
-        />
-      </Wrapper>,
+      <ContractFiltersBar
+        onFiltersChange={noop}
+        defaultValues={defaultValues}
+        hideFilterOrganization={true}
+      />,
     );
 
     await waitFor(() => expectNoSpinner());
@@ -161,19 +128,11 @@ describe('<ContractFiltersBar/>', () => {
     const organizations = OrganizationFactory().many(2);
     const handleChange = jest.fn();
 
-    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', organizations);
 
-    render(
-      <Wrapper>
-        <ContractFiltersBar onFiltersChange={handleChange} />
-      </Wrapper>,
-    );
+    render(<ContractFiltersBar onFiltersChange={handleChange} />);
 
     await waitFor(() => expectNoSpinner());
-
-    // Organization filter should have been rendered and the first organization should be selected
-    const organizationFilter = screen.getByRole('combobox', { name: 'Organization' });
-    expect(organizationFilter).toHaveAttribute('value', organizations[0].title);
     expect(handleChange).toHaveBeenNthCalledWith(1, { organization_id: organizations[0].id });
   });
 });

package/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
+import useDefaultOrganizationId from 'hooks/useDefaultOrganizationId';
 import { ContractResourceQuery, ContractState } from 'types/Joanie';
-import useDefaultOrganizationId from '../useDefaultOrganizationId';
 
 export type TeacherDashboardContractsParams = {
   organizationId?: string;

package/js/pages/TeacherDashboardContractsLayout/styles.scss

@@ -1,8 +1,4 @@
 .teacher-contract-page {
-  background: #fff;
-  border-radius: 6px;
-  padding: 1rem;
-
   .product-title-column {
     max-width: rem-calc(200px);
     overflow: hidden;