richie-education 2.34.1-dev35 → 2.34.1-dev38

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

@@ -15,7 +15,7 @@ import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { AppWrapperProps } from 'utils/test/wrappers/types';
-import { expectBannerError } from 'utils/test/expectBanner';
+import { expectAlertError, expectAlertWarning, expectNoAlertWarning } from 'utils/test/expectAlert';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -71,7 +71,7 @@ describe('OpenEdxFullNameForm', () => {
       wrapper: Wrapper,
     });
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
   });
 
@@ -93,7 +93,7 @@ describe('OpenEdxFullNameForm', () => {
       wrapper: Wrapper,
     });
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue(user.full_name);
   });
 
@@ -119,15 +119,25 @@ describe('OpenEdxFullNameForm', () => {
 
     expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
 
+    await expectAlertWarning(
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
+    );
+
     // Submit the form
     await act(async () => {
       await expect(submitCallbacks.openEdxFullNameForm()).rejects.not.toBeUndefined();
     });
 
     screen.getByText('This field is required.');
+    await expectNoAlertWarning(
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
+    );
+    await expectAlertError(
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
+    );
   });
 
   it('should require a value with at least 3 chars to submit the form', async () => {
@@ -152,7 +162,7 @@ describe('OpenEdxFullNameForm', () => {
 
     expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
 
     const eventHandler = userEvent.setup();
@@ -189,7 +199,7 @@ describe('OpenEdxFullNameForm', () => {
 
     expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
 
     const eventHandler = userEvent.setup();
@@ -224,6 +234,6 @@ describe('OpenEdxFullNameForm', () => {
       wrapper: Wrapper,
     });
 
-    await expectBannerError('An error occurred while fetching your profile. Please retry later.');
+    await expectAlertError('An error occurred while fetching your profile. Please retry later.');
   });
 });

package/js/components/OpenEdxFullNameForm/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonElement, Input } from '@openfun/cunningham-react';
+import { ButtonElement, Input, Alert, VariantType } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
@@ -8,7 +8,6 @@ import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import Form, { getLocalizedCunninghamErrorProp } from 'components/Form';
 import { Spinner } from 'components/Spinner';
-import Banner, { BannerType } from 'components/Banner';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 
 const messages = defineMessages({
@@ -19,14 +18,15 @@ const messages = defineMessages({
   },
   fullNameInputLabel: {
     id: 'components.OpenEdxFullNameForm.fullNameInputLabel',
-    description: 'Label of "fullName" field of the openEdx full name form',
-    defaultMessage: 'Full name',
+    description: 'Label of "First name and last name" field of the openEdx full name form',
+    defaultMessage: 'First name and last name',
   },
   fullNameInputDescription: {
     id: 'components.OpenEdxFullNameForm.fullNameInputDescription',
-    description: 'Descripiton on the "fullName" field of the openEdx full name form.',
+    description:
+      'Description about the "First name and last name" field of the openEdx full name form.',
     defaultMessage:
-      'Please check that your fullname is correct. It will be used on official document (e.g: certificate)',
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
   },
   submitButtonLabel: {
     id: 'components.OpenEdxFullNameForm.submitButtonLabel',
@@ -128,27 +128,24 @@ const OpenEdxFullNameForm = () => {
 
   if (error) {
     // display get error message
-    return <Banner type={BannerType.ERROR} message={error} />;
+    return <Alert type={VariantType.ERROR}>{error}</Alert>;
   }
 
   return (
     <FormProvider {...form}>
       <Form name="openedx-fullname-form" noValidate>
+        <Alert type={formState.errors.name?.message ? VariantType.ERROR : VariantType.WARNING}>
+          <FormattedMessage {...messages.fullNameInputDescription} />
+        </Alert>
         <Input
           {...register('name')}
-          className="form-field"
+          className="form-field mt-s"
           required
           fullWidth
           label={intl.formatMessage(messages.fullNameInputLabel)}
           value={formState.defaultValues?.name}
-          state={
-            error || (formState.errors.name && formState.errors.name.message) ? 'error' : 'default'
-          }
-          text={
-            error ||
-            getLocalizedCunninghamErrorProp(intl, formState.errors.name?.message).text ||
-            intl.formatMessage(messages.fullNameInputDescription)
-          }
+          state={error || formState.errors.name?.message ? 'error' : 'default'}
+          text={error || getLocalizedCunninghamErrorProp(intl, formState.errors.name?.message).text}
         />
       </Form>
     </FormProvider>

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

@@ -184,7 +184,7 @@ describe('SaleTunnel', () => {
      */
     screen.getByText('Information');
 
-    const nameInput = screen.getByLabelText('Full name');
+    const nameInput = screen.getByLabelText('First name and last name');
     await user.type(nameInput, 'John Doe');
 
     /**

package/js/utils/test/expectAlert.ts

@@ -0,0 +1,63 @@
+import { waitFor } from '@testing-library/react';
+import { VariantType } from '@openfun/cunningham-react';
+
+export const expectAlertError = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.ERROR, message, rootElement);
+};
+
+export const expectAlertInfo = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.INFO, message, rootElement);
+};
+
+export const expectAlertSuccess = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.SUCCESS, message, rootElement);
+};
+
+export const expectAlertWarning = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.WARNING, message, rootElement);
+};
+
+export const expectAlert = (
+  type: VariantType,
+  message: string,
+  rootElement: ParentNode = document,
+) => {
+  return waitFor(async () => {
+    // Cunningham Alert has a class with the alert variant type
+    const alert = rootElement.querySelector(`.c__alert--${type}`) as HTMLElement;
+    expect(alert).not.toBeNull();
+    expect(alert).toHaveTextContent(message);
+  });
+};
+
+export const expectNoAlert = (
+  type: VariantType,
+  message: string,
+  rootElement: ParentNode = document,
+) => {
+  return waitFor(() => {
+    // Check that no alert exists with this message and type
+    const alerts = rootElement.querySelectorAll('.c__alert');
+    const matchingAlert = Array.from(alerts).find(
+      (alert) =>
+        alert.classList.contains(`c__alert--${type}`) && alert.textContent?.includes(message),
+    );
+    expect(matchingAlert).toBeUndefined();
+  });
+};
+
+export const expectNoAlertError = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.ERROR, message, rootElement);
+};
+
+export const expectNoAlertInfo = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.INFO, message, rootElement);
+};
+
+export const expectNoAlertSuccess = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.SUCCESS, message, rootElement);
+};
+
+export const expectNoAlertWarning = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.WARNING, message, rootElement);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.34.1-dev35",
+  "version": "2.34.1-dev38",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {