From 5bd6926f2ff56c7402ef86cfd10104034bd1483e Mon Sep 17 00:00:00 2001 From: Diana Villalvazo Date: Tue, 12 Aug 2025 08:46:01 -0600 Subject: [PATCH] refactor: Replace of injectIntl with useIntl (#1539) --- src/login/tests/ChangePasswordPrompt.test.jsx | 9 ++--- src/login/tests/LoginFailure.test.jsx | 34 ++++++++--------- src/logistration/Logistration.test.jsx | 28 +++++++------- .../tests/ProgressiveProfiling.test.jsx | 38 +++++++++---------- .../SmallLayout.test.jsx | 10 ++--- .../tests/ResetPasswordPage.test.jsx | 26 ++++++------- 6 files changed, 64 insertions(+), 81 deletions(-) diff --git a/src/login/tests/ChangePasswordPrompt.test.jsx b/src/login/tests/ChangePasswordPrompt.test.jsx index f544a55c..3e672ca3 100644 --- a/src/login/tests/ChangePasswordPrompt.test.jsx +++ b/src/login/tests/ChangePasswordPrompt.test.jsx @@ -1,7 +1,5 @@ -import React from 'react'; - import { getConfig } from '@edx/frontend-platform'; -import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import { fireEvent, render, screen, } from '@testing-library/react'; @@ -11,7 +9,6 @@ import { MemoryRouter } from 'react-router-dom'; import { RESET_PAGE } from '../../data/constants'; import ChangePasswordPrompt from '../ChangePasswordPrompt'; -const IntlChangePasswordPrompt = injectIntl(ChangePasswordPrompt); const mockedNavigator = jest.fn(); jest.mock('react-router-dom', () => ({ @@ -44,7 +41,7 @@ describe('ChangePasswordPromptTests', () => { render( - + , ); @@ -61,7 +58,7 @@ describe('ChangePasswordPromptTests', () => { render( - + , ); diff --git a/src/login/tests/LoginFailure.test.jsx b/src/login/tests/LoginFailure.test.jsx index 7a352933..467b4cf4 100644 --- a/src/login/tests/LoginFailure.test.jsx +++ b/src/login/tests/LoginFailure.test.jsx @@ -1,6 +1,4 @@ -import React from 'react'; - -import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import { render, screen, } from '@testing-library/react'; @@ -26,8 +24,6 @@ jest.mock('@edx/frontend-platform/auth', () => ({ getAuthService: jest.fn(), })); -const IntlLoginFailureMessage = injectIntl(LoginFailureMessage); - describe('LoginFailureMessage', () => { let props = {}; @@ -48,7 +44,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -76,7 +72,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -106,7 +102,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -132,7 +128,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -152,7 +148,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -176,7 +172,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -196,7 +192,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -216,7 +212,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -236,7 +232,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -255,7 +251,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -275,7 +271,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -301,7 +297,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -327,7 +323,7 @@ describe('LoginFailureMessage', () => { render( - + , ); @@ -359,7 +355,7 @@ describe('LoginFailureMessage', () => { render( - + , ); diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx index 87bf3e70..fa376aca 100644 --- a/src/logistration/Logistration.test.jsx +++ b/src/logistration/Logistration.test.jsx @@ -1,9 +1,8 @@ -import React from 'react'; 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'; @@ -23,7 +22,6 @@ jest.mock('@edx/frontend-platform/analytics', () => ({ jest.mock('@edx/frontend-platform/auth'); const mockStore = configureStore(); -const IntlLogistration = injectIntl(Logistration); describe('Logistration', () => { let store = {}; @@ -95,7 +93,7 @@ describe('Logistration', () => { }); it('should do nothing when user clicks on the same tab (login/register) again', () => { - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); // While staying on the registration form, clicking the register tab again fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]')); @@ -107,14 +105,14 @@ describe('Logistration', () => { ALLOW_PUBLIC_ACCOUNT_CREATION: true, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); expect(container.querySelector('RegistrationPage')).toBeDefined(); }); it('should render login page', () => { const props = { selectedPage: LOGIN_PAGE }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); expect(container.querySelector('LoginPage')).toBeDefined(); }); @@ -125,7 +123,7 @@ describe('Logistration', () => { }); let props = { selectedPage: LOGIN_PAGE }; - const { rerender } = render(reduxWrapper()); + const { rerender } = render(reduxWrapper()); // verifying sign in heading expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in'); @@ -133,7 +131,7 @@ describe('Logistration', () => { // 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(reduxWrapper()); // verifying register heading expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register'); @@ -160,7 +158,7 @@ describe('Logistration', () => { }); const props = { selectedPage: LOGIN_PAGE }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); // verifying sign in heading for institution login false expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in'); @@ -190,7 +188,7 @@ describe('Logistration', () => { }); const props = { selectedPage: LOGIN_PAGE }; - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText('Institution/campus credentials')).toBeDefined(); // on clicking "Institution/campus credentials" button, it should display institution login page @@ -221,7 +219,7 @@ describe('Logistration', () => { }); const props = { selectedPage: LOGIN_PAGE }; - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.click(screen.getByText('Institution/campus credentials')); expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' }); @@ -253,7 +251,7 @@ describe('Logistration', () => { delete window.location; window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL }; - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.click(screen.getByText('Institution/campus credentials')); expect(screen.getByText('Test University')).toBeDefined(); @@ -264,7 +262,7 @@ 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 } = render(reduxWrapper()); fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]')); expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm()); }); @@ -272,14 +270,14 @@ describe('Logistration', () => { 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 } = render(reduxWrapper()); fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]')); 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 } = render(reduxWrapper()); fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]')); expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage()); }); diff --git a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx index 9bc4439c..8cddd862 100644 --- a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx +++ b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx @@ -1,10 +1,9 @@ -import React from 'react'; import { Provider } from 'react-redux'; import { getConfig, mergeConfig } from '@edx/frontend-platform'; import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platform/analytics'; import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; -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'; @@ -22,7 +21,6 @@ import { import { saveUserProfile } from '../data/actions'; import ProgressiveProfiling from '../ProgressiveProfiling'; -const IntlProgressiveProfilingPage = injectIntl(ProgressiveProfiling); const mockStore = configureStore(); jest.mock('@edx/frontend-platform/analytics', () => ({ @@ -114,7 +112,7 @@ describe('ProgressiveProfilingTests', () => { mergeConfig({ AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '', }); - const { queryByRole } = render(reduxWrapper()); + const { queryByRole } = render(reduxWrapper()); const button = queryByRole('button', { name: /learn more about how we use this information/i }); expect(button).toBeNull(); @@ -125,7 +123,7 @@ describe('ProgressiveProfilingTests', () => { AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support', }); - const { getByText } = render(reduxWrapper()); + const { getByText } = render(reduxWrapper()); const learnMoreButton = getByText('Learn more about how we use this information.'); @@ -135,7 +133,7 @@ describe('ProgressiveProfilingTests', () => { it('should open modal on pressing skip for now button', () => { delete window.location; window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) }; - const { getByRole } = render(reduxWrapper()); + const { getByRole } = render(reduxWrapper()); const skipButton = getByRole('button', { name: /skip for now/i }); fireEvent.click(skipButton); @@ -150,7 +148,7 @@ describe('ProgressiveProfilingTests', () => { // ******** test event functionality ******** it('should make identify call to segment on progressive profiling page', () => { - render(reduxWrapper()); + render(reduxWrapper()); expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3); expect(identifyAuthenticatedUser).toHaveBeenCalled(); @@ -160,7 +158,7 @@ describe('ProgressiveProfilingTests', () => { mergeConfig({ AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support', }); - render(reduxWrapper()); + render(reduxWrapper()); const supportLink = screen.getByRole('link', { name: /learn more about how we use this information/i }); fireEvent.click(supportLink); @@ -178,7 +176,7 @@ describe('ProgressiveProfilingTests', () => { }; delete window.location; window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) }; - render(reduxWrapper()); + render(reduxWrapper()); const nextButton = screen.getByText('Next'); fireEvent.click(nextButton); @@ -194,7 +192,7 @@ describe('ProgressiveProfilingTests', () => { extended_profile: [{ field_name: 'company', field_value: 'test company' }], }; store.dispatch = jest.fn(store.dispatch); - const { getByLabelText, getByText } = render(reduxWrapper()); + const { getByLabelText, getByText } = render(reduxWrapper()); const genderSelect = getByLabelText('Gender'); const companyInput = getByLabelText('Company'); @@ -216,7 +214,7 @@ describe('ProgressiveProfilingTests', () => { }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const errorElement = container.querySelector('#pp-page-errors'); expect(errorElement).toBeTruthy(); @@ -232,7 +230,7 @@ describe('ProgressiveProfilingTests', () => { href: getConfig().BASE_URL, }; - render(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toEqual(DASHBOARD_URL); }); @@ -250,7 +248,7 @@ describe('ProgressiveProfilingTests', () => { success: true, }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const nextButton = container.querySelector('button.btn-brand'); expect(nextButton.textContent).toEqual('Next'); @@ -277,7 +275,7 @@ describe('ProgressiveProfilingTests', () => { }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const nextButton = container.querySelector('button.btn-brand'); expect(nextButton.textContent).toEqual('Submit'); @@ -311,7 +309,7 @@ describe('ProgressiveProfilingTests', () => { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING), search: `?host=${host}&variant=${EMBEDDED}`, }; - render(reduxWrapper()); + render(reduxWrapper()); const skipLinkButton = screen.getByText('Skip for now'); fireEvent.click(skipLinkButton); @@ -336,7 +334,7 @@ describe('ProgressiveProfilingTests', () => { }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const tpaSpinnerElement = container.querySelector('#tpa-spinner'); expect(tpaSpinnerElement).toBeTruthy(); @@ -355,7 +353,7 @@ describe('ProgressiveProfilingTests', () => { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING), search: `?host=${host}`, }; - render(reduxWrapper()); + render(reduxWrapper()); const submitButton = screen.getByText('Next'); fireEvent.click(submitButton); @@ -370,7 +368,7 @@ describe('ProgressiveProfilingTests', () => { search: `?variant=${EMBEDDED}&host=${host}`, }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const genderField = container.querySelector('#gender'); expect(genderField).toBeTruthy(); @@ -391,7 +389,7 @@ describe('ProgressiveProfilingTests', () => { }, }); - render(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toBe(DASHBOARD_URL); }); @@ -419,7 +417,7 @@ describe('ProgressiveProfilingTests', () => { }, }); - render(reduxWrapper()); + render(reduxWrapper()); const submitButton = screen.getByText('Submit'); fireEvent.click(submitButton); expect(window.location.href).toBe(redirectUrl); diff --git a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx index f864514a..8726ce12 100644 --- a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx +++ b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx @@ -1,13 +1,9 @@ -import React from 'react'; - -import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import { render } from '@testing-library/react'; import SmallLayout from './SmallLayout'; import mockedRecommendedProducts from '../data/tests/mockedData'; -const IntlRecommendationsSmallLayoutPage = injectIntl(SmallLayout); - jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn(), @@ -36,7 +32,7 @@ describe('RecommendationsPageTests', () => { }); it('should render recommendations when recommendations are not loading', () => { - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton'); @@ -48,7 +44,7 @@ describe('RecommendationsPageTests', () => { ...props, isLoading: true, }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton'); diff --git a/src/reset-password/tests/ResetPasswordPage.test.jsx b/src/reset-password/tests/ResetPasswordPage.test.jsx index 421edc9e..e5f77eae 100644 --- a/src/reset-password/tests/ResetPasswordPage.test.jsx +++ b/src/reset-password/tests/ResetPasswordPage.test.jsx @@ -1,7 +1,6 @@ -import React from 'react'; import { Provider } from 'react-redux'; -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'; @@ -26,7 +25,6 @@ jest.mock('react-router-dom', () => ({ useParams: jest.fn().mockReturnValue({ token }), })); -const IntlResetPasswordPage = injectIntl(ResetPasswordPage); const mockStore = configureStore(); describe('ResetPasswordPage', () => { @@ -95,7 +93,7 @@ describe('ResetPasswordPage', () => { })); store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); const newPasswordInput = screen.getByLabelText('New password'); const confirmPasswordInput = screen.getByLabelText('Confirm password'); @@ -120,7 +118,7 @@ describe('ResetPasswordPage', () => { status: TOKEN_STATE.VALID, }, }); - render(reduxWrapper()); + render(reduxWrapper()); const resetPasswordButton = screen.getByRole('button', { name: /Reset password/i, id: 'submit-new-password' }); fireEvent.click(resetPasswordButton); @@ -144,7 +142,7 @@ describe('ResetPasswordPage', () => { status: TOKEN_STATE.VALID, }, }); - render(reduxWrapper()); + render(reduxWrapper()); const confirmPasswordInput = screen.getByLabelText('Confirm password'); fireEvent.change(confirmPasswordInput, { target: { value: 'password-mismatch' } }); @@ -163,7 +161,7 @@ describe('ResetPasswordPage', () => { }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const alertElements = container.querySelectorAll('.alert-danger'); const rateLimitError = alertElements[0].textContent; @@ -179,7 +177,7 @@ describe('ResetPasswordPage', () => { }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const alertElements = container.querySelectorAll('.alert-danger'); const internalServerError = alertElements[0].textContent; expect(internalServerError).toBe(validationMessage); @@ -188,7 +186,7 @@ describe('ResetPasswordPage', () => { // ******** miscellaneous tests ******** it('should call validation on password field when blur event fires', () => { - const resetPasswordPage = render(reduxWrapper()); + const resetPasswordPage = render(reduxWrapper()); const expectedText = 'Password criteria has not been metPassword must contain at least 8 characters, at least one letter, and at least one number'; const newPasswordInput = resetPasswordPage.container.querySelector('input#newPassword'); newPasswordInput.value = 'test-password'; @@ -207,7 +205,7 @@ describe('ResetPasswordPage', () => { TOKEN_STATE.PENDING, }; - render(reduxWrapper()); + render(reduxWrapper()); expect(store.dispatch).toHaveBeenCalledWith(validateToken(token)); }); @@ -216,19 +214,19 @@ describe('ResetPasswordPage', () => { status: PASSWORD_RESET_ERROR, }; - render(reduxWrapper()); + render(reduxWrapper()); expect(mockedNavigator).toHaveBeenCalledWith(RESET_PAGE); }); it('should redirect the user to root url of the application ', async () => { props = { status: SUCCESS, }; - render(reduxWrapper()); + render(reduxWrapper()); expect(mockedNavigator).toHaveBeenCalledWith(LOGIN_PAGE); }); it('shows spinner during token validation', () => { - render(reduxWrapper()); + render(reduxWrapper()); const spinnerElement = document.getElementsByClassName('div.spinner-header'); expect(spinnerElement).toBeTruthy(); @@ -237,7 +235,7 @@ describe('ResetPasswordPage', () => { // ******** redirection tests ******** it('by clicking on sign in tab should redirect onto login page', async () => { - const { getByText } = render(reduxWrapper()); + const { getByText } = render(reduxWrapper()); const signInTab = getByText('Sign in');