fix: fixed nudge password edge case

openedx · Oct 18, 2024 · 7979d97 · 7979d97
1 parent f086a16
commit 7979d97
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 15 deletions.
diff --git 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,18 +11,21 @@ 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';
 
 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
@@ -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(
       <IntlProvider locale="en">
-        <MemoryRouter>
-          <IntlChangePasswordPrompt {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlChangePasswordPrompt {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 
     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(
       <IntlProvider locale="en">
-        <MemoryRouter>
-          <IntlChangePasswordPrompt {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlChangePasswordPrompt {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 

diff --git 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(
       <IntlProvider locale="en">
-        <MemoryRouter>
-          <IntlLoginFailureMessage {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlLoginFailureMessage {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 
@@ -323,12 +347,20 @@ describe('LoginFailureMessage', () => {
       errorCode: REQUIRE_PASSWORD_CHANGE,
       errorCount: 0,
     };
+    store = mockStore({
+      ...initialState,
+      cohesion: {
+        eventData,
+      },
+    });
 
     render(
       <IntlProvider locale="en">
-        <MemoryRouter>
-          <IntlLoginFailureMessage {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlLoginFailureMessage {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );