richie 2.25.0b2.dev115__tar.gz → 2.25.0b2.dev117__tar.gz

richie-2.25.0b2.dev117/PKG-INFO

@@ -0,0 +1,153 @@
+Metadata-Version: 2.1
+Name: richie
+Version: 2.25.0b2.dev117
+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
+        
+        Copyright (c) 2018-present GIP FUN MOOC.
+        
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+        
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+        
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+        
+        
+Project-URL: Bug Tracker, https://github.com/openfun/richie/issues/new
+Project-URL: Changelog, https://github.com/openfun/richie/blob/master/CHANGELOG.md
+Project-URL: Homepage, https://github.com/openfun/richie
+Project-URL: Repository, https://github.com/openfun/richie
+Project-URL: Documentation, https://richie.education/
+Project-URL: Demonstration website, https://demo.richie.education/
+Keywords: Django,Django-CMS,Open edX
+Classifier: Development Status :: 5 - Production/Stable
+Classifier: Framework :: Django
+Classifier: Framework :: Django :: 2.2
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Natural Language :: English
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: arrow
+Requires-Dist: Django<4
+Requires-Dist: djangocms-file
+Requires-Dist: djangocms-googlemap
+Requires-Dist: djangocms-link
+Requires-Dist: djangocms-picture
+Requires-Dist: djangocms-text-ckeditor
+Requires-Dist: djangocms-video
+Requires-Dist: djangorestframework
+Requires-Dist: django-autocomplete-light==3.9.7
+Requires-Dist: django-cms<4.0.0,>=3.11.0
+Requires-Dist: django-parler>=2.3
+Requires-Dist: django-redis>=4.11.0
+Requires-Dist: django-treebeard
+Requires-Dist: dj-pagination
+Requires-Dist: easy_thumbnails[svg]>=2.8
+Requires-Dist: elasticsearch<7.0.0,>=6.0.0
+Requires-Dist: exrex==0.11.0
+Requires-Dist: importlib-metadata
+Requires-Dist: oauthlib==3.2.2
+Requires-Dist: requests==2.31.0
+Provides-Extra: dev
+Requires-Dist: bandit==1.7.7; extra == "dev"
+Requires-Dist: black==24.2.0; extra == "dev"
+Requires-Dist: pyRdfa3==3.6.2; extra == "dev"
+Requires-Dist: cssselect==1.2.0; extra == "dev"
+Requires-Dist: factory-boy==3.3.0; extra == "dev"
+Requires-Dist: flake8==7.0.0; extra == "dev"
+Requires-Dist: flake8-pyproject==1.2.3; extra == "dev"
+Requires-Dist: htmlmin==0.1.12; extra == "dev"
+Requires-Dist: ipdb==0.13.13; extra == "dev"
+Requires-Dist: ipython==8.21.0; extra == "dev"
+Requires-Dist: isort==5.13.2; extra == "dev"
+Requires-Dist: lxml==5.1.0; extra == "dev"
+Requires-Dist: msgpack==1.0.7; extra == "dev"
+Requires-Dist: mysqlclient==2.2.4; extra == "dev"
+Requires-Dist: pylint==3.0.3; extra == "dev"
+Requires-Dist: pylint-django==2.5.5; extra == "dev"
+Requires-Dist: pytest==8.0.1; extra == "dev"
+Requires-Dist: pytest-cov==4.1.0; extra == "dev"
+Requires-Dist: pytest-django==4.8.0; extra == "dev"
+Requires-Dist: responses==0.25.0; extra == "dev"
+Provides-Extra: ci
+Requires-Dist: twine==5.0.0; extra == "ci"
+Provides-Extra: sandbox
+Requires-Dist: django-configurations==2.5; extra == "sandbox"
+Requires-Dist: dockerflow==2024.1.0; extra == "sandbox"
+Requires-Dist: factory-boy==3.3.0; extra == "sandbox"
+Requires-Dist: gunicorn==21.2.0; extra == "sandbox"
+Requires-Dist: psycopg2-binary==2.9.9; extra == "sandbox"
+Requires-Dist: sentry-sdk==1.40.4; extra == "sandbox"
+
+# Richie, the best OpenSource CMS to build education portals
+
+[![CircleCI](https://circleci.com/gh/openfun/richie/tree/master.svg?style=svg)](https://circleci.com/gh/openfun/richie/tree/master)
+
+## Overview
+
+`Learning Management Systems` (LMS) are great tools for hosting and playing interactive online
+courses and MOOCs.
+
+However, if you need to build a complete website with flexible content to aggregate your courses,
+in several languages and from different sources, **you will soon need a CMS**.
+
+At "France Université Numérique", we wanted to build an OpenSource portal with `Python` and
+`Django`. That's why we built `Richie` on top of [DjangoCMS](https://www.django-cms.org), one of
+the best CMS on the market, as a toolbox to easily create full fledged websites with a catalog of
+online courses.
+
+Among the features that `Richie` offers out of the box:
+
+- multi-lingual by default,
+- advanced access rights and moderation,
+- catalog of courses synchronized with one or more `LMS` instances,
+- search engine based on `Elasticsearch` and pre-configured to offer full-text queries,
+  multi-facetting, auto-complete,...
+- flexible custom pages for courses, organizations, categories, teachers, blog posts,
+  programs (and their inter-relations),
+- Extensible with any third-party `DjangoCMS` plugin or any third-party `Django` application.
+
+## Discover Richie
+
+If you're looking for a quick preview of `Richie`, you can take a look and have a tour of
+`Richie` on our dedicated [demo site](https://demo.richie.education).
+
+It is connected back-to-back with a demo of OpenEdX running on
+[OpenEdX Docker](https://github.com/openfun/openedx-docker).
+
+Two users are available for testing:
+
+- admin: `admin@example.com`/`admin`
+- student: `edx@example.com`/`edx`
+
+The database is regularly flushed.
+
+## Getting started
+
+Take a look at our [documentation](https://richie.education/docs/discover) to get started with Richie.
+
+## Contributing
+
+### [Contributing guide](https://richie.education/docs/contributing-guide)
+
+Read our [contributing guide](https://richie.education/docs/contributing-guide) to learn about our development process and get started developing on `Richie`.
+
+### License
+
+This work is released under the MIT License (see [LICENSE](./LICENSE)).

richie-2.25.0b2.dev117/src/frontend/js/hooks/useDefaultOrganizationId/index.tsx

@@ -0,0 +1,35 @@
+import { useParams, useSearchParams } from 'react-router-dom';
+import { useOrganizations } from 'hooks/useOrganizations';
+import { CourseProductRelation, Organization } from 'types/Joanie';
+
+/**
+ * return organization id with this priority:
+ * * route param
+ * * query param
+ * * first organization of user's organizations
+ */
+const useDefaultOrganizationId = () => {
+  const {
+    organizationId: routeOrganizationId,
+    courseProductRelationId: routeCourseProductRelationId,
+  } = useParams<{
+    organizationId?: Organization['id'];
+    courseProductRelationId: CourseProductRelation['id'];
+  }>();
+  const [searchParams] = useSearchParams();
+  const queryOrganizationId = searchParams.get('organization_id') || undefined;
+  const { items: organizations } = useOrganizations(
+    { course_product_relation_id: routeCourseProductRelationId },
+    {
+      enabled: !routeOrganizationId && !queryOrganizationId,
+    },
+  );
+
+  return (
+    routeOrganizationId ||
+    queryOrganizationId ||
+    (organizations.length > 0 ? organizations[0].id : undefined)
+  );
+};
+
+export default useDefaultOrganizationId;

richie-2.25.0b2.dev117/src/frontend/js/pages/DashboardCreditCardsManagement/index.spec.tsx

@@ -0,0 +1,430 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import fetchMock from 'fetch-mock';
+import {
+  act,
+  fireEvent,
+  getByRole,
+  getByText,
+  queryByRole,
+  queryByText,
+  render,
+  screen,
+} from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { faker } from '@faker-js/faker';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { CreditCardFactory } from 'utils/test/factories/joanie';
+import { SessionProvider } from 'contexts/SessionContext';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { CreditCard } from 'types/Joanie';
+import { confirm } from 'utils/indirection/window';
+import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { expectBannerError } from 'utils/test/expectBanner';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  confirm: jest.fn(() => true),
+}));
+
+describe('<DashboardCreditCardsManagement/>', () => {
+  beforeEach(() => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('renders an empty list with placeholder', async () => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences']);
+    // The empty placeholder is shown.
+    await screen.findByText("You haven't created any credit cards yet.");
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+  });
+
+  it('renders the correct label for expired date', async () => {
+    const now = new Date();
+    const date = faker.date.past({
+      refDate: new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59),
+    });
+    const creditCard: CreditCard = CreditCardFactory({
+      expiration_month: date.getMonth() + 1,
+      expiration_year: date.getFullYear(),
+    }).one();
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+    const element = await screen.findByText(
+      'Expired since ' +
+        (date.getMonth() + 1).toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+        }) +
+        '/' +
+        date.getFullYear(),
+    );
+    expect(element.classList).toContain('dashboard-credit-card__expiration');
+    expect(element.classList).toContain('dashboard-credit-card__expiration--expired');
+    expect(element.classList).not.toContain('dashboard-credit-card__expiration--soon');
+  });
+
+  it('renders the correct label for an expiration date that will soon expire', async () => {
+    const refDate = new Date();
+    refDate.setMonth(refDate.getMonth() + 1);
+    refDate.setDate(1);
+    const futureLessThan3Months = faker.date.future({ years: 2.99 / 12, refDate });
+    const creditCard: CreditCard = CreditCardFactory({
+      expiration_month: futureLessThan3Months.getMonth() + 1,
+      expiration_year: futureLessThan3Months.getFullYear(),
+    }).one();
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+    const element = await screen.findByText(
+      'Expires on ' +
+        (futureLessThan3Months.getMonth() + 1).toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+        }) +
+        '/' +
+        futureLessThan3Months.getFullYear(),
+    );
+    expect(element.classList).toContain('dashboard-credit-card__expiration');
+    expect(element.classList).not.toContain('dashboard-credit-card__expiration--expired');
+    expect(element.classList).toContain('dashboard-credit-card__expiration--soon');
+  });
+
+  it('renders the correct label for an expiration date that will not soon expire', async () => {
+    const refDate = new Date();
+    refDate.setMonth(refDate.getMonth() + 4);
+    const date = faker.date.future({ refDate });
+    const creditCard: CreditCard = CreditCardFactory({
+      expiration_month: date.getMonth() + 1,
+      expiration_year: date.getFullYear(),
+    }).one();
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+    const element = await screen.findByText(
+      'Expires on ' +
+        (date.getMonth() + 1).toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+        }) +
+        '/' +
+        date.getFullYear(),
+    );
+    expect(element.classList).toContain('dashboard-credit-card__expiration');
+    expect(element.classList).not.toContain('dashboard-credit-card__expiration--expired');
+    expect(element.classList).not.toContain('dashboard-credit-card__expiration--soon');
+  });
+
+  it('deletes a credit card', async () => {
+    const creditCards = CreditCardFactory().many(5);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    // Find the delete button of the first credit card.
+    const creditCard = creditCards[0];
+    await screen.findByText(creditCard.title!);
+    const creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
+    const deleteButton = getByRole(creditCardContainer, 'button', {
+      name: 'Delete',
+    });
+
+    // Mock delete route and the refresh route to returns `creditCards` without the first one.
+    const deleteUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
+    fetchMock.delete(deleteUrl, []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards.splice(1), {
+      overwriteRoutes: true,
+    });
+
+    // Clicking on the delete button calls delete API route.
+    expect(fetchMock.called(deleteUrl)).toBe(false);
+    // Clicking on the delete button calls window.confirm function.
+    expect(confirm).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+    expect(fetchMock.called(deleteUrl)).toBe(true);
+    expect(confirm).toHaveBeenCalled();
+
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    // The address does not appear anymore in the list.
+    expect(screen.queryByText(creditCard.title!)).toBeNull();
+  });
+
+  it('promotes a credit card', async () => {
+    const creditCards = CreditCardFactory().many(5);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    // Find the promote button of the first credit card.
+    const creditCard = creditCards[0];
+    await screen.findByText(creditCard.title!);
+    let creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
+    const promoteButton = getByRole(creditCardContainer, 'button', {
+      name: 'Use by default',
+    });
+    // The address is not already the main one.
+    expect(queryByText(creditCardContainer, 'Default credit card')).toBeNull();
+
+    // Mock the update url and the refresh URL to return the first credit card as main.
+    const updateUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
+    fetchMock.put(updateUrl, []);
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/credit-cards/',
+      [{ ...creditCard, is_main: true }, ...creditCards.splice(1)],
+      { overwriteRoutes: true },
+    );
+
+    // Clicking on the promote button calls the update API route.
+    expect(fetchMock.called(updateUrl)).toBe(false);
+    await act(async () => {
+      fireEvent.click(promoteButton);
+    });
+    expect(fetchMock.called(updateUrl)).toBe(true);
+
+    // Assert that "Default credit card" is displayed on the credit card's box.
+    creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
+    getByText(creditCardContainer, 'Default credit card');
+
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+  });
+
+  it('shows the main credit card above all others', async () => {
+    const creditCards = CreditCardFactory().many(5);
+    const mainCreditCard = creditCards[3];
+    mainCreditCard.is_main = true;
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const creditCardsContainers = await screen.findAllByTestId('dashboard-credit-card__', {
+      exact: false,
+    });
+    expect(creditCardsContainers.length).toEqual(5);
+    getByText(creditCardsContainers[0], 'Default credit card');
+    getByText(creditCardsContainers[0], mainCreditCard.title!);
+
+    // All other credit cards container are not displayed as main.
+    creditCardsContainers
+      .splice(1)
+      .forEach((creditCardContainer) =>
+        expect(queryByText(creditCardContainer, 'Default credit card')).toBeNull(),
+      );
+  });
+
+  it('cannot delete a main credit card', async () => {
+    const creditCards = CreditCardFactory().many(5);
+    const mainCreditCard = creditCards[3];
+    mainCreditCard.is_main = true;
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    // The delete button is not displayed.
+    const creditCardContainer = await screen.findByTestId(
+      'dashboard-credit-card__' + mainCreditCard.id,
+    );
+    expect(
+      queryByRole(creditCardContainer, 'button', {
+        name: 'Delete',
+      }),
+    ).toBeNull();
+  });
+
+  it('cannot promote a main credit card', async () => {
+    const creditCards = CreditCardFactory().many(5);
+    const mainCreditCard = creditCards[3];
+    mainCreditCard.is_main = true;
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    // The promote button is not displayed.
+    const creditCardContainer = await screen.findByTestId(
+      'dashboard-credit-card__' + mainCreditCard.id,
+    );
+    expect(
+      queryByRole(creditCardContainer, 'button', {
+        name: 'Use by default',
+      }),
+    ).toBeNull();
+  });
+
+  it('redirects to the edit credit card route', async () => {
+    const creditCards = CreditCardFactory().many(5);
+    const creditCard = creditCards[2];
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    const creditCardContainer = await screen.findByTestId(
+      'dashboard-credit-card__' + creditCard.id,
+    );
+    const editButton = getByRole(creditCardContainer, 'button', {
+      name: 'Edit',
+    });
+
+    await act(async () => {
+      fireEvent.click(editButton);
+    });
+
+    // We are on the correct route.
+    screen.getByText('Edit credit card');
+
+    // The title input value is correct. This way we make sure that we are editing the expected
+    // credit card.
+    const titleInput: HTMLInputElement = screen.getByRole('textbox', {
+      name: 'Name of the credit card',
+    });
+    expect(titleInput.value).toBe(creditCard.title);
+  });
+
+  it('shows an error banner in case of API error', async () => {
+    // Mock the API route to return a 500 error.
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', {
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
+    });
+
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    await expectBannerError('An error occurred while fetching credit cards. Please retry later.');
+  });
+});