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

package/src/common-components/tests/FormField.test.jsx

@@ -0,0 +1,289 @@
+import { Provider } from 'react-redux';
+
+import { injectIntl, IntlProvider } from '@openedx/frontend-base';
+import { fireEvent, render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+
+import { fetchRealtimeValidations } from '../../register/data/actions';
+import FormGroup from '../FormGroup';
+import PasswordField from '../PasswordField';
+
+describe('FormGroup', () => {
+  const props = {
+    floatingLabel: 'Email',
+    helpText: ['Email field help text'],
+    name: 'email',
+    value: '',
+    handleFocus: jest.fn(),
+  };
+
+  it('should show help text on field focus', () => {
+    const { queryByText, getByLabelText } = render(<FormGroup {...props} />);
+    const emailInput = getByLabelText('Email');
+
+    expect(queryByText('Email field help text')).toBeNull();
+
+    fireEvent.focus(emailInput);
+
+    const helpText = queryByText('Email field help text');
+
+    expect(helpText).toBeTruthy();
+    expect(helpText.textContent).toEqual('Email field help text');
+  });
+});
+
+describe('PasswordField', () => {
+  const mockStore = configureStore();
+  const IntlPasswordField = injectIntl(PasswordField);
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <MemoryRouter>
+        <Provider store={store}>{children}</Provider>
+      </MemoryRouter>
+    </IntlProvider>
+  );
+
+  const initialState = {
+    register: {
+      validationApiRateLimited: false,
+    },
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    props = {
+      floatingLabel: 'Password',
+      name: 'password',
+      value: 'password123',
+      handleFocus: jest.fn(),
+    };
+  });
+
+  it('should show/hide password on icon click', () => {
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
+
+    const showPasswordButton = getByLabelText('Show password');
+    fireEvent.click(showPasswordButton);
+    expect(passwordInput.type).toBe('text');
+
+    const hidePasswordButton = getByLabelText('Hide password');
+    fireEvent.click(hidePasswordButton);
+    expect(passwordInput.type).toBe('password');
+  });
+
+  it('should show password requirement tooltip on focus', async () => {
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
+    jest.useFakeTimers();
+    await act(async () => {
+      fireEvent.focus(passwordInput);
+      jest.runAllTimers();
+    });
+    const passwordRequirementTooltip = document.querySelector('#password-requirement-left');
+
+    expect(passwordRequirementTooltip).toBeTruthy();
+  });
+
+  it('should show all password requirement checks as failed', async () => {
+    props = {
+      ...props,
+      value: '',
+    };
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
+    jest.useFakeTimers();
+    await act(async () => {
+      fireEvent.focus(passwordInput);
+      jest.runAllTimers();
+    });
+
+    const letterCheckIcon = document.querySelector('#letter-check span');
+    const numberCheckIcon = document.querySelector('#number-check span');
+    const charactersCheckIcon = document.querySelector('#characters-check span');
+
+    expect(letterCheckIcon).toBeTruthy();
+    expect(letterCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+
+    expect(numberCheckIcon).toBeTruthy();
+    expect(numberCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+
+    expect(charactersCheckIcon).toBeTruthy();
+    expect(charactersCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+  });
+
+  it('should update password requirement checks', async () => {
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
+    jest.useFakeTimers();
+    await act(async () => {
+      fireEvent.focus(passwordInput);
+      jest.runAllTimers();
+    });
+
+    const letterCheckIcon = document.querySelector('#letter-check span');
+    const numberCheckIcon = document.querySelector('#number-check span');
+    const charactersCheckIcon = document.querySelector('#characters-check span');
+
+    expect(letterCheckIcon).toBeTruthy();
+    expect(letterCheckIcon.className).toContain('pgn__icon text-success mr-1');
+
+    expect(numberCheckIcon).toBeTruthy();
+    expect(numberCheckIcon.className).toContain('pgn__icon text-success mr-1');
+
+    expect(charactersCheckIcon).toBeTruthy();
+    expect(charactersCheckIcon.className).toContain('pgn__icon text-success mr-1');
+  });
+
+  it('should not run validations when blur is fired on password icon click', () => {
+    const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.blur(passwordInput, {
+      target: {
+        name: 'password',
+        value: 'invalid',
+      },
+      relatedTarget: passwordIcon,
+    });
+
+    expect(container.querySelector('div[feedback-for="password"]')).toBeNull();
+  });
+
+  it('should call props handle blur if available', () => {
+    props = {
+      ...props,
+      handleBlur: jest.fn(),
+    };
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
+
+    fireEvent.blur(passwordInput, {
+      target: {
+        name: 'password',
+        value: '',
+      },
+    });
+
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('should run validations on blur event when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
+
+    fireEvent.blur(passwordInput, {
+      target: {
+        name: 'password',
+        value: '',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+    expect(props.handleErrorChange).toHaveBeenCalledWith(
+      'password',
+      'Password criteria has not been met',
+    );
+  });
+
+  it('should not clear error when focus is fired on password icon click when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.focus(passwordIcon, {
+      target: {
+        name: 'passwordIcon',
+        value: '',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('should clear error when focus is fired on password icon click when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.focus(passwordIcon, {
+      target: {
+        name: 'password',
+        value: 'invalid',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+    expect(props.handleErrorChange).toHaveBeenCalledWith(
+      'password',
+      '',
+    );
+  });
+
+  it('should run backend validations when frontend validations pass on blur when rendered from register page', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordField = getByLabelText('Password');
+    fireEvent.blur(passwordField, {
+      target: {
+        name: 'password',
+        value: 'password123',
+      },
+    });
+
+    expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ password: 'password123' }));
+  });
+
+  it('should use password value from prop when password icon is focused out (blur due to icon)', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      ...props,
+      value: 'testPassword',
+      handleErrorChange: jest.fn(),
+      handleBlur: jest.fn(),
+    };
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.blur(passwordIcon, {
+      target: {
+        name: 'passwordIcon',
+        value: undefined,
+      },
+    });
+
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      target: {
+        name: 'password',
+        value: 'testPassword',
+      },
+    });
+  });
+});

