@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/register/components/tests/ConfigurableRegistrationForm.test.jsx

@@ -0,0 +1,401 @@
+import { Provider } from 'react-redux';
+
+import {
+  CurrentAppProvider, getLocale, injectIntl, IntlProvider, mergeAppConfig
+} from '@openedx/frontend-base';
+import { fireEvent, render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+
+import { appId } from '../../../constants';
+import { registerNewUser } from '../../data/actions';
+import { FIELDS } from '../../data/constants';
+import RegistrationPage from '../../RegistrationPage';
+import ConfigurableRegistrationForm from '../ConfigurableRegistrationForm';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  sendPageEvent: jest.fn(),
+  sendTrackEvent: jest.fn(),
+  getLocale: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
+const IntlRegistrationPage = injectIntl(RegistrationPage);
+const mockStore = configureStore();
+
+describe('ConfigurableRegistrationForm', () => {
+  mergeAppConfig(appId, {
+    PRIVACY_POLICY: 'https://privacy-policy.com',
+    TOS_AND_HONOR_CODE: 'https://tos-and-honot-code.com',
+  });
+
+  let props = {};
+  let store = {};
+  const registrationFormData = {
+    configurableFormFields: {
+      marketingEmailsOptIn: true,
+    },
+    formFields: {
+      name: '', email: '', username: '', password: '',
+    },
+    emailSuggestion: {
+      suggestion: '', type: '',
+    },
+    errors: {
+      name: '', email: '', username: '', password: '',
+    },
+  };
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <CurrentAppProvider appId={appId}>
+        <Provider store={store}>{children}</Provider>
+      </CurrentAppProvider>
+    </IntlProvider>
+  );
+
+  const routerWrapper = children => (
+    <Router>
+      {children}
+    </Router>
+  );
+
+  const thirdPartyAuthContext = {
+    currentProvider: null,
+    finishAuthUrl: null,
+    providers: [],
+    secondaryProviders: [],
+    pipelineUserDetails: null,
+    countryCode: null,
+  };
+
+  const initialState = {
+    register: {
+      registrationResult: { success: false, redirectUrl: '' },
+      registrationError: {},
+      registrationFormData,
+      usernameSuggestions: [],
+    },
+    commonComponents: {
+      thirdPartyAuthApiStatus: null,
+      thirdPartyAuthContext,
+      fieldDescriptions: {},
+      optionalFields: {
+        fields: {},
+        extended_profile: [],
+      },
+    },
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    props = {
+      email: '',
+      fieldDescriptions: {},
+      fieldErrors: {},
+      formFields: {},
+      setFieldErrors: jest.fn(),
+      setFormFields: jest.fn(),
+      registrationEmbedded: false,
+      autoSubmitRegistrationForm: false,
+      handleInstitutionLogin: jest.fn(),
+      institutionLogin: false,
+    };
+    window.location = { search: '' };
+    getLocale.mockImplementationOnce(() => ('en-us'));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const populateRequiredFields = (getByLabelText, payload, isThirdPartyAuth = false) => {
+    fireEvent.change(getByLabelText('Full name'), { target: { value: payload.name, name: 'name' } });
+    fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
+    fireEvent.change(getByLabelText('Email'), { target: { value: payload.email, name: 'email' } });
+
+    if (!isThirdPartyAuth) {
+      fireEvent.change(getByLabelText('Password'), { target: { value: payload.password, name: 'password' } });
+    }
+  };
+
+  describe('Test Configurable Fields', () => {
+    mergeAppConfig(appId, {
+      ENABLE_DYNAMIC_REGISTRATION_FIELDS: true,
+    });
+
+    it('should render fields returned by backend as field descriptions', () => {
+      props = {
+        ...props,
+        fieldDescriptions: {
+          profession: { name: 'profession', type: 'text', label: 'Profession' },
+          terms_of_service: {
+            name: FIELDS.TERMS_OF_SERVICE,
+            error_message: 'You must agree to the Terms and Service agreement of our site',
+          },
+        },
+      };
+
+      render(routerWrapper(reduxWrapper(
+        <IntlConfigurableRegistrationForm {...props} />,
+      )));
+
+      expect(document.querySelector('#profession')).toBeTruthy();
+      expect(document.querySelector('#tos')).toBeTruthy();
+    });
+
+    it('should check TOS and honor code fields if they exist when auto submitting register form', () => {
+      props = {
+        ...props,
+        formFields: {},
+        fieldDescriptions: {
+          terms_of_service: {
+            name: FIELDS.TERMS_OF_SERVICE,
+            error_message: 'You must agree to the Terms and Service agreement of our site',
+          },
+          honor_code: {
+            name: FIELDS.HONOR_CODE,
+            error_message: 'You must agree to the Honor Code agreement of our site',
+          },
+        },
+        autoSubmitRegistrationForm: true,
+      };
+
+      render(routerWrapper(reduxWrapper(
+        <IntlConfigurableRegistrationForm {...props} />,
+      )));
+
+      expect(props.setFormFields).toHaveBeenCalledTimes(2);
+      expect(props.setFormFields.mock.calls[0][0]()).toEqual({
+        [FIELDS.HONOR_CODE]: true,
+      });
+
+      expect(props.setFormFields.mock.calls[1][0]()).toEqual({
+        [FIELDS.TERMS_OF_SERVICE]: true,
+      });
+    });
+
+    it('should render fields returned by backend', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            profession: { name: 'profession', type: 'text', label: 'Profession' },
+            terms_of_service: {
+              name: FIELDS.TERMS_OF_SERVICE,
+              error_message: 'You must agree to the Terms and Service agreement of our site',
+            },
+          },
+        },
+      });
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      expect(document.querySelector('#profession')).toBeTruthy();
+      expect(document.querySelector('#tos')).toBeTruthy();
+    });
+
+    it('should submit form with fields returned by backend in payload', () => {
+      mergeAppConfig(appId, {
+        ENABLE_DYNAMIC_REGISTRATION_FIELDS: true,
+      });
+      getLocale.mockImplementation(() => ('en-us'));
+      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            profession: { name: 'profession', type: 'text', label: 'Profession' },
+          },
+          extendedProfile: ['profession'],
+        },
+      });
+
+      const payload = {
+        name: 'John Doe',
+        username: 'john_doe',
+        email: 'john.doe@example.com',
+        password: 'password1',
+        profession: 'Engineer',
+        total_registration_time: 0,
+      };
+
+      store.dispatch = jest.fn(store.dispatch);
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+
+      populateRequiredFields(getByLabelText, payload);
+
+      const professionInput = getByLabelText('Profession');
+      fireEvent.change(professionInput, { target: { value: 'Engineer', name: 'profession' } });
+
+      const submitButton = container.querySelector('button.btn-brand');
+
+      fireEvent.click(submitButton);
+
+      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload }));
+    });
+
+    it('should show error messages for required fields on empty form submission', () => {
+      const professionError = 'Enter your profession';
+      const countryError = 'Select your country or region of residence';
+      const confirmEmailError = 'Enter your email';
+
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            profession: {
+              name: 'profession', type: 'text', label: 'Profession', error_message: professionError,
+            },
+            confirm_email: {
+              name: 'confirm_email', type: 'text', label: 'Confirm Email', error_message: confirmEmailError,
+            },
+            country: { name: 'country' },
+          },
+        },
+      });
+
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const submitButton = container.querySelector('button.btn-brand');
+
+      fireEvent.click(submitButton);
+
+      const professionErrorElement = container.querySelector('#profession-error');
+      const countryErrorElement = container.querySelector('div[feedback-for="country"]');
+      const confirmEmailErrorElement = container.querySelector('#confirm_email-error');
+
+      expect(professionErrorElement.textContent).toEqual(professionError);
+      expect(countryErrorElement.textContent).toEqual(countryError);
+      expect(confirmEmailErrorElement.textContent).toEqual(confirmEmailError);
+    });
+
+    it('should show country field validation when country name is invalid', () => {
+      const invalidCountryError = 'Country must match with an option available in the dropdown.';
+
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            country: { name: 'country' },
+          },
+        },
+      });
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const countryInput = container.querySelector('input[name="country"]');
+      fireEvent.change(countryInput, { target: { value: 'Pak', name: 'country' } });
+      fireEvent.blur(countryInput, { target: { value: 'Pak', name: 'country' } });
+
+      const submitButton = container.querySelector('button.btn-brand');
+      fireEvent.click(submitButton);
+
+      const countryErrorElement = container.querySelector('div[feedback-for="country"]');
+
+      expect(countryErrorElement.textContent).toEqual(invalidCountryError);
+    });
+
+    it('should show error if email and confirm email fields do not match', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            confirm_email: {
+              name: 'confirm_email', type: 'text', label: 'Confirm Email',
+            },
+          },
+        },
+      });
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+
+      const emailInput = getByLabelText('Email');
+      const confirmEmailInput = getByLabelText('Confirm Email');
+
+      fireEvent.change(emailInput, { target: { value: 'test1@gmail.com', name: 'email' } });
+      fireEvent.blur(confirmEmailInput, { target: { value: 'test2@gmail.com', name: 'confirm_email' } });
+
+      const confirmEmailErrorElement = container.querySelector('div#confirm_email-error');
+
+      expect(confirmEmailErrorElement.textContent).toEqual('The email addresses do not match.');
+    });
+
+    it('should show error if email and confirm email fields do not match on submit click', () => {
+      const formPayload = {
+        name: 'Petro',
+        username: 'petro_qa',
+        email: 'petro@example.com',
+        password: 'password1',
+        country: 'Ukraine',
+        honor_code: true,
+        total_registration_time: 0,
+      };
+
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            confirm_email: {
+              name: 'confirm_email', type: 'text', label: 'Confirm Email',
+            },
+            country: { name: 'country' },
+          },
+        },
+      });
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+
+      populateRequiredFields(getByLabelText, formPayload, true);
+      fireEvent.change(
+        getByLabelText('Confirm Email'),
+        { target: { value: 'test2@gmail.com', name: 'confirm_email' } },
+      );
+
+      const button = container.querySelector('button.btn-brand');
+      fireEvent.click(button);
+
+      const confirmEmailErrorElement = container.querySelector('div#confirm_email-error');
+      expect(confirmEmailErrorElement.textContent).toEqual('The email addresses do not match.');
+
+      const validationErrors = container.querySelector('#validation-errors');
+      expect(validationErrors.textContent).toContain(
+        "We couldn't create your account.Please check your responses and try again.",
+      );
+    });
+
+    it('should run validations for configurable focused field on form submission', () => {
+      const professionError = 'Enter your profession';
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            profession: {
+              name: 'profession', type: 'text', label: 'Profession', error_message: professionError,
+            },
+          },
+        },
+      });
+
+      const { getByLabelText, container } = render(
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+      );
+
+      const professionInput = getByLabelText('Profession');
+      fireEvent.focus(professionInput);
+
+      const submitButton = container.querySelector('button.btn-brand');
+      fireEvent.click(submitButton);
+
+      const professionErrorElement = container.querySelector('#profession-error');
+
+      expect(professionErrorElement.textContent).toEqual(professionError);
+    });
+  });
+});

