Andal.LND/frontend-app-authn
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Replace of injectIntl with useIntl (#1540)

Browse Source
This commit is contained in:
Diana Villalvazo
2025-08-12 09:00:33 -06:00
committed by GitHub
parent 5bd6926f2f
commit 76e400f0ad
6 changed files with 75 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/recommendations/tests/RecommendationsList.test.jsx
View File

@@ -1,14 +1,12 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import configureStore from 'redux-mock-store'; import configureStore from 'redux-mock-store';
import mockedProductData from './mockedData'; import mockedProductData from './mockedData';
import RecommendationList from '../RecommendationsList'; import RecommendationList from '../RecommendationsList';
const IntlRecommendationList = injectIntl(RecommendationList);
const mockStore = configureStore(); const mockStore = configureStore();
describe('RecommendationsListTests', () => { describe('RecommendationsListTests', () => {
@@ -25,7 +23,7 @@ describe('RecommendationsListTests', () => {
userId: 1234567, userId: 1234567,
}; };
const { container } = render(reduxWrapper(<IntlRecommendationList {...props} />)); const { container } = render(reduxWrapper(<RecommendationList {...props} />));
const recommendationCards = container.querySelectorAll('.recommendation-card'); const recommendationCards = container.querySelectorAll('.recommendation-card');
expect(recommendationCards.length).toEqual(mockedProductData.length); expect(recommendationCards.length).toEqual(mockedProductData.length);
@@ -37,7 +35,7 @@ describe('RecommendationsListTests', () => {
userId: 1234567, userId: 1234567,
}; };
const { getByText } = render(reduxWrapper(<IntlRecommendationList {...props} />)); const { getByText } = render(reduxWrapper(<RecommendationList {...props} />));
const firstFooterContent = getByText('1 Course'); const firstFooterContent = getByText('1 Course');
const secondFooterContent = getByText('2 Courses'); const secondFooterContent = getByText('2 Courses');

20
src/recommendations/tests/RecommendationsPage.test.jsx
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { getConfig } from '@edx/frontend-platform'; import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { useMediaQuery } from '@openedx/paragon'; import { useMediaQuery } from '@openedx/paragon';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
@@ -16,7 +15,6 @@ import mockedRecommendedProducts from '../data/tests/mockedData';
import RecommendationsPage from '../RecommendationsPage'; import RecommendationsPage from '../RecommendationsPage';
import { eventNames, getProductMapping } from '../track'; import { eventNames, getProductMapping } from '../track';
const IntlRecommendationsPage = injectIntl(RecommendationsPage);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('@edx/frontend-platform/analytics', () => ({ jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -77,7 +75,7 @@ describe('RecommendationsPageTests', () => {
}); });
it('should redirect to dashboard if user is not coming from registration workflow', () => { it('should redirect to dashboard if user is not coming from registration workflow', () => {
render(reduxWrapper(<IntlRecommendationsPage />)); render(reduxWrapper(<RecommendationsPage />));
expect(window.location.href).toEqual(dashboardUrl); expect(window.location.href).toEqual(dashboardUrl);
}); });
@@ -86,14 +84,14 @@ describe('RecommendationsPageTests', () => {
recommendations: [], recommendations: [],
isLoading: false, isLoading: false,
}); });
render(reduxWrapper(<IntlRecommendationsPage />)); render(reduxWrapper(<RecommendationsPage />));
expect(window.location.href).toEqual(dashboardUrl); expect(window.location.href).toEqual(dashboardUrl);
}); });
it('should redirect user if they click "Skip for now" button', () => { it('should redirect user if they click "Skip for now" button', () => {
mockUseLocation(); mockUseLocation();
jest.useFakeTimers(); jest.useFakeTimers();
const { container } = render(reduxWrapper(<IntlRecommendationsPage />)); const { container } = render(reduxWrapper(<RecommendationsPage />));
const skipButton = container.querySelector('.pgn__stateful-btn-state-default'); const skipButton = container.querySelector('.pgn__stateful-btn-state-default');
fireEvent.click(skipButton); fireEvent.click(skipButton);
jest.advanceTimersByTime(300); jest.advanceTimersByTime(300);
@@ -103,7 +101,7 @@ describe('RecommendationsPageTests', () => {
it('should display recommendations small layout for small screen', () => { it('should display recommendations small layout for small screen', () => {
mockUseLocation(); mockUseLocation();
useMediaQuery.mockReturnValue(true); useMediaQuery.mockReturnValue(true);
const { container } = render(reduxWrapper(<IntlRecommendationsPage />)); const { container } = render(reduxWrapper(<RecommendationsPage />));
const recommendationsSmallLayout = container.querySelector('#recommendations-small-layout'); const recommendationsSmallLayout = container.querySelector('#recommendations-small-layout');
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton'); const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -115,7 +113,7 @@ describe('RecommendationsPageTests', () => {
it('should display recommendations large layout for large screen', () => { it('should display recommendations large layout for large screen', () => {
mockUseLocation(); mockUseLocation();
useMediaQuery.mockReturnValue(false); useMediaQuery.mockReturnValue(false);
const { container } = render(reduxWrapper(<IntlRecommendationsPage />)); const { container } = render(reduxWrapper(<RecommendationsPage />));
const pgnCollapsible = container.querySelector('.pgn_collapsible'); const pgnCollapsible = container.querySelector('.pgn_collapsible');
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton'); const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -131,7 +129,7 @@ describe('RecommendationsPageTests', () => {
recommendations: [], recommendations: [],
isLoading: true, isLoading: true,
}); });
const { container } = render(reduxWrapper(<IntlRecommendationsPage />)); const { container } = render(reduxWrapper(<RecommendationsPage />));
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton'); const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -145,7 +143,7 @@ describe('RecommendationsPageTests', () => {
recommendations: [], recommendations: [],
isLoading: true, isLoading: true,
}); });
const { container } = render(reduxWrapper(<IntlRecommendationsPage />)); const { container } = render(reduxWrapper(<RecommendationsPage />));
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton'); const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -160,7 +158,7 @@ describe('RecommendationsPageTests', () => {
}); });
useMediaQuery.mockReturnValue(false); useMediaQuery.mockReturnValue(false);
render(reduxWrapper(<IntlRecommendationsPage />)); render(reduxWrapper(<RecommendationsPage />));
expect(sendTrackEvent).toBeCalled(); expect(sendTrackEvent).toBeCalled();
expect(sendTrackEvent).toHaveBeenCalledWith( expect(sendTrackEvent).toHaveBeenCalledWith(

68
src/register/RegistrationPage.test.jsx
View File

@@ -1,10 +1,9 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { getConfig, mergeConfig } from '@edx/frontend-platform'; import { getConfig, mergeConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
import { import {
configure, getLocale, injectIntl, IntlProvider, configure, getLocale, IntlProvider,
} from '@edx/frontend-platform/i18n'; } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { mockNavigate, BrowserRouter as Router } from 'react-router-dom'; import { mockNavigate, BrowserRouter as Router } from 'react-router-dom';
@@ -31,7 +30,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
getLocale: jest.fn(), getLocale: jest.fn(),
})); }));
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -188,7 +186,7 @@ describe('RegistrationPage', () => {
}; };
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, payload); populateRequiredFields(getByLabelText, payload);
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
fireEvent.click(button); fireEvent.click(button);
@@ -220,7 +218,7 @@ describe('RegistrationPage', () => {
}, },
}); });
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, formPayload, true); populateRequiredFields(getByLabelText, formPayload, true);
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
@@ -243,7 +241,7 @@ describe('RegistrationPage', () => {
}; };
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, formPayload, true); populateRequiredFields(getByLabelText, formPayload, true);
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
@@ -268,7 +266,7 @@ describe('RegistrationPage', () => {
}; };
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, formPayload, true); populateRequiredFields(getByLabelText, formPayload, true);
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
fireEvent.click(button); fireEvent.click(button);
@@ -295,7 +293,7 @@ describe('RegistrationPage', () => {
}; };
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, payload); populateRequiredFields(getByLabelText, payload);
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
fireEvent.click(button); fireEvent.click(button);
@@ -321,7 +319,7 @@ describe('RegistrationPage', () => {
}; };
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, payload, false, true); populateRequiredFields(getByLabelText, payload, false, true);
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
fireEvent.click(button); fireEvent.click(button);
@@ -336,7 +334,7 @@ describe('RegistrationPage', () => {
ENABLE_AUTO_GENERATED_USERNAME: true, ENABLE_AUTO_GENERATED_USERNAME: true,
}); });
const { queryByLabelText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { queryByLabelText } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(queryByLabelText('Username')).toBeNull(); expect(queryByLabelText('Username')).toBeNull();
mergeConfig({ mergeConfig({
@@ -347,7 +345,7 @@ describe('RegistrationPage', () => {
it('should not dispatch registerNewUser on empty form Submission', () => { it('should not dispatch registerNewUser on empty form Submission', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
fireEvent.click(button); fireEvent.click(button);
@@ -358,7 +356,7 @@ describe('RegistrationPage', () => {
// ******** test registration form validations ******** // ******** test registration form validations ********
it('should show error messages for required fields on empty form submission', () => { it('should show error messages for required fields on empty form submission', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const button = container.querySelector('button.btn-brand'); const button = container.querySelector('button.btn-brand');
fireEvent.click(button); fireEvent.click(button);
@@ -386,7 +384,7 @@ describe('RegistrationPage', () => {
}, },
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlProvider locale="en"><IntlRegistrationPage {...props} /></IntlProvider>))); const { container } = render(routerWrapper(reduxWrapper(<IntlProvider locale="en"><RegistrationPage {...props} /></IntlProvider>)));
const usernameFeedback = container.querySelector('div[feedback-for="username"]'); const usernameFeedback = container.querySelector('div[feedback-for="username"]');
const emailFeedback = container.querySelector('div[feedback-for="email"]'); const emailFeedback = container.querySelector('div[feedback-for="email"]');
@@ -395,7 +393,7 @@ describe('RegistrationPage', () => {
}); });
it('should clear error on focus', () => { it('should clear error on focus', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const submitButton = container.querySelector('button.btn-brand'); const submitButton = container.querySelector('button.btn-brand');
fireEvent.click(submitButton); fireEvent.click(submitButton);
@@ -424,7 +422,7 @@ describe('RegistrationPage', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper( const { container } = render(routerWrapper(reduxWrapper(
<IntlRegistrationPage {...props} />, <RegistrationPage {...props} />,
))); )));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
@@ -435,7 +433,7 @@ describe('RegistrationPage', () => {
// ******** test form buttons and fields ******** // ******** test form buttons and fields ********
it('should match default button state', () => { it('should match default button state', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const button = container.querySelector('button[type="submit"] span'); const button = container.querySelector('button[type="submit"] span');
expect(button.textContent).toEqual('Create an account for free'); expect(button.textContent).toEqual('Create an account for free');
}); });
@@ -449,7 +447,7 @@ describe('RegistrationPage', () => {
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const button = container.querySelector('button[type="submit"] span.sr-only'); const button = container.querySelector('button[type="submit"] span.sr-only');
expect(button.textContent).toEqual('pending'); expect(button.textContent).toEqual('pending');
@@ -460,7 +458,7 @@ describe('RegistrationPage', () => {
MARKETING_EMAILS_OPT_IN: 'true', MARKETING_EMAILS_OPT_IN: 'true',
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const checkboxDivs = container.querySelectorAll('div.form-field--checkbox'); const checkboxDivs = container.querySelectorAll('div.form-field--checkbox');
expect(checkboxDivs.length).toEqual(1); expect(checkboxDivs.length).toEqual(1);
@@ -473,7 +471,7 @@ describe('RegistrationPage', () => {
const buttonLabel = 'Register'; const buttonLabel = 'Register';
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL, search: `?cta=${buttonLabel}` }; window.location = { href: getConfig().BASE_URL, search: `?cta=${buttonLabel}` };
const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />)); const { container } = render(reduxWrapper(<RegistrationPage {...props} />));
const button = container.querySelector('button[type="submit"] span'); const button = container.querySelector('button[type="submit"] span');
const buttonText = button.textContent; const buttonText = button.textContent;
@@ -492,7 +490,7 @@ describe('RegistrationPage', () => {
}, },
}); });
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(document.cookie).toMatch(`${getConfig().USER_RETENTION_COOKIE_NAME}=true`); expect(document.cookie).toMatch(`${getConfig().USER_RETENTION_COOKIE_NAME}=true`);
}); });
@@ -510,7 +508,7 @@ describe('RegistrationPage', () => {
}); });
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL }; window.location = { href: getConfig().BASE_URL };
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(window.location.href).toBe(dashboardURL); expect(window.location.href).toBe(dashboardURL);
}); });
@@ -537,7 +535,7 @@ describe('RegistrationPage', () => {
}); });
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL }; window.location = { href: getConfig().BASE_URL };
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(window.location.href).toBe(dashboardUrl); expect(window.location.href).toBe(dashboardUrl);
}); });
@@ -568,7 +566,7 @@ describe('RegistrationPage', () => {
render(reduxWrapper( render(reduxWrapper(
<Router> <Router>
<IntlRegistrationPage {...props} /> <RegistrationPage {...props} />
</Router>, </Router>,
)); ));
expect(mockNavigate).toHaveBeenCalledWith(AUTHN_PROGRESSIVE_PROFILING); expect(mockNavigate).toHaveBeenCalledWith(AUTHN_PROGRESSIVE_PROFILING);
@@ -586,12 +584,12 @@ describe('RegistrationPage', () => {
}); });
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationFormBegin({ ...registrationFormData })); expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationFormBegin({ ...registrationFormData }));
}); });
it('should send page event when register page is rendered', () => { it('should send page event when register page is rendered', () => {
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register'); expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register');
}); });
@@ -609,7 +607,7 @@ describe('RegistrationPage', () => {
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL }; window.location = { href: getConfig().BASE_URL };
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', {}); expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', {});
}); });
@@ -635,7 +633,7 @@ describe('RegistrationPage', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(reduxWrapper( const { container } = render(reduxWrapper(
<Router> <Router>
<IntlRegistrationPage {...props} /> <RegistrationPage {...props} />
</Router>, </Router>,
)); ));
@@ -658,7 +656,7 @@ describe('RegistrationPage', () => {
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const validationErrors = container.querySelector('div#validation-errors'); const validationErrors = container.querySelector('div#validation-errors');
expect(validationErrors.textContent).toContain( expect(validationErrors.textContent).toContain(
'An error has occurred. Try refreshing the page, or check your internet connection.', 'An error has occurred. Try refreshing the page, or check your internet connection.',
@@ -685,7 +683,7 @@ describe('RegistrationPage', () => {
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const fullNameInput = container.querySelector('input#name'); const fullNameInput = container.querySelector('input#name');
const usernameInput = container.querySelector('input#username'); const usernameInput = container.querySelector('input#username');
@@ -731,14 +729,14 @@ describe('RegistrationPage', () => {
}, },
}, },
}); });
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(window.parent.postMessage).toHaveBeenCalledTimes(2); expect(window.parent.postMessage).toHaveBeenCalledTimes(2);
}); });
it('should not display validations error on blur event when embedded variant is rendered', () => { it('should not display validations error on blur event when embedded variant is rendered', () => {
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: '?host=http://localhost/host-website' }; window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: '?host=http://localhost/host-website' };
const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />)); const { container } = render(reduxWrapper(<RegistrationPage {...props} />));
const usernameInput = container.querySelector('input#username'); const usernameInput = container.querySelector('input#username');
fireEvent.blur(usernameInput, { target: { value: '', name: 'username' } }); fireEvent.blur(usernameInput, { target: { value: '', name: 'username' } });
@@ -766,7 +764,7 @@ describe('RegistrationPage', () => {
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper( const { container } = render(routerWrapper(reduxWrapper(
<IntlRegistrationPage {...props} />), <RegistrationPage {...props} />),
)); ));
const usernameFeedback = container.querySelector('div[feedback-for="username"]'); const usernameFeedback = container.querySelector('div[feedback-for="username"]');
@@ -783,7 +781,7 @@ describe('RegistrationPage', () => {
search: '?host=http://localhost/host-website', search: '?host=http://localhost/host-website',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const submitButton = container.querySelector('button.btn-brand'); const submitButton = container.querySelector('button.btn-brand');
fireEvent.click(submitButton); fireEvent.click(submitButton);
@@ -824,7 +822,7 @@ describe('RegistrationPage', () => {
}); });
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const spinnerElement = container.querySelector('#tpa-spinner'); const spinnerElement = container.querySelector('#tpa-spinner');
const registrationFormElement = container.querySelector('#registration-form'); const registrationFormElement = container.querySelector('#registration-form');
@@ -875,7 +873,7 @@ describe('RegistrationPage', () => {
}); });
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
name: 'John Doe', name: 'John Doe',
username: 'john_doe', username: 'john_doe',

