richie-education 3.3.1-dev9 → 3.3.2-dev10

package/js/components/SaleTunnel/index.credential.spec.tsx

@@ -1,5 +1,6 @@
 import fetchMock from 'fetch-mock';
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import queryString from 'query-string';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -99,7 +100,11 @@ describe('SaleTunnel / Credential', () => {
       .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
-      });
+      })
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      );
 
     render(<Wrapper product={product} course={course} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -115,4 +120,106 @@ describe('SaleTunnel / Credential', () => {
     // - Payment button should not be disabled.
     expect($button.disabled).toBe(false);
   });
+
+  it('should display CPF payment option and redirect to deepLink when deepLink is available', async () => {
+    const course = PacedCourseFactory().one();
+    const product = CredentialProductFactory().one();
+    const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
+    const deepLink = 'https://placeholder.com/course/1';
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        { deep_link: deepLink },
+      )
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
+        overwriteRoutes: true,
+      });
+
+    window.open = jest.fn();
+    const user = userEvent.setup({ delay: null });
+
+    render(<Wrapper product={product} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    await screen.findByRole('heading', { level: 3, name: /payment method/i });
+
+    // - By default, credit card payment should be selected.
+    expect(screen.getByRole('radio', { name: /credit card payment/i })).toBeChecked();
+    expect(screen.getByRole('radio', { name: /my training account \(cpf\)/i })).not.toBeChecked();
+
+    await user.click(screen.getByRole('radio', { name: /my training account \(cpf\)/i }));
+
+    // - CPF description and redirect button should be visible.
+    expect(
+      screen.getByText(/pay for your training using your personal training account/i),
+    ).toBeInTheDocument();
+    const cpfButton = screen.getByRole('link', { name: /go to mon compte formation/i });
+
+    await user.click(cpfButton);
+  });
+
+  it('should not display CPF payment option when deepLink is null', async () => {
+    const course = PacedCourseFactory().one();
+    const product = CredentialProductFactory().one();
+    const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        { deep_link: null },
+      )
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
+        overwriteRoutes: true,
+      });
+
+    render(<Wrapper product={product} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    // - wait for address to be loaded.
+    await screen.findByText(getAddressLabel(billingAddress));
+
+    // - Payment method section and CPF option should not be rendered.
+    expect(
+      screen.queryByRole('heading', { level: 3, name: /payment method/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('radio', { name: /my training account \(cpf\)/i }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('radio', { name: /credit card payment/i })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('link', { name: /go to mon compte formation/i }),
+    ).not.toBeInTheDocument();
+
+    // - Classic billing information section should be displayed.
+    expect(screen.getByText(/this information will be used for billing/i)).toBeInTheDocument();
+  });
 });

package/js/components/SaleTunnel/index.full-process-b2b.spec.tsx

