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

package/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx

@@ -1,322 +0,0 @@
-import { Provider } from 'react-redux';
-
-import {
-  CurrentAppProvider,
-  configureI18n,
-  getAuthenticatedUser,
-  getSiteConfig,
-  identifyAuthenticatedUser,
-  injectIntl,
-  IntlProvider,
-  mergeAppConfig,
-  sendTrackEvent
-} from '@openedx/frontend-base';
-import {
-  fireEvent, render, screen,
-} from '@testing-library/react';
-import { MemoryRouter, mockNavigate, useLocation } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-
-import { appId } from '../../constants';
-import {
-  AUTHN_PROGRESSIVE_PROFILING,
-  COMPLETE_STATE, DEFAULT_REDIRECT_URL,
-  EMBEDDED,
-  FAILURE_STATE,
-  PENDING_STATE,
-} from '../../data/constants';
-import { saveUserProfile } from '../data/actions';
-import ProgressiveProfiling from '../ProgressiveProfiling';
-
-const IntlProgressiveProfilingPage = injectIntl(ProgressiveProfiling);
-const mockStore = configureStore();
-
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  sendPageEvent: jest.fn(),
-  sendTrackEvent: jest.fn(),
-  identifyAuthenticatedUser: jest.fn(),
-  configureAuth: jest.fn(),
-  getAuthenticatedUser: jest.fn(),
-  getLoggingService: jest.fn(),
-}));
-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,
-    useLocation: jest.fn(),
-  };
-});
-
-describe('ProgressiveProfilingTests', () => {
-  let store = {};
-
-  const DASHBOARD_URL = getSiteConfig().lmsBaseUrl.concat(DEFAULT_REDIRECT_URL);
-  const registrationResult = { redirectUrl: getSiteConfig().lmsBaseUrl + DEFAULT_REDIRECT_URL, success: true };
-  const fields = {
-    company: { name: 'company', type: 'text', label: 'Company' },
-    gender: {
-      name: 'gender',
-      type: 'select',
-      label: 'Gender',
-      options: [['m', 'Male'], ['f', 'Female'], ['o', 'Other/Prefer Not to Say']],
-    },
-  };
-  const extendedProfile = ['company'];
-  const optionalFields = { fields, extended_profile: extendedProfile };
-  const initialState = {
-    welcomePage: {},
-    commonComponents: {
-      thirdPartyAuthApiStatus: null,
-      optionalFields: {},
-      thirdPartyAuthContext: {
-        welcomePageRedirectUrl: null,
-      },
-    },
-  };
-
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <MemoryRouter>
-        <CurrentAppProvider appId={appId}>
-          <Provider store={store}>{children}</Provider>
-        </CurrentAppProvider>
-      </MemoryRouter>
-    </IntlProvider>
-  );
-
-  beforeEach(() => {
-    store = mockStore(initialState);
-    configureI18n({
-      messages: { 'es-419': {}, de: {}, 'en-us': {} },
-    });
-    useLocation.mockReturnValue({
-      state: {
-        registrationResult,
-        optionalFields,
-      },
-    });
-    getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123', name: 'Test User' });
-  });
-
-  // ******** test form links and modal ********
-
-  it('should not display button "Learn more about how we use this information."', () => {
-    mergeAppConfig(appId, {
-      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '',
-    });
-    const { queryByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
-    const button = queryByRole('button', { name: /learn more about how we use this information/i });
-
-    expect(button).toBeNull();
-  });
-
-  it('should display button "Learn more about how we use this information."', () => {
-    mergeAppConfig(appId, {
-      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
-    });
-
-    const { getByText } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
-
-    const learnMoreButton = getByText('Learn more about how we use this information.');
-
-    expect(learnMoreButton).toBeDefined();
-  });
-
-  it('should open modal on pressing skip for now button', () => {
-    delete window.location;
-    window.location = { href: getSiteConfig().baseUrl.concat(AUTHN_PROGRESSIVE_PROFILING) };
-    const { getByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
-
-    const skipButton = getByRole('button', { name: /skip for now/i });
-    fireEvent.click(skipButton);
-
-    const modalContentContainer = document.getElementsByClassName('.pgn__modal-content-container');
-
-    expect(modalContentContainer).toBeTruthy();
-
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host: '' });
-  });
-
-  // ******** test event functionality ********
-
-  it('should make identify call to segment on progressive profiling page', () => {
-    render(reduxWrapper(<IntlProgressiveProfilingPage />));
-
-    expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
-    expect(identifyAuthenticatedUser).toHaveBeenCalled();
-  });
-
-  it('should send analytic event for support link click', () => {
-    mergeAppConfig(appId, {
-      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
-    });
-    render(reduxWrapper(<IntlProgressiveProfilingPage />));
-
-    const supportLink = screen.getByRole('link', { name: /learn more about how we use this information/i });
-    fireEvent.click(supportLink);
-
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked');
-  });
-
-  // ******** test form submission ********
-
-  it('should show error message when patch request fails', () => {
-    store = mockStore({
-      ...initialState,
-      welcomePage: {
-        ...initialState.welcomePage,
-        showError: true,
-      },
-    });
-
-    const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
-    const errorElement = container.querySelector('#pp-page-errors');
-
-    expect(errorElement).toBeTruthy();
-  });
-
-  // ******** miscellaneous tests ********
-
-  it('should redirect to login page if unauthenticated user tries to access welcome page', () => {
-    getAuthenticatedUser.mockReturnValue(null);
-    delete window.location;
-    window.location = {
-      assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
-      href: getSiteConfig().baseUrl,
-    };
-
-    render(reduxWrapper(<IntlProgressiveProfilingPage />));
-    expect(window.location.href).toEqual(DASHBOARD_URL);
-  });
-
-  describe('Embedded Form Workflow Test', () => {
-    mergeAppConfig(appId, {
-      SEARCH_CATALOG_URL: 'http://localhost/search',
-    });
-    const host = 'http://example.com';
-
-    beforeEach(() => {
-      useLocation.mockReturnValue({
-        state: {},
-      });
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-          optionalFields,
-        },
-      });
-    });
-
-    it('should set host property value embedded host for on ramp experience for skip link event', () => {
-      delete window.location;
-      window.location = {
-        href: getSiteConfig().baseUrl.concat(AUTHN_PROGRESSIVE_PROFILING),
-        search: `?host=${host}&variant=${EMBEDDED}`,
-      };
-      render(reduxWrapper(<IntlProgressiveProfilingPage />));
-
-      const skipLinkButton = screen.getByText('Skip for now');
-      fireEvent.click(skipLinkButton);
-
-      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host });
-    });
-
-    it('should show spinner while fetching the optional fields', () => {
-      delete window.location;
-      window.location = {
-        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
-        href: getSiteConfig().baseUrl.concat(AUTHN_PROGRESSIVE_PROFILING),
-        search: `?host=${host}&variant=${EMBEDDED}`,
-      };
-
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: PENDING_STATE,
-          optionalFields,
-        },
-      });
-
-      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
-
-      const tpaSpinnerElement = container.querySelector('#tpa-spinner');
-      expect(tpaSpinnerElement).toBeTruthy();
-    });
-
-    it('should render fields returned by backend API', () => {
-      delete window.location;
-      window.location = {
-        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
-        href: getSiteConfig().baseUrl,
-        search: `?variant=${EMBEDDED}&host=${host}`,
-      };
-
-      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
-
-      const genderField = container.querySelector('#gender');
-      expect(genderField).toBeTruthy();
-    });
-
-    it('should redirect to dashboard if API call to get form field fails', () => {
-      delete window.location;
-      window.location = {
-        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
-        href: getSiteConfig().baseUrl,
-        search: `?variant=${EMBEDDED}`,
-      };
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: FAILURE_STATE,
-        },
-      });
-
-      render(reduxWrapper(<IntlProgressiveProfilingPage />));
-      expect(window.location.href).toBe(DASHBOARD_URL);
-    });
-
-    it('should redirect to provided redirect url', () => {
-      const redirectUrl = 'https://redirect-test.com';
-      delete window.location;
-      window.location = {
-        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
-        href: getSiteConfig().baseUrl,
-        search: `?variant=${EMBEDDED}&host=${host}&next=${redirectUrl}`,
-      };
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-          optionalFields,
-          thirdPartyAuthContext: {
-            welcomePageRedirectUrl: redirectUrl,
-          },
-        },
-        welcomePage: {
-          ...initialState.welcomePage,
-          success: true,
-        },
-      });
-
-      render(reduxWrapper(<IntlProgressiveProfilingPage />));
-      const submitButton = screen.getByText('Submit');
-      fireEvent.click(submitButton);
-      expect(window.location.href).toBe(redirectUrl);
-    });
-  });
-});