23
src/register/components/tests/ConfigurableRegistrationForm.test.jsx
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { mergeConfig } from '@edx/frontend-platform'; import { mergeConfig } from '@edx/frontend-platform';
import { import {
getLocale, injectIntl, IntlProvider, getLocale, IntlProvider,
} from '@edx/frontend-platform/i18n'; } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
@@ -23,8 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
getLocale: jest.fn(), getLocale: jest.fn(),
})); }));
const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -158,7 +155,7 @@ describe('ConfigurableRegistrationForm', () => {
}; };
render(routerWrapper(reduxWrapper( render(routerWrapper(reduxWrapper(
<IntlConfigurableRegistrationForm {...props} />, <ConfigurableRegistrationForm {...props} />,
))); )));
expect(document.querySelector('#profession')).toBeTruthy(); expect(document.querySelector('#profession')).toBeTruthy();
@@ -188,7 +185,7 @@ describe('ConfigurableRegistrationForm', () => {
}; };
render(routerWrapper(reduxWrapper( render(routerWrapper(reduxWrapper(
<IntlConfigurableRegistrationForm {...props} />, <ConfigurableRegistrationForm {...props} />,
))); )));
expect(props.setFormFields).toHaveBeenCalledTimes(2); expect(props.setFormFields).toHaveBeenCalledTimes(2);
@@ -215,7 +212,7 @@ describe('ConfigurableRegistrationForm', () => {
}, },
}, },
}); });
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(document.querySelector('#profession')).toBeTruthy(); expect(document.querySelector('#profession')).toBeTruthy();
expect(document.querySelector('#tos')).toBeTruthy(); expect(document.querySelector('#tos')).toBeTruthy();
}); });
@@ -249,7 +246,7 @@ describe('ConfigurableRegistrationForm', () => {
}; };
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, payload); populateRequiredFields(getByLabelText, payload);
@@ -284,7 +281,7 @@ describe('ConfigurableRegistrationForm', () => {
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const submitButton = container.querySelector('button.btn-brand'); const submitButton = container.querySelector('button.btn-brand');
fireEvent.click(submitButton); fireEvent.click(submitButton);
@@ -310,7 +307,7 @@ describe('ConfigurableRegistrationForm', () => {
}, },
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const countryInput = container.querySelector('input[name="country"]'); const countryInput = container.querySelector('input[name="country"]');
fireEvent.change(countryInput, { target: { value: 'Pak', name: 'country' } }); fireEvent.change(countryInput, { target: { value: 'Pak', name: 'country' } });
fireEvent.blur(countryInput, { target: { value: 'Pak', name: 'country' } }); fireEvent.blur(countryInput, { target: { value: 'Pak', name: 'country' } });
@@ -335,7 +332,7 @@ describe('ConfigurableRegistrationForm', () => {
}, },
}, },
}); });
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const emailInput = getByLabelText('Email'); const emailInput = getByLabelText('Email');
const confirmEmailInput = getByLabelText('Confirm Email'); const confirmEmailInput = getByLabelText('Confirm Email');
@@ -371,7 +368,7 @@ describe('ConfigurableRegistrationForm', () => {
}, },
}, },
}); });
const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
populateRequiredFields(getByLabelText, formPayload, true); populateRequiredFields(getByLabelText, formPayload, true);
fireEvent.change( fireEvent.change(
@@ -406,7 +403,7 @@ describe('ConfigurableRegistrationForm', () => {
}); });
const { getByLabelText, container } = render( const { getByLabelText, container } = render(
routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)), routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
); );
const professionInput = getByLabelText('Profession'); const professionInput = getByLabelText('Profession');

