diff --git a/src/common-components/tests/FormField.test.jsx b/src/common-components/tests/FormField.test.jsx index 56c2d9d2..9711d97a 100644 --- a/src/common-components/tests/FormField.test.jsx +++ b/src/common-components/tests/FormField.test.jsx @@ -1,7 +1,6 @@ -import React from 'react'; import { Provider } from 'react-redux'; -import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import { fireEvent, render } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; import { MemoryRouter } from 'react-router-dom'; @@ -37,7 +36,6 @@ describe('FormGroup', () => { describe('PasswordField', () => { const mockStore = configureStore(); - const IntlPasswordField = injectIntl(PasswordField); let props = {}; let store = {}; @@ -66,7 +64,7 @@ describe('PasswordField', () => { }); it('should show/hide password on icon click', () => { - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordInput = getByLabelText('Password'); const showPasswordButton = getByLabelText('Show password'); @@ -79,7 +77,7 @@ describe('PasswordField', () => { }); it('should show password requirement tooltip on focus', async () => { - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordInput = getByLabelText('Password'); jest.useFakeTimers(); await act(async () => { @@ -96,7 +94,7 @@ describe('PasswordField', () => { ...props, value: '', }; - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordInput = getByLabelText('Password'); jest.useFakeTimers(); await act(async () => { @@ -119,7 +117,7 @@ describe('PasswordField', () => { }); it('should update password requirement checks', async () => { - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordInput = getByLabelText('Password'); jest.useFakeTimers(); await act(async () => { @@ -142,7 +140,7 @@ describe('PasswordField', () => { }); it('should not run validations when blur is fired on password icon click', () => { - const { container, getByLabelText } = render(reduxWrapper()); + const { container, getByLabelText } = render(reduxWrapper()); const passwordInput = container.querySelector('input[name="password"]'); const passwordIcon = getByLabelText('Show password'); @@ -163,7 +161,7 @@ describe('PasswordField', () => { ...props, handleBlur: jest.fn(), }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const passwordInput = container.querySelector('input[name="password"]'); fireEvent.blur(passwordInput, { @@ -181,7 +179,7 @@ describe('PasswordField', () => { ...props, handleErrorChange: jest.fn(), }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const passwordInput = container.querySelector('input[name="password"]'); fireEvent.blur(passwordInput, { @@ -204,7 +202,7 @@ describe('PasswordField', () => { handleErrorChange: jest.fn(), }; - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordIcon = getByLabelText('Show password'); @@ -224,7 +222,7 @@ describe('PasswordField', () => { handleErrorChange: jest.fn(), }; - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordIcon = getByLabelText('Show password'); @@ -248,7 +246,7 @@ describe('PasswordField', () => { ...props, handleErrorChange: jest.fn(), }; - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordField = getByLabelText('Password'); fireEvent.blur(passwordField, { target: { @@ -268,7 +266,7 @@ describe('PasswordField', () => { handleErrorChange: jest.fn(), handleBlur: jest.fn(), }; - const { getByLabelText } = render(reduxWrapper()); + const { getByLabelText } = render(reduxWrapper()); const passwordIcon = getByLabelText('Show password'); diff --git a/src/forgot-password/tests/ForgotPasswordPage.test.jsx b/src/forgot-password/tests/ForgotPasswordPage.test.jsx index 5958ad66..c3b97c03 100644 --- a/src/forgot-password/tests/ForgotPasswordPage.test.jsx +++ b/src/forgot-password/tests/ForgotPasswordPage.test.jsx @@ -1,8 +1,7 @@ -import React from 'react'; import { Provider } from 'react-redux'; import { mergeConfig } from '@edx/frontend-platform'; -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', () => ({ useNavigate: () => mockedNavigator, })); -const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage); const mockStore = configureStore(); const initialState = { @@ -78,7 +76,7 @@ describe('ForgotPasswordPage', () => { ); it('not should display need other help signing in button', () => { - const { queryByTestId } = render(reduxWrapper()); + const { queryByTestId } = render(reduxWrapper()); const forgotPasswordButton = queryByTestId('forgot-password'); expect(forgotPasswordButton).toBeNull(); }); @@ -87,14 +85,14 @@ describe('ForgotPasswordPage', () => { mergeConfig({ LOGIN_ISSUE_SUPPORT_LINK: '/support', }); - render(reduxWrapper()); + render(reduxWrapper()); const forgotPasswordButton = screen.findByText('Need help signing in?'); expect(forgotPasswordButton).toBeDefined(); }); it('should display email validation error message', async () => { const validationMessage = 'We were unable to contact you.Enter a valid email address below.'; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const emailInput = screen.getByLabelText('Email'); @@ -115,7 +113,7 @@ describe('ForgotPasswordPage', () => { const expectedMessage = 'We were unable to contact you.' + 'An error has occurred. Try refreshing the page, or check your internet connection.'; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const alertElements = container.querySelectorAll('.alert-danger'); const validationErrors = alertElements[0].textContent; @@ -124,7 +122,7 @@ describe('ForgotPasswordPage', () => { it('should display empty email validation message', async () => { const validationMessage = 'We were unable to contact you.Enter your email below.'; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const submitButton = screen.getByText('Submit'); fireEvent.click(submitButton); @@ -141,7 +139,7 @@ describe('ForgotPasswordPage', () => { forgotPassword: { status: 'forbidden' }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const alertElements = container.querySelectorAll('.alert-danger'); const validationErrors = alertElements[0].textContent; @@ -149,7 +147,7 @@ describe('ForgotPasswordPage', () => { }); it('should not display any error message on change event', () => { - render(reduxWrapper()); + render(reduxWrapper()); const emailInput = screen.getByLabelText('Email'); @@ -172,7 +170,7 @@ describe('ForgotPasswordPage', () => { }; store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); const emailInput = screen.getByLabelText('Email'); fireEvent.blur(emailInput); @@ -187,7 +185,7 @@ describe('ForgotPasswordPage', () => { emailValidationError: validationMessage, email: '', }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const validationElement = container.querySelector('.pgn__form-text-invalid'); expect(validationElement.textContent).toEqual(validationMessage); }); @@ -205,7 +203,7 @@ describe('ForgotPasswordPage', () => { store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); const emailInput = screen.getByLabelText('Email'); fireEvent.focus(emailInput); @@ -219,7 +217,7 @@ describe('ForgotPasswordPage', () => { emailValidationError: '', email: '', }; - render(reduxWrapper()); + render(reduxWrapper()); const errorElement = screen.queryByTestId('email-invalid-feedback'); expect(errorElement).toBeNull(); }); @@ -236,7 +234,7 @@ describe('ForgotPasswordPage', () => { + 'receive a password reset message after 1 minute, verify that you entered the correct email address,' + ' or check your spam folder. If you need further assistance, contact technical support.'; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const successElement = findByTextContent(container, successMessage); expect(successElement).toBeDefined(); @@ -254,7 +252,7 @@ describe('ForgotPasswordPage', () => { + 'This password reset link is invalid. It may have been used already. ' + 'Enter your email below to receive a new link.'; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const successElement = findByTextContent(container, successMessage); expect(successElement).toBeDefined(); @@ -262,7 +260,7 @@ describe('ForgotPasswordPage', () => { }); it('should redirect onto login page', async () => { - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); const navElement = container.querySelector('nav'); const anchorElement = navElement.querySelector('a'); diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index 62815726..1efeed47 100644 --- a/src/login/LoginPage.jsx +++ b/src/login/LoginPage.jsx @@ -1,9 +1,9 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { connect } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; -import { injectIntl, useIntl } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Form, StatefulButton, } from '@openedx/paragon'; @@ -365,4 +365,4 @@ export default connect( loginRequest, getTPADataFromBackend: getThirdPartyAuthContext, }, -)(injectIntl(LoginPage)); +)(LoginPage); diff --git a/src/login/tests/AccountActivationMessage.test.jsx b/src/login/tests/AccountActivationMessage.test.jsx index df2a0c08..27d6aa30 100644 --- a/src/login/tests/AccountActivationMessage.test.jsx +++ b/src/login/tests/AccountActivationMessage.test.jsx @@ -1,7 +1,5 @@ -import React from 'react'; - import { mergeConfig } from '@edx/frontend-platform'; -import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import { render, screen, } from '@testing-library/react'; @@ -9,8 +7,6 @@ import { import AccountActivationMessage from '../AccountActivationMessage'; import { ACCOUNT_ACTIVATION_MESSAGE } from '../data/constants'; -const IntlAccountActivationMessage = injectIntl(AccountActivationMessage); - describe('AccountActivationMessage', () => { beforeEach(() => { mergeConfig({ @@ -21,7 +17,7 @@ describe('AccountActivationMessage', () => { it('should match account already activated message', () => { render( - + , ); @@ -36,7 +32,7 @@ describe('AccountActivationMessage', () => { it('should match account activated success message', () => { render( - + , ); @@ -53,7 +49,7 @@ describe('AccountActivationMessage', () => { it('should match account activation error message', () => { render( - + , ); @@ -69,7 +65,7 @@ describe('AccountActivationMessage', () => { it('should not display anything for invalid message type', () => { const { container } = render( - + , ); @@ -88,7 +84,7 @@ describe('EmailConfirmationMessage', () => { it('should match email already confirmed message', () => { render( - + , ); @@ -103,7 +99,7 @@ describe('EmailConfirmationMessage', () => { it('should match email confirmation success message', () => { render( - + , ); const expectedMessage = 'Success! You have confirmed your email.Sign in to continue.'; @@ -117,7 +113,7 @@ describe('EmailConfirmationMessage', () => { it('should match email confirmation error message', () => { render( - + , ); const expectedMessage = 'Your email could not be confirmed' diff --git a/src/login/tests/LoginPage.test.jsx b/src/login/tests/LoginPage.test.jsx index 9c337bf2..da65bb9d 100644 --- a/src/login/tests/LoginPage.test.jsx +++ b/src/login/tests/LoginPage.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 { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import { fireEvent, render, screen, waitFor, } from '@testing-library/react'; @@ -24,7 +23,6 @@ jest.mock('@edx/frontend-platform/auth', () => ({ getAuthService: jest.fn(), })); -const IntlLoginPage = injectIntl(LoginPage); const mockStore = configureStore(); describe('LoginPage', () => { @@ -88,7 +86,7 @@ describe('LoginPage', () => { it('should submit form for valid input', () => { store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.change(screen.getByText( '', @@ -109,7 +107,7 @@ describe('LoginPage', () => { it('should not dispatch loginRequest on empty form submission', () => { store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.click(screen.getByText( '', @@ -128,7 +126,7 @@ describe('LoginPage', () => { }); store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.click(screen.getByText( '', { selector: '.btn-brand' }, @@ -142,7 +140,7 @@ describe('LoginPage', () => { it('should match state for invalid email (less than 2 characters), on form submission', () => { store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.change(screen.getByText( '', @@ -162,7 +160,7 @@ describe('LoginPage', () => { }); it('should show error messages for required fields on empty form submission', () => { - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); fireEvent.click(screen.getByText( '', { selector: '.btn-brand' }, @@ -176,7 +174,7 @@ describe('LoginPage', () => { }); it('should run frontend validations for emailOrUsername field on form submission', () => { - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); fireEvent.change(screen.getByText( '', @@ -195,7 +193,7 @@ describe('LoginPage', () => { it('should reset field related error messages on onFocus event', async () => { store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); await act(async () => { // clicking submit button with empty fields to make the errors appear @@ -224,7 +222,7 @@ describe('LoginPage', () => { // ******** test form buttons and links ******** it('should match default button state', () => { - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText('Sign in')).toBeDefined(); }); @@ -237,7 +235,7 @@ describe('LoginPage', () => { }, }); - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( 'pending', @@ -245,7 +243,7 @@ describe('LoginPage', () => { }); it('should show forgot password link', () => { - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( 'Forgot password', @@ -265,7 +263,7 @@ describe('LoginPage', () => { }, }); - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( '', { selector: `#${ssoProvider.id}` }, @@ -287,7 +285,7 @@ describe('LoginPage', () => { }, }); - const { queryByText } = render(reduxWrapper()); + const { queryByText } = render(reduxWrapper()); expect(queryByText('Company or school credentials')).toBeNull(); expect(queryByText('Or sign in with:')).toBeNull(); expect(queryByText('Institution/campus credentials')).toBeNull(); @@ -307,7 +305,7 @@ describe('LoginPage', () => { }, }); - const { queryByText } = render(reduxWrapper()); + const { queryByText } = render(reduxWrapper()); expect(queryByText('Company or school credentials')).toBeNull(); expect(queryByText('Or sign in with:')).toBeNull(); }); @@ -327,7 +325,7 @@ describe('LoginPage', () => { }, }); - const { queryByText } = render(reduxWrapper()); + const { queryByText } = render(reduxWrapper()); expect(queryByText('Or sign in with:')).toBeDefined(); expect(queryByText('Company or school credentials')).toBeDefined(); expect(queryByText('Institution/campus credentials')).toBeDefined(); @@ -352,7 +350,7 @@ describe('LoginPage', () => { }, }); - const { queryByText } = render(reduxWrapper()); + const { queryByText } = render(reduxWrapper()); expect(queryByText('Or sign in with:')).toBeDefined(); expect(queryByText('Company or school credentials')).toBeNull(); expect(queryByText('Institution/campus credentials')).toBeDefined(); @@ -380,7 +378,7 @@ describe('LoginPage', () => { }, }); - const { queryByText } = render(reduxWrapper()); + const { queryByText } = render(reduxWrapper()); expect(queryByText('Or sign in with:')).toBeDefined(); expect(queryByText('Institution/campus credentials')).toBeDefined(); @@ -400,7 +398,7 @@ describe('LoginPage', () => { }, }); - const { queryByText } = render(reduxWrapper()); + const { queryByText } = render(reduxWrapper()); expect(queryByText('Or sign in with:')).toBeNull(); expect(queryByText('Institution/campus credentials')).toBeNull(); expect(queryByText('Company or school credentials')).toBeNull(); @@ -418,7 +416,7 @@ describe('LoginPage', () => { }, }); - const { queryByText } = render(reduxWrapper()); + const { queryByText } = render(reduxWrapper()); expect(queryByText('Or sign in with:')).toBeDefined(); expect(queryByText('Company or school credentials')).toBeNull(); expect(queryByText('Institution/campus credentials')).toBeDefined(); @@ -441,7 +439,7 @@ describe('LoginPage', () => { }, }); - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( '', { selector: '#login-failure-alert' }, @@ -465,7 +463,7 @@ describe('LoginPage', () => { + 'linked '}${ getConfig().SITE_NAME } account. To link your accounts, sign in now using your ${ getConfig().SITE_NAME } password.`; - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( '', { selector: '#tpa-alert' }, @@ -484,7 +482,7 @@ describe('LoginPage', () => { }, }, }); - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( '', { selector: '#login-failure-alert' }, @@ -501,7 +499,7 @@ describe('LoginPage', () => { }, }); - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( '', { selector: '#login-failure-alert' }, @@ -525,7 +523,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL }; - render(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toBe(dashboardURL); }); @@ -552,7 +550,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL }; - render(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl); }); @@ -571,7 +569,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL }; - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.click(screen.getByText( '', @@ -600,7 +598,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL }; - render(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toBe(getConfig().LMS_BASE_URL + finishAuthUrl); }); @@ -622,7 +620,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` }; - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( '', { selector: `#${ssoProvider.id}` }, @@ -649,7 +647,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); expect(container.querySelector('.react-loading-skeleton')).toBeTruthy(); }); @@ -671,7 +669,7 @@ describe('LoginPage', () => { window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` }; secondaryProviders.iconImage = null; - render(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toEqual(getConfig().LMS_BASE_URL + secondaryProviders.loginUrl); }); @@ -691,7 +689,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: '?next=/dashboard&tpa_hint=invalid' }; - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); expect(container.querySelector(`#${ssoProvider.id}`).querySelector('#provider-name').textContent).toEqual(`${ssoProvider.name}`); mergeConfig({ @@ -715,7 +713,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?tpa_hint=${ssoProvider.id}` }; - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( 'Show me other ways to sign in or register', ).textContent).toBeDefined(); @@ -741,7 +739,7 @@ describe('LoginPage', () => { delete window.location; window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?tpa_hint=${ssoProvider.id}` }; - render(reduxWrapper()); + render(reduxWrapper()); expect(screen.getByText( 'Show me other ways to sign in', ).textContent).toBeDefined(); @@ -750,7 +748,7 @@ describe('LoginPage', () => { // ******** miscellaneous tests ******** it('should send page event when login page is rendered', () => { - render(reduxWrapper()); + render(reduxWrapper()); expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login'); }); @@ -764,7 +762,7 @@ describe('LoginPage', () => { }); store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); expect(store.dispatch).toHaveBeenCalledWith(backupLoginFormBegin( { formFields: { @@ -778,7 +776,7 @@ describe('LoginPage', () => { }); it('should send track event when forgot password link is clicked', () => { - render(reduxWrapper()); + render(reduxWrapper()); fireEvent.click(screen.getByText( 'Forgot password', { selector: '#forgot-password' }, @@ -797,7 +795,7 @@ describe('LoginPage', () => { }); store.dispatch = jest.fn(store.dispatch); - render(reduxWrapper()); + render(reduxWrapper()); expect(store.dispatch).toHaveBeenCalledWith(backupLoginFormBegin( { formFields: { @@ -826,7 +824,7 @@ describe('LoginPage', () => { }, }); - const { container } = render(reduxWrapper()); + const { container } = render(reduxWrapper()); expect(container.querySelector('input#emailOrUsername').value).toEqual('john_doe'); expect(container.querySelector('input#password').value).toEqual('test-password'); });