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

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

@@ -0,0 +1,322 @@
+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

@@ -0,0 +1,164 @@
+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

@@ -0,0 +1,204 @@
+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');
+    });
+  });
+});