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

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

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

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

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

@@ -1,73 +0,0 @@
-/* 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

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

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

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