diff --git a/src/login/ChangePasswordPrompt.jsx b/src/login/ChangePasswordPrompt.jsx index 123e82248..c423ff4e2 100644 --- a/src/login/ChangePasswordPrompt.jsx +++ b/src/login/ChangePasswordPrompt.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; import { useIntl } from '@edx/frontend-platform/i18n'; @@ -10,6 +11,7 @@ import PropTypes from 'prop-types'; import { Link, useNavigate } from 'react-router-dom'; import messages from './messages'; +import trackCohesionEvent from '../cohesion/trackers'; import { DEFAULT_REDIRECT_URL, RESET_PAGE } from '../data/constants'; import { updatePathWithQueryParams } from '../data/utils'; import useMobileResponsive from '../data/utils/useMobileResponsive'; @@ -17,11 +19,13 @@ import useMobileResponsive from '../data/utils/useMobileResponsive'; const ChangePasswordPrompt = ({ variant, redirectUrl }) => { const isMobileView = useMobileResponsive(); const [redirectToResetPasswordPage, setRedirectToResetPasswordPage] = useState(false); + const cohesionEventData = useSelector(state => state.cohesion.eventData); const handlers = { handleToggleOff: () => { if (variant === 'block') { setRedirectToResetPasswordPage(true); } else { + trackCohesionEvent(cohesionEventData); window.location.href = redirectUrl || getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL); } }, diff --git a/src/login/tests/ChangePasswordPrompt.test.jsx b/src/login/tests/ChangePasswordPrompt.test.jsx index f544a55c6..8dc280689 100644 --- a/src/login/tests/ChangePasswordPrompt.test.jsx +++ b/src/login/tests/ChangePasswordPrompt.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Provider } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; @@ -7,12 +8,23 @@ import { } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; import { MemoryRouter } from 'react-router-dom'; +import configureStore from 'redux-mock-store'; +import mockTagular from '../../cohesion/utils'; import { RESET_PAGE } from '../../data/constants'; import ChangePasswordPrompt from '../ChangePasswordPrompt'; const IntlChangePasswordPrompt = injectIntl(ChangePasswordPrompt); const mockedNavigator = jest.fn(); +const mockStore = configureStore(); +mockTagular(); + +const eventData = { + pageType: 'test-page', + elementType: 'test-element-type', + webElementText: 'test-element-text', + webElementName: 'test-element-name', +}; jest.mock('react-router-dom', () => ({ ...(jest.requireActual('react-router-dom')), @@ -21,8 +33,14 @@ jest.mock('react-router-dom', () => ({ describe('ChangePasswordPromptTests', () => { let props = {}; + let store = {}; + + const initialState = { + cohesion: { eventData: {} }, + }; beforeAll(() => { + store = mockStore(initialState); Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation(query => ({ @@ -31,38 +49,54 @@ describe('ChangePasswordPromptTests', () => { }); }); - it('[nudge modal] should redirect to next url when user clicks close button', () => { + it('[nudge modal] should redirect to next url when user clicks close button', async () => { const dashboardUrl = getConfig().BASE_URL.concat('/dashboard'); props = { variant: 'nudge', redirectUrl: dashboardUrl, }; + store = mockStore({ + ...initialState, + cohesion: { + eventData, + }, + }); + delete window.location; window.location = { href: getConfig().BASE_URL }; render( - - - + + + + + , ); fireEvent.click(screen.getByText('Close')); - expect(window.location.href).toBe(dashboardUrl); + await expect(window.location.href).toBe(dashboardUrl); }); it('[block modal] should redirect to reset password page when user clicks outside modal', async () => { props = { variant: 'block', }; - + store = mockStore({ + ...initialState, + cohesion: { + eventData, + }, + }); render( - - - + + + + + , ); diff --git a/src/login/tests/LoginFailure.test.jsx b/src/login/tests/LoginFailure.test.jsx index 7a352933e..0b92c45a7 100644 --- a/src/login/tests/LoginFailure.test.jsx +++ b/src/login/tests/LoginFailure.test.jsx @@ -1,10 +1,12 @@ import React from 'react'; +import { Provider } from 'react-redux'; import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { render, screen, } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; +import configureStore from 'redux-mock-store'; import { ACCOUNT_LOCKED_OUT, @@ -25,13 +27,27 @@ import LoginFailureMessage from '../LoginFailure'; jest.mock('@edx/frontend-platform/auth', () => ({ getAuthService: jest.fn(), })); +const mockStore = configureStore(); const IntlLoginFailureMessage = injectIntl(LoginFailureMessage); +const eventData = { + pageType: 'test-page', + elementType: 'test-element-type', + webElementText: 'test-element-text', + webElementName: 'test-element-name', +}; + describe('LoginFailureMessage', () => { let props = {}; + let store = {}; + + const initialState = { + cohesion: { eventData: {} }, + }; beforeAll(() => { + store = mockStore(initialState); Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation(query => ({ @@ -298,11 +314,19 @@ describe('LoginFailureMessage', () => { errorCount: 0, }; + store = mockStore({ + ...initialState, + cohesion: { + eventData, + }, + }); render( - - - + + + + + , ); @@ -323,12 +347,20 @@ describe('LoginFailureMessage', () => { errorCode: REQUIRE_PASSWORD_CHANGE, errorCount: 0, }; + store = mockStore({ + ...initialState, + cohesion: { + eventData, + }, + }); render( - - - + + + + + , );