@@ -66,6 +66,10 @@ const setupBatchOrderMocks = (params: {
     `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
     paymentPlan,
   );
+  fetchMock.get(
+    `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+    {},
+  );
   fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
   fetchMock.get(
     `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
@@ -365,7 +369,7 @@ describe('SaleTunnel', () => {
       discounted_price: 0,
       discount: '-100%',
       payment_schedule: undefined,
-      from_batch_order: true,
+      skip_contract_inputs: true,
     }).one();
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT100`,

package/js/components/SaleTunnel/index.full-process-b2c.spec.tsx

@@ -116,6 +116,10 @@ describe('SaleTunnel', () => {
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
       paymentPlan,
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+      {},
+    );
     fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
     const orderQueryParameters = {
       product_id: product.id,
@@ -281,6 +285,11 @@ describe('SaleTunnel', () => {
       paymentPlanVoucher,
       { overwriteRoutes: true },
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+      {},
+      { overwriteRoutes: true },
+    );
     await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT30');
     await user.click(screen.getByRole('button', { name: 'Validate' }));
     screen.getByRole('heading', { name: 'Payment schedule' });

package/js/components/SaleTunnel/index.spec.tsx

@@ -175,6 +175,10 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      )
       .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, order)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
@@ -188,6 +192,7 @@ describe.each([
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
     nbApiCalls += 1; // product payment-schedule call
+    nbApiCalls += 1; // product deep-link call
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -263,6 +268,10 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      )
       .post('https://joanie.endpoint/api/v1.0/orders/', deferred.promise)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
@@ -275,6 +284,7 @@ describe.each([
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
     nbApiCalls += 1; // get paymentPlan call.
+    nbApiCalls += 1; // get deep-link call.
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -333,6 +343,10 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      )
       .get('https://joanie.endpoint/api/v1.0/offerings/get-organizations/', []);
 
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -379,6 +393,10 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      )
       .get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard], {
         overwriteRoutes: true,
       })
@@ -390,7 +408,7 @@ describe.each([
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
-    nbApiCalls += 3;
+    nbApiCalls += 4;
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     await screen.findByTestId('sale-tunnel-save-payment-method-step');
@@ -415,6 +433,10 @@ describe.each([
           `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
           paymentPlan,
         )
+        .get(
+          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+          {},
+        )
         .get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard], {
           overwriteRoutes: true,
         })
@@ -426,7 +448,7 @@ describe.each([
         queryOptions: { client: createTestQueryClient({ user: richieUser }) },
       });
 
-      nbApiCalls += 3;
+      nbApiCalls += 4;
       await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
       await screen.findByTestId('sale-tunnel-sign-step');
@@ -446,6 +468,10 @@ describe.each([
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -537,6 +563,10 @@ describe.each([
         .get(
           `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
           paymentPlan,
+        )
+        .get(
+          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+          {},
         );
       render(
         <Wrapper
@@ -585,6 +615,10 @@ describe.each([
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(
@@ -659,6 +693,10 @@ describe.each([
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -679,6 +717,10 @@ describe.each([
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={false} />, {
@@ -699,6 +741,10 @@ describe.each([
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -719,6 +765,10 @@ describe.each([
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={false} />, {
@@ -762,6 +812,10 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      )
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT30`,
         {
@@ -807,7 +861,7 @@ describe.each([
     const paymentPlanVoucher = PaymentPlanFactory({
       discounted_price: 0.0,
       discount: '-100%',
-      from_batch_order: true,
+      skip_contract_inputs: true,
     }).one();
     const product = ProductFactory().one();
     fetchMock
@@ -819,6 +873,10 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      )
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT100`,
         paymentPlanVoucher,
@@ -871,6 +929,10 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      )
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT30`,
         paymentPlanVoucher,
@@ -940,6 +1002,7 @@ describe('SaleTunnel with Keycloak backend', () => {
 
     richieUser = UserFactory({
       username: 'John Doe',
+      full_name: 'John Doe',
       email: 'johndoe@example.com',
     }).one();
 
@@ -999,6 +1062,10 @@ describe('SaleTunnel with Keycloak backend', () => {
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
@@ -1032,4 +1099,56 @@ describe('SaleTunnel with Keycloak backend', () => {
     // No OpenEdx profile API calls should have been made
     expect(fetchMock.calls().filter(([url]) => url.includes('/api/user/v1/'))).toHaveLength(0);
   });
+
+  it('should render keycloak account info when using fonzie-keycloak backend', async () => {
+    // Switch to fonzie-keycloak backend
+    const ctx = require('utils/context').default;
+    ctx.authentication.backend = 'fonzie-keycloak';
+
+    const product = CredentialProductFactory().one();
+    const paymentPlan = PaymentPlanFactory().one();
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
+          course_code: course.code,
+          product_id: product.id,
+          state: NOT_CANCELED_ORDER_STATES,
+        })}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      );
+
+    render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    // Should display the "Account name" heading (keycloak flow)
+    await screen.findByRole('heading', { level: 4, name: 'Account name' });
+
+    // Should display the username from the session
+    screen.getByText(richieUser.username);
+
+    // Should display the email from the session
+    screen.getByText(richieUser.email!);
+
+    // Should display the keycloak account update link
+    const updateLink = screen.getByRole('link', {
+      name: 'please update your account',
+    });
+    expect(updateLink).toHaveAttribute('href', mockAccountUpdateUrl);
+
+    // Should NOT render the OpenEdx full name form
+    expect(screen.queryByLabelText('First name and last name')).not.toBeInTheDocument();
+
+    // No OpenEdx profile API calls should have been made
+    expect(fetchMock.calls().filter(([url]) => url.includes('/api/user/v1/'))).toHaveLength(0);
+  });
 });

package/js/hooks/useDeepLink.tsx

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { OfferingDeepLink } from 'types/Joanie';
+import { HttpError } from 'utils/errors/HttpError';
+
+type DeepLinkFilters = {
+  course_code: string;
+  product_id: string;
+};
+
+export const useDeepLink = (filters: DeepLinkFilters) => {
+  const api = useJoanieApi();
+  return useQuery<OfferingDeepLink, HttpError>({
+    queryKey: ['courses-products', ...Object.values(filters), 'deep-link'],
+    queryFn: () =>
+      api.courses.products.deepLink.get({
+        id: filters.product_id,
+        course_id: filters.course_code,
+      }),
+  });
+};

package/js/pages/DashboardBatchOrders/index.spec.tsx

@@ -234,4 +234,107 @@ describe('<DashboardBatchOrders/>', () => {
 
     await screen.findByText('Completed');
   });
+
+  it('allows retrying payment after aborting the payment tunnel', async () => {
+    const batchOrder = BatchOrderReadFactory({
+      payment_method: PaymentMethod.CARD_PAYMENT,
+      state: BatchOrderState.PENDING,
+      total: 200,
+      currency: 'EUR',
+    }).one();
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`, {
+      results: [batchOrder],
+      count: 1,
+      next: null,
+      previous: null,
+    });
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/`, [batchOrder]);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`, batchOrder);
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.BATCH_ORDERS} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await expectNoSpinner('Loading batch orders...');
+    await screen.findByText('Payment required');
+
+    // Open modal and start payment
+    await userEvent.click(await screen.findByRole('button', { name: 'Pay €200.00' }));
+
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/submit-for-payment/`,
+      { payment_id: 'payment_id', provider: 'payment_provider', url: 'payment_url' },
+    );
+
+    const firstModal = await screen.findByRole('dialog');
+    await userEvent.click(within(firstModal).getByRole('button', { name: 'Pay €200.00' }));
+
+    // Close payment modal
+    await screen.findByTestId('payment-abort');
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+      {
+        results: [{ ...batchOrder, state: BatchOrderState.PROCESS_PAYMENT }],
+        count: 1,
+        next: null,
+        previous: null,
+      },
+      { overwriteRoutes: true },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`,
+      { ...batchOrder, state: BatchOrderState.PROCESS_PAYMENT },
+      { overwriteRoutes: true },
+    );
+    await userEvent.click(screen.getByTestId('payment-abort'));
+
+    const modalAfterAbort = await screen.findByRole('dialog');
+    await userEvent.click(within(modalAfterAbort).getByRole('button', { name: 'close' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+
+    await screen.findByText('Payment required');
+    await screen.findByRole('button', { name: 'Pay €200.00' });
+
+    // Retry payment successfully
+    await userEvent.click(await screen.findByRole('button', { name: 'Pay €200.00' }));
+
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/submit-for-payment/`,
+      { payment_id: 'payment_id', provider: 'payment_provider', url: 'payment_url' },
+      { overwriteRoutes: true },
+    );
+
+    const retryModal = await screen.findByRole('dialog');
+    await userEvent.click(within(retryModal).getByRole('button', { name: 'Pay €200.00' }));
+
+    await screen.findByTestId('payment-success');
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+      {
+        results: [{ ...batchOrder, state: BatchOrderState.COMPLETED }],
+        count: 1,
+        next: null,
+        previous: null,
+      },
+      { overwriteRoutes: true },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`,
+      { ...batchOrder, state: BatchOrderState.COMPLETED },
+      { overwriteRoutes: true },
+    );
+
+    await userEvent.click(screen.getByTestId('payment-success'));
+
+    await waitFor(() => {
+      expect(mockMessageModal).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'Payment successful' }),
+      );
+    });
+
+    expect(screen.queryByRole('button', { name: /Pay/ })).not.toBeInTheDocument();
+    await screen.findByText('Completed');
+  });
 });

package/js/pages/DashboardKeycloakProfile/index.spec.tsx

@@ -0,0 +1,77 @@
+import { screen } from '@testing-library/dom';
+import {
+  UserFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { User } from 'types/User';
+import { AuthenticationApi } from 'api/authentication';
+import { APIAuthentication } from 'types/api';
+import DashboardKeycloakProfile, { DEFAULT_DISPLAYED_FORM_VALUE } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: {
+      endpoint: 'https://endpoint.test',
+      backend: 'fonzie',
+    },
+    joanie_backend: {
+      endpoint: 'https://joanie.endpoint',
+    },
+  }).one(),
+}));
+
+describe('pages.DashboardKeycloakProfile', () => {
+  let richieUser: User;
+  let originalAccount: APIAuthentication['account'];
+  const mockAccountUpdateUrl = 'https://keycloak.test/auth/realms/richie/account';
+  setupJoanieSession();
+
+  beforeEach(() => {
+    richieUser = UserFactory().one();
+    originalAccount = AuthenticationApi!.account;
+    AuthenticationApi!.account = {
+      get: () => ({
+        username: richieUser.username,
+        email: richieUser.email,
+        firstName: null,
+        lastName: null,
+      }),
+      updateUrl: () => mockAccountUpdateUrl,
+    };
+  });
+
+  afterEach(() => {
+    AuthenticationApi!.account = originalAccount;
+  });
+
+  it('should render profile information with full_name', async () => {
+    render(<DashboardKeycloakProfile />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+    expect(screen.getByText('Account information')).toBeInTheDocument();
+
+    expect(await screen.findByDisplayValue(richieUser.full_name!)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(richieUser.email!)).toBeInTheDocument();
+
+    const editLink = screen.getByRole('link', { name: 'Edit your profile' });
+    expect(editLink).toBeInTheDocument();
+    expect(editLink).toHaveAttribute('href', mockAccountUpdateUrl);
+  });
+
+  it('should fallback to username when full_name is empty', async () => {
+    const userWithoutFullName = UserFactory({ full_name: undefined, email: undefined }).one();
+
+    render(<DashboardKeycloakProfile />, {
+      queryOptions: { client: createTestQueryClient({ user: userWithoutFullName }) },
+    });
+
+    expect(await screen.findByDisplayValue(userWithoutFullName.username)).toBeInTheDocument();
+    expect(screen.getByLabelText('Account email')).toHaveValue(DEFAULT_DISPLAYED_FORM_VALUE);
+  });
+});