15
src/register/components/tests/RegistrationFailure.test.jsx
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { mergeConfig } from '@edx/frontend-platform'; import { mergeConfig } from '@edx/frontend-platform';
import { import {
configure, getLocale, injectIntl, IntlProvider, configure, getLocale, IntlProvider,
} from '@edx/frontend-platform/i18n'; } from '@edx/frontend-platform/i18n';
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
@@ -24,8 +23,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
getLocale: jest.fn(), getLocale: jest.fn(),
})); }));
const IntlRegistrationPage = injectIntl(RegistrationPage);
const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -137,7 +134,7 @@ describe('RegistrationFailure', () => {
failureCount: 0, failureCount: 0,
}; };
const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />)); const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
const alertHeading = container.querySelectorAll('div.alert-heading'); const alertHeading = container.querySelectorAll('div.alert-heading');
expect(alertHeading.length).toEqual(1); expect(alertHeading.length).toEqual(1);
@@ -153,7 +150,7 @@ describe('RegistrationFailure', () => {
failureCount: 0, failureCount: 0,
}; };
const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />)); const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
const alertHeading = container.querySelectorAll('div.alert-heading'); const alertHeading = container.querySelectorAll('div.alert-heading');
expect(alertHeading.length).toEqual(1); expect(alertHeading.length).toEqual(1);
@@ -172,7 +169,7 @@ describe('RegistrationFailure', () => {
failureCount: 0, failureCount: 0,
}; };
const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />)); const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
const alertHeading = container.querySelectorAll('div.alert-heading'); const alertHeading = container.querySelectorAll('div.alert-heading');
expect(alertHeading.length).toEqual(1); expect(alertHeading.length).toEqual(1);
@@ -191,7 +188,7 @@ describe('RegistrationFailure', () => {
failureCount: 0, failureCount: 0,
}; };
const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />)); const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
const alertHeading = container.querySelectorAll('div.alert-heading'); const alertHeading = container.querySelectorAll('div.alert-heading');
expect(alertHeading.length).toEqual(1); expect(alertHeading.length).toEqual(1);
@@ -211,7 +208,7 @@ describe('RegistrationFailure', () => {
}, },
}); });
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const validationError = screen.queryByText('An error has occurred. Try refreshing the page, or check your internet connection.'); const validationError = screen.queryByText('An error has occurred. Try refreshing the page, or check your internet connection.');
expect(validationError).not.toBeNull(); expect(validationError).not.toBeNull();

