richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/api/lms/dummy.ts

@@ -4,7 +4,54 @@ import { User } from 'types/User';
 import { APILms } from 'types/api';
 import { Enrollment, OpenEdXEnrollment } from 'types';
 import { location } from 'utils/indirection/window';
-import { RICHIE_USER_TOKEN } from 'settings';
+import { CURRENT_JOANIE_DEV_DEMO_USER, RICHIE_USER_TOKEN } from 'settings';
+import { base64Decode } from 'utils/base64Parser';
+
+type JWTPayload = {
+  email: string;
+  exp: number;
+  full_name: string;
+  iat: number;
+  jti: string;
+  language: string;
+  token_type: 'access';
+  username: string;
+};
+
+/* All JWT tokens will expire the 12 Dec 2024 ! */
+const JOANIE_DEV_DEMO_USER_JWT_TOKENS = {
+  admin:
+    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzNjU1MjMsImp0aSI6IjRhMzQxZWVmMmVhOTRkNGFiMzQ5OThkOWE4ZDM5MTI0IiwiZW1haWwiOiJhZG1pbkBleGFtcGxlLmNvbSIsImxhbmd1YWdlIjoiZW4tdXMiLCJ1c2VybmFtZSI6ImFkbWluIiwiZnVsbF9uYW1lIjoiIn0.rT8nymp8f4T7tIIXO-M5-ahXBwxoDNVqtaZIrb_GHuk',
+  user0:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6Ijc2ZDNlNmU2NGYwMzQ4NTg5NTNiOWIxNWIwNDhhNjI0IiwiZW1haWwiOiJjc3RlcGhlbnNvbkBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InVzZXIwIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.JQRHKdr3Utl9rw-BQyvM8zXsY16CSgscEh9NAaP2INc',
+  user1:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjY3NDBmYzFlOTlhNDQwNzBhN2I1NWNkMTE0M2UzNThhIiwiZW1haWwiOiJuYW5jeTgzQGV4YW1wbGUuY29tIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjEiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.mWtt4zKA-SiSQG2Pfrauq9ZYzSCq53qPa0jjdGaqFWQ',
+  user2:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjBhNjkwY2QyZjA5ZTRjMWU4MTE4MzhmNGI0YjEzNGMyIiwiZW1haWwiOiJwYXVsYnJhbmRvbkBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InVzZXIyIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.EXUlkR-0IIj8xRRnlf9TWyVa8Gh_jPE7aNIu18BI83Q',
+  user3:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjQ5N2IyMTEzYjQ4MjQ2YWNhOWUyMWIyMmZmZGJkYWU5IiwiZW1haWwiOiJqZXNzaWNhNDFAZXhhbXBsZS5jb20iLCJsYW5ndWFnZSI6ImVuLXVzIiwidXNlcm5hbWUiOiJ1c2VyMyIsImZ1bGxfbmFtZSI6Ik90aGVyIE93bmVyIn0.MXEFrvlkxPxlCpS172ls4eNvbV6vEDBJK1T3PHS9CoY',
+  user4:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6ImMyYTBmMGU0NTI5MTRmNWFhZDdiYTE1YWQ3ZTQ5MjgwIiwiZW1haWwiOiJkb25uYTE5QGV4YW1wbGUubmV0IiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjQiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.sVmYGo2LO8I1Sz2hP8wRk8yd0n1bOcWsyFG0ZXi5SbE',
+  organization_owner:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjYxNTZiYmNmMjZmMzQzYTBiYTgzM2ZmYzU1M2U1NjBlIiwiZW1haWwiOiJqZWFuLWJhcHRpc3RlLnBlbnJhdGgrb3JnYW5pemF0aW9uX293bmVyQGZ1bi1tb29jLmZyIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoib3JnYW5pemF0aW9uX293bmVyIiwiZnVsbF9uYW1lIjoiT3JnYSBPd25lciBPd25lciJ9.wkdYFBasBIk4U-Vr7SdnkfgoqAlhn7rmr0Bqcs777_w',
+  student_user:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6ImNkZjAyMGM4ODdjOTQxYzU5ZmExN2FkZGExNjNjMDIzIiwiZW1haWwiOiJqZWFuLWJhcHRpc3RlLnBlbnJhdGgrc3R1ZGVudF91c2VyQGZ1bi1tb29jLmZyIiwibGFuZ3VhZ2UiOiJmci1mciIsInVzZXJuYW1lIjoic3R1ZGVudF91c2VyIiwiZnVsbF9uYW1lIjoiXHUwMGM5dHVkaWFudCJ9.JMdnC2VXwq2VbNPrIYxj8PEq0oJJ4LZZT_ywWyE1lBM',
+};
+
+export type DevDemoUser = keyof typeof JOANIE_DEV_DEMO_USER_JWT_TOKENS;
+
+export const RICHIE_DUMMY_IS_LOGGED_IN = 'RICHIE_DUMMY_IS_LOGGED_IN';
+
+function getUserInfo(username: DevDemoUser): Maybe<User> {
+  const accessToken = JOANIE_DEV_DEMO_USER_JWT_TOKENS[username];
+  const JWTPayload: JWTPayload = JSON.parse(base64Decode(accessToken.split('.')[1]));
+
+  return {
+    access_token: accessToken,
+    username: JWTPayload.username,
+    full_name: JWTPayload.full_name,
+  };
+}
 
 const API = (APIConf: LMSBackend | AuthenticationBackend): APILms => {
   const extractCourseIdFromUrl = (url: string): Maybe<Nullable<string>> => {
@@ -14,9 +61,9 @@ const API = (APIConf: LMSBackend | AuthenticationBackend): APILms => {
 
   return {
     user: {
-      me: async () => ({
-        /* Simulate user is authenticated as `admin` with a valid access_token to request Joanie API.
-           JWT Token claim is:
+      me: async () => {
+        /* Simulate user is authenticated with a valid access_token to request Joanie API.
+           JWT Token claim looks like:
             {
               "email": "admin@example.com",
               "exp": 10652256808,
@@ -28,13 +75,19 @@ const API = (APIConf: LMSBackend | AuthenticationBackend): APILms => {
               "username": "admin",
             }
         */
-        username: 'admin',
-        access_token:
-          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwidXNlcm5hbWUiOiJhZG1pbiIsImp0aSI6IjIxZGM5ZmI5MTZjYzRmNjViNTQ3OThmNjJmZWM0NTU0IiwiZnVsbF9uYW1lIjoiSm9obiBEb2UiLCJleHAiOjEwNjUyMjU2ODA4LCJpYXQiOjE2NTIyNTY4MDgsImVtYWlsIjoiYWRtaW5AZXhhbXBsZS5jb20iLCJsYW5ndWFnZSI6ImVuIn0.2bjiuPOdU3X2RkKIJ7_a9S8UnVoSfZrSlktsp7jXFzY',
-      }),
-      login: () => location.reload(),
+        if (!localStorage.getItem(RICHIE_DUMMY_IS_LOGGED_IN)) {
+          return null;
+        }
+        return getUserInfo(CURRENT_JOANIE_DEV_DEMO_USER) || null;
+      },
+      login: () => {
+        localStorage.setItem(RICHIE_DUMMY_IS_LOGGED_IN, 'true');
+        location.reload();
+      },
       register: () => location.reload(),
-      logout: async () => undefined,
+      logout: async () => {
+        localStorage.removeItem(RICHIE_DUMMY_IS_LOGGED_IN);
+      },
       accessToken: () => sessionStorage.getItem(RICHIE_USER_TOKEN),
     },
     enrollment: {

package/js/api/lms/joanie.spec.ts

@@ -2,14 +2,18 @@ import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
-import { extractResourceId, isJoanieProduct } from 'api/lms/joanie';
+import {
+  extractResourceId,
+  extractResourceMetadata,
+  isJoanieResourceLinkProduct,
+} from 'api/lms/joanie';
 
 jest.mock('utils/context', () => {
   const mock = mockRichieContextFactory().one();
   mock.lms_backends = [
     {
       backend: 'joanie',
-      course_regexp: '^.*/api/v1.0/(course-runs|products)/([^/]*)/?$',
+      course_regexp: '^.*/api/v1.0((?:/(?:courses|products|course-runs)/[^/]+)+)/?$',
       endpoint: 'https://joanie.test',
     },
     {
@@ -26,54 +30,68 @@ jest.mock('utils/context', () => {
   };
 });
 
-describe('isJoanieProduct', () => {
+describe('isJoanieResourceLinkProduct', () => {
   it('is not a joanie product because it is handled by a another LMSBackend than Joanie', () => {
-    expect(isJoanieProduct(CourseRunFactory().one())).toBe(false);
+    const courseRun = CourseRunFactory().one();
+    expect(isJoanieResourceLinkProduct(courseRun.resource_link)).toBe(false);
   });
 
   it('is not a joanie product because it is a course run', () => {
-    expect(
-      isJoanieProduct({
-        ...CourseRunFactory().one(),
-        resource_link: 'https://joanie.test/api/v1.0/course-runs/id/',
-      }),
-    ).toBe(false);
+    expect(isJoanieResourceLinkProduct('https://joanie.test/api/v1.0/course-runs/id/')).toBe(false);
   });
 
   it('is a joanie product', () => {
     expect(
-      isJoanieProduct({
-        ...CourseRunFactory().one(),
-        resource_link: 'https://joanie.test/api/v1.0/products/id/',
-      }),
+      isJoanieResourceLinkProduct(
+        'https://joanie.test/api/v1.0/courses/course-code/products/product-id/',
+      ),
     ).toBe(true);
   });
 });
 
 describe('extractResourceId', () => {
   it('cannot extract resource id because it is handled by another LMSBackend than Joanie', () => {
-    expect(extractResourceId(CourseRunFactory().one())).toBe(null);
+    const courseRun = CourseRunFactory().one();
+    expect(extractResourceId(courseRun.resource_link)).toBe(null);
   });
+
   it('cannot extract resource id because the regex does not match', () => {
-    expect(
-      extractResourceId({
-        ...CourseRunFactory().one(),
-        resource_link: 'https://joanie.test/api/v1.0/not-a-real-entity/id/',
-      }),
-    ).toBe(null);
+    expect(extractResourceId('https://joanie.test/api/v1.0/not-a-real-entity/id/')).toBe(null);
   });
+
   it('extracts resource id', () => {
+    expect(extractResourceId('https://joanie.test/api/v1.0/course-runs/id/')).toBe('id');
+    expect(
+      extractResourceId('https://joanie.test/api/v1.0/courses/course_id/products/product_id/'),
+    ).toBe('course_id');
     expect(
-      extractResourceId({
-        ...CourseRunFactory().one(),
-        resource_link: 'https://joanie.test/api/v1.0/course-runs/id/',
-      }),
-    ).toBe('id');
+      extractResourceId(
+        'https://joanie.test/api/v1.0/courses/course_id/products/product_id/',
+        'product',
+      ),
+    ).toBe('product_id');
+  });
+});
+
+describe('extractResourceMetadata', () => {
+  it('cannot extract metadata because the regex does not match', () => {
+    expect(extractResourceMetadata('https://joanie.test/api/v1.0/products/id/')).toBe(null);
+  });
+
+  it('extracts resource metadata from a course run', () => {
+    expect(extractResourceMetadata('https://joanie.test/api/v1.0/course-runs/id')).toEqual({
+      course_run: 'id',
+    });
+  });
+
+  it('extracts resource metadata from a course product', () => {
     expect(
-      extractResourceId({
-        ...CourseRunFactory().one(),
-        resource_link: 'https://joanie.test/api/v1.0/products/id/',
-      }),
-    ).toBe('id');
+      extractResourceMetadata(
+        'https://joanie.test/api/v1.0/courses/course_id/products/product_id/',
+      ),
+    ).toEqual({
+      course: 'course_id',
+      product: 'product_id',
+    });
   });
 });

package/js/api/lms/joanie.ts

@@ -1,5 +1,6 @@
+import { matchPath, PathMatch } from 'react-router-dom';
 import JoanieApi from 'api/joanie';
-import { AuthenticationBackend, LMSBackend } from 'types/commonDataProps';
+import { LMSBackend } from 'types/commonDataProps';
 import { APIBackend, APILms } from 'types/api';
 
 import { Maybe, Nullable } from 'types/utils';
@@ -9,50 +10,67 @@ import { CourseRun } from 'types';
 import { findLmsBackend } from 'api/configuration';
 
 enum JoanieResourceTypes {
-  PRODUCTS = 'products',
-  COURSE_RUNS = 'course-runs',
+  PRODUCT = 'course-product',
+  COURSE_RUN = 'course_run',
 }
 
-export const isJoanieProduct = (courseRun: CourseRun) => {
-  const handler = findLmsBackend(courseRun.resource_link) as Maybe<LMSBackend>;
-  if (handler?.backend !== APIBackend.JOANIE) {
-    return false;
-  }
-  const matches = courseRun.resource_link.match(handler.course_regexp);
-  if (!matches) {
-    return false;
-  }
-  const resourceType = matches[1];
-  return resourceType === JoanieResourceTypes.PRODUCTS;
+export const isJoanieResourceLinkProduct = (resource_link: CourseRun['resource_link']) => {
+  const resources = extractResourceMetadata(resource_link);
+  if (resources === null) return false;
+
+  return Object.keys(resources).join('-') === JoanieResourceTypes.PRODUCT;
 };
 
-export const extractResourceId = (courseRun: CourseRun) => {
-  const handler = findLmsBackend(courseRun.resource_link) as Maybe<LMSBackend>;
-  if (handler?.backend !== APIBackend.JOANIE) {
-    return null;
-  }
-  const matches = courseRun.resource_link.match(handler.course_regexp);
-  if (!matches) {
+export const extractResourceMetadata = (resource_link: CourseRun['resource_link']) => {
+  const handler = findLmsBackend(resource_link) as Maybe<LMSBackend>;
+  if (handler?.backend !== APIBackend.JOANIE) return null;
+
+  const matches: Nullable<RegExpMatchArray> | RegExpMatchArray[] = resource_link.match(
+    handler.course_regexp,
+  );
+  if (!matches) return null;
+
+  const resourceUri = matches[1];
+  const existingPathPatterns = ['/course-runs/:course_run', '/courses/:course/products/:product'];
+  let match: Nullable<PathMatch<string>>;
+
+  existingPathPatterns.some((pattern) => {
+    match = matchPath(
+      {
+        path: pattern,
+        end: true,
+      },
+      resourceUri,
+    );
+
+    return match !== null;
+  });
+
+  // @ts-ignore
+  if (!match) return null;
+  return match.params;
+};
+export const extractResourceId = (
+  resource_link: CourseRun['resource_link'],
+  resource_name?: 'product' | 'course' | 'course_run',
+) => {
+  const resources = extractResourceMetadata(resource_link);
+
+  if (resources === null || (resource_name && !resources.hasOwnProperty(resource_name)))
     return null;
-  }
-  return matches[2];
+
+  return resource_name ? resources[resource_name] : Object.values(resources)[0];
 };
 
-const JoanieEnrollmentApiInterface = (
-  APIConf: AuthenticationBackend | LMSBackend,
-): APILms['enrollment'] => {
+const JoanieEnrollmentApiInterface = (): APILms['enrollment'] => {
   const joanieAPI: API = JoanieApi();
 
-  const extractCourseRunIdFromUrl = (url: string): Maybe<Nullable<string>> => {
-    const matches = url.match((APIConf as LMSBackend).course_regexp);
-    return matches && matches[2] ? matches[2] : null;
-  };
   return {
     get(url: string) {
       return new Promise((resolve, reject) => {
-        const courseRunId = extractCourseRunIdFromUrl(url);
+        const courseRunId = extractResourceId(url, 'course_run');
         joanieAPI.user.enrollments
-          .get<{ id?: string; course_run: string }>({ course_run: courseRunId as string })
+          .get({ course_run_id: courseRunId as string })
           .then((res) => {
             if (res.count > 0) {
               resolve(res.results[0]);
@@ -71,7 +89,7 @@ const JoanieEnrollmentApiInterface = (
       enrollment: Maybe<Nullable<Enrollment>>,
       isActive = true,
     ): Promise<boolean> {
-      const courseRunId = extractCourseRunIdFromUrl(url);
+      const courseRunId = extractResourceId(url, 'course_run');
       if (!courseRunId) {
         return new Promise((resolve) => resolve(false));
       }
@@ -80,7 +98,7 @@ const JoanieEnrollmentApiInterface = (
         if (!enrollment) {
           joanieAPI.user.enrollments
             .create({
-              course_run: courseRunId,
+              course_run_id: courseRunId,
               is_active: true,
               was_created_by_order: false,
             })
@@ -93,7 +111,7 @@ const JoanieEnrollmentApiInterface = (
         } else {
           joanieAPI.user.enrollments
             .update({
-              course_run: courseRunId,
+              course_run_id: courseRunId,
               id: enrollment.id,
               is_active: isActive,
               was_created_by_order: false,

package/js/api/lms/openedx-hawthorn.spec.ts

@@ -2,7 +2,7 @@ import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { handle } from 'utils/errors/handle';
-import { HttpError } from 'utils/errors/HttpError';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import context from 'utils/context';
 import API from './openedx-hawthorn';
 
@@ -39,7 +39,7 @@ describe('OpenEdX Hawthorn API', () => {
         },
       });
 
-      fetchMock.get(`${EDX_ENDPOINT}/my-custom-api/user/v2.0/whoami`, 401);
+      fetchMock.get(`${EDX_ENDPOINT}/my-custom-api/user/v2.0/whoami`, HttpStatusCode.UNAUTHORIZED);
 
       await expect(CustomApi.user.me()).resolves.toBe(null);
     });
@@ -55,7 +55,10 @@ describe('OpenEdX Hawthorn API', () => {
 
     describe('get', () => {
       it('returns null if the user is not enrolled to the provided course_id', async () => {
-        fetchMock.get(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment/${username},${courseId}`, 200);
+        fetchMock.get(
+          `${EDX_ENDPOINT}/api/enrollment/v1/enrollment/${username},${courseId}`,
+          HttpStatusCode.OK,
+        );
         const response = await HawthornApi.enrollment.get(
           `https://demo.endpoint/courses?course_id=${courseId}`,
           { username },
@@ -73,7 +76,10 @@ describe('OpenEdX Hawthorn API', () => {
       });
 
       it('throws HttpError if request fails', async () => {
-        fetchMock.get(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment/${username},${courseId}`, 500);
+        fetchMock.get(
+          `${EDX_ENDPOINT}/api/enrollment/v1/enrollment/${username},${courseId}`,
+          HttpStatusCode.INTERNAL_SERVER_ERROR,
+        );
 
         await expect(
           HawthornApi.enrollment.get(`https://demo.endpoint/courses?course_id=${courseId}`, {
@@ -118,7 +124,10 @@ describe('OpenEdX Hawthorn API', () => {
       });
 
       it('returns false if user is not enrolled', async () => {
-        fetchMock.get(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment/${username},${courseId}`, 200);
+        fetchMock.get(
+          `${EDX_ENDPOINT}/api/enrollment/v1/enrollment/${username},${courseId}`,
+          HttpStatusCode.OK,
+        );
 
         const enrollment = await HawthornApi.enrollment.get(
           `https://demo.endpoint/courses?course_id=${courseId}`,
@@ -145,7 +154,10 @@ describe('OpenEdX Hawthorn API', () => {
       });
 
       it('throws HttpError if request fails', async () => {
-        fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, 500);
+        fetchMock.post(
+          `${EDX_ENDPOINT}/api/enrollment/v1/enrollment`,
+          HttpStatusCode.INTERNAL_SERVER_ERROR,
+        );
 
         await expect(
           HawthornApi.enrollment.set(`https://demo.endpoint/courses?course_id=${courseId}`, {
@@ -160,7 +172,7 @@ describe('OpenEdX Hawthorn API', () => {
 
       it('throws HttpError.localizedMessage on enrollment failure', async () => {
         fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, {
-          status: 400,
+          status: HttpStatusCode.BAD_REQUEST,
           body: { localizedMessage: 'You are not authorized to enroll in this course' },
         });
 
@@ -169,13 +181,17 @@ describe('OpenEdX Hawthorn API', () => {
             username,
           }),
         ).rejects.toThrow(
-          new HttpError(400, 'Bad Request', 'You are not authorized to enroll in this course'),
+          new HttpError(
+            HttpStatusCode.BAD_REQUEST,
+            'Bad Request',
+            'You are not authorized to enroll in this course',
+          ),
         );
       });
 
       it('throws HttpError on enrollment failure when localizedMessage property is not present in the payload', async () => {
         fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, {
-          status: 400,
+          status: HttpStatusCode.BAD_REQUEST,
           body: { message: 'Bad Request' },
         });
 
@@ -183,11 +199,11 @@ describe('OpenEdX Hawthorn API', () => {
           HawthornApi.enrollment.set(`https://demo.endpoint/courses?course_id=${courseId}`, {
             username,
           }),
-        ).rejects.toThrow(new HttpError(400, 'Bad Request'));
+        ).rejects.toThrow(new HttpError(HttpStatusCode.BAD_REQUEST, 'Bad Request'));
       });
 
       it('throws HttpError when response has no json payload', async () => {
-        fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, 400);
+        fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, HttpStatusCode.BAD_REQUEST);
 
         await expect(
           HawthornApi.enrollment.set(`https://demo.endpoint/courses?course_id=${courseId}`, {

package/js/api/lms/openedx-hawthorn.ts

@@ -8,7 +8,7 @@ import { location } from 'utils/indirection/window';
 import { handle } from 'utils/errors/handle';
 import { EDX_CSRF_TOKEN_COOKIE_NAME } from 'settings';
 import { Enrollment, OpenEdXEnrollment } from 'types';
-import { HttpError } from 'utils/errors/HttpError';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 
 /**
  *
@@ -48,7 +48,8 @@ const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions):
         return fetch(ROUTES.user.me, { credentials: 'include' })
           .then((res) => {
             if (res.ok) return res.json();
-            if ([403, 401].includes(res.status)) return null;
+            if ([HttpStatusCode.FORBIDDEN, HttpStatusCode.UNAUTHORIZED].includes(res.status))
+              return null;
             throw new Error(`[SESSION OpenEdX API] > Cannot retrieve user`);
           })
           .catch((error) => {
@@ -56,7 +57,7 @@ const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions):
             return null;
           });
       },
-      /* 
+      /*
         / ! \ Prefix next param with richie.
         In this way, OpenEdX Nginx conf knows that we want to go back to richie app after login/redirect
       */
@@ -81,7 +82,7 @@ const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions):
               ? response.json()
               : null;
           }
-          if (response.status >= 500) {
+          if (response.status >= HttpStatusCode.INTERNAL_SERVER_ERROR) {
             handle(new Error(`[GET - Enrollment] > ${response.status} - ${response.statusText}`));
           }
           throw new HttpError(response.status, response.statusText);
@@ -114,13 +115,13 @@ const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions):
         })
           .then(async (response) => {
             if (response.ok) return response.json();
-            if (response.status === 400) {
+            if (response.status === HttpStatusCode.BAD_REQUEST) {
               if (response.headers.get('Content-Type') === 'application/json') {
                 const { localizedMessage } = await response.json();
                 throw new HttpError(response.status, response.statusText, localizedMessage);
               }
             }
-            if (response.status >= 500) {
+            if (response.status >= HttpStatusCode.INTERNAL_SERVER_ERROR) {
               // Send server errors to sentry
               handle(new Error(`[SET - Enrollment] > ${response.status} - ${response.statusText}`));
             }

package/js/components/AddressesManagement/AddressForm/index.spec.tsx

@@ -0,0 +1,157 @@
+import { act, fireEvent, getByText, render, screen, within } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import countries from 'i18n-iso-countries';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { Address } from 'types/Joanie';
+import { AddressFactory } from 'utils/test/factories/joanie';
+import { changeSelect, clearSelect } from 'components/Form/test-utils';
+import AddressForm from './index';
+
+jest.mock('hooks/useAddresses', () => ({
+  useAddresses: () => ({
+    states: {
+      creating: false,
+      updating: false,
+    },
+  }),
+}));
+
+describe('AddressForm', () => {
+  const handleReset = jest.fn();
+  const onSubmit = jest.fn();
+  const Wrapper = ({ address }: { address?: Address }) => (
+    <IntlProvider locale="en">
+      <CunninghamProvider>
+        <AddressForm handleReset={handleReset} onSubmit={onSubmit} address={address} />
+      </CunninghamProvider>
+    </IntlProvider>
+  );
+  let user: UserEvent;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.resetModules();
+    user = userEvent.setup();
+  });
+
+  it('shows a note about required fields', () => {
+    const { container } = render(<Wrapper />);
+
+    // we use this form of testing because screen.getByText doesn't seem
+    // to handle text broken into multiple DOM elements correctly
+    expect(container).toHaveTextContent('All fields are required unless marked optional');
+
+    // the note should be rendered before any inputs
+    // we assume that it's the case if it's the first child of the form
+    expect(
+      container.querySelector(
+        'form[name="address-form"] > .form__required-fields-note:first-child',
+      ),
+    ).not.toBeNull();
+  });
+
+  it('should initialize with given address', () => {
+    const address = AddressFactory().one();
+    render(<Wrapper address={address} />);
+
+    expect(screen.getByRole('textbox', { name: 'Address title' })).toHaveDisplayValue(
+      address.title,
+    );
+    expect(screen.getByRole('textbox', { name: "Recipient's first name" })).toHaveDisplayValue(
+      address.first_name,
+    );
+    expect(screen.getByRole('textbox', { name: "Recipient's last name" })).toHaveDisplayValue(
+      address.last_name,
+    );
+    expect(screen.getByRole('textbox', { name: 'Address' })).toHaveDisplayValue(address.address);
+    expect(screen.getByRole('textbox', { name: 'Postcode' })).toHaveDisplayValue(address.postcode);
+    expect(screen.getByRole('textbox', { name: 'City' })).toHaveDisplayValue(address.city);
+    expect(
+      within(screen.getByRole('combobox', { name: 'Country' })).getByDisplayValue(address.country),
+    ).toBeInTheDocument();
+  });
+
+  it('should submit given address', async () => {
+    const address = AddressFactory().one();
+    render(<Wrapper address={address} />);
+    await user.click(screen.getByRole('button', { name: 'Update this address' }));
+    expect(onSubmit.mock.calls[0][0]).toStrictEqual(address);
+  });
+
+  it('renders a button with label "Use this address" when no address is provided', () => {
+    render(<Wrapper />);
+
+    screen.getByRole('button', { name: 'Use this address' });
+    expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
+  });
+
+  it('renders a button with label "Use this address" and a cancel button when no address is provided', async () => {
+    render(<Wrapper address={AddressFactory().one()} />);
+
+    screen.getByRole('button', { name: 'Update this address' });
+
+    const $button = screen.getByRole('button', { name: 'Cancel' });
+    await act(async () => {
+      fireEvent.click($button);
+    });
+    expect(handleReset).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders an error message when a value in the form is invalid', async () => {
+    render(<Wrapper />);
+
+    // - submit button should be enabled even when the form is not valid,
+    //   so that every user can get feedback easily (especially screen reader users)
+    const $submitButton = screen.getByRole('button', {
+      name: 'Use this address',
+    }) as HTMLButtonElement;
+    expect($submitButton.disabled).toBe(false);
+
+    // - User fulfills address fields
+    const address = AddressFactory().one();
+    const $titleInput = screen.getByRole('textbox', { name: 'Address title' });
+    const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
+    const $countryInput = screen.getByRole('combobox', { name: 'Country' });
+    await user.type($titleInput, address.title);
+    await user.type($firstnameInput, address.first_name);
+    await user.type(
+      screen.getByRole('textbox', { name: "Recipient's last name" }),
+      address.last_name,
+    );
+    await user.type(screen.getByRole('textbox', { name: 'Address' }), address.address);
+    await user.type(screen.getByRole('textbox', { name: 'City' }), address.city);
+    await user.type(screen.getByRole('textbox', { name: 'Postcode' }), address.postcode);
+
+    await changeSelect($countryInput, countries.getName(address?.country, 'en')!, user);
+
+    // Once the form has been fulfilled properly, submit button should still be enabled.
+    expect($submitButton.disabled).toBe(false);
+
+    // Before submitting, we change field values to corrupt the form data
+    await user.clear($titleInput);
+    await user.type($titleInput, 'a');
+    await user.clear($firstnameInput);
+    await clearSelect($countryInput, user);
+
+    await act(async () => {
+      fireEvent.click($submitButton);
+    });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    // Error messages should have been displayed.
+    // Title field should have a message saying that the value is too short.
+    expect(
+      getByText($titleInput.closest('.c__field')!, 'The minimum length is 2 chars.'),
+    ).toBeInTheDocument();
+    // Firstname field should have a message saying that the value is required.
+    expect(
+      getByText($firstnameInput.closest('.c__field')!, 'This field is required.'),
+    ).toBeInTheDocument();
+    // Country field should have a message saying that the value is not valid.
+    expect(
+      getByText($countryInput.closest('.c__field')!, /This field is required./),
+    ).toBeInTheDocument();
+  });
+});