@@ -139,7 +148,12 @@ const Logistration = (props) => {
)}
{selectedPage === LOGIN_PAGE
- ?
+ ? (
+
+ )
: (
{
Logistration.propTypes = {
selectedPage: PropTypes.string,
- backupLoginForm: PropTypes.func.isRequired,
- backupRegistrationForm: PropTypes.func.isRequired,
- clearThirdPartyAuthContextErrorMessage: PropTypes.func.isRequired,
- tpaProviders: PropTypes.shape({
- providers: PropTypes.arrayOf(PropTypes.shape({})),
- secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})),
- }),
-};
-
-Logistration.defaultProps = {
- tpaProviders: {
- providers: [],
- secondaryProviders: [],
- },
};
Logistration.defaultProps = {
selectedPage: REGISTER_PAGE,
};
-const mapStateToProps = state => ({
- tpaProviders: tpaProvidersSelector(state),
-});
-
-export default connect(
- mapStateToProps,
- {
- backupLoginForm,
- backupRegistrationForm,
- clearThirdPartyAuthContextErrorMessage,
- },
-)(Logistration);
+export default Logistration;
diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
index 87bf3e705e..80d5b44127 100644
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -3,16 +3,14 @@ import { Provider } from 'react-redux';
import { getConfig, mergeConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
import { fireEvent, render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import Logistration from './Logistration';
import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
-import {
- COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE,
-} from '../data/constants';
+import { COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
@@ -23,11 +21,20 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
jest.mock('@edx/frontend-platform/auth');
const mockStore = configureStore();
-const IntlLogistration = injectIntl(Logistration);
+let store = {};
+const getComponent = (props) => (
+
+
+
+
+
+
+
+);
+
+const renderComponent = (props = {}) => render(getComponent(props));
describe('Logistration', () => {
- let store = {};
-
const secondaryProviders = {
id: 'saml-test',
name: 'Test University',
@@ -35,14 +42,6 @@ describe('Logistration', () => {
registerUrl: '/dummy_auth',
};
- const reduxWrapper = children => (
-
-
- {children}
-
-
- );
-
const initialState = {
register: {
registrationFormData: {
@@ -50,16 +49,26 @@ describe('Logistration', () => {
marketingEmailsOptIn: true,
},
formFields: {
- name: '', email: '', username: '', password: '',
+ name: '',
+ email: '',
+ username: '',
+ password: '',
},
emailSuggestion: {
- suggestion: '', type: '',
+ suggestion: '',
+ type: '',
},
errors: {
- name: '', email: '', username: '', password: '',
+ name: '',
+ email: '',
+ username: '',
+ password: '',
},
},
- registrationResult: { success: false, redirectUrl: '' },
+ registrationResult: {
+ success: false,
+ redirectUrl: '',
+ },
registrationError: {},
usernameSuggestions: [],
validationApiRateLimited: false,
@@ -71,7 +80,18 @@ describe('Logistration', () => {
},
},
login: {
- loginResult: { success: false, redirectUrl: '' },
+ loginResult: {
+ success: false,
+ redirectUrl: '',
+ },
+ loginFormData: {
+ formFields: {
+ emailOrUsername: '', password: '',
+ },
+ errors: {
+ emailOrUsername: '', password: '',
+ },
+ },
},
};
@@ -90,16 +110,22 @@ describe('Logistration', () => {
ENVIRONMENT: 'production',
LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
},
- messages: { 'es-419': {}, de: {}, 'en-us': {} },
+ messages: {
+ 'es-419': {},
+ de: {},
+ 'en-us': {},
+ },
});
});
it('should do nothing when user clicks on the same tab (login/register) again', () => {
- const { container } = render(reduxWrapper());
+ const { container } = renderComponent();
// While staying on the registration form, clicking the register tab again
fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
- expect(sendTrackEvent).not.toHaveBeenCalledWith('edx.bi.register_form.toggled', { category: 'user-engagement' });
+ expect(sendTrackEvent)
+ .not
+ .toHaveBeenCalledWith('edx.bi.register_form.toggled', { category: 'user-engagement' });
});
it('should render registration page', () => {
@@ -107,16 +133,18 @@ describe('Logistration', () => {
ALLOW_PUBLIC_ACCOUNT_CREATION: true,
});
- const { container } = render(reduxWrapper());
+ const { container } = renderComponent();
- expect(container.querySelector('RegistrationPage')).toBeDefined();
+ expect(container.querySelector('RegistrationPage'))
+ .toBeDefined();
});
it('should render login page', () => {
const props = { selectedPage: LOGIN_PAGE };
- const { container } = render(reduxWrapper());
+ const { container } = renderComponent(props);
- expect(container.querySelector('LoginPage')).toBeDefined();
+ expect(container.querySelector('LoginPage'))
+ .toBeDefined();
});
it('should render login/register headings when show registration links is disabled', () => {
@@ -125,18 +153,20 @@ describe('Logistration', () => {
});
let props = { selectedPage: LOGIN_PAGE };
- const { rerender } = render(reduxWrapper());
+ const { rerender } = renderComponent(props);
// verifying sign in heading
- expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
+ expect(screen.getByRole('heading', { level: 3 }).textContent)
+ .toEqual('Sign in');
// register page is still accessible when SHOW_REGISTRATION_LINKS is false
// but it needs to be accessed directly
props = { selectedPage: REGISTER_PAGE };
- rerender(reduxWrapper());
+ rerender(getComponent(props));
// verifying register heading
- expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register');
+ expect(screen.getByRole('heading', { level: 3 }).textContent)
+ .toEqual('Register');
});
it('should render only login page when public account creation is disabled', () => {
@@ -160,14 +190,16 @@ describe('Logistration', () => {
});
const props = { selectedPage: LOGIN_PAGE };
- const { container } = render(reduxWrapper());
+ const { container } = renderComponent(props);
// verifying sign in heading for institution login false
- expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
+ expect(screen.getByRole('heading', { level: 3 }).textContent)
+ .toEqual('Sign in');
// verifying tabs heading for institution login true
fireEvent.click(screen.getByRole('link'));
- expect(container.querySelector('#controlled-tab')).toBeDefined();
+ expect(container.querySelector('#controlled-tab'))
+ .toBeDefined();
});
it('should display institution login option when secondary providers are present', () => {
@@ -190,12 +222,14 @@ describe('Logistration', () => {
});
const props = { selectedPage: LOGIN_PAGE };
- render(reduxWrapper());
- expect(screen.getByText('Institution/campus credentials')).toBeDefined();
+ renderComponent(props);
+ expect(screen.getByText('Institution/campus credentials'))
+ .toBeDefined();
// on clicking "Institution/campus credentials" button, it should display institution login page
fireEvent.click(screen.getByText('Institution/campus credentials'));
- expect(screen.getByText('Test University')).toBeDefined();
+ expect(screen.getByText('Test University'))
+ .toBeDefined();
mergeConfig({
DISABLE_ENTERPRISE_LOGIN: '',
@@ -221,11 +255,13 @@ describe('Logistration', () => {
});
const props = { selectedPage: LOGIN_PAGE };
- render(reduxWrapper());
+ renderComponent(props);
fireEvent.click(screen.getByText('Institution/campus credentials'));
- expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
- expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login');
+ expect(sendTrackEvent)
+ .toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
+ expect(sendPageEvent)
+ .toHaveBeenCalledWith('login_and_registration', 'institution_login');
mergeConfig({
DISABLE_ENTERPRISE_LOGIN: '',
@@ -251,11 +287,15 @@ describe('Logistration', () => {
});
delete window.location;
- window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL };
+ window.location = {
+ hostname: getConfig().SITE_NAME,
+ href: getConfig().BASE_URL,
+ };
- render(reduxWrapper());
+ renderComponent();
fireEvent.click(screen.getByText('Institution/campus credentials'));
- expect(screen.getByText('Test University')).toBeDefined();
+ expect(screen.getByText('Test University'))
+ .toBeDefined();
mergeConfig({
DISABLE_ENTERPRISE_LOGIN: '',
@@ -264,23 +304,26 @@ describe('Logistration', () => {
it('should fire action to backup registration form on tab click', () => {
store.dispatch = jest.fn(store.dispatch);
- const { container } = render(reduxWrapper());
+ const { container } = renderComponent();
fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
- expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
+ expect(store.dispatch)
+ .toHaveBeenCalledWith(backupRegistrationForm());
});
it('should fire action to backup login form on tab click', () => {
store.dispatch = jest.fn(store.dispatch);
const props = { selectedPage: LOGIN_PAGE };
- const { container } = render(reduxWrapper());
+ const { container } = renderComponent(props);
fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
- expect(store.dispatch).toHaveBeenCalledWith(backupLoginForm());
+ expect(store.dispatch)
+ .toHaveBeenCalledWith(backupLoginForm());
});
it('should clear tpa context errorMessage tab click', () => {
store.dispatch = jest.fn(store.dispatch);
- const { container } = render(reduxWrapper());
+ const { container } = renderComponent();
fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
- expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
+ expect(store.dispatch)
+ .toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
});
});
diff --git a/src/plugin-slots/LoginPage/index.jsx b/src/plugin-slots/LoginPage/index.jsx
new file mode 100644
index 0000000000..ac77c37455
--- /dev/null
+++ b/src/plugin-slots/LoginPage/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import PropTypes from 'prop-types';
+
+import LoginPage from '../../login/LoginPage';
+
+const LoginPageSlot = ({
+ institutionLogin,
+ handleInstitutionLogin,
+}) => (
+
+
+
+);
+
+LoginPageSlot.propTypes = {
+ institutionLogin: PropTypes.bool.isRequired,
+ handleInstitutionLogin: PropTypes.func.isRequired,
+};
+
+export default LoginPageSlot;
diff --git a/src/recommendations/data/tests/hooks.test.jsx b/src/recommendations/data/tests/hooks.test.jsx
index 9e5d6cf22a..43c989889d 100644
--- a/src/recommendations/data/tests/hooks.test.jsx
+++ b/src/recommendations/data/tests/hooks.test.jsx
@@ -1,10 +1,12 @@
-import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+
+import { render } from '@testing-library/react';
import algoliasearchHelper from 'algoliasearch-helper';
import mockedRecommendedProducts from './mockedData';
-import CreateAlgoliaSearchHelperMock from './test_utils/test_utils';
import isOneTrustFunctionalCookieEnabled from '../../../data/oneTrust';
import useAlgoliaRecommendations from '../hooks/useAlgoliaRecommendations';
+import CreateAlgoliaSearchHelperMock from './test_utils/test_utils';
jest.mock('algoliasearch-helper');
@@ -17,6 +19,23 @@ jest.mock('../../../data/algolia', () => ({
jest.mock('../algoliaResultsParser', () => jest.fn((course) => course));
+const renderHook = (hookCallback) => {
+ const result = {
+ current: null,
+ };
+
+ const Component = () => {
+ const val = hookCallback();
+ React.useEffect(() => {
+ result.current = val;
+ });
+ return null;
+ };
+
+ render();
+ return { result };
+};
+
describe('useAlgoliaRecommendations Tests', () => {
const MockSearchHelperWithData = new CreateAlgoliaSearchHelperMock(mockedRecommendedProducts);
const MockSearchHelperWithoutData = new CreateAlgoliaSearchHelperMock();
@@ -28,8 +47,10 @@ describe('useAlgoliaRecommendations Tests', () => {
() => useAlgoliaRecommendations('PK', 'Introductory'),
);
- expect(result.current.recommendations).toEqual(mockedRecommendedProducts);
- expect(result.current.isLoading).toBe(false);
+ expect(result.current.recommendations)
+ .toEqual(mockedRecommendedProducts);
+ expect(result.current.isLoading)
+ .toBe(false);
});
it('should not fetch recommendations if functional cookies are not set', async () => {
@@ -39,8 +60,10 @@ describe('useAlgoliaRecommendations Tests', () => {
() => useAlgoliaRecommendations('PK', 'Introductory'),
);
- expect(result.current.recommendations).toEqual([]);
- expect(result.current.isLoading).toBe(false);
+ expect(result.current.recommendations)
+ .toEqual([]);
+ expect(result.current.isLoading)
+ .toBe(false);
});
it('should return empty list if no recommendations returned from Algolia', async () => {
@@ -50,7 +73,9 @@ describe('useAlgoliaRecommendations Tests', () => {
() => useAlgoliaRecommendations('PK', 'Introductory'),
);
- expect(result.current.recommendations).toEqual([]);
- expect(result.current.isLoading).toBe(false);
+ expect(result.current.recommendations)
+ .toEqual([]);
+ expect(result.current.isLoading)
+ .toBe(false);
});
});