package/src/register/RegistrationFields/CountryField/CountryField.jsx

@@ -1,164 +0,0 @@
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { useIntl } from '@openedx/frontend-base';
-import { FormAutosuggest, FormAutosuggestOption, FormControlFeedback } from '@openedx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { clearRegistrationBackendError } from '../../data/actions';
-import messages from '../../messages';
-import validateCountryField, { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
-
-/**
- * Country field wrapper. It accepts following handlers
- * - handleChange for setting value change and
- * - handleErrorChange for setting error
- *
- * It is responsible for
- * - Auto populating country field if backendCountryCode is available in redux
- * - Performing country field validations
- * - clearing error on focus
- * - setting value on change and selection
- */
-const CountryField = (props) => {
-  const {
-    countryList,
-    selectedCountry,
-    onChangeHandler,
-    handleErrorChange,
-    onFocusHandler,
-  } = props;
-  const { formatMessage } = useIntl();
-  const dispatch = useDispatch();
-
-  const countryFieldValue = {
-    userProvidedText: selectedCountry.displayValue,
-    selectionValue: selectedCountry.displayValue,
-    selectionId: selectedCountry.countryCode,
-  };
-
-  const backendCountryCode = useSelector(state => state.register.backendCountryCode);
-
-  useEffect(() => {
-    if (backendCountryCode && backendCountryCode !== selectedCountry?.countryCode) {
-      let countryCode = '';
-      let countryDisplayValue = '';
-
-      const countryVal = countryList.find(
-        (country) => (country[COUNTRY_CODE_KEY].toLowerCase() === backendCountryCode.toLowerCase()),
-      );
-      if (countryVal) {
-        countryCode = countryVal[COUNTRY_CODE_KEY];
-        countryDisplayValue = countryVal[COUNTRY_DISPLAY_KEY];
-      }
-      onChangeHandler(
-        { target: { name: 'country' } },
-        { countryCode, displayValue: countryDisplayValue },
-      );
-    } else if (!selectedCountry.displayValue) {
-      onChangeHandler(
-        { target: { name: 'country' } },
-        { countryCode: '', displayValue: '' },
-      );
-    }
-  }, [backendCountryCode, countryList]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleOnBlur = (event) => {
-    // Do not run validations when drop-down arrow is clicked
-    if (event.relatedTarget && event.relatedTarget.className.includes('pgn__form-autosuggest__icon-button')) {
-      return;
-    }
-
-    const { value } = event.target;
-
-    const { error } = validateCountryField(
-      value.trim(),
-      countryList,
-      formatMessage(messages['empty.country.field.error']),
-      formatMessage(messages['invalid.country.field.error'])
-    );
-    handleErrorChange('country', error);
-  };
-
-  const handleOnFocus = (event) => {
-    handleErrorChange('country', '');
-    dispatch(clearRegistrationBackendError('country'));
-    onFocusHandler(event);
-  };
-
-  const handleOnChange = (value) => {
-    onChangeHandler(
-      { target: { name: 'country' } },
-      { countryCode: value.selectionId, displayValue: value.userProvidedText }
-    );
-
-    // We have put this check because proviously we also had onSelected event handler and we call
-    // the onBlur on that event handler but now there is no such handler and we only have
-    // onChange so we check the is there is proper sectionId which only be
-    // proper one when we select it from dropdown's item otherwise its null.
-    if (value.selectionId !== '') {
-      handleOnBlur({ target: { name: 'country', value: value.userProvidedText } });
-    }
-  };
-
-  const getCountryList = () => countryList.map((country) => (
-    <FormAutosuggestOption key={country[COUNTRY_DISPLAY_KEY]} id={country[COUNTRY_CODE_KEY]}>
-      {country[COUNTRY_DISPLAY_KEY]}
-    </FormAutosuggestOption>
-  ));
-
-  return (
-    <div className="mb-4">
-      <FormAutosuggest
-        floatingLabel={formatMessage(messages['registration.country.label'])}
-        aria-label="form autosuggest"
-        name="country"
-        value={countryFieldValue || {}}
-        className={classNames({ 'form-field-error': props.errorMessage })}
-        onFocus={(e) => handleOnFocus(e)}
-        onBlur={(e) => handleOnBlur(e)}
-        onChange={(value) => handleOnChange(value)}
-      >
-        {getCountryList()}
-      </FormAutosuggest>
-      {props.errorMessage !== '' && (
-        <FormControlFeedback
-          key="error"
-          className="form-text-size"
-          hasIcon={false}
-          feedback-for="country"
-          type="invalid"
-        >
-          {props.errorMessage}
-        </FormControlFeedback>
-      )}
-    </div>
-  );
-};
-
-CountryField.propTypes = {
-  countryList: PropTypes.arrayOf(
-    PropTypes.shape({
-      code: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ).isRequired,
-  errorMessage: PropTypes.string,
-  onChangeHandler: PropTypes.func.isRequired,
-  handleErrorChange: PropTypes.func.isRequired,
-  onFocusHandler: PropTypes.func.isRequired,
-  selectedCountry: PropTypes.shape({
-    displayValue: PropTypes.string,
-    countryCode: PropTypes.string,
-  }),
-};
-
-CountryField.defaultProps = {
-  errorMessage: null,
-  selectedCountry: {
-    value: '',
-  },
-};
-
-export default CountryField;

package/src/register/RegistrationFields/CountryField/CountryField.test.jsx

@@ -1,204 +0,0 @@
-import { Provider } from 'react-redux';
-
-import { injectIntl, IntlProvider } 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 { CountryField } from '../index';
-import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
-
-const IntlCountryField = injectIntl(CountryField);
-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,
-  };
-});
-
-describe('CountryField', () => {
-  let props = {};
-  let store = {};
-
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <Provider store={store}>{children}</Provider>
-    </IntlProvider>
-  );
-
-  const routerWrapper = children => (
-    <Router>
-      {children}
-    </Router>
-  );
-
-  const initialState = {
-    register: {},
-  };
-
-  beforeEach(() => {
-    store = mockStore(initialState);
-    props = {
-      countryList: [{
-        [COUNTRY_CODE_KEY]: 'PK',
-        [COUNTRY_DISPLAY_KEY]: 'Pakistan',
-      }],
-      selectedCountry: {
-        countryCode: '',
-        displayValue: '',
-      },
-      errorMessage: '',
-      onChangeHandler: jest.fn(),
-      handleErrorChange: jest.fn(),
-      onFocusHandler: jest.fn(),
-    };
-    window.location = { search: '' };
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Test Country Field', () => {
-    const emptyFieldValidation = {
-      country: 'Select your country or region of residence',
-    };
-
-    it('should run country field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-      const countryInput = container.querySelector('input[name="country"]');
-
-      fireEvent.blur(countryInput, {
-        target: { value: '', name: 'country' },
-      });
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-      expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'country',
-        emptyFieldValidation.country,
-      );
-    });
-
-    it('should run country field validation when country name is invalid', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-      const countryInput = container.querySelector('input[name="country"]');
-
-      fireEvent.blur(countryInput, {
-        target: { value: 'Pak', name: 'country' },
-      });
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-      expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'country',
-        'Country must match with an option available in the dropdown.',
-      );
-    });
-
-    it('should not run country field validation when onBlur is fired by drop-down arrow icon click', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-      const countryInput = container.querySelector('input[name="country"]');
-      const dropdownArrowIcon = container.querySelector('.btn-icon.pgn__form-autosuggest__icon-button');
-
-      fireEvent.blur(countryInput, {
-        target: { value: '', name: 'country' },
-        relatedTarget: dropdownArrowIcon,
-      });
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(0);
-    });
-
-    it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-      const countryInput = container.querySelector('input[name="country"]');
-
-      fireEvent.blur(countryInput, { target: { value: '', name: 'country' } });
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-      expect(props.handleErrorChange).toHaveBeenCalledWith('country', emptyFieldValidation.country);
-    });
-
-    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-      const countryInput = container.querySelector('input[name="country"]');
-
-      fireEvent.focus(countryInput);
-
-      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-      expect(props.handleErrorChange).toHaveBeenCalledWith('country', '');
-    });
-
-    it('should update state from country code present in redux store', () => {
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          backendCountryCode: 'PK',
-        },
-      });
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-
-      container.querySelector('input[name="country"]');
-      expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
-      expect(props.onChangeHandler).toHaveBeenCalledWith(
-        { target: { name: 'country' } },
-        { countryCode: 'PK', displayValue: 'Pakistan' },
-      );
-    });
-
-    it('should set option on dropdown menu item click', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-
-      const dropdownButton = container.querySelector('.pgn__form-autosuggest__icon-button');
-      fireEvent.click(dropdownButton);
-
-      const dropdownItem = container.querySelector('.dropdown-item');
-      fireEvent.click(dropdownItem);
-
-      expect(props.onChangeHandler).toHaveBeenCalledTimes(2);
-      expect(props.onChangeHandler).toHaveBeenCalledWith(
-        { target: { name: 'country' } },
-        { countryCode: 'PK', displayValue: 'Pakistan' },
-      );
-    });
-
-    it('should set value on change', () => {
-      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlCountryField {...props} />)),
-      );
-
-      const countryInput = container.querySelector('input[name="country"]');
-      fireEvent.change(countryInput, { target: { value: 'pak', name: 'country' } });
-
-      expect(props.onChangeHandler).toHaveBeenCalledTimes(2);
-      expect(props.onChangeHandler).toHaveBeenCalledWith(
-        { target: { name: 'country' } },
-        { countryCode: '', displayValue: 'pak' },
-      );
-    });
-
-    it('should display error on invalid country input', () => {
-      props = {
-        ...props,
-        errorMessage: 'country error message',
-      };
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
-
-      const feedbackElement = container.querySelector('div[feedback-for="country"]');
-      expect(feedbackElement).toBeTruthy();
-      expect(feedbackElement.textContent).toEqual('country error message');
-    });
-  });
-});