package/src/register/components/tests/RegistrationFailure.test.jsx

@@ -0,0 +1,212 @@
+import { Provider } from 'react-redux';
+
+import {
+  configureI18n, getLocale, injectIntl, IntlProvider, mergeAppConfig
+} from '@openedx/frontend-base';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+
+import {
+  FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_AUTHENTICATION_FAILURE, TPA_SESSION_EXPIRED,
+} from '../../data/constants';
+import { appId } from '../../../constants';
+import RegistrationPage from '../../RegistrationPage';
+import RegistrationFailureMessage from '../RegistrationFailure';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  sendPageEvent: jest.fn(),
+  sendTrackEvent: jest.fn(),
+  getLocale: jest.fn(),
+}));
+
+const IntlRegistrationPage = injectIntl(RegistrationPage);
+const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
+const mockStore = configureStore();
+
+jest.mock('react-router-dom', () => {
+  const mockNavigation = jest.fn();
+
+  // eslint-disable-next-line react/prop-types
+  const Navigate = ({ to }) => {
+    mockNavigation(to);
+    return <div />;
+  };
+
+  return {
+    ...jest.requireActual('react-router-dom'),
+    Navigate,
+  };
+});
+
+describe('RegistrationFailure', () => {
+  mergeAppConfig(appId, {
+    PRIVACY_POLICY: 'https://privacy-policy.com',
+    TOS_AND_HONOR_CODE: 'https://tos-and-honot-code.com',
+    USER_RETENTION_COOKIE_NAME: 'authn-returning-user',
+  });
+
+  let props = {};
+  let store = {};
+  const registrationFormData = {
+    configurableFormFields: {
+      marketingEmailsOptIn: true,
+    },
+    formFields: {
+      name: '', email: '', username: '', password: '',
+    },
+    emailSuggestion: {
+      suggestion: '', type: '',
+    },
+    errors: {
+      name: '', email: '', username: '', password: '',
+    },
+  };
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <Provider store={store}>{children}</Provider>
+    </IntlProvider>
+  );
+
+  const routerWrapper = children => (
+    <Router>
+      {children}
+    </Router>
+  );
+
+  const thirdPartyAuthContext = {
+    currentProvider: null,
+    finishAuthUrl: null,
+    providers: [],
+    secondaryProviders: [],
+    pipelineUserDetails: null,
+    countryCode: null,
+  };
+
+  const initialState = {
+    register: {
+      registrationResult: { success: false, redirectUrl: '' },
+      registrationError: {},
+      registrationFormData,
+      usernameSuggestions: [],
+    },
+    commonComponents: {
+      thirdPartyAuthApiStatus: null,
+      thirdPartyAuthContext,
+      fieldDescriptions: {},
+      optionalFields: {
+        fields: {},
+        extended_profile: [],
+      },
+    },
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    configureI18n({
+      messages: { 'es-419': {}, de: {}, 'en-us': {} },
+    });
+    props = {
+      handleInstitutionLogin: jest.fn(),
+      institutionLogin: false,
+    };
+    window.location = { search: '' };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Test Registration Failure', () => {
+    getLocale.mockImplementation(() => ('en-us'));
+
+    it('should match internal server error message', () => {
+      const expectedMessage = 'We couldn\'t create your account.An error has occurred. Try refreshing the page, or check your internet connection.';
+      props = {
+        errorCode: INTERNAL_SERVER_ERROR,
+        failureCount: 0,
+      };
+
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+
+      const alertHeading = container.querySelectorAll('div.alert-heading');
+      expect(alertHeading.length).toEqual(1);
+
+      const alert = container.querySelector('div.alert');
+      expect(alert.textContent).toContain(expectedMessage);
+    });
+
+    it('should match registration api rate limit error message', () => {
+      const expectedMessage = 'We couldn\'t create your account.Too many failed registration attempts. Try again later.';
+      props = {
+        errorCode: FORBIDDEN_REQUEST,
+        failureCount: 0,
+      };
+
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+
+      const alertHeading = container.querySelectorAll('div.alert-heading');
+      expect(alertHeading.length).toEqual(1);
+
+      const alert = container.querySelector('div.alert');
+      expect(alert.textContent).toContain(expectedMessage);
+    });
+
+    it('should match tpa session expired error message', () => {
+      const expectedMessage = 'We couldn\'t create your account.Registration using Google has timed out.';
+      props = {
+        context: {
+          provider: 'Google',
+        },
+        errorCode: TPA_SESSION_EXPIRED,
+        failureCount: 0,
+      };
+
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+
+      const alertHeading = container.querySelectorAll('div.alert-heading');
+      expect(alertHeading.length).toEqual(1);
+
+      const alert = container.querySelector('div.alert');
+      expect(alert.textContent).toContain(expectedMessage);
+    });
+
+    it('should match tpa authentication failed error message', () => {
+      const expectedMessageSubstring = 'We are sorry, you are not authorized to access';
+      props = {
+        context: {
+          provider: 'Google',
+        },
+        errorCode: TPA_AUTHENTICATION_FAILURE,
+        failureCount: 0,
+      };
+
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+
+      const alertHeading = container.querySelectorAll('div.alert-heading');
+      expect(alertHeading.length).toEqual(1);
+
+      const alert = container.querySelector('div.alert');
+      expect(alert.textContent).toContain(expectedMessageSubstring);
+    });
+
+    it('should display error message based on the error code returned by API', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          registrationError: {
+            errorCode: INTERNAL_SERVER_ERROR,
+          },
+        },
+      });
+
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const validationError = screen.queryByText('An error has occurred. Try refreshing the page, or check your internet connection.');
+
+      expect(validationError).not.toBeNull();
+    });
+  });
+});