package/src/common-components/tests/SocialAuthProviders.test.jsx

@@ -0,0 +1,75 @@
+import { IntlProvider } from '@openedx/frontend-base';
+import renderer from 'react-test-renderer';
+
+import registerIcons from '../RegisterFaIcons';
+import SocialAuthProviders from '../SocialAuthProviders';
+
+registerIcons();
+
+describe('SocialAuthProviders', () => {
+  let props = {};
+
+  const appleProvider = {
+    id: 'oa2-apple-id',
+    name: 'Apple',
+    iconClass: null,
+    iconImage: 'https://edx.devstack.lms/logo.png',
+    loginUrl: '/auth/login/apple-id/?auth_entry=login&next=/dashboard',
+  };
+
+  const facebookProvider = {
+    id: 'oa2-facebook',
+    name: 'Facebook',
+    iconClass: null,
+    iconImage: 'https://edx.devstack.lms/facebook-logo.png',
+    loginUrl: '/auth/login/facebook/?auth_entry=login&next=/dashboard',
+  };
+
+  it('should match social auth provider with iconImage snapshot', () => {
+    props = { socialAuthProviders: [appleProvider, facebookProvider] };
+
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <SocialAuthProviders {...props} />
+      </IntlProvider>,
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should match social auth provider with iconClass snapshot', () => {
+    props = {
+      socialAuthProviders: [{
+        ...appleProvider,
+        iconClass: 'google',
+        iconImage: null,
+      }],
+    };
+
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <SocialAuthProviders {...props} />
+      </IntlProvider>,
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should match social auth provider with default icon snapshot', () => {
+    props = {
+      socialAuthProviders: [{
+        ...appleProvider,
+        iconClass: 'default',
+        iconImage: null,
+      }],
+    };
+
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <SocialAuthProviders {...props} />
+      </IntlProvider>,
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/common-components/tests/ThirdPartyAuthAlert.test.jsx

@@ -0,0 +1,39 @@
+import { IntlProvider } from '@openedx/frontend-base';
+import renderer from 'react-test-renderer';
+
+import { REGISTER_PAGE } from '../../data/constants';
+import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';
+
+describe('ThirdPartyAuthAlert', () => {
+  let props = {};
+
+  beforeEach(() => {
+    props = {
+      currentProvider: 'Google',
+      platformName: 'edX',
+    };
+  });
+
+  it('should match login page third party auth alert message snapshot', () => {
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <ThirdPartyAuthAlert {...props} />
+      </IntlProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should match register page third party auth alert message snapshot', () => {
+    props = {
+      ...props,
+      referrer: REGISTER_PAGE,
+    };
+
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <ThirdPartyAuthAlert {...props} />
+      </IntlProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -0,0 +1,73 @@
+/* eslint-disable import/no-import-module-exports */
+/* eslint-disable react/function-component-definition */
+
+import { fetchAuthenticatedUser, getAuthenticatedUser } from '@openedx/frontend-base';
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
+import { UnAuthOnlyRoute } from '..';
+import { REGISTER_PAGE } from '../../data/constants';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  getAuthenticatedUser: jest.fn(),
+  fetchAuthenticatedUser: jest.fn(),
+}));
+
+const RRD = require('react-router-dom');
+// Just render plain div with its children
+// eslint-disable-next-line react/prop-types
+RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
+module.exports = RRD;
+
+const TestApp = () => (
+  <Router>
+    <div>
+      <Routes>
+        <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
+      </Routes>
+    </div>
+  </Router>
+);
+
+describe('UnAuthOnlyRoute', () => {
+  const routerWrapper = () => (
+    <MemoryRouter initialEntries={[REGISTER_PAGE]}>
+      <TestApp />
+    </MemoryRouter>
+  );
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should have called with forceRefresh true', async () => {
+    const user = {
+      username: 'gonzo',
+      other: 'data',
+    };
+
+    getAuthenticatedUser.mockReturnValue(user);
+    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(user));
+
+    await act(async () => {
+      await render(routerWrapper());
+    });
+
+    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
+  });
+
+  it('should have called with forceRefresh false', async () => {
+    getAuthenticatedUser.mockReturnValue(null);
+    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(null));
+
+    await act(async () => {
+      await render(routerWrapper());
+    });
+
+    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
+  });
+});

package/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SocialAuthProviders should match social auth provider with default icon snapshot 1`] = `
+<button
+  className="btn-social btn-oa2-apple-id mr-3"
+  data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
+  id="oa2-apple-id"
+  onClick={[Function]}
+  type="button"
+>
+  <div
+    aria-hidden="true"
+    className="btn-tpa__font-container"
+  >
+    <span
+      className="pgn__icon h-75"
+    >
+      <svg
+        aria-hidden={true}
+        fill="none"
+        focusable={false}
+        height={24}
+        role="img"
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 7 9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h10V3H12v2h8v14z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <span
+    aria-hidden="true"
+    className="notranslate mr-auto pl-2"
+    id="provider-name"
+  >
+    Apple
+  </span>
+  <span
+    className="sr-only"
+  >
+    Sign in with Apple
+  </span>
+</button>
+`;
+
+exports[`SocialAuthProviders should match social auth provider with iconClass snapshot 1`] = `
+<button
+  className="btn-social btn-oa2-apple-id mr-3"
+  data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
+  id="oa2-apple-id"
+  onClick={[Function]}
+  type="button"
+>
+  <div
+    aria-hidden="true"
+    className="btn-tpa__font-container"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-google "
+      data-icon="google"
+      data-prefix="fab"
+      focusable="false"
+      role="img"
+      style={{}}
+      viewBox="0 0 488 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+        fill="currentColor"
+        style={{}}
+      />
+    </svg>
+  </div>
+  <span
+    aria-hidden="true"
+    className="notranslate mr-auto pl-2"
+    id="provider-name"
+  >
+    Apple
+  </span>
+  <span
+    className="sr-only"
+  >
+    Sign in with Apple
+  </span>
+</button>
+`;
+
+exports[`SocialAuthProviders should match social auth provider with iconImage snapshot 1`] = `
+[
+  <button
+    className="btn-social btn-oa2-apple-id mr-3"
+    data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
+    id="oa2-apple-id"
+    onClick={[Function]}
+    type="button"
+  >
+    <div
+      aria-hidden="true"
+    >
+      <img
+        alt="icon Apple"
+        className="btn-tpa__image-icon"
+        src="https://edx.devstack.lms/logo.png"
+      />
+    </div>
+    <span
+      aria-hidden="true"
+      className="notranslate mr-auto pl-2"
+      id="provider-name"
+    >
+      Apple
+    </span>
+    <span
+      className="sr-only"
+    >
+      Sign in with Apple
+    </span>
+  </button>,
+  <button
+    className="btn-social btn-oa2-facebook "
+    data-provider-url="/auth/login/facebook/?auth_entry=login&next=/dashboard"
+    id="oa2-facebook"
+    onClick={[Function]}
+    type="button"
+  >
+    <div
+      aria-hidden="true"
+    >
+      <img
+        alt="icon Facebook"
+        className="btn-tpa__image-icon"
+        src="https://edx.devstack.lms/facebook-logo.png"
+      />
+    </div>
+    <span
+      aria-hidden="true"
+      className="notranslate mr-auto pl-2"
+      id="provider-name"
+    >
+      Facebook
+    </span>
+    <span
+      className="sr-only"
+    >
+      Sign in with Facebook
+    </span>
+  </button>,
+]
+`;

package/src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThirdPartyAuthAlert should match login page third party auth alert message snapshot 1`] = `
+<div
+  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
+  id="tpa-alert"
+  role="alert"
+>
+  <div
+    className="pgn__alert-message-wrapper"
+  >
+    <div
+      className="alert-message-content"
+    >
+      <p>
+        You have successfully signed into Google, but your Google account does not have a linked Test Site account. To link your accounts, sign in now using your Test Site password.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ThirdPartyAuthAlert should match register page third party auth alert message snapshot 1`] = `
+[
+  <div
+    className="fade alert-content alert-success mt-n2 mb-5 alert show"
+    id="tpa-alert"
+    role="alert"
+  >
+    <div
+      className="pgn__alert-message-wrapper"
+    >
+      <div
+        className="alert-message-content"
+      >
+        <div
+          className="alert-heading h4"
+        >
+          Almost done!
+        </div>
+        <p>
+          You've successfully signed into Google! We just need a little more information before you start learning with Test Site.
+        </p>
+      </div>
+    </div>
+  </div>,
+  <h4
+    className="mt-4 mb-4"
+  >
+    Finish creating your account
+  </h4>,
+]
+`;

package/src/constants.ts

@@ -0,0 +1 @@
+export const appId = 'org.openedx.frontend.app.authn';