@openedx/frontend-app-authn 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/register/RegistrationPage.test.jsx

@@ -1,854 +0,0 @@
-import { Provider } from 'react-redux';
-import Cookies from 'universal-cookie';
-
-import {
-  CurrentAppProvider, configureI18n, getAppConfig, getSiteConfig, getLocale, injectIntl, IntlProvider, mergeAppConfig,
-} from '@openedx/frontend-base';
-import { fireEvent, render } from '@testing-library/react';
-import { mockNavigate, BrowserRouter as Router } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-
-import {
-  AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
-} from '../data/constants';
-import { appId } from '../constants';
-import { initializeMockServices } from '../setupTest';
-import {
-  backupRegistrationFormBegin,
-  clearRegistrationBackendError,
-  registerNewUser,
-  setUserPipelineDataLoaded,
-} from './data/actions';
-import { INTERNAL_SERVER_ERROR } from './data/constants';
-import RegistrationPage from './RegistrationPage';
-
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  getLocale: jest.fn(),
-}));
-
-const { analyticsService } = initializeMockServices();
-const IntlRegistrationPage = injectIntl(RegistrationPage);
-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,
-    mockNavigate: mockNavigation,
-  };
-});
-
-// Mock Cookies class
-jest.mock('universal-cookie');
-
-describe('RegistrationPage', () => {
-  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">
-      <CurrentAppProvider appId={appId}>
-        <Provider store={store}>{children}</Provider>
-      </CurrentAppProvider>
-    </IntlProvider>
-  );
-
-  const routerWrapper = children => (
-    <Router>
-      {children}
-    </Router>
-  );
-
-  const thirdPartyAuthContext = {
-    currentProvider: null,
-    finishAuthUrl: null,
-    providers: [],
-    pipelineUserDetails: 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();
-  });
-
-  const populateRequiredFields = (
-    getByLabelText,
-    payload,
-    isThirdPartyAuth = false,
-    autoGeneratedUsernameEnabled = false,
-  ) => {
-    fireEvent.change(getByLabelText('Full name'), { target: { value: payload.name, name: 'name' } });
-    if (!autoGeneratedUsernameEnabled) {
-      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 Registration Page', () => {
-    const emptyFieldValidation = {
-      name: 'Enter your full name',
-      username: 'Username must be between 2 and 30 characters',
-      email: 'Enter your email',
-      password: 'Password criteria has not been met',
-    };
-
-    // ******** test registration form submission ********
-
-    it('should submit form for valid input', () => {
-      getLocale.mockImplementation(() => ('en-us'));
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl, search: '?next=/course/demo-course-url' };
-
-      const payload = {
-        name: 'John Doe',
-        username: 'john_doe',
-        email: 'john.doe@gmail.com',
-        password: 'password1',
-        total_registration_time: 0,
-        next: '/course/demo-course-url',
-      };
-
-      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, getByText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      populateRequiredFields(getByLabelText, payload);
-      fireEvent.click(getByText('Create an account for free'));
-
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload }));
-    });
-
-    it('should submit form without password field when current provider is present', () => {
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-
-      const formPayload = {
-        name: 'John Doe',
-        username: 'john_doe',
-        email: 'john.doe@example.com',
-        social_auth_provider: 'Apple',
-        total_registration_time: 0,
-      };
-
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            currentProvider: 'Apple',
-          },
-        },
-      });
-      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-
-      populateRequiredFields(getByLabelText, formPayload, true);
-      const button = container.querySelector('button.btn-brand');
-      fireEvent.click(button);
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...formPayload }));
-    });
-
-    it('should display an error when form is submitted with an invalid email', () => {
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-      const emailError = "We couldn't create your account.Please check your responses and try again.";
-
-      const formPayload = {
-        name: 'Petro',
-        username: 'petro_qa',
-        email: 'petro  @example.com',
-        password: 'password1',
-        total_registration_time: 0,
-      };
-
-      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      populateRequiredFields(getByLabelText, formPayload, true);
-
-      const button = container.querySelector('button.btn-brand');
-      fireEvent.click(button);
-
-      const validationErrors = container.querySelector('#validation-errors');
-      expect(validationErrors.textContent).toContain(emailError);
-    });
-
-    it('should display an error when form is submitted with an invalid username', () => {
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-      const usernameError = "We couldn't create your account.Please check your responses and try again.";
-
-      const formPayload = {
-        name: 'Petro',
-        username: 'petro qa',
-        email: 'petro@example.com',
-        password: 'password1',
-        total_registration_time: 0,
-      };
-
-      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      populateRequiredFields(getByLabelText, formPayload, true);
-      const button = container.querySelector('button.btn-brand');
-      fireEvent.click(button);
-      const validationErrors = container.querySelector('#validation-errors');
-      expect(validationErrors.textContent).toContain(usernameError);
-    });
-
-    it('should submit form with marketing email opt in value', () => {
-      mergeAppConfig(appId, {
-        MARKETING_EMAILS_OPT_IN: 'true',
-      });
-
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-
-      const payload = {
-        name: 'John Doe',
-        username: 'john_doe',
-        email: 'john.doe@gmail.com',
-        password: 'password1',
-        total_registration_time: 0,
-        marketing_emails_opt_in: true,
-      };
-
-      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      populateRequiredFields(getByLabelText, payload);
-      const button = container.querySelector('button.btn-brand');
-      fireEvent.click(button);
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload }));
-
-      mergeAppConfig(appId, {
-        MARKETING_EMAILS_OPT_IN: '',
-      });
-    });
-
-    it('should submit form without UsernameField when autoGeneratedUsernameEnabled is true', () => {
-      mergeAppConfig(appId, {
-        ENABLE_AUTO_GENERATED_USERNAME: true,
-      });
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-      const payload = {
-        name: 'John Doe',
-        email: 'john.doe@gmail.com',
-        password: 'password1',
-        total_registration_time: 0,
-      };
-
-      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      populateRequiredFields(getByLabelText, payload, false, true);
-      const button = container.querySelector('button.btn-brand');
-      fireEvent.click(button);
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload }));
-      mergeAppConfig(appId, {
-        ENABLE_AUTO_GENERATED_USERNAME: false,
-      });
-    });
-
-    it('should not display UsernameField when ENABLE_AUTO_GENERATED_USERNAME is true', () => {
-      mergeAppConfig(appId, {
-        ENABLE_AUTO_GENERATED_USERNAME: true,
-      });
-
-      const { queryByLabelText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(queryByLabelText('Username')).toBeNull();
-
-      mergeAppConfig(appId, {
-        ENABLE_AUTO_GENERATED_USERNAME: false,
-      });
-    });
-
-    it('should not dispatch registerNewUser on empty form Submission', () => {
-      store.dispatch = jest.fn(store.dispatch);
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-
-      const button = container.querySelector('button.btn-brand');
-      fireEvent.click(button);
-
-      expect(store.dispatch).not.toHaveBeenCalledWith(registerNewUser({}));
-    });
-
-    // ******** test registration form validations ********
-
-    it('should show error messages for required fields on empty form submission', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-
-      const button = container.querySelector('button.btn-brand');
-      fireEvent.click(button);
-
-      Object.entries(emptyFieldValidation).forEach(([fieldName, validationMessage]) => {
-        const feedbackElement = container.querySelector(`div[feedback-for="${fieldName}"]`);
-        expect(feedbackElement.textContent).toContain(validationMessage);
-      });
-
-      const alertBanner = 'We couldn\'t create your account.Please check your responses and try again.';
-      const validationErrors = container.querySelector('#validation-errors');
-      expect(validationErrors.textContent).toContain(alertBanner);
-    });
-
-    it('should set errors with validations returned by registration api', () => {
-      const usernameError = 'It looks like this username is already taken';
-      const emailError = `This email is already associated with an existing or previous ${getSiteConfig().siteName} account`;
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationError: {
-            username: [{ userMessage: usernameError }],
-            email: [{ userMessage: emailError }],
-          },
-        },
-      });
-      const { container } = render(routerWrapper(reduxWrapper(<IntlProvider locale="en"><IntlRegistrationPage {...props} /></IntlProvider>)));
-      const usernameFeedback = container.querySelector('div[feedback-for="username"]');
-      const emailFeedback = container.querySelector('div[feedback-for="email"]');
-
-      expect(usernameFeedback.textContent).toContain(usernameError);
-      expect(emailFeedback.textContent).toContain(emailError);
-    });
-
-    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-
-      const submitButton = container.querySelector('button.btn-brand');
-      fireEvent.click(submitButton);
-
-      const passwordFeedback = container.querySelector('div[feedback-for="password"]');
-      expect(passwordFeedback.textContent).toContain(emptyFieldValidation.password);
-
-      const passwordField = container.querySelector('input#password');
-      fireEvent.focus(passwordField);
-
-      const isFeedbackPresent = container.contains(passwordFeedback);
-      expect(isFeedbackPresent).toBeFalsy();
-    });
-
-    it('should clear registration backend error on change', () => {
-      const emailError = 'This email is already associated with an existing or previous account';
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationError: {
-            email: [{ userMessage: emailError }],
-          },
-        },
-      });
-      store.dispatch = jest.fn(store.dispatch);
-
-      const { container } = render(routerWrapper(reduxWrapper(
-        <IntlRegistrationPage {...props} />,
-      )));
-
-      const emailInput = container.querySelector('input#email');
-      fireEvent.change(emailInput, { target: { value: 'test1@gmail.com', name: 'email' } });
-      expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('email'));
-    });
-
-    // ******** test form buttons and fields ********
-
-    it('should match default button state', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const button = container.querySelector('button[type="submit"] span');
-      expect(button.textContent).toEqual('Create an account for free');
-    });
-
-    it('should match pending button state', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          submitState: PENDING_STATE,
-        },
-      });
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-
-      const button = container.querySelector('button[type="submit"] span.sr-only');
-      expect(button.textContent).toEqual('pending');
-    });
-
-    it('should display opt-in/opt-out checkbox', () => {
-      mergeAppConfig(appId, {
-        MARKETING_EMAILS_OPT_IN: 'true',
-      });
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const checkboxDivs = container.querySelectorAll('div.form-field--checkbox');
-      expect(checkboxDivs.length).toEqual(1);
-
-      mergeAppConfig(appId, {
-        MARKETING_EMAILS_OPT_IN: '',
-      });
-    });
-
-    it('should show button label based on cta query params value', () => {
-      const buttonLabel = 'Register';
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl, search: `?cta=${buttonLabel}` };
-      const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />));
-      const button = container.querySelector('button[type="submit"] span');
-
-      const buttonText = button.textContent;
-
-      expect(buttonText).toEqual(buttonLabel);
-    });
-
-    it('should check user retention cookie', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationResult: {
-            success: true,
-          },
-        },
-      });
-
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(Cookies.prototype.set).toHaveBeenCalledWith(getAppConfig(appId).USER_RETENTION_COOKIE_NAME, true, { domain: 'local.openedx.io', path: '/' });
-    });
-
-    it('should redirect to url returned in registration result after successful account creation', () => {
-      const dashboardURL = 'https://test.com/testing-dashboard/';
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationResult: {
-            success: true,
-            redirectUrl: dashboardURL,
-          },
-        },
-      });
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl };
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(window.location.href).toBe(dashboardURL);
-    });
-
-    it('should redirect to dashboard if features flags are configured but no optional fields are configured', () => {
-      mergeAppConfig(appId, {
-        ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: true,
-      });
-      const dashboardUrl = 'https://test.com/testing-dashboard/';
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationResult: {
-            success: true,
-            redirectUrl: dashboardUrl,
-          },
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          optionalFields: {
-            fields: {},
-          },
-        },
-      });
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl };
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(window.location.href).toBe(dashboardUrl);
-    });
-
-    it('should redirect to progressive profiling page if optional fields are configured', () => {
-      getLocale.mockImplementation(() => ('en-us'));
-      mergeAppConfig(appId, {
-        ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: true,
-      });
-
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationResult: {
-            success: true,
-          },
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          optionalFields: {
-            extended_profile: [],
-            fields: {
-              level_of_education: { name: 'level_of_education', error_message: false },
-            },
-          },
-        },
-      });
-
-      render(reduxWrapper(
-        <Router>
-          <IntlRegistrationPage {...props} />
-        </Router>,
-      ));
-      expect(mockNavigate).toHaveBeenCalledWith(AUTHN_PROGRESSIVE_PROFILING);
-    });
-
-    // ******** miscellaneous tests ********
-
-    it('should backup the registration form state when shouldBackupState is true', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          shouldBackupState: true,
-        },
-      });
-
-      store.dispatch = jest.fn(store.dispatch);
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationFormBegin({ ...registrationFormData }));
-    });
-
-    it('should send page event when register page is rendered', () => {
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(analyticsService.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register', undefined);
-    });
-
-    it('should send track event when user has successfully registered', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationResult: {
-            success: true,
-            redirectUrl: 'https://test.com/testing-dashboard/',
-          },
-        },
-      });
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl };
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(analyticsService.sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', {});
-    });
-
-    it('should populate form with pipeline user details', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          backedUpFormData: { ...registrationFormData },
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            pipelineUserDetails: {
-              email: 'test@example.com',
-              username: 'test',
-            },
-          },
-        },
-      });
-      store.dispatch = jest.fn(store.dispatch);
-      const { container } = render(reduxWrapper(
-        <Router>
-          <IntlRegistrationPage {...props} />
-        </Router>,
-      ));
-
-      const emailInput = container.querySelector('input#email');
-      const usernameInput = container.querySelector('input#username');
-
-      expect(emailInput.value).toEqual('test@example.com');
-      expect(usernameInput.value).toEqual('test');
-      expect(store.dispatch).toHaveBeenCalledWith(setUserPipelineDataLoaded(true));
-    });
-
-    it('should display error message based on the error code returned by API', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationError: {
-            errorCode: INTERNAL_SERVER_ERROR,
-          },
-        },
-      });
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const validationErrors = container.querySelector('div#validation-errors');
-      expect(validationErrors.textContent).toContain(
-        'An error has occurred. Try refreshing the page, or check your internet connection.',
-      );
-    });
-
-    it('should update form fields state if updated in redux store', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationFormData: {
-            ...registrationFormData,
-            formFields: {
-              name: 'John Doe',
-              username: 'john_doe',
-              email: 'john.doe@yopmail.com',
-              password: 'password1',
-            },
-            emailSuggestion: {
-              suggestion: 'john.doe@hotmail.com', type: 'warning',
-            },
-          },
-        },
-      });
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-
-      const fullNameInput = container.querySelector('input#name');
-      const usernameInput = container.querySelector('input#username');
-      const emailInput = container.querySelector('input#email');
-      const passwordInput = container.querySelector('input#password');
-      const emailSuggestion = container.querySelector('.email-suggestion-alert-warning');
-
-      expect(fullNameInput.value).toEqual('John Doe');
-      expect(usernameInput.value).toEqual('john_doe');
-      expect(emailInput.value).toEqual('john.doe@yopmail.com');
-      expect(passwordInput.value).toEqual('password1');
-      expect(emailSuggestion.textContent).toEqual('john.doe@hotmail.com');
-    });
-
-    // ********* Embedded experience tests *********/
-
-    it('should call the postMessage API when embedded variant is rendered', () => {
-      getLocale.mockImplementation(() => ('en-us'));
-      mergeAppConfig(appId, {
-        ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: true,
-      });
-
-      window.parent.postMessage = jest.fn();
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl.concat(AUTHN_PROGRESSIVE_PROFILING), search: '?host=http://localhost/host-website' };
-
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationResult: {
-            success: true,
-          },
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          optionalFields: {
-            extended_profile: {},
-            fields: {
-              level_of_education: { name: 'level_of_education', error_message: false },
-            },
-          },
-        },
-      });
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(window.parent.postMessage).toHaveBeenCalledTimes(2);
-    });
-
-    it('should not display validations error on blur event when embedded variant is rendered', () => {
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl.concat(REGISTER_PAGE), search: '?host=http://localhost/host-website' };
-      const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />));
-
-      const usernameInput = container.querySelector('input#username');
-      fireEvent.blur(usernameInput, { target: { value: '', name: 'username' } });
-      expect(container.querySelector('div[feedback-for="username"]')).toBeFalsy();
-    });
-
-    it('should set errors in temporary state when validations are returned by registration api', () => {
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl.concat(REGISTER_PAGE), search: '?host=http://localhost/host-website' };
-
-      const usernameError = 'It looks like this username is already taken';
-      const emailError = 'This email is already associated with an existing or previous account';
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationError: {
-            username: [{ userMessage: usernameError }],
-            email: [{ userMessage: emailError }],
-          },
-        },
-      });
-      const { container } = render(routerWrapper(reduxWrapper(
-        <IntlRegistrationPage {...props} />
-      )));
-
-      const usernameFeedback = container.querySelector('div[feedback-for="username"]');
-      const emailFeedback = container.querySelector('div[feedback-for="email"]');
-
-      expect(usernameFeedback).toBeNull();
-      expect(emailFeedback).toBeNull();
-    });
-
-    it('should clear error on focus for embedded experience also', () => {
-      delete window.location;
-      window.location = {
-        href: getSiteConfig().baseUrl.concat(REGISTER_PAGE),
-        search: '?host=http://localhost/host-website',
-      };
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const submitButton = container.querySelector('button.btn-brand');
-      fireEvent.click(submitButton);
-
-      const passwordFeedback = container.querySelector('div[feedback-for="password"]');
-      expect(passwordFeedback.textContent).toContain(emptyFieldValidation.password);
-
-      const passwordField = container.querySelector('input#password');
-      fireEvent.focus(passwordField);
-
-      const updatedPasswordFeedback = container.querySelector('div[feedback-for="password"]');
-      expect(updatedPasswordFeedback).toBeNull();
-    });
-
-    it('should show spinner instead of form while registering if autoSubmitRegForm is true', () => {
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-      getLocale.mockImplementation(() => ('en-us'));
-
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          userPipelineDataLoaded: false,
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            pipelineUserDetails: {
-              name: 'John Doe',
-              username: 'john_doe',
-              email: 'john.doe@example.com',
-            },
-            autoSubmitRegForm: true,
-          },
-        },
-      });
-      store.dispatch = jest.fn(store.dispatch);
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const spinnerElement = container.querySelector('#tpa-spinner');
-      const registrationFormElement = container.querySelector('#registration-form');
-
-      expect(spinnerElement).toBeTruthy();
-      expect(registrationFormElement).toBeFalsy();
-    });
-
-    it('should auto register if autoSubmitRegForm is true and pipeline details are loaded', () => {
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-      getLocale.mockImplementation(() => ('en-us'));
-
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          userPipelineDataLoaded: true,
-          registrationFormData: {
-            ...registrationFormData,
-            formFields: {
-              name: 'John Doe',
-              username: 'john_doe',
-              email: 'john.doe@example.com',
-            },
-            configurableFormFields: {
-              marketingEmailsOptIn: true,
-            },
-          },
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            currentProvider: 'Apple',
-            pipelineUserDetails: {
-              name: 'John Doe',
-              username: 'john_doe',
-              email: 'john.doe@example.com',
-            },
-            autoSubmitRegForm: true,
-          },
-        },
-      });
-      store.dispatch = jest.fn(store.dispatch);
-
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
-        name: 'John Doe',
-        username: 'john_doe',
-        email: 'john.doe@example.com',
-        social_auth_provider: 'Apple',
-        total_registration_time: 0,
-      }));
-    });
-  });
-});