30
src/register/components/tests/ThirdPartyAuth.test.jsx
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { getConfig, mergeConfig } from '@edx/frontend-platform'; import { getConfig, mergeConfig } from '@edx/frontend-platform';
import { import {
configure, getLocale, injectIntl, IntlProvider, configure, getLocale, IntlProvider,
} from '@edx/frontend-platform/i18n'; } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
@@ -23,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
getLocale: jest.fn(), getLocale: jest.fn(),
})); }));
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -157,7 +155,7 @@ describe('ThirdPartyAuth', () => {
}); });
const { queryByLabelText } = render( const { queryByLabelText } = render(
routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })), routerWrapper(reduxWrapper(<RegistrationPage {...props} />, { store })),
); );
const passwordField = queryByLabelText('Password'); const passwordField = queryByLabelText('Password');
@@ -182,7 +180,7 @@ describe('ThirdPartyAuth', () => {
window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` }; window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
const { container } = render( const { container } = render(
routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)), routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
); );
const tpaButton = container.querySelector(`button#${ssoProvider.id}`); const tpaButton = container.querySelector(`button#${ssoProvider.id}`);
@@ -207,7 +205,7 @@ describe('ThirdPartyAuth', () => {
search: `?next=/dashboard&tpa_hint=${ssoProvider.id}`, search: `?next=/dashboard&tpa_hint=${ssoProvider.id}`,
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const skeletonElement = container.querySelector('.react-loading-skeleton'); const skeletonElement = container.querySelector('.react-loading-skeleton');
expect(skeletonElement).toBeTruthy(); expect(skeletonElement).toBeTruthy();
@@ -231,7 +229,7 @@ describe('ThirdPartyAuth', () => {
window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` }; window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
ssoProvider.iconImage = null; ssoProvider.iconImage = null;
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const iconElement = container.querySelector(`button#${ssoProvider.id} div span.pgn__icon`); const iconElement = container.querySelector(`button#${ssoProvider.id} div span.pgn__icon`);
expect(iconElement).toBeTruthy(); expect(iconElement).toBeTruthy();
@@ -254,7 +252,7 @@ describe('ThirdPartyAuth', () => {
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` }; window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` };
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(window.location.href).toEqual(getConfig().LMS_BASE_URL + secondaryProviders.registerUrl); expect(window.location.href).toEqual(getConfig().LMS_BASE_URL + secondaryProviders.registerUrl);
}); });
@@ -275,7 +273,7 @@ describe('ThirdPartyAuth', () => {
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: '?next=/dashboard&tpa_hint=invalid' }; window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: '?next=/dashboard&tpa_hint=invalid' };
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const providerButton = container.querySelector(`button#${ssoProvider.id} span#provider-name`); const providerButton = container.querySelector(`button#${ssoProvider.id} span#provider-name`);
expect(providerButton.textContent).toEqual(expectedMessage); expect(providerButton.textContent).toEqual(expectedMessage);
@@ -294,7 +292,7 @@ describe('ThirdPartyAuth', () => {
}); });
const { container } = render( const { container } = render(
routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })), routerWrapper(reduxWrapper(<RegistrationPage {...props} />, { store })),
); );
const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`); const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
@@ -315,7 +313,7 @@ describe('ThirdPartyAuth', () => {
}); });
const { container } = render( const { container } = render(
routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)), routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
); );
const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`); const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
@@ -329,7 +327,7 @@ describe('ThirdPartyAuth', () => {
institutionLogin: true, institutionLogin: true,
}; };
const { getByText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { getByText } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const headingElement = getByText('Register with institution/campus credentials'); const headingElement = getByText('Register with institution/campus credentials');
expect(headingElement).toBeTruthy(); expect(headingElement).toBeTruthy();
}); });
@@ -354,7 +352,7 @@ describe('ThirdPartyAuth', () => {
window.location = { href: getConfig().BASE_URL }; window.location = { href: getConfig().BASE_URL };
const { container } = render( const { container } = render(
routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)), routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
); );
const ssoButton = container.querySelector('button#oa2-apple-id'); const ssoButton = container.querySelector('button#oa2-apple-id');
@@ -385,7 +383,7 @@ describe('ThirdPartyAuth', () => {
delete window.location; delete window.location;
window.location = { href: getConfig().BASE_URL }; window.location = { href: getConfig().BASE_URL };
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl); expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
}); });
@@ -406,7 +404,7 @@ describe('ThirdPartyAuth', () => {
const expectedMessage = `${'You\'ve successfully signed into Apple! We just need a little more information before ' const expectedMessage = `${'You\'ve successfully signed into Apple! We just need a little more information before '
+ 'you start learning with '}${ getConfig().SITE_NAME }.`; + 'you start learning with '}${ getConfig().SITE_NAME }.`;
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
const tpaAlert = container.querySelector('#tpa-alert p'); const tpaAlert = container.querySelector('#tpa-alert p');
expect(tpaAlert.textContent).toEqual(expectedMessage); expect(tpaAlert.textContent).toEqual(expectedMessage);
}); });
@@ -437,7 +435,7 @@ describe('ThirdPartyAuth', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render( const { container } = render(
routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)), routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
); );
const alertHeading = container.querySelector('div.alert-heading'); const alertHeading = container.querySelector('div.alert-heading');