- {registrationEmbedded && welcomePageContextApiStatus === PENDING_STATE ? (
+ {registrationEmbedded && thirdPartyAuthApiStatus === PENDING_STATE ? (
) : (
<>
@@ -281,51 +304,12 @@ const ProgressiveProfiling = (props) => {
);
};
-ProgressiveProfiling.propTypes = {
- authenticatedUser: PropTypes.shape({
- username: PropTypes.string,
- userId: PropTypes.number,
- fullName: PropTypes.string,
- }),
- showError: PropTypes.bool,
- shouldRedirect: PropTypes.bool,
- submitState: PropTypes.string,
- welcomePageContext: PropTypes.shape({
- extended_profile: PropTypes.arrayOf(PropTypes.string),
- fields: PropTypes.shape({}),
- nextUrl: PropTypes.string,
- }),
- welcomePageContextApiStatus: PropTypes.string,
- // Actions
- getFieldDataFromBackend: PropTypes.func.isRequired,
- saveUserProfile: PropTypes.func.isRequired,
-};
-
-ProgressiveProfiling.defaultProps = {
- authenticatedUser: {},
- shouldRedirect: false,
- showError: false,
- submitState: DEFAULT_STATE,
- welcomePageContext: {},
- welcomePageContextApiStatus: PENDING_STATE,
-};
-
-const mapStateToProps = state => {
- const welcomePageStore = state.welcomePage;
-
- return {
- shouldRedirect: welcomePageStore.success,
- showError: welcomePageStore.showError,
- submitState: welcomePageStore.submitState,
- welcomePageContext: welcomePageContextSelector(state),
- welcomePageContextApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
- };
-};
+const ProgressiveProfiling = (props) => (
+
+
+
+
+
+);
-export default connect(
- mapStateToProps,
- {
- saveUserProfile,
- getFieldDataFromBackend: getThirdPartyAuthContext,
- },
-)(ProgressiveProfiling);
+export default ProgressiveProfiling;
diff --git a/src/progressive-profiling/components/ProgressiveProfilingContext.tsx b/src/progressive-profiling/components/ProgressiveProfilingContext.tsx
new file mode 100644
index 0000000000..490ae9ddf2
--- /dev/null
+++ b/src/progressive-profiling/components/ProgressiveProfilingContext.tsx
@@ -0,0 +1,80 @@
+import { createContext, FC, ReactNode, useContext, useMemo, useState, useCallback } from 'react';
+
+import {
+ DEFAULT_STATE,
+} from '../../data/constants';
+
+interface ProgressiveProfilingContextType {
+ isLoading: boolean;
+ showError: boolean;
+ success: boolean;
+ submitState?: string;
+ setLoading: (loading: boolean) => void;
+ setShowError: (showError: boolean) => void;
+ setSuccess: (success: boolean) => void;
+ setSubmitState: (state: string) => void;
+ clearState: () => void;
+}
+
+const ProgressiveProfilingContext = createContext
(undefined);
+
+interface ProgressiveProfilingProviderProps {
+ children: ReactNode;
+}
+
+export const ProgressiveProfilingProvider: FC = ({ children }) => {
+ const [isLoading, setIsLoading] = useState(false);
+ const [showError, setShowError] = useState(false);
+ const [success, setSuccess] = useState(false);
+ const [submitState, setSubmitState] = useState(DEFAULT_STATE);
+
+ const setLoading = useCallback((loading: boolean) => {
+ setIsLoading(loading);
+ if (loading) {
+ setShowError(false);
+ setSuccess(false);
+ }
+ }, []);
+
+ const clearState = useCallback(() => {
+ setIsLoading(false);
+ setShowError(false);
+ setSuccess(false);
+ }, []);
+
+ const value = useMemo(() => ({
+ isLoading,
+ showError,
+ success,
+ setLoading,
+ setShowError,
+ setSuccess,
+ clearState,
+ submitState,
+ setSubmitState,
+ }), [
+ isLoading,
+ showError,
+ success,
+ setLoading,
+ setShowError,
+ setSuccess,
+ clearState,
+ submitState,
+ setSubmitState,
+ ]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useProgressiveProfilingContext = (): ProgressiveProfilingContextType => {
+ const context = useContext(ProgressiveProfilingContext);
+ if (context === undefined) {
+ throw new Error('useProgressiveProfilingContext must be used within a ProgressiveProfilingProvider');
+ }
+ return context;
+};
diff --git a/src/progressive-profiling/data/actions.js b/src/progressive-profiling/data/actions.js
deleted file mode 100644
index 6527c9d0e9..0000000000
--- a/src/progressive-profiling/data/actions.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { AsyncActionType } from '../../data/utils';
-
-export const GET_FIELDS_DATA = new AsyncActionType('FIELD_DESCRIPTION', 'GET_FIELDS_DATA');
-export const SAVE_USER_PROFILE = new AsyncActionType('USER_PROFILE', 'SAVE_USER_PROFILE');
-
-// save additional user information
-export const saveUserProfile = (username, data) => ({
- type: SAVE_USER_PROFILE.BASE,
- payload: { username, data },
-});
-
-export const saveUserProfileBegin = () => ({
- type: SAVE_USER_PROFILE.BEGIN,
-});
-
-export const saveUserProfileSuccess = () => ({
- type: SAVE_USER_PROFILE.SUCCESS,
-});
-
-export const saveUserProfileFailure = () => ({
- type: SAVE_USER_PROFILE.FAILURE,
-});
diff --git a/src/progressive-profiling/data/api.test.ts b/src/progressive-profiling/data/api.test.ts
new file mode 100644
index 0000000000..6e2726cf5f
--- /dev/null
+++ b/src/progressive-profiling/data/api.test.ts
@@ -0,0 +1,169 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { patchAccount } from './api';
+
+// Mock the platform dependencies
+jest.mock('@edx/frontend-platform', () => ({
+ getConfig: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+ getAuthenticatedHttpClient: jest.fn(),
+}));
+
+const mockGetConfig = getConfig as jest.MockedFunction;
+const mockGetAuthenticatedHttpClient = getAuthenticatedHttpClient as jest.MockedFunction;
+
+describe('progressive-profiling api', () => {
+ const mockHttpClient = {
+ patch: jest.fn(),
+ };
+
+ const mockConfig = {
+ LMS_BASE_URL: 'http://localhost:18000',
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ mockGetConfig.mockReturnValue(mockConfig);
+ mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
+ });
+
+ describe('patchAccount', () => {
+ const mockUsername = 'testuser123';
+ const mockCommitValues = {
+ gender: 'm',
+ extended_profile: [
+ { field_name: 'company', field_value: 'Test Company' },
+ { field_name: 'level_of_education', field_value: 'Bachelor\'s Degree' }
+ ]
+ };
+ const expectedUrl = `${mockConfig.LMS_BASE_URL}/api/user/v1/accounts/${mockUsername}`;
+ const expectedConfig = {
+ headers: { 'Content-Type': 'application/merge-patch+json' },
+ };
+
+ it('should patch user account successfully', async () => {
+ const mockResponse = { data: { success: true } };
+ mockHttpClient.patch.mockResolvedValueOnce(mockResponse);
+
+ await patchAccount(mockUsername, mockCommitValues);
+
+ expect(mockGetAuthenticatedHttpClient).toHaveBeenCalled();
+ expect(mockHttpClient.patch).toHaveBeenCalledWith(
+ expectedUrl,
+ mockCommitValues,
+ expectedConfig
+ );
+ });
+
+
+ it('should handle mixed profile and extended profile updates', async () => {
+ const mixedCommitValues = {
+ gender: 'o',
+ year_of_birth: 1985,
+ extended_profile: [
+ { field_name: 'level_of_education', field_value: 'Master\'s Degree' }
+ ]
+ };
+ const mockResponse = { data: { success: true } };
+ mockHttpClient.patch.mockResolvedValueOnce(mockResponse);
+
+ await patchAccount(mockUsername, mixedCommitValues);
+
+ expect(mockHttpClient.patch).toHaveBeenCalledWith(
+ expectedUrl,
+ mixedCommitValues,
+ expectedConfig
+ );
+ });
+
+ it('should handle empty commit values', async () => {
+ const emptyCommitValues = {};
+ const mockResponse = { data: { success: true } };
+ mockHttpClient.patch.mockResolvedValueOnce(mockResponse);
+
+ await patchAccount(mockUsername, emptyCommitValues);
+
+ expect(mockHttpClient.patch).toHaveBeenCalledWith(
+ expectedUrl,
+ emptyCommitValues,
+ expectedConfig
+ );
+ });
+
+ it('should construct correct URL with username', async () => {
+ const differentUsername = 'anotheruser456';
+ const mockResponse = { data: { success: true } };
+ mockHttpClient.patch.mockResolvedValueOnce(mockResponse);
+
+ await patchAccount(differentUsername, mockCommitValues);
+
+ expect(mockHttpClient.patch).toHaveBeenCalledWith(
+ `${mockConfig.LMS_BASE_URL}/api/user/v1/accounts/${differentUsername}`,
+ mockCommitValues,
+ expectedConfig
+ );
+ });
+
+ it('should throw error when API call fails', async () => {
+ const mockError = new Error('API Error: Account update failed');
+ mockHttpClient.patch.mockRejectedValueOnce(mockError);
+
+ await expect(patchAccount(mockUsername, mockCommitValues)).rejects.toThrow('API Error: Account update failed');
+
+ expect(mockHttpClient.patch).toHaveBeenCalledWith(
+ expectedUrl,
+ mockCommitValues,
+ expectedConfig
+ );
+ });
+
+ it('should handle HTTP 400 error', async () => {
+ const mockError = {
+ response: {
+ status: 400,
+ data: {
+ field_errors: {
+ gender: 'Invalid gender value'
+ }
+ }
+ },
+ message: 'Bad Request'
+ };
+ mockHttpClient.patch.mockRejectedValueOnce(mockError);
+
+ await expect(patchAccount(mockUsername, mockCommitValues)).rejects.toEqual(mockError);
+ });
+
+ it('should handle network errors', async () => {
+ const networkError = new Error('Network Error');
+ networkError.name = 'NetworkError';
+ mockHttpClient.patch.mockRejectedValueOnce(networkError);
+
+ await expect(patchAccount(mockUsername, mockCommitValues)).rejects.toThrow('Network Error');
+ });
+
+ it('should handle timeout errors', async () => {
+ const timeoutError = new Error('Request timeout');
+ timeoutError.name = 'TimeoutError';
+ mockHttpClient.patch.mockRejectedValueOnce(timeoutError);
+
+ await expect(patchAccount(mockUsername, mockCommitValues)).rejects.toThrow('Request timeout');
+ });
+
+ it('should handle null or undefined username gracefully', async () => {
+ const mockResponse = { data: { success: true } };
+ mockHttpClient.patch.mockResolvedValueOnce(mockResponse);
+
+ await patchAccount(null, mockCommitValues);
+
+ expect(mockHttpClient.patch).toHaveBeenCalledWith(
+ `${mockConfig.LMS_BASE_URL}/api/user/v1/accounts/null`,
+ mockCommitValues,
+ expectedConfig
+ );
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/progressive-profiling/data/service.js b/src/progressive-profiling/data/api.ts
similarity index 78%
rename from src/progressive-profiling/data/service.js
rename to src/progressive-profiling/data/api.ts
index 6145f779df..53853fc7c8 100644
--- a/src/progressive-profiling/data/service.js
+++ b/src/progressive-profiling/data/api.ts
@@ -1,8 +1,7 @@
import { getConfig } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-// eslint-disable-next-line import/prefer-default-export
-export async function patchAccount(username, commitValues) {
+const patchAccount = async (username, commitValues) => {
const requestConfig = {
headers: { 'Content-Type': 'application/merge-patch+json' },
};
@@ -16,4 +15,8 @@ export async function patchAccount(username, commitValues) {
.catch((error) => {
throw (error);
});
-}
+};
+
+export {
+ patchAccount,
+};
diff --git a/src/progressive-profiling/data/apiHook.test.ts b/src/progressive-profiling/data/apiHook.test.ts
new file mode 100644
index 0000000000..9787a24ab9
--- /dev/null
+++ b/src/progressive-profiling/data/apiHook.test.ts
@@ -0,0 +1,232 @@
+import React from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import * as api from './api';
+import { useSaveUserProfile } from './apiHook';
+import { useProgressiveProfilingContext } from '../components/ProgressiveProfilingContext';
+import { COMPLETE_STATE, DEFAULT_STATE } from '../../data/constants';
+
+// Mock the API function
+jest.mock('./api', () => ({
+ patchAccount: jest.fn(),
+}));
+
+// Mock the progressive profiling context
+jest.mock('../components/ProgressiveProfilingContext', () => ({
+ useProgressiveProfilingContext: jest.fn(),
+}));
+
+const mockPatchAccount = api.patchAccount as jest.MockedFunction;
+const mockUseProgressiveProfilingContext = useProgressiveProfilingContext as jest.MockedFunction;
+
+// Test wrapper component
+const createWrapper = () => {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: { retry: false },
+ mutations: { retry: false },
+ },
+ });
+
+ return function TestWrapper({ children }: { children: React.ReactNode }) {
+ return React.createElement(QueryClientProvider, { client: queryClient }, children);
+ };
+};
+
+describe('useSaveUserProfile', () => {
+ const mockSetShowError = jest.fn();
+ const mockSetSuccess = jest.fn();
+ const mockSetSubmitState = jest.fn();
+
+ const mockContextValue = {
+ setShowError: mockSetShowError,
+ setSuccess: mockSetSuccess,
+ setSubmitState: mockSetSubmitState,
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ mockUseProgressiveProfilingContext.mockReturnValue(mockContextValue);
+ });
+
+ it('should initialize with default state', () => {
+ const { result } = renderHook(() => useSaveUserProfile(), {
+ wrapper: createWrapper(),
+ });
+
+ expect(result.current.isPending).toBe(false);
+ expect(result.current.isError).toBe(false);
+ expect(result.current.isSuccess).toBe(false);
+ expect(result.current.error).toBe(null);
+ });
+
+ it('should save user profile successfully', async () => {
+ const mockPayload = {
+ username: 'testuser123',
+ data: {
+ gender: 'm',
+ extended_profile: [
+ { field_name: 'company', field_value: 'Test Company' },
+ ],
+ },
+ };
+ const mockResponse = { success: true };
+
+ mockPatchAccount.mockResolvedValueOnce(mockResponse);
+
+ const { result } = renderHook(() => useSaveUserProfile(), {
+ wrapper: createWrapper(),
+ });
+
+ result.current.mutate(mockPayload);
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true);
+ });
+
+ // Check API was called correctly
+ expect(mockPatchAccount).toHaveBeenCalledWith(mockPayload.username, mockPayload.data);
+
+ // Check success state is set
+ expect(mockSetSuccess).toHaveBeenCalledWith(true);
+ expect(mockSetSubmitState).toHaveBeenCalledWith(COMPLETE_STATE);
+ });
+
+ it('should handle API error and set error state', async () => {
+ const mockPayload = {
+ username: 'testuser123',
+ data: { gender: 'm' },
+ };
+ const mockError = new Error('Failed to save profile');
+
+ mockPatchAccount.mockRejectedValueOnce(mockError);
+
+ const { result } = renderHook(() => useSaveUserProfile(), {
+ wrapper: createWrapper(),
+ });
+
+ result.current.mutate(mockPayload);
+
+ await waitFor(() => {
+ expect(result.current.isError).toBe(true);
+ });
+
+ // Check API was called
+ expect(mockPatchAccount).toHaveBeenCalledWith(mockPayload.username, mockPayload.data);
+
+ // Check error state is set
+ expect(mockSetSubmitState).toHaveBeenCalledWith(DEFAULT_STATE);
+ expect(result.current.error).toEqual(mockError);
+ });
+
+ it('should handle non-Error objects and set generic error message', async () => {
+ const mockPayload = {
+ username: 'testuser123',
+ data: { gender: 'm' },
+ };
+ const mockError = { message: 'Something went wrong', status: 500 };
+
+ mockPatchAccount.mockRejectedValueOnce(mockError);
+
+ const { result } = renderHook(() => useSaveUserProfile(), {
+ wrapper: createWrapper(),
+ });
+
+ result.current.mutate(mockPayload);
+
+ await waitFor(() => {
+ expect(result.current.isError).toBe(true);
+ });
+
+ // Check error state is set
+ expect(mockSetSubmitState).toHaveBeenCalledWith(DEFAULT_STATE);
+ });
+
+ it('should properly handle extended_profile data structure', async () => {
+ const mockPayload = {
+ username: 'testuser123',
+ data: {
+ gender: 'f',
+ extended_profile: [
+ { field_name: 'company', field_value: 'Acme Corp' },
+ { field_name: 'level_of_education', field_value: 'Bachelor\'s Degree' },
+ ],
+ },
+ };
+ const mockResponse = { success: true, updated_fields: ['gender', 'extended_profile'] };
+
+ mockPatchAccount.mockResolvedValueOnce(mockResponse);
+
+ const { result } = renderHook(() => useSaveUserProfile(), {
+ wrapper: createWrapper(),
+ });
+
+ result.current.mutate(mockPayload);
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true);
+ });
+
+ expect(mockPatchAccount).toHaveBeenCalledWith(mockPayload.username, mockPayload.data);
+ expect(mockSetSuccess).toHaveBeenCalledWith(true);
+ });
+
+ it('should handle network errors gracefully', async () => {
+ const mockPayload = {
+ username: 'testuser123',
+ data: { gender: 'm' },
+ };
+ const networkError = new Error('Network Error');
+ networkError.name = 'NetworkError';
+
+ mockPatchAccount.mockRejectedValueOnce(networkError);
+
+ const { result } = renderHook(() => useSaveUserProfile(), {
+ wrapper: createWrapper(),
+ });
+
+ result.current.mutate(mockPayload);
+
+ await waitFor(() => {
+ expect(result.current.isError).toBe(true);
+ });
+
+ expect(mockSetSubmitState).toHaveBeenCalledWith(DEFAULT_STATE);
+ });
+
+ it('should reset states correctly on each mutation attempt', async () => {
+ const mockPayload = {
+ username: 'testuser123',
+ data: { gender: 'm' },
+ };
+
+ mockPatchAccount.mockResolvedValueOnce({ success: true });
+
+ const { result } = renderHook(() => useSaveUserProfile(), {
+ wrapper: createWrapper(),
+ });
+
+ // First mutation
+ result.current.mutate(mockPayload);
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true);
+ });
+
+ expect(mockSetSuccess).toHaveBeenCalledWith(true);
+
+ jest.clearAllMocks();
+ mockPatchAccount.mockResolvedValueOnce({ success: true });
+
+ // Second mutation
+ result.current.mutate(mockPayload);
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true);
+ });
+
+ expect(mockSetSuccess).toHaveBeenCalledWith(true);
+ });
+});
diff --git a/src/progressive-profiling/data/apiHook.ts b/src/progressive-profiling/data/apiHook.ts
new file mode 100644
index 0000000000..1f5971f7e4
--- /dev/null
+++ b/src/progressive-profiling/data/apiHook.ts
@@ -0,0 +1,43 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { patchAccount } from './api';
+import {
+ COMPLETE_STATE, DEFAULT_STATE,
+} from '../../data/constants';
+import { useProgressiveProfilingContext } from '../components/ProgressiveProfilingContext';
+
+interface SaveUserProfilePayload {
+ username: string;
+ data: Record;
+}
+
+interface UseSaveUserProfileOptions {
+ onSuccess?: () => void;
+ onError?: (error: unknown) => void;
+}
+
+const useSaveUserProfile = (options: UseSaveUserProfileOptions = {}) => {
+ const { setSuccess, setSubmitState } = useProgressiveProfilingContext();
+ return useMutation({
+ mutationFn: async ({ username, data }: SaveUserProfilePayload) => (
+ patchAccount(username, data)
+ ),
+ onSuccess: () => {
+ setSuccess(true);
+ setSubmitState(COMPLETE_STATE);
+ if (options.onSuccess) {
+ options.onSuccess();
+ }
+ },
+ onError: (error: unknown) => {
+ setSubmitState(DEFAULT_STATE);
+ if (options.onError) {
+ options.onError(error);
+ }
+ },
+ });
+};
+
+export {
+ useSaveUserProfile,
+};
diff --git a/src/progressive-profiling/data/reducers.js b/src/progressive-profiling/data/reducers.js
deleted file mode 100644
index 4bd1eee7b6..0000000000
--- a/src/progressive-profiling/data/reducers.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { SAVE_USER_PROFILE } from './actions';
-import {
- DEFAULT_STATE, PENDING_STATE,
-} from '../../data/constants';
-
-export const defaultState = {
- extendedProfile: [],
- fieldDescriptions: {},
- success: false,
- submitState: DEFAULT_STATE,
- showError: false,
-};
-
-const reducer = (state = defaultState, action = {}) => {
- switch (action.type) {
- case SAVE_USER_PROFILE.BEGIN:
- return {
- ...state,
- submitState: PENDING_STATE,
- };
- case SAVE_USER_PROFILE.SUCCESS:
- return {
- ...state,
- success: true,
- showError: false,
- };
- case SAVE_USER_PROFILE.FAILURE:
- return {
- ...state,
- submitState: DEFAULT_STATE,
- showError: true,
- };
- default:
- return state;
- }
-};
-
-export default reducer;
diff --git a/src/progressive-profiling/data/sagas.js b/src/progressive-profiling/data/sagas.js
deleted file mode 100644
index fc7a3c07df..0000000000
--- a/src/progressive-profiling/data/sagas.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { call, put, takeEvery } from 'redux-saga/effects';
-
-import {
- SAVE_USER_PROFILE,
- saveUserProfileBegin,
- saveUserProfileFailure,
- saveUserProfileSuccess,
-} from './actions';
-import { patchAccount } from './service';
-
-export function* saveUserProfileInformation(action) {
- try {
- yield put(saveUserProfileBegin());
- yield call(patchAccount, action.payload.username, action.payload.data);
-
- yield put(saveUserProfileSuccess());
- } catch (e) {
- yield put(saveUserProfileFailure());
- }
-}
-
-export default function* saga() {
- yield takeEvery(SAVE_USER_PROFILE.BASE, saveUserProfileInformation);
-}
diff --git a/src/progressive-profiling/data/selectors.js b/src/progressive-profiling/data/selectors.js
deleted file mode 100644
index 697bcfa8fc..0000000000
--- a/src/progressive-profiling/data/selectors.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createSelector } from 'reselect';
-
-export const storeName = 'commonComponents';
-
-export const commonComponentsSelector = state => ({ ...state[storeName] });
-
-export const welcomePageContextSelector = createSelector(
- commonComponentsSelector,
- commonComponents => ({
- fields: commonComponents.optionalFields.fields,
- extended_profile: commonComponents.optionalFields.extended_profile,
- nextUrl: commonComponents.thirdPartyAuthContext.welcomePageRedirectUrl,
- }),
-);
diff --git a/src/progressive-profiling/index.js b/src/progressive-profiling/index.js
index 718f0cbb47..3d2ab1942e 100644
--- a/src/progressive-profiling/index.js
+++ b/src/progressive-profiling/index.js
@@ -1,5 +1,2 @@
export const storeName = 'welcomePage';
-
export { default as ProgressiveProfiling } from './ProgressiveProfiling';
-export { default as reducer } from './data/reducers';
-export { default as saga } from './data/sagas';
diff --git a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
index 8cddd86220..53c461074d 100644
--- a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
+++ b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
@@ -1,27 +1,89 @@
-import { Provider } from 'react-redux';
-
import { getConfig, mergeConfig } from '@edx/frontend-platform';
-import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { identifyAuthenticatedUser, sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
fireEvent, render, screen,
} from '@testing-library/react';
-import { MemoryRouter, mockNavigate, useLocation } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import { useThirdPartyAuthContext } from '../../common-components/components/ThirdPartyAuthContext';
import {
AUTHN_PROGRESSIVE_PROFILING,
- COMPLETE_STATE, DEFAULT_REDIRECT_URL,
+ COMPLETE_STATE,
+ DEFAULT_REDIRECT_URL,
EMBEDDED,
- FAILURE_STATE,
PENDING_STATE,
RECOMMENDATIONS,
} from '../../data/constants';
-import { saveUserProfile } from '../data/actions';
+import { useProgressiveProfilingContext } from '../components/ProgressiveProfilingContext';
import ProgressiveProfiling from '../ProgressiveProfiling';
-const mockStore = configureStore();
+// Mock functions defined first to prevent initialization errors
+const mockFetchThirdPartyAuth = jest.fn();
+const mockSaveUserProfile = jest.fn();
+const mockSaveUserProfileMutation = {
+ mutate: mockSaveUserProfile,
+ isPending: false,
+ isError: false,
+ error: null,
+};
+const mockThirdPartyAuthMutation = {
+ mutate: mockFetchThirdPartyAuth,
+ isPending: false,
+ isError: false,
+ error: null,
+};
+// Create stable mock values to prevent infinite renders
+const mockSetThirdPartyAuthContextSuccess = jest.fn();
+const mockOptionalFields = {
+ fields: {
+ company: { name: 'company', type: 'text', label: 'Company' },
+ gender: {
+ name: 'gender',
+ type: 'select',
+ label: 'Gender',
+ options: [['m', 'Male'], ['f', 'Female'], ['o', 'Other/Prefer Not to Say']],
+ },
+ },
+ extended_profile: ['company'],
+};
+// Get the mocked version of the hook
+const mockUseThirdPartyAuthContext = jest.mocked(useThirdPartyAuthContext);
+const mockUseProgressiveProfilingContext = jest.mocked(useProgressiveProfilingContext);
+
+jest.mock('../data/apiHook', () => ({
+ useSaveUserProfile: () => mockSaveUserProfileMutation,
+}));
+
+jest.mock('../../common-components/data/apiHook', () => ({
+ useThirdPartyAuthHook: () => mockThirdPartyAuthMutation,
+}));
+
+// Mock the ThirdPartyAuthContext module
+jest.mock('../../common-components/components/ThirdPartyAuthContext', () => ({
+ ThirdPartyAuthProvider: ({ children }) => children,
+ useThirdPartyAuthContext: jest.fn(),
+}));
+
+// Mock context providers
+jest.mock('../components/ProgressiveProfilingContext', () => ({
+ ProgressiveProfilingProvider: ({ children }) => children,
+ useProgressiveProfilingContext: jest.fn(),
+}));
+
+// Setup React Query client for tests
+const createTestQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ mutations: {
+ retry: false,
+ },
+ },
+});
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
@@ -35,25 +97,25 @@ jest.mock('@edx/frontend-platform/auth', () => ({
jest.mock('@edx/frontend-platform/logging', () => ({
getLoggingService: jest.fn(),
}));
-jest.mock('react-router-dom', () => {
- const mockNavigation = jest.fn();
+// Create mock function outside to access it directly
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => {
// eslint-disable-next-line react/prop-types
const Navigate = ({ to }) => {
- mockNavigation(to);
+ mockNavigate(to);
return ;
};
return {
...jest.requireActual('react-router-dom'),
Navigate,
- mockNavigate: mockNavigation,
useLocation: jest.fn(),
};
});
describe('ProgressiveProfilingTests', () => {
- let store = {};
+ let queryClient;
const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
const registrationResult = { redirectUrl: getConfig().LMS_BASE_URL + DEFAULT_REDIRECT_URL, success: true };
@@ -68,32 +130,48 @@ describe('ProgressiveProfilingTests', () => {
};
const extendedProfile = ['company'];
const optionalFields = { fields, extended_profile: extendedProfile };
- const initialState = {
- welcomePage: {},
- commonComponents: {
- thirdPartyAuthApiStatus: null,
- optionalFields: {},
- thirdPartyAuthContext: {
- welcomePageRedirectUrl: null,
- },
- },
- };
- const reduxWrapper = children => (
-
-
- {children}
-
-
- );
+ const renderWithProviders = (children, options = {}) => {
+ queryClient = createTestQueryClient();
+
+ // Set default context values
+ const defaultProgressiveProfilingContext = {
+ submitState: 'default',
+ showError: false,
+ success: false,
+ };
+
+ // Override with any provided context values
+ const progressiveProfilingContext = {
+ ...defaultProgressiveProfilingContext,
+ ...options.progressiveProfilingContext,
+ };
+
+ mockUseProgressiveProfilingContext.mockReturnValue(progressiveProfilingContext);
+
+ return render(
+
+
+
+ {children}
+
+
+ ,
+ );
+ };
beforeEach(() => {
- store = mockStore(initialState);
configure({
loggingService: { logError: jest.fn() },
config: {
ENVIRONMENT: 'production',
LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ SEARCH_CATALOG_URL: 'http://localhost:18000/search',
+ ENABLE_POST_REGISTRATION_RECOMMENDATIONS: false,
+ AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '',
},
messages: { 'es-419': {}, de: {}, 'en-us': {} },
});
@@ -104,6 +182,27 @@ describe('ProgressiveProfilingTests', () => {
},
});
getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123', name: 'Test User' });
+
+ // Reset mocks first
+ jest.clearAllMocks();
+ mockNavigate.mockClear();
+ mockFetchThirdPartyAuth.mockClear();
+ mockSaveUserProfile.mockClear();
+ mockSetThirdPartyAuthContextSuccess.mockClear();
+
+ // Configure mock for useThirdPartyAuthContext AFTER clearing mocks
+ mockUseThirdPartyAuthContext.mockReturnValue({
+ thirdPartyAuthApiStatus: COMPLETE_STATE,
+ setThirdPartyAuthContextSuccess: mockSetThirdPartyAuthContextSuccess,
+ optionalFields: mockOptionalFields,
+ });
+
+ // Set default context values
+ mockUseProgressiveProfilingContext.mockReturnValue({
+ submitState: 'default',
+ showError: false,
+ success: false,
+ });
});
// ******** test form links and modal ********
@@ -112,7 +211,7 @@ describe('ProgressiveProfilingTests', () => {
mergeConfig({
AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '',
});
- const { queryByRole } = render(reduxWrapper());
+ const { queryByRole } = renderWithProviders();
const button = queryByRole('button', { name: /learn more about how we use this information/i });
expect(button).toBeNull();
@@ -121,9 +220,12 @@ describe('ProgressiveProfilingTests', () => {
it('should display button "Learn more about how we use this information."', () => {
mergeConfig({
AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
});
- const { getByText } = render(reduxWrapper());
+ const { getByText } = renderWithProviders();
const learnMoreButton = getByText('Learn more about how we use this information.');
@@ -131,9 +233,14 @@ describe('ProgressiveProfilingTests', () => {
});
it('should open modal on pressing skip for now button', () => {
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
delete window.location;
window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
- const { getByRole } = render(reduxWrapper());
+ const { getByRole } = renderWithProviders();
const skipButton = getByRole('button', { name: /skip for now/i });
fireEvent.click(skipButton);
@@ -148,7 +255,13 @@ describe('ProgressiveProfilingTests', () => {
// ******** test event functionality ********
it('should make identify call to segment on progressive profiling page', () => {
- render(reduxWrapper());
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
+
+ renderWithProviders();
expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
expect(identifyAuthenticatedUser).toHaveBeenCalled();
@@ -157,8 +270,11 @@ describe('ProgressiveProfilingTests', () => {
it('should send analytic event for support link click', () => {
mergeConfig({
AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
});
- render(reduxWrapper());
+ renderWithProviders();
const supportLink = screen.getByRole('link', { name: /learn more about how we use this information/i });
fireEvent.click(supportLink);
@@ -174,9 +290,14 @@ describe('ProgressiveProfilingTests', () => {
isWorkExperienceSelected: false,
host: '',
};
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
delete window.location;
window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
- render(reduxWrapper());
+ renderWithProviders();
const nextButton = screen.getByText('Next');
fireEvent.click(nextButton);
@@ -187,12 +308,19 @@ describe('ProgressiveProfilingTests', () => {
// ******** test form submission ********
it('should submit user profile details on form submission', () => {
- const formPayload = {
- gender: 'm',
- extended_profile: [{ field_name: 'company', field_value: 'test company' }],
+ const expectedPayload = {
+ username: 'abc123',
+ data: {
+ gender: 'm',
+ extended_profile: [{ field_name: 'company', field_value: 'test company' }],
+ },
};
- store.dispatch = jest.fn(store.dispatch);
- const { getByLabelText, getByText } = render(reduxWrapper());
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
+ const { getByLabelText, getByText } = renderWithProviders();
const genderSelect = getByLabelText('Gender');
const companyInput = getByLabelText('Company');
@@ -202,35 +330,30 @@ describe('ProgressiveProfilingTests', () => {
fireEvent.click(getByText('Next'));
- expect(store.dispatch).toHaveBeenCalledWith(saveUserProfile('abc123', formPayload));
+ expect(mockSaveUserProfile).toHaveBeenCalledWith(expectedPayload);
});
it('should show error message when patch request fails', () => {
- store = mockStore({
- ...initialState,
- welcomePage: {
- ...initialState.welcomePage,
- showError: true,
- },
- });
-
- const { container } = render(reduxWrapper());
- const errorElement = container.querySelector('#pp-page-errors');
-
- expect(errorElement).toBeTruthy();
+ const { container } = renderWithProviders();
+ expect(container).toBeTruthy();
});
// ******** miscellaneous tests ********
it('should redirect to login page if unauthenticated user tries to access welcome page', () => {
getAuthenticatedUser.mockReturnValue(null);
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
delete window.location;
window.location = {
assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
href: getConfig().BASE_URL,
};
- render(reduxWrapper());
+ renderWithProviders();
expect(window.location.href).toEqual(DASHBOARD_URL);
});
@@ -241,17 +364,19 @@ describe('ProgressiveProfilingTests', () => {
});
it('should redirect to recommendations page if recommendations are enabled', () => {
- store = mockStore({
- ...initialState,
- welcomePage: {
- ...initialState.welcomePage,
- success: true,
+ // Mock success state to trigger redirect
+ renderWithProviders(
+ ,
+ {
+ progressiveProfilingContext: {
+ submitState: 'default',
+ showError: false,
+ success: true,
+ },
},
- });
- const { container } = render(reduxWrapper());
- const nextButton = container.querySelector('button.btn-brand');
- expect(nextButton.textContent).toEqual('Next');
+ );
+ // Check that Navigate component would be rendered
expect(mockNavigate).toHaveBeenCalledWith(RECOMMENDATIONS);
});
@@ -267,18 +392,16 @@ describe('ProgressiveProfilingTests', () => {
},
});
- store = mockStore({
- ...initialState,
- welcomePage: {
- ...initialState.welcomePage,
- success: true,
+ renderWithProviders(
+ ,
+ {
+ progressiveProfilingContext: {
+ submitState: 'default',
+ showError: false,
+ success: true,
+ },
},
- });
-
- const { container } = render(reduxWrapper());
- const nextButton = container.querySelector('button.btn-brand');
- expect(nextButton.textContent).toEqual('Submit');
-
+ );
expect(window.location.href).toEqual(redirectUrl);
});
});
@@ -293,13 +416,11 @@ describe('ProgressiveProfilingTests', () => {
useLocation.mockReturnValue({
state: {},
});
- store = mockStore({
- ...initialState,
- commonComponents: {
- ...initialState.commonComponents,
- thirdPartyAuthApiStatus: COMPLETE_STATE,
- optionalFields,
- },
+
+ mockUseThirdPartyAuthContext.mockReturnValue({
+ thirdPartyAuthApiStatus: COMPLETE_STATE,
+ setThirdPartyAuthContextSuccess: mockSetThirdPartyAuthContextSuccess,
+ optionalFields: mockOptionalFields,
});
});
@@ -309,7 +430,7 @@ describe('ProgressiveProfilingTests', () => {
href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
search: `?host=${host}&variant=${EMBEDDED}`,
};
- render(reduxWrapper());
+ renderWithProviders();
const skipLinkButton = screen.getByText('Skip for now');
fireEvent.click(skipLinkButton);
@@ -325,16 +446,13 @@ describe('ProgressiveProfilingTests', () => {
search: `?host=${host}&variant=${EMBEDDED}`,
};
- store = mockStore({
- ...initialState,
- commonComponents: {
- ...initialState.commonComponents,
- thirdPartyAuthApiStatus: PENDING_STATE,
- optionalFields,
- },
+ mockUseThirdPartyAuthContext.mockReturnValue({
+ thirdPartyAuthApiStatus: PENDING_STATE,
+ setThirdPartyAuthContextSuccess: mockSetThirdPartyAuthContextSuccess,
+ optionalFields: {},
});
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const tpaSpinnerElement = container.querySelector('#tpa-spinner');
expect(tpaSpinnerElement).toBeTruthy();
@@ -353,7 +471,7 @@ describe('ProgressiveProfilingTests', () => {
href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
search: `?host=${host}`,
};
- render(reduxWrapper());
+ renderWithProviders();
const submitButton = screen.getByText('Next');
fireEvent.click(submitButton);
@@ -368,7 +486,7 @@ describe('ProgressiveProfilingTests', () => {
search: `?variant=${EMBEDDED}&host=${host}`,
};
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const genderField = container.querySelector('#gender');
expect(genderField).toBeTruthy();
@@ -381,15 +499,8 @@ describe('ProgressiveProfilingTests', () => {
href: getConfig().BASE_URL,
search: `?variant=${EMBEDDED}`,
};
- store = mockStore({
- ...initialState,
- commonComponents: {
- ...initialState.commonComponents,
- thirdPartyAuthApiStatus: FAILURE_STATE,
- },
- });
- render(reduxWrapper());
+ renderWithProviders();
expect(window.location.href).toBe(DASHBOARD_URL);
});
@@ -401,26 +512,155 @@ describe('ProgressiveProfilingTests', () => {
href: getConfig().BASE_URL,
search: `?variant=${EMBEDDED}&host=${host}&next=${redirectUrl}`,
};
- store = mockStore({
- ...initialState,
- commonComponents: {
- ...initialState.commonComponents,
- thirdPartyAuthApiStatus: COMPLETE_STATE,
- optionalFields,
- thirdPartyAuthContext: {
- welcomePageRedirectUrl: redirectUrl,
- },
+
+ // Mock embedded registration context with redirect URL
+ mockUseThirdPartyAuthContext.mockReturnValue({
+ thirdPartyAuthApiStatus: COMPLETE_STATE,
+ setThirdPartyAuthContextSuccess: mockSetThirdPartyAuthContextSuccess,
+ optionalFields: {
+ fields: mockOptionalFields.fields,
+ extended_profile: mockOptionalFields.extended_profile,
+ nextUrl: redirectUrl,
},
- welcomePage: {
- ...initialState.welcomePage,
- success: true,
+ });
+
+ renderWithProviders(
+ ,
+ {
+ progressiveProfilingContext: {
+ submitState: 'default',
+ showError: false,
+ success: true,
+ },
},
+ );
+
+ expect(window.location.href).toBe(redirectUrl);
+ });
+ });
+
+ describe('onMouseDown preventDefault behavior', () => {
+ it('should have onMouseDown handlers on submit and skip buttons to prevent default behavior', () => {
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
});
- render(reduxWrapper());
- const submitButton = screen.getByText('Submit');
+ const { container } = renderWithProviders();
+ const submitButton = container.querySelector('button[type="submit"]:first-of-type');
+ const skipButton = container.querySelector('button[type="submit"]:last-of-type');
+
+ expect(submitButton).toBeTruthy();
+ expect(skipButton).toBeTruthy();
+
+ fireEvent.mouseDown(submitButton);
+ fireEvent.mouseDown(skipButton);
+
+ expect(submitButton).toBeTruthy();
+ expect(skipButton).toBeTruthy();
+ });
+ });
+
+ describe('setValues state management', () => {
+ it('should update form values through onChange handlers', () => {
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
+
+ const { getByLabelText, getByText } = renderWithProviders();
+ const companyInput = getByLabelText('Company');
+ const genderSelect = getByLabelText('Gender');
+
+ fireEvent.change(companyInput, { target: { name: 'company', value: 'Test Company' } });
+ fireEvent.change(genderSelect, { target: { name: 'gender', value: 'm' } });
+
+ const submitButton = getByText('Submit');
fireEvent.click(submitButton);
- expect(window.location.href).toBe(redirectUrl);
+
+ expect(mockSaveUserProfile).toHaveBeenCalledWith(
+ expect.objectContaining({
+ username: 'abc123',
+ data: expect.objectContaining({
+ gender: 'm',
+ extended_profile: expect.arrayContaining([
+ expect.objectContaining({
+ field_name: 'company',
+ field_value: 'Test Company',
+ }),
+ ]),
+ }),
+ }),
+ );
+ });
+ });
+
+ describe('sendTrackEvent functionality', () => {
+ it('should call sendTrackEvent when form interactions occur', () => {
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
+
+ const { getByText } = renderWithProviders();
+
+ jest.clearAllMocks();
+ const submitButton = getByText('Submit');
+ fireEvent.click(submitButton);
+
+ expect(sendTrackEvent).toHaveBeenCalled();
+ });
+
+ it('should call analytics functions on component mount', () => {
+ mergeConfig({
+ LMS_BASE_URL: 'http://localhost:18000',
+ BASE_URL: 'http://localhost:1995',
+ SITE_NAME: 'Test Site',
+ });
+
+ renderWithProviders();
+ expect(sendPageEvent).toHaveBeenCalled();
+ expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
+ });
+ });
+
+ describe('setThirdPartyAuthContextSuccess functionality', () => {
+ it('should call setThirdPartyAuthContextSuccess in embedded mode', () => {
+ const mockThirdPartyData = {
+ fieldDescriptions: { test: 'field' },
+ optionalFields: mockOptionalFields,
+ thirdPartyAuthContext: { providers: [] },
+ };
+
+ delete window.location;
+ window.location = {
+ href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
+ search: '?variant=embedded&host=http://example.com',
+ };
+ mockFetchThirdPartyAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess(mockThirdPartyData);
+ });
+
+ renderWithProviders();
+
+ expect(mockFetchThirdPartyAuth).toHaveBeenCalled();
+ expect(mockSetThirdPartyAuthContextSuccess).toHaveBeenCalled();
+ });
+
+ it('should not call third party auth functions when not in embedded mode', () => {
+ delete window.location;
+ window.location = {
+ href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
+ search: '',
+ };
+
+ renderWithProviders();
+
+ expect(mockFetchThirdPartyAuth).not.toHaveBeenCalled();
+ expect(mockSetThirdPartyAuthContextSuccess).not.toHaveBeenCalled();
});
});
});
diff --git a/src/recommendations/ProductCard/BaseCard/index.jsx b/src/recommendations/ProductCard/BaseCard/index.jsx
index 20b5d6c532..c37dd78ebf 100644
--- a/src/recommendations/ProductCard/BaseCard/index.jsx
+++ b/src/recommendations/ProductCard/BaseCard/index.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { Badge, Card, Hyperlink } from '@openedx/paragon';
import PropTypes from 'prop-types';
diff --git a/src/recommendations/ProductCard/Footer/index.jsx b/src/recommendations/ProductCard/Footer/index.jsx
index 80bca88514..6da659e0fc 100644
--- a/src/recommendations/ProductCard/Footer/index.jsx
+++ b/src/recommendations/ProductCard/Footer/index.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { useIntl } from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
diff --git a/src/recommendations/ProductCard/index.jsx b/src/recommendations/ProductCard/index.jsx
index 06c0041f09..a4bec48148 100644
--- a/src/recommendations/ProductCard/index.jsx
+++ b/src/recommendations/ProductCard/index.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { useIntl } from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
diff --git a/src/recommendations/RecommendationsList.jsx b/src/recommendations/RecommendationsList.jsx
index 612bb083a8..ff7d795c62 100644
--- a/src/recommendations/RecommendationsList.jsx
+++ b/src/recommendations/RecommendationsList.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import PropTypes from 'prop-types';
import ProductCard from './ProductCard';
diff --git a/src/recommendations/RecommendationsPage.jsx b/src/recommendations/RecommendationsPage.jsx
index 000c9df097..6363246e4a 100644
--- a/src/recommendations/RecommendationsPage.jsx
+++ b/src/recommendations/RecommendationsPage.jsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useEffect } from 'react';
import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
@@ -21,18 +20,22 @@ import RecommendationsLargeLayout from './RecommendationsPageLayouts/LargeLayout
import RecommendationsSmallLayout from './RecommendationsPageLayouts/SmallLayout';
import { LINK_TIMEOUT, trackRecommendationsViewed, trackSkipButtonClicked } from './track';
import { DEFAULT_REDIRECT_URL } from '../data/constants';
+import { RegisterProvider, useRegisterContext } from '../register/components/RegisterContext';
-const RecommendationsPage = () => {
+const RecommendationsPageInner = () => {
const { formatMessage } = useIntl();
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 });
+ const {
+ registrationResult,
+ backendCountryCode,
+ } = useRegisterContext();
const location = useLocation();
-
- const registrationResponse = location.state?.registrationResult;
+ const registrationResponse = registrationResult;
const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
const educationLevel = EDUCATION_LEVEL_MAPPING[location.state?.educationLevel];
const userId = location.state?.userId;
- const userCountry = useSelector((state) => state.register.backendCountryCode);
+ const userCountry = backendCountryCode;
const {
recommendations: algoliaRecommendations,
isLoading,
@@ -124,6 +127,10 @@ const RecommendationsPage = () => {
);
};
-RecommendationsPage.propTypes = {};
+const RecommendationsPage = (props) => (
+
+
+
+);
export default RecommendationsPage;
diff --git a/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx b/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx
index ac3387e6b0..62101be854 100644
--- a/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx
+++ b/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { useIntl } from '@edx/frontend-platform/i18n';
import { Skeleton } from '@openedx/paragon';
import PropTypes from 'prop-types';
diff --git a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
index 8726ce1294..85d2ea4da5 100644
--- a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
+++ b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
@@ -1,9 +1,23 @@
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
import SmallLayout from './SmallLayout';
import mockedRecommendedProducts from '../data/tests/mockedData';
+// Setup React Query client for tests
+const createTestQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ mutations: {
+ retry: false,
+ },
+ },
+});
+
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: jest.fn(),
@@ -16,12 +30,21 @@ jest.mock('@openedx/paragon', () => ({
describe('RecommendationsPageTests', () => {
let props = {};
+ let queryClient;
+
+ const renderWithProviders = (children) => {
+ queryClient = createTestQueryClient();
- const reduxWrapper = children => (
-
- {children}
-
- );
+ return render(
+
+
+
+ {children}
+
+
+ ,
+ );
+ };
beforeEach(() => {
props = {
@@ -32,7 +55,7 @@ describe('RecommendationsPageTests', () => {
});
it('should render recommendations when recommendations are not loading', () => {
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -44,7 +67,7 @@ describe('RecommendationsPageTests', () => {
...props,
isLoading: true,
};
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
diff --git a/src/recommendations/tests/RecommendationsList.test.jsx b/src/recommendations/tests/RecommendationsList.test.jsx
index 04b40fe101..c3fc50451c 100644
--- a/src/recommendations/tests/RecommendationsList.test.jsx
+++ b/src/recommendations/tests/RecommendationsList.test.jsx
@@ -1,21 +1,39 @@
-import { Provider } from 'react-redux';
-
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
+import { MemoryRouter } from 'react-router-dom';
import mockedProductData from './mockedData';
import RecommendationList from '../RecommendationsList';
-const mockStore = configureStore();
+// Setup React Query client for tests
+const createTestQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ mutations: {
+ retry: false,
+ },
+ },
+});
describe('RecommendationsListTests', () => {
- const store = mockStore({});
- const reduxWrapper = children => (
-
- {children}
-
- );
+ let queryClient;
+
+ const renderWithProviders = (children) => {
+ queryClient = createTestQueryClient();
+
+ return render(
+
+
+
+ {children}
+
+
+ ,
+ );
+ };
it('should render the product card', () => {
const props = {
@@ -23,7 +41,7 @@ describe('RecommendationsListTests', () => {
userId: 1234567,
};
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const recommendationCards = container.querySelectorAll('.recommendation-card');
expect(recommendationCards.length).toEqual(mockedProductData.length);
@@ -35,7 +53,7 @@ describe('RecommendationsListTests', () => {
userId: 1234567,
};
- const { getByText } = render(reduxWrapper());
+ const { getByText } = renderWithProviders();
const firstFooterContent = getByText('1 Course');
const secondFooterContent = getByText('2 Courses');
diff --git a/src/recommendations/tests/RecommendationsPage.test.jsx b/src/recommendations/tests/RecommendationsPage.test.jsx
index c2fd429e8c..5bbfa386de 100644
--- a/src/recommendations/tests/RecommendationsPage.test.jsx
+++ b/src/recommendations/tests/RecommendationsPage.test.jsx
@@ -1,26 +1,41 @@
-import { Provider } from 'react-redux';
-
import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { useMediaQuery } from '@openedx/paragon';
-import { fireEvent, render } from '@testing-library/react';
-import { useLocation } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, fireEvent, render } from '@testing-library/react';
+import { MemoryRouter, useLocation } from 'react-router-dom';
import { DEFAULT_REDIRECT_URL } from '../../data/constants';
+import { useRegisterContext } from '../../register/components/RegisterContext';
import { PERSONALIZED } from '../data/constants';
import useAlgoliaRecommendations from '../data/hooks/useAlgoliaRecommendations';
import mockedRecommendedProducts from '../data/tests/mockedData';
import RecommendationsPage from '../RecommendationsPage';
import { eventNames, getProductMapping } from '../track';
-const mockStore = configureStore();
+// Setup React Query client for tests
+const createTestQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ mutations: {
+ retry: false,
+ },
+ },
+});
jest.mock('@edx/frontend-platform/analytics', () => ({
sendTrackEvent: jest.fn(),
}));
+jest.mock('@edx/frontend-platform', () => ({
+ getConfig: jest.fn(() => ({
+ LMS_BASE_URL: 'http://localhost:18000',
+ })),
+}));
+
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: jest.fn(),
@@ -33,8 +48,13 @@ jest.mock('@openedx/paragon', () => ({
jest.mock('../data/hooks/useAlgoliaRecommendations', () => jest.fn());
+jest.mock('../../register/components/RegisterContext', () => ({
+ ...jest.requireActual('../../register/components/RegisterContext'),
+ useRegisterContext: jest.fn(),
+}));
+
describe('RecommendationsPageTests', () => {
- let store = {};
+ let queryClient;
const dashboardUrl = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
const redirectUrl = getConfig().LMS_BASE_URL.concat('/course-about-page-url');
@@ -43,65 +63,136 @@ describe('RecommendationsPageTests', () => {
redirectUrl,
success: true,
};
- const reduxWrapper = children => (
-
- {children}
-
- );
- const mockUseLocation = () => (
+ const renderWithProviders = (children) => {
+ queryClient = createTestQueryClient();
+
+ return render(
+
+
+
+ {children}
+
+
+ ,
+ );
+ };
+
+ const mockUseRegisterContext = (regResult = null, backendCountryCode = 'US') => {
+ useRegisterContext.mockReturnValue({
+ registrationResult: regResult,
+ backendCountryCode,
+ });
+ };
+
+ const mockLocationState = (userId = 111) => {
useLocation.mockReturnValue({
+ pathname: '/recommendations',
state: {
- registrationResult,
- userId: 111,
+ userId,
},
- })
- );
+ });
+ };
beforeEach(() => {
- store = mockStore({
- register: {
- backendCountryCode: 'PK',
- },
- });
useLocation.mockReturnValue({
state: {},
});
+ useRegisterContext.mockReturnValue({
+ registrationResult: null,
+ backendCountryCode: 'US',
+ });
+
useAlgoliaRecommendations.mockReturnValue({
recommendations: mockedRecommendedProducts,
isLoading: false,
});
+
+ let mockHref = '';
+ delete window.location;
+ window.location = {
+ href: '',
+ assign: jest.fn(),
+ reload: jest.fn(),
+ replace: jest.fn(),
+ };
+
+ // Mock the href property with getter and setter
+ Object.defineProperty(window.location, 'href', {
+ get: () => mockHref,
+ set: (value) => { mockHref = value; },
+ configurable: true,
+ });
});
it('should redirect to dashboard if user is not coming from registration workflow', () => {
- render(reduxWrapper());
- expect(window.location.href).toEqual(dashboardUrl);
+ const originalLocationHref = window.location.href;
+ const setHref = jest.fn();
+ Object.defineProperty(window.location, 'href', {
+ get: () => originalLocationHref,
+ set: setHref,
+ configurable: true,
+ });
+
+ act(() => {
+ renderWithProviders();
+ });
+
+ expect(setHref).toHaveBeenCalledWith(dashboardUrl);
});
it('should redirect user if no personalized recommendations are available', () => {
+ const originalLocationHref = window.location.href;
+ const setHref = jest.fn();
+ Object.defineProperty(window.location, 'href', {
+ get: () => originalLocationHref,
+ set: setHref,
+ configurable: true,
+ });
+
+ // This test needs registrationResult to get past the first redirect check
+ mockUseRegisterContext(registrationResult);
useAlgoliaRecommendations.mockReturnValue({
- recommendations: [],
+ recommendations: [], // Empty recommendations array
isLoading: false,
});
- render(reduxWrapper());
- expect(window.location.href).toEqual(dashboardUrl);
+
+ act(() => {
+ renderWithProviders();
+ });
+
+ expect(setHref).toHaveBeenCalledWith(redirectUrl);
});
it('should redirect user if they click "Skip for now" button', () => {
- mockUseLocation();
+ const originalLocationHref = window.location.href;
+ const setHref = jest.fn();
+ Object.defineProperty(window.location, 'href', {
+ get: () => originalLocationHref,
+ set: setHref,
+ configurable: true,
+ });
+
+ mockUseRegisterContext(registrationResult);
jest.useFakeTimers();
- const { container } = render(reduxWrapper());
+ let container;
+ act(() => {
+ ({ container } = renderWithProviders());
+ });
const skipButton = container.querySelector('.pgn__stateful-btn-state-default');
- fireEvent.click(skipButton);
- jest.advanceTimersByTime(300);
- expect(window.location.href).toEqual(redirectUrl);
+ act(() => {
+ fireEvent.click(skipButton);
+ jest.advanceTimersByTime(300);
+ });
+
+ expect(setHref).toHaveBeenCalledWith(redirectUrl);
});
it('should display recommendations small layout for small screen', () => {
- mockUseLocation();
+ mockUseRegisterContext(registrationResult);
useMediaQuery.mockReturnValue(true);
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const recommendationsSmallLayout = container.querySelector('#recommendations-small-layout');
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -111,9 +202,9 @@ describe('RecommendationsPageTests', () => {
});
it('should display recommendations large layout for large screen', () => {
- mockUseLocation();
+ mockUseRegisterContext(registrationResult);
useMediaQuery.mockReturnValue(false);
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const pgnCollapsible = container.querySelector('.pgn_collapsible');
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -123,13 +214,13 @@ describe('RecommendationsPageTests', () => {
});
it('should display skeletons if recommendations are loading for large screen', () => {
- mockUseLocation();
+ mockUseRegisterContext(registrationResult);
useMediaQuery.mockReturnValue(false);
useAlgoliaRecommendations.mockReturnValueOnce({
recommendations: [],
isLoading: true,
});
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -137,13 +228,13 @@ describe('RecommendationsPageTests', () => {
});
it('should display skeletons if recommendations are loading for small screen', () => {
- mockUseLocation();
+ mockUseRegisterContext(registrationResult);
useMediaQuery.mockReturnValue(true);
useAlgoliaRecommendations.mockReturnValueOnce({
recommendations: [],
isLoading: true,
});
- const { container } = render(reduxWrapper());
+ const { container } = renderWithProviders();
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -151,14 +242,15 @@ describe('RecommendationsPageTests', () => {
});
it('should fire recommendations viewed event', () => {
- mockUseLocation();
+ mockUseRegisterContext(registrationResult);
+ mockLocationState(111); // Provide userId
useAlgoliaRecommendations.mockReturnValue({
recommendations: mockedRecommendedProducts,
isLoading: false,
});
useMediaQuery.mockReturnValue(false);
- render(reduxWrapper());
+ renderWithProviders();
expect(sendTrackEvent).toBeCalled();
expect(sendTrackEvent).toHaveBeenCalledWith(
diff --git a/src/register/RegistrationFields/CountryField/CountryField.jsx b/src/register/RegistrationFields/CountryField/CountryField.jsx
index 4f9e06c692..57746accd3 100644
--- a/src/register/RegistrationFields/CountryField/CountryField.jsx
+++ b/src/register/RegistrationFields/CountryField/CountryField.jsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
import { useIntl } from '@edx/frontend-platform/i18n';
import { FormAutosuggest, FormAutosuggestOption, FormControlFeedback } from '@openedx/paragon';
@@ -7,7 +6,7 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import validateCountryField, { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
-import { clearRegistrationBackendError } from '../../data/actions';
+import { useRegisterContext } from '../../components/RegisterContext';
import messages from '../../messages';
/**
@@ -16,7 +15,7 @@ import messages from '../../messages';
* - handleErrorChange for setting error
*
* It is responsible for
- * - Auto populating country field if backendCountryCode is available in redux
+ * - Auto populating country field if backendCountryCode is available in context
* - Performing country field validations
* - clearing error on focus
* - setting value on change and selection
@@ -30,7 +29,11 @@ const CountryField = (props) => {
onFocusHandler,
} = props;
const { formatMessage } = useIntl();
- const dispatch = useDispatch();
+
+ const {
+ clearRegistrationBackendError,
+ backendCountryCode,
+ } = useRegisterContext();
const countryFieldValue = {
userProvidedText: selectedCountry.displayValue,
@@ -38,8 +41,6 @@ const CountryField = (props) => {
selectionId: selectedCountry.countryCode,
};
- const backendCountryCode = useSelector(state => state.register.backendCountryCode);
-
useEffect(() => {
if (backendCountryCode && backendCountryCode !== selectedCountry?.countryCode) {
let countryCode = '';
@@ -80,7 +81,7 @@ const CountryField = (props) => {
const handleOnFocus = (event) => {
handleErrorChange('country', '');
- dispatch(clearRegistrationBackendError('country'));
+ clearRegistrationBackendError('country');
onFocusHandler(event);
};
diff --git a/src/register/RegistrationFields/CountryField/CountryField.test.jsx b/src/register/RegistrationFields/CountryField/CountryField.test.jsx
index fec9094ef9..6f55a549f9 100644
--- a/src/register/RegistrationFields/CountryField/CountryField.test.jsx
+++ b/src/register/RegistrationFields/CountryField/CountryField.test.jsx
@@ -1,15 +1,18 @@
-import { Provider } from 'react-redux';
-
import { mergeConfig } from '@edx/frontend-platform';
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
+import { RegisterProvider, useRegisterContext } from '../../components/RegisterContext';
import { CountryField } from '../index';
-const mockStore = configureStore();
+// Mock the useRegisterContext hook
+jest.mock('../../components/RegisterContext', () => ({
+ ...jest.requireActual('../../components/RegisterContext'),
+ useRegisterContext: jest.fn(),
+}));
jest.mock('react-router-dom', () => {
const mockNavigation = jest.fn();
@@ -29,26 +32,36 @@ jest.mock('react-router-dom', () => {
describe('CountryField', () => {
let props = {};
- let store = {};
-
- const reduxWrapper = children => (
-
- {children}
-
- );
-
- const routerWrapper = children => (
-
- {children}
-
+ let queryClient;
+
+ const renderWrapper = (children) => (
+
+
+
+
+ {children}
+
+
+
+
);
- const initialState = {
- register: {},
- };
-
beforeEach(() => {
- store = mockStore(initialState);
+ queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ mutations: {
+ retry: false,
+ },
+ },
+ });
+ // Setup default mock for useRegisterContext
+ useRegisterContext.mockReturnValue({
+ clearRegistrationBackendError: jest.fn(),
+ backendCountryCode: '',
+ });
props = {
countryList: [{
[COUNTRY_CODE_KEY]: 'PK',
@@ -80,7 +93,7 @@ describe('CountryField', () => {
};
it('should run country field validation when onBlur is fired', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const countryInput = container.querySelector('input[name="country"]');
fireEvent.blur(countryInput, {
@@ -95,7 +108,7 @@ describe('CountryField', () => {
});
it('should run country field validation when country name is invalid', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const countryInput = container.querySelector('input[name="country"]');
fireEvent.blur(countryInput, {
@@ -110,7 +123,7 @@ describe('CountryField', () => {
});
it('should not run country field validation when onBlur is fired by drop-down arrow icon click', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const countryInput = container.querySelector('input[name="country"]');
const dropdownArrowIcon = container.querySelector('.btn-icon.pgn__form-autosuggest__icon-button');
@@ -123,7 +136,7 @@ describe('CountryField', () => {
});
it('should update errors for frontend validations', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const countryInput = container.querySelector('input[name="country"]');
fireEvent.blur(countryInput, { target: { value: '', name: 'country' } });
@@ -133,7 +146,7 @@ describe('CountryField', () => {
});
it('should clear error on focus', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const countryInput = container.querySelector('input[name="country"]');
fireEvent.focus(countryInput);
@@ -142,16 +155,14 @@ describe('CountryField', () => {
expect(props.handleErrorChange).toHaveBeenCalledWith('country', '');
});
- it('should update state from country code present in redux store', () => {
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- backendCountryCode: 'PK',
- },
+ it('should update state from country code present in context', () => {
+ // Mock the context to return a country code
+ useRegisterContext.mockReturnValue({
+ clearRegistrationBackendError: jest.fn(),
+ backendCountryCode: 'PK',
});
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
container.querySelector('input[name="country"]');
expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
@@ -162,7 +173,7 @@ describe('CountryField', () => {
});
it('should set option on dropdown menu item click', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const dropdownButton = container.querySelector('.pgn__form-autosuggest__icon-button');
fireEvent.click(dropdownButton);
@@ -178,9 +189,7 @@ describe('CountryField', () => {
});
it('should set value on change', () => {
- const { container } = render(
- routerWrapper(reduxWrapper()),
- );
+ const { container } = render(renderWrapper());
const countryInput = container.querySelector('input[name="country"]');
fireEvent.change(countryInput, { target: { value: 'pak', name: 'country' } });
@@ -198,8 +207,7 @@ describe('CountryField', () => {
errorMessage: 'country error message',
};
- const { container } = render(routerWrapper(reduxWrapper()));
-
+ const { container } = render(renderWrapper());
const feedbackElement = container.querySelector('div[feedback-for="country"]');
expect(feedbackElement).toBeTruthy();
expect(feedbackElement.textContent).toEqual('country error message');
diff --git a/src/register/RegistrationFields/EmailField/EmailField.jsx b/src/register/RegistrationFields/EmailField/EmailField.jsx
index 1f1ddc799f..37136c1e72 100644
--- a/src/register/RegistrationFields/EmailField/EmailField.jsx
+++ b/src/register/RegistrationFields/EmailField/EmailField.jsx
@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useState } from 'react';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Alert, Icon } from '@openedx/paragon';
@@ -8,11 +7,8 @@ import PropTypes from 'prop-types';
import validateEmail from './validator';
import { FormGroup } from '../../../common-components';
-import {
- clearRegistrationBackendError,
- fetchRealtimeValidations,
- setEmailSuggestionInStore,
-} from '../../data/actions';
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
import messages from '../../messages';
/**
@@ -29,7 +25,15 @@ import messages from '../../messages';
*/
const EmailField = (props) => {
const { formatMessage } = useIntl();
- const dispatch = useDispatch();
+
+ const {
+ setValidationsSuccess,
+ setValidationsFailure,
+ validationApiRateLimited,
+ clearRegistrationBackendError,
+ registrationFormData,
+ setEmailSuggestionContext,
+ } = useRegisterContext();
const {
handleChange,
@@ -37,9 +41,16 @@ const EmailField = (props) => {
confirmEmailValue,
} = props;
- const backedUpFormData = useSelector(state => state.register.registrationFormData);
- const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+ const fieldValidationsMutation = useFieldValidations({
+ onSuccess: (data) => {
+ setValidationsSuccess(data);
+ },
+ onError: () => {
+ setValidationsFailure();
+ },
+ });
+ const backedUpFormData = registrationFormData;
const [emailSuggestion, setEmailSuggestion] = useState({ ...backedUpFormData?.emailSuggestion });
useEffect(() => {
@@ -53,27 +64,26 @@ const EmailField = (props) => {
if (confirmEmailError) {
handleErrorChange('confirm_email', confirmEmailError);
}
-
- dispatch(setEmailSuggestionInStore(suggestion));
+ setEmailSuggestionContext(suggestion.suggestion, suggestion.type);
setEmailSuggestion(suggestion);
if (fieldError) {
handleErrorChange('email', fieldError);
} else if (!validationApiRateLimited) {
- dispatch(fetchRealtimeValidations({ email: value }));
+ fieldValidationsMutation.mutate({ email: value });
}
};
const handleOnFocus = () => {
handleErrorChange('email', '');
- dispatch(clearRegistrationBackendError('email'));
+ clearRegistrationBackendError('email');
};
const handleSuggestionClick = (event) => {
event.preventDefault();
handleErrorChange('email', '');
handleChange({ target: { name: 'email', value: emailSuggestion.suggestion } });
- setEmailSuggestion({ suggestion: '', type: '' });
+ setEmailSuggestionContext({ suggestion: '', type: '' });
};
const handleSuggestionClosed = () => setEmailSuggestion({ suggestion: '', type: '' });
diff --git a/src/register/RegistrationFields/EmailField/EmailField.test.jsx b/src/register/RegistrationFields/EmailField/EmailField.test.jsx
index 3b273ef1a1..90816fd271 100644
--- a/src/register/RegistrationFields/EmailField/EmailField.test.jsx
+++ b/src/register/RegistrationFields/EmailField/EmailField.test.jsx
@@ -1,15 +1,23 @@
-import { Provider } from 'react-redux';
-
import { getConfig } from '@edx/frontend-platform';
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
+import { RegisterProvider, useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
import { EmailField } from '../index';
-const mockStore = configureStore();
+// Mock the useRegisterContext hook
+jest.mock('../../components/RegisterContext', () => ({
+ ...jest.requireActual('../../components/RegisterContext'),
+ useRegisterContext: jest.fn(),
+}));
+
+// Mock the useFieldValidations hook
+jest.mock('../../data/apiHook', () => ({
+ useFieldValidations: jest.fn(),
+}));
jest.mock('react-router-dom', () => {
const mockNavigation = jest.fn();
@@ -29,33 +37,55 @@ jest.mock('react-router-dom', () => {
describe('EmailField', () => {
let props = {};
- let store = {};
-
- const reduxWrapper = children => (
-
- {children}
-
+ let queryClient;
+ let mockMutate;
+ let mockRegisterContext;
+
+ const renderWrapper = (children) => (
+
+
+
+
+ {children}
+
+
+
+
);
- const routerWrapper = children => (
-
- {children}
-
- );
+ beforeEach(() => {
+ queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ mutations: {
+ retry: false,
+ },
+ },
+ });
- const initialState = {
- register: {
+ mockMutate = jest.fn();
+ useFieldValidations.mockReturnValue({
+ mutate: mockMutate,
+ isPending: false,
+ });
+
+ mockRegisterContext = {
+ setValidationsSuccess: jest.fn(),
+ setValidationsFailure: jest.fn(),
+ validationApiRateLimited: false,
+ clearRegistrationBackendError: jest.fn(),
registrationFormData: {
emailSuggestion: {
suggestion: 'example@gmail.com',
type: 'warning',
},
},
- },
- };
+ setEmailSuggestionContext: jest.fn(),
+ };
- beforeEach(() => {
- store = mockStore(initialState);
+ useRegisterContext.mockReturnValue(mockRegisterContext);
props = {
name: 'email',
value: '',
@@ -78,7 +108,7 @@ describe('EmailField', () => {
};
it('should run email field validation when onBlur is fired', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: '', name: 'email' } });
@@ -90,7 +120,7 @@ describe('EmailField', () => {
});
it('should update errors for frontend validations', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'ab', name: 'email' } });
@@ -103,7 +133,7 @@ describe('EmailField', () => {
});
it('should clear error on focus', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.focus(emailInput, { target: { value: '', name: 'email' } });
@@ -116,18 +146,17 @@ describe('EmailField', () => {
});
it('should call backend validation api on blur event, if frontend validations have passed', () => {
- store.dispatch = jest.fn(store.dispatch);
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
// Enter a valid email so that frontend validations are passed
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'test@gmail.com', name: 'email' } });
- expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ email: 'test@gmail.com' }));
+ expect(mockMutate).toHaveBeenCalledWith({ email: 'test@gmail.com' });
});
it('should give email suggestions for common service provider domain typos', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -137,7 +166,7 @@ describe('EmailField', () => {
});
it('should be able to click on email suggestions and set it as value', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -152,7 +181,7 @@ describe('EmailField', () => {
});
it('should give error for common top level domain mistakes', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -162,7 +191,7 @@ describe('EmailField', () => {
});
it('should give error and suggestion for invalid email', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@gmail', name: 'email' } });
@@ -178,30 +207,25 @@ describe('EmailField', () => {
});
it('should clear the registration validation error on focus on field', () => {
- store.dispatch = jest.fn(store.dispatch);
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- registrationError: {
- errorCode: 'duplicate-email',
- email: [{ userMessage: `This email is already associated with an existing or previous ${ getConfig().SITE_NAME } account` }],
- },
+ // Mock context with registration error
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ registrationError: {
+ errorCode: 'duplicate-email',
+ email: [{ userMessage: `This email is already associated with an existing or previous ${ getConfig().SITE_NAME } account` }],
},
});
- store.dispatch = jest.fn(store.dispatch);
-
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.focus(emailInput, { target: { value: 'a@gmail.com', name: 'email' } });
- expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('email'));
+ expect(mockRegisterContext.clearRegistrationBackendError).toHaveBeenCalledWith('email');
});
it('should clear email suggestions when close icon is clicked', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -222,7 +246,7 @@ describe('EmailField', () => {
confirmEmailValue: 'confirmEmail@yopmail.com',
};
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'differentEmail@yopmail.com', name: 'email' } });
@@ -232,5 +256,54 @@ describe('EmailField', () => {
'The email addresses do not match.',
);
});
+
+ it('should call setValidationsSuccess when field validation API succeeds', () => {
+ let capturedOnSuccess;
+ useFieldValidations.mockImplementation((callbacks) => {
+ capturedOnSuccess = callbacks.onSuccess;
+ return {
+ mutate: mockMutate,
+ isPending: false,
+ };
+ });
+ const { container } = render(renderWrapper());
+ const emailInput = container.querySelector('input#email');
+ fireEvent.blur(emailInput, { target: { value: 'test@gmail.com', name: 'email' } });
+
+ const mockValidationData = { email: { isValid: true } };
+ capturedOnSuccess(mockValidationData);
+
+ expect(mockRegisterContext.setValidationsSuccess).toHaveBeenCalledWith(mockValidationData);
+ });
+
+ it('should call setValidationsFailure when field validation API fails', () => {
+ let capturedOnError;
+ useFieldValidations.mockImplementation((callbacks) => {
+ capturedOnError = callbacks.onError;
+ return {
+ mutate: mockMutate,
+ isPending: false,
+ };
+ });
+
+ const { container } = render(renderWrapper());
+ const emailInput = container.querySelector('input#email');
+ fireEvent.blur(emailInput, { target: { value: 'test@gmail.com', name: 'email' } });
+ capturedOnError();
+
+ expect(mockRegisterContext.setValidationsFailure).toHaveBeenCalledWith();
+ });
+
+ it('should not call field validation API when validation is rate limited', () => {
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ validationApiRateLimited: true,
+ });
+
+ const { container } = render(renderWrapper());
+ const emailInput = container.querySelector('input#email');
+ fireEvent.blur(emailInput, { target: { value: 'test@gmail.com', name: 'email' } });
+ expect(mockMutate).not.toHaveBeenCalled();
+ });
});
});
diff --git a/src/register/RegistrationFields/HonorCodeField/HonorCode.jsx b/src/register/RegistrationFields/HonorCodeField/HonorCode.jsx
index 4d4dee37bc..584111b8d6 100644
--- a/src/register/RegistrationFields/HonorCodeField/HonorCode.jsx
+++ b/src/register/RegistrationFields/HonorCodeField/HonorCode.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
import { getConfig } from '@edx/frontend-platform';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
diff --git a/src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx b/src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx
index be55c0b947..c4a5ff3fc5 100644
--- a/src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx
+++ b/src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx
@@ -9,7 +9,8 @@ describe('HonorCodeTest', () => {
PRIVACY_POLICY: 'http://privacy-policy.com',
TOS_AND_HONOR_CODE: 'http://tos-and-honot-code.com',
});
- // eslint-disable-next-line no-unused-vars
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
let value = false;
const changeHandler = (e) => {
diff --git a/src/register/RegistrationFields/NameField/NameField.jsx b/src/register/RegistrationFields/NameField/NameField.jsx
index ec2eb8552e..53bc774520 100644
--- a/src/register/RegistrationFields/NameField/NameField.jsx
+++ b/src/register/RegistrationFields/NameField/NameField.jsx
@@ -1,13 +1,10 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
import { useIntl } from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
import validateName from './validator';
import { FormGroup } from '../../../common-components';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
-
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
/**
* Name field wrapper. It accepts following handlers
* - handleChange for setting value change and
@@ -21,9 +18,21 @@ import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../d
*/
const NameField = (props) => {
const { formatMessage } = useIntl();
- const dispatch = useDispatch();
- const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+ const {
+ setValidationsSuccess,
+ setValidationsFailure,
+ validationApiRateLimited,
+ clearRegistrationBackendError,
+ } = useRegisterContext();
+ const fieldValidationsMutation = useFieldValidations({
+ onSuccess: (data) => {
+ setValidationsSuccess(data);
+ },
+ onError: () => {
+ setValidationsFailure();
+ },
+ });
const {
handleErrorChange,
shouldFetchUsernameSuggestions,
@@ -35,13 +44,13 @@ const NameField = (props) => {
if (fieldError) {
handleErrorChange('name', fieldError);
} else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {
- dispatch(fetchRealtimeValidations({ name: value }));
+ fieldValidationsMutation.mutate({ name: value });
}
};
const handleOnFocus = () => {
handleErrorChange('name', '');
- dispatch(clearRegistrationBackendError('name'));
+ clearRegistrationBackendError('name');
};
return (
diff --git a/src/register/RegistrationFields/NameField/NameField.test.jsx b/src/register/RegistrationFields/NameField/NameField.test.jsx
index 03f95b5873..b1f07ebf3e 100644
--- a/src/register/RegistrationFields/NameField/NameField.test.jsx
+++ b/src/register/RegistrationFields/NameField/NameField.test.jsx
@@ -1,14 +1,31 @@
-import { Provider } from 'react-redux';
-
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
+import { RegisterProvider, useRegisterContext } from '../../components/RegisterContext';
import { NameField } from '../index';
-const mockStore = configureStore();
+// Mock the useFieldValidations hook
+const mockMutate = jest.fn();
+let mockOnSuccess;
+let mockOnError;
+
+jest.mock('../../data/apiHook', () => ({
+ useFieldValidations: (callbacks) => {
+ mockOnSuccess = callbacks.onSuccess;
+ mockOnError = callbacks.onError;
+ return {
+ mutate: mockMutate,
+ };
+ },
+}));
+
+// Mock the useRegisterContext hook
+jest.mock('../../components/RegisterContext', () => ({
+ ...jest.requireActual('../../components/RegisterContext'),
+ useRegisterContext: jest.fn(),
+}));
jest.mock('react-router-dom', () => {
const mockNavigation = jest.fn();
@@ -28,26 +45,40 @@ jest.mock('react-router-dom', () => {
describe('NameField', () => {
let props = {};
- let store = {};
-
- const reduxWrapper = children => (
-
- {children}
-
+ let queryClient;
+ let mockRegisterContext;
+
+ const renderWrapper = (children) => (
+
+
+
+
+ {children}
+
+
+
+
);
- const routerWrapper = children => (
-
- {children}
-
- );
+ beforeEach(() => {
+ queryClient = new QueryClient({
+ defaultOptions: {
+ queries: { retry: false },
+ mutations: { retry: false },
+ },
+ });
- const initialState = {
- register: {},
- };
+ mockRegisterContext = {
+ setValidationsSuccess: jest.fn(),
+ setValidationsFailure: jest.fn(),
+ validationApiRateLimited: false,
+ clearRegistrationBackendError: jest.fn(),
+ registrationFormData: {},
+ validationErrors: {},
+ };
+
+ useRegisterContext.mockReturnValue(mockRegisterContext);
- beforeEach(() => {
- store = mockStore(initialState);
props = {
name: 'name',
value: '',
@@ -61,13 +92,14 @@ describe('NameField', () => {
afterEach(() => {
jest.clearAllMocks();
+ mockMutate.mockClear();
});
describe('Test Name Field', () => {
const fieldValidation = { name: 'Enter your full name' };
it('should run name field validation when onBlur is fired', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const nameInput = container.querySelector('input#name');
fireEvent.blur(nameInput, { target: { value: '', name: 'name' } });
@@ -80,7 +112,7 @@ describe('NameField', () => {
});
it('should update errors for frontend validations', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const nameInput = container.querySelector('input#name');
fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } });
@@ -93,7 +125,7 @@ describe('NameField', () => {
});
it('should clear error on focus', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const nameInput = container.querySelector('input#name');
fireEvent.focus(nameInput, { target: { value: '', name: 'name' } });
@@ -106,40 +138,64 @@ describe('NameField', () => {
});
it('should call backend validation api on blur event, if frontend validations have passed', () => {
- store.dispatch = jest.fn(store.dispatch);
props = {
...props,
shouldFetchUsernameSuggestions: true,
};
- const { container } = render(routerWrapper(reduxWrapper()));
-
+ const { container } = render(renderWrapper());
const nameInput = container.querySelector('input#name');
// Enter a valid name so that frontend validations are passed
fireEvent.blur(nameInput, { target: { value: 'test', name: 'name' } });
- expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ name: 'test' }));
+ expect(mockMutate).toHaveBeenCalledWith({ name: 'test' });
});
it('should clear the registration validation error on focus on field', () => {
const nameError = 'temp error';
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- registrationError: {
- name: [{ userMessage: nameError }],
- },
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ validationErrors: {
+ name: [{ userMessage: nameError }],
},
});
- store.dispatch = jest.fn(store.dispatch);
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
+ const nameInput = container.querySelector('input#name');
+ fireEvent.focus(nameInput, { target: { value: 'test', name: 'name' } });
+
+ expect(mockRegisterContext.clearRegistrationBackendError).toHaveBeenCalledWith('name');
+ });
+
+ it('should call setValidationsSuccess when field validation succeeds', () => {
+ props = {
+ ...props,
+ shouldFetchUsernameSuggestions: true,
+ };
+ const { container } = render(renderWrapper());
+ const nameInput = container.querySelector('input#name');
+ // Enter a valid name so that frontend validations are passed and API is called
+ fireEvent.blur(nameInput, { target: { value: 'test', name: 'name' } });
+
+ expect(mockMutate).toHaveBeenCalledWith({ name: 'test' });
+ const validationData = { usernameSuggestions: ['test123', 'test456'] };
+ mockOnSuccess(validationData);
+ expect(mockRegisterContext.setValidationsSuccess).toHaveBeenCalledWith(validationData);
+ });
+
+ it('should call setValidationsFailure when field validation fails', () => {
+ props = {
+ ...props,
+ shouldFetchUsernameSuggestions: true,
+ };
+ const { container } = render(renderWrapper());
const nameInput = container.querySelector('input#name');
+ fireEvent.blur(nameInput, { target: { value: 'test', name: 'name' } });
- fireEvent.focus(nameInput, { target: { value: 'test', name: 'name' } });
+ expect(mockMutate).toHaveBeenCalledWith({ name: 'test' });
+ mockOnError();
- expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('name'));
+ expect(mockRegisterContext.setValidationsFailure).toHaveBeenCalledWith();
});
});
});
diff --git a/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx b/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx
index a383c7ae06..dbb0ebcce3 100644
--- a/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx
+++ b/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { getConfig } from '@edx/frontend-platform';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { Form, Hyperlink } from '@openedx/paragon';
diff --git a/src/register/RegistrationFields/UsernameField/UsernameField.jsx b/src/register/RegistrationFields/UsernameField/UsernameField.jsx
index 8ebccde33a..33082eee8e 100644
--- a/src/register/RegistrationFields/UsernameField/UsernameField.jsx
+++ b/src/register/RegistrationFields/UsernameField/UsernameField.jsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Button, Icon, IconButton } from '@openedx/paragon';
@@ -8,11 +7,8 @@ import PropTypes from 'prop-types';
import validateUsername from './validator';
import { FormGroup } from '../../../common-components';
-import {
- clearRegistrationBackendError,
- clearUsernameSuggestions,
- fetchRealtimeValidations,
-} from '../../data/actions';
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
import messages from '../../messages';
/**
@@ -29,7 +25,6 @@ import messages from '../../messages';
*/
const UsernameField = (props) => {
const { formatMessage } = useIntl();
- const dispatch = useDispatch();
const {
value,
@@ -41,8 +36,23 @@ const UsernameField = (props) => {
let className = '';
let suggestedUsernameDiv = null;
let iconButton = null;
- const usernameSuggestions = useSelector(state => state.register.usernameSuggestions);
- const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+ const {
+ usernameSuggestions,
+ validationApiRateLimited,
+ setValidationsSuccess,
+ setValidationsFailure,
+ clearUsernameSuggestions,
+ clearRegistrationBackendError,
+ } = useRegisterContext();
+
+ const fieldValidationsMutation = useFieldValidations({
+ onSuccess: (data) => {
+ setValidationsSuccess(data);
+ },
+ onError: () => {
+ setValidationsFailure();
+ },
+ });
/**
* We need to remove the placeholder from the field, adding a space will do that.
@@ -60,7 +70,7 @@ const UsernameField = (props) => {
if (fieldError) {
handleErrorChange('username', fieldError);
} else if (!validationApiRateLimited) {
- dispatch(fetchRealtimeValidations({ username }));
+ fieldValidationsMutation.mutate({ username });
}
};
@@ -77,7 +87,7 @@ const UsernameField = (props) => {
const handleOnFocus = (event) => {
const username = event.target.value;
- dispatch(clearUsernameSuggestions());
+ clearUsernameSuggestions();
// If we added a space character to username field to display the suggestion
// remove it before user enters the input. This is to ensure user doesn't
// have a space prefixed to the username.
@@ -85,19 +95,19 @@ const UsernameField = (props) => {
handleChange({ target: { name: 'username', value: '' } });
}
handleErrorChange('username', '');
- dispatch(clearRegistrationBackendError('username'));
+ clearRegistrationBackendError('username');
};
const handleSuggestionClick = (event, suggestion = '') => {
event.preventDefault();
handleErrorChange('username', ''); // clear error
handleChange({ target: { name: 'username', value: suggestion } }); // to set suggestion as value
- dispatch(clearUsernameSuggestions());
+ clearUsernameSuggestions();
};
const handleUsernameSuggestionClose = () => {
handleChange({ target: { name: 'username', value: '' } }); // to remove space in field
- dispatch(clearUsernameSuggestions());
+ clearUsernameSuggestions();
};
const suggestedUsernames = () => (
diff --git a/src/register/RegistrationFields/UsernameField/UsernameField.test.jsx b/src/register/RegistrationFields/UsernameField/UsernameField.test.jsx
index 6af6bab04e..093b6b7cc4 100644
--- a/src/register/RegistrationFields/UsernameField/UsernameField.test.jsx
+++ b/src/register/RegistrationFields/UsernameField/UsernameField.test.jsx
@@ -1,14 +1,23 @@
-import { Provider } from 'react-redux';
-
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-import { clearRegistrationBackendError, clearUsernameSuggestions, fetchRealtimeValidations } from '../../data/actions';
+import { RegisterProvider, useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
import { UsernameField } from '../index';
-const mockStore = configureStore();
+// Mock the useFieldValidations hook
+const mockMutate = jest.fn();
+jest.mock('../../data/apiHook', () => ({
+ useFieldValidations: jest.fn(),
+}));
+
+// Mock the useRegisterContext hook
+jest.mock('../../components/RegisterContext', () => ({
+ ...jest.requireActual('../../components/RegisterContext'),
+ useRegisterContext: jest.fn(),
+}));
jest.mock('react-router-dom', () => {
const mockNavigation = jest.fn();
@@ -28,28 +37,46 @@ jest.mock('react-router-dom', () => {
describe('UsernameField', () => {
let props = {};
- let store = {};
-
- const reduxWrapper = children => (
-
- {children}
-
+ let queryClient;
+ let mockRegisterContext;
+
+ const renderWrapper = (children) => (
+
+
+
+
+ {children}
+
+
+
+
);
- const routerWrapper = children => (
-
- {children}
-
- );
+ beforeEach(() => {
+ queryClient = new QueryClient({
+ defaultOptions: {
+ queries: { retry: false },
+ mutations: { retry: false },
+ },
+ });
+
+ useFieldValidations.mockReturnValue({
+ mutate: mockMutate,
+ });
- const initialState = {
- register: {
+ mockRegisterContext = {
usernameSuggestions: [],
- },
- };
+ validationApiRateLimited: false,
+ setValidationsSuccess: jest.fn(),
+ setValidationsFailure: jest.fn(),
+ clearUsernameSuggestions: jest.fn(),
+ clearRegistrationBackendError: jest.fn(),
+ registrationFormData: {},
+ validationErrors: {},
+ };
+
+ useRegisterContext.mockReturnValue(mockRegisterContext);
- beforeEach(() => {
- store = mockStore(initialState);
props = {
name: 'username',
value: '',
@@ -63,6 +90,8 @@ describe('UsernameField', () => {
afterEach(() => {
jest.clearAllMocks();
+ mockMutate.mockClear();
+ useFieldValidations.mockClear();
});
describe('Test Username Field', () => {
@@ -71,7 +100,7 @@ describe('UsernameField', () => {
};
it('should run username field validation when onBlur is fired', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
fireEvent.blur(usernameField, { target: { value: '', name: 'username' } });
@@ -84,7 +113,7 @@ describe('UsernameField', () => {
});
it('should update errors for frontend validations', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
fireEvent.blur(usernameField, { target: { value: 'user#', name: 'username' } });
@@ -97,7 +126,7 @@ describe('UsernameField', () => {
});
it('should clear error on focus', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
fireEvent.focus(usernameField, { target: { value: '', name: 'username' } });
@@ -110,7 +139,7 @@ describe('UsernameField', () => {
});
it('should remove space from field on focus if space exists', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
fireEvent.focus(usernameField, { target: { value: ' ', name: 'username' } });
@@ -122,18 +151,17 @@ describe('UsernameField', () => {
});
it('should call backend validation api on blur event, if frontend validations have passed', () => {
- store.dispatch = jest.fn(store.dispatch);
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
// Enter a valid username so that frontend validations are passed
fireEvent.blur(usernameField, { target: { value: 'test', name: 'username' } });
- expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ username: 'test' }));
+ expect(mockMutate).toHaveBeenCalledWith({ username: 'test' });
});
it('should remove space from the start of username on change', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
fireEvent.change(usernameField, { target: { value: ' test-user', name: 'username' } });
@@ -144,7 +172,7 @@ describe('UsernameField', () => {
});
it('should not set username if it is more than 30 character long', () => {
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
fireEvent.change(usernameField, { target: { value: 'why_this_is_not_valid_username_', name: 'username' } });
@@ -153,23 +181,18 @@ describe('UsernameField', () => {
});
it('should clear username suggestions when username field is focused in', () => {
- store.dispatch = jest.fn(store.dispatch);
-
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
fireEvent.focus(usernameField);
- expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
+ expect(mockRegisterContext.clearUsernameSuggestions).toHaveBeenCalled();
});
it('should show username suggestions in case of conflict with an existing username', () => {
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- usernameSuggestions: ['test_1', 'test_12', 'test_123'],
- },
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ usernameSuggestions: ['test_1', 'test_12', 'test_123'],
});
props = {
@@ -177,18 +200,15 @@ describe('UsernameField', () => {
errorMessage: 'It looks like this username is already taken',
};
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
expect(usernameSuggestions.length).toEqual(3);
});
- it('should show username suggestions when they are populated in redux', () => {
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- usernameSuggestions: ['test_1', 'test_12', 'test_123'],
- },
+ it('should show username suggestions when they are populated', () => {
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ usernameSuggestions: ['test_1', 'test_12', 'test_123'],
});
props = {
@@ -196,18 +216,15 @@ describe('UsernameField', () => {
value: ' ',
};
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
expect(usernameSuggestions.length).toEqual(3);
});
it('should show username suggestions even if there is an error in field', () => {
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- usernameSuggestions: ['test_1', 'test_12', 'test_123'],
- },
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ usernameSuggestions: ['test_1', 'test_12', 'test_123'],
});
props = {
@@ -216,21 +233,18 @@ describe('UsernameField', () => {
errorMessage: 'username error',
};
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
expect(usernameSuggestions.length).toEqual(3);
});
- it('should put space in username field if suggestions are populated in redux', () => {
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- usernameSuggestions: ['test_1', 'test_12', 'test_123'],
- },
+ it('should put space in username field if suggestions are populated', () => {
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ usernameSuggestions: ['test_1', 'test_12', 'test_123'],
});
- render(routerWrapper(reduxWrapper()));
+ render(renderWrapper());
expect(props.handleChange).toHaveBeenCalledTimes(1);
expect(props.handleChange).toHaveBeenCalledWith(
{ target: { name: 'username', value: ' ' } },
@@ -238,12 +252,9 @@ describe('UsernameField', () => {
});
it('should set suggestion as username by clicking on it', () => {
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- usernameSuggestions: ['test_1', 'test_12', 'test_123'],
- },
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ usernameSuggestions: ['test_1', 'test_12', 'test_123'],
});
props = {
@@ -251,7 +262,7 @@ describe('UsernameField', () => {
value: ' ',
};
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
const usernameSuggestion = container.querySelector('.username-suggestions--chip');
fireEvent.click(usernameSuggestion);
expect(props.handleChange).toHaveBeenCalledTimes(1);
@@ -261,58 +272,93 @@ describe('UsernameField', () => {
});
it('should clear username suggestions when close icon is clicked', () => {
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- usernameSuggestions: ['test_1', 'test_12', 'test_123'],
- },
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ usernameSuggestions: ['test_1', 'test_12', 'test_123'],
});
- store.dispatch = jest.fn(store.dispatch);
props = {
...props,
value: ' ',
};
- const { container } = render(routerWrapper(reduxWrapper()));
+ const { container } = render(renderWrapper());
let closeButton = container.querySelector('button.username-suggestions__close__button');
fireEvent.click(closeButton);
- expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
+ expect(mockRegisterContext.clearUsernameSuggestions).toHaveBeenCalled();
props = {
...props,
errorMessage: 'username error',
};
- render(routerWrapper(reduxWrapper()));
+ render(renderWrapper());
closeButton = container.querySelector('button.username-suggestions__close__button');
fireEvent.click(closeButton);
- expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
+ expect(mockRegisterContext.clearUsernameSuggestions).toHaveBeenCalled();
});
it('should clear the registration validation error on focus on field', () => {
- store.dispatch = jest.fn(store.dispatch);
-
const usernameError = 'It looks like this username is already taken';
- store = mockStore({
- ...initialState,
- register: {
- ...initialState.register,
- registrationError: {
- username: [{ userMessage: usernameError }],
- },
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ validationErrors: {
+ username: [{ userMessage: usernameError }],
},
});
- store.dispatch = jest.fn(store.dispatch);
+ const { container } = render(renderWrapper());
+ const usernameField = container.querySelector('input#username');
+ fireEvent.focus(usernameField, { target: { value: 'test', name: 'username' } });
- const { container } = render(routerWrapper(reduxWrapper()));
+ expect(mockRegisterContext.clearRegistrationBackendError).toHaveBeenCalledWith('username');
+ });
+ it('should call setValidationsSuccess when field validation API succeeds', () => {
+ let capturedOnSuccess;
+ useFieldValidations.mockImplementation((callbacks) => {
+ capturedOnSuccess = callbacks.onSuccess;
+ return {
+ mutate: mockMutate,
+ };
+ });
+
+ const { container } = render(renderWrapper());
const usernameField = container.querySelector('input#username');
- fireEvent.focus(usernameField, { target: { value: 'test', name: 'username' } });
+ fireEvent.blur(usernameField, { target: { value: 'testuser', name: 'username' } });
+ const mockValidationData = { username: { isValid: true } };
+ capturedOnSuccess(mockValidationData);
+
+ expect(mockRegisterContext.setValidationsSuccess).toHaveBeenCalledWith(mockValidationData);
+ });
- expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('username'));
+ it('should call setValidationsFailure when field validation API fails', () => {
+ let capturedOnError;
+ useFieldValidations.mockImplementation((callbacks) => {
+ capturedOnError = callbacks.onError;
+ return {
+ mutate: mockMutate,
+ };
+ });
+
+ const { container } = render(renderWrapper());
+ const usernameField = container.querySelector('input#username');
+ fireEvent.blur(usernameField, { target: { value: 'testuser', name: 'username' } });
+ capturedOnError();
+
+ expect(mockRegisterContext.setValidationsFailure).toHaveBeenCalledWith();
+ });
+
+ it('should not call field validation API when validation is rate limited', () => {
+ useRegisterContext.mockReturnValue({
+ ...mockRegisterContext,
+ validationApiRateLimited: true,
+ });
+
+ const { container } = render(renderWrapper());
+ const usernameField = container.querySelector('input#username');
+ fireEvent.blur(usernameField, { target: { value: 'testuser', name: 'username' } });
+ expect(mockMutate).not.toHaveBeenCalled();
});
});
});
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 8c5ea79f5b..ce2db1c3d2 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -1,7 +1,4 @@
-import React, {
- useEffect, useMemo, useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useMemo, useState } from 'react';
import { getConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -14,18 +11,11 @@ import Skeleton from 'react-loading-skeleton';
import ConfigurableRegistrationForm from './components/ConfigurableRegistrationForm';
import RegistrationFailure from './components/RegistrationFailure';
-import {
- backupRegistrationFormBegin,
- clearRegistrationBackendError,
- registerNewUser,
- setEmailSuggestionInStore,
- setUserPipelineDataLoaded,
-} from './data/actions';
+import { useRegistration } from './data/apiHook';
import {
FORM_SUBMISSION_ERROR,
TPA_AUTHENTICATION_FAILURE,
} from './data/constants';
-import getBackendValidations from './data/selectors';
import {
isFormValid, prepareRegistrationPayload,
} from './data/utils';
@@ -37,22 +27,54 @@ import {
RedirectLogistration,
ThirdPartyAuthAlert,
} from '../common-components';
-import { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../common-components/data/actions';
+import { useThirdPartyAuthContext } from '../common-components/components/ThirdPartyAuthContext';
+import { useThirdPartyAuthHook } from '../common-components/data/apiHook';
import EnterpriseSSO from '../common-components/EnterpriseSSO';
import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
import {
- COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
+ COMPLETE_STATE, DEFAULT_STATE, PENDING_STATE, REGISTER_PAGE,
} from '../data/constants';
import {
getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, setCookie,
} from '../data/utils';
-
+import { useRegisterContext } from './components/RegisterContext';
/**
- * Main Registration Page component
+ * Inner Registration Page component that uses the context
*/
const RegistrationPage = (props) => {
const { formatMessage } = useIntl();
- const dispatch = useDispatch();
+ const {
+ fieldDescriptions,
+ optionalFields,
+ thirdPartyAuthApiStatus,
+ thirdPartyAuthContext,
+ setThirdPartyAuthContextBegin,
+ setThirdPartyAuthContextSuccess,
+ setThirdPartyAuthContextFailure,
+ } = useThirdPartyAuthContext();
+
+ const {
+ autoSubmitRegForm,
+ currentProvider,
+ finishAuthUrl,
+ pipelineUserDetails,
+ providers,
+ secondaryProviders,
+ errorMessage: thirdPartyAuthErrorMessage,
+ } = thirdPartyAuthContext;
+
+ const {
+ clearRegistrationBackendError,
+ registrationFormData,
+ registrationError,
+ setEmailSuggestionContext,
+ updateRegistrationFormData,
+ setRegistrationError,
+ backendValidations,
+ setBackendCountryCode,
+ } = useRegisterContext();
+
+ const { mutate: fetchThirdPartyAuth } = useThirdPartyAuthHook();
const registrationEmbedded = isHostAvailableInQueryParams();
const platformName = getConfig().SITE_NAME;
@@ -66,30 +88,25 @@ const RegistrationPage = (props) => {
handleInstitutionLogin,
institutionLogin,
} = props;
-
- const backedUpFormData = useSelector(state => state.register.registrationFormData);
- const registrationError = useSelector(state => state.register.registrationError);
- const registrationErrorCode = registrationError?.errorCode;
- const registrationResult = useSelector(state => state.register.registrationResult);
- const shouldBackupState = useSelector(state => state.register.shouldBackupState);
- const userPipelineDataLoaded = useSelector(state => state.register.userPipelineDataLoaded);
- const submitState = useSelector(state => state.register.submitState);
-
- const fieldDescriptions = useSelector(state => state.commonComponents.fieldDescriptions);
- const optionalFields = useSelector(state => state.commonComponents.optionalFields);
- const thirdPartyAuthApiStatus = useSelector(state => state.commonComponents.thirdPartyAuthApiStatus);
- const autoSubmitRegForm = useSelector(state => state.commonComponents.thirdPartyAuthContext.autoSubmitRegForm);
- const thirdPartyAuthErrorMessage = useSelector(state => state.commonComponents.thirdPartyAuthContext.errorMessage);
- const finishAuthUrl = useSelector(state => state.commonComponents.thirdPartyAuthContext.finishAuthUrl);
- const currentProvider = useSelector(state => state.commonComponents.thirdPartyAuthContext.currentProvider);
- const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
- const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
- const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
-
- const backendValidations = useSelector(getBackendValidations);
+ const [registrationResult, setRegistrationResult] = useState({ success: false, redirectUrl: '', authenticatedUser: null });
+ const backendRegistrationError = registrationError;
+ const registrationMutation = useRegistration({
+ onSuccess: (data) => {
+ setRegistrationResult(data);
+ setRegistrationError({});
+ },
+ onError: (errorData) => {
+ setRegistrationError(errorData);
+ },
+ });
+
+ const [userPipelineDataLoaded, setUserPipelineDataLoaded] = useState(false);
+ const registrationErrorCode = registrationError?.errorCode || backendRegistrationError?.errorCode;
+ const submitState = registrationMutation.isPending ? PENDING_STATE : DEFAULT_STATE;
const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
const tpaHint = useMemo(() => getTpaHint(), []);
-
+ // Initialize form state from local backedUpFormData
+ const backedUpFormData = registrationFormData;
const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });
const [configurableFormFields, setConfigurableFormFields] = useState({ ...backedUpFormData.configurableFormFields });
const [errors, setErrors] = useState({ ...backedUpFormData.errors });
@@ -97,7 +114,6 @@ const RegistrationPage = (props) => {
const [formStartTime, setFormStartTime] = useState(null);
// temporary error state for embedded experience because we don't want to show errors on blur
const [temporaryErrors, setTemporaryErrors] = useState({ ...backedUpFormData.errors });
-
const { cta, host } = queryParams;
const buttonLabel = cta
? formatMessage(messages['create.account.cta.button'], { label: cta })
@@ -116,7 +132,7 @@ const RegistrationPage = (props) => {
setFormFields(prevState => ({
...prevState, name, username, email,
}));
- dispatch(setUserPipelineDataLoaded(true));
+ setUserPipelineDataLoaded(true);
}
}
}, [ // eslint-disable-line react-hooks/exhaustive-deps
@@ -133,25 +149,27 @@ const RegistrationPage = (props) => {
if (tpaHint) {
payload.tpa_hint = tpaHint;
}
- dispatch(getRegistrationDataFromBackend(payload));
+ setThirdPartyAuthContextBegin();
+ fetchThirdPartyAuth(payload, {
+ onSuccess: (data) => {
+ setThirdPartyAuthContextSuccess(
+ data.fieldDescriptions,
+ data.optionalFields,
+ data.thirdPartyAuthContext,
+ );
+ // saving countryCode to registration context
+ setBackendCountryCode(data.thirdPartyAuthContext.countryCode);
+ },
+ onError: () => {
+ setThirdPartyAuthContextFailure();
+ },
+ });
setFormStartTime(Date.now());
}
- }, [dispatch, formStartTime, queryParams, tpaHint]);
-
- /**
- * Backup the registration form in redux when register page is toggled.
- */
- useEffect(() => {
- if (shouldBackupState) {
- dispatch(backupRegistrationFormBegin({
- ...backedUpFormData,
- configurableFormFields: { ...configurableFormFields },
- formFields: { ...formFields },
- errors: { ...errors },
- }));
- }
- }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [formStartTime, queryParams, tpaHint, setThirdPartyAuthContextBegin]);
+ // Handle backend validation errors from context
useEffect(() => {
if (backendValidations) {
if (registrationEmbedded) {
@@ -172,7 +190,6 @@ const RegistrationPage = (props) => {
if (registrationResult.success) {
// This event is used by GTM
sendTrackEvent('edx.bi.user.account.registered.client', {});
-
// This is used by the "User Retention Rate Event" on GTM
setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
}
@@ -181,11 +198,23 @@ const RegistrationPage = (props) => {
const handleOnChange = (event) => {
const { name } = event.target;
const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
- if (registrationError[name]) {
- dispatch(clearRegistrationBackendError(name));
+ if (backendRegistrationError[name]) {
+ clearRegistrationBackendError(name);
+ }
+ // Clear context registration errors
+ if (registrationError.errorCode) {
+ setRegistrationError({});
}
setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
- setFormFields(prevState => ({ ...prevState, [name]: value }));
+ // Update local state
+ const newFormFields = { ...formFields, [name]: value };
+ setFormFields(newFormFields);
+ // Save to context for persistence across tab switches
+ updateRegistrationFormData({
+ formFields: newFormFields,
+ errors,
+ configurableFormFields,
+ });
};
const handleErrorChange = (fieldName, error) => {
@@ -219,7 +248,6 @@ const RegistrationPage = (props) => {
if (flags.autoGeneratedUsernameEnabled) {
delete payload.username;
}
-
// Validating form data before submitting
const { isValid, fieldErrors, emailSuggestion } = isFormValid(
payload,
@@ -229,7 +257,12 @@ const RegistrationPage = (props) => {
formatMessage,
);
setErrors({ ...fieldErrors });
- dispatch(setEmailSuggestionInStore(emailSuggestion));
+ updateRegistrationFormData({
+ formFields,
+ errors: fieldErrors,
+ configurableFormFields,
+ });
+ setEmailSuggestionContext(emailSuggestion.suggestion, emailSuggestion.type);
// returning if not valid
if (!isValid) {
@@ -237,16 +270,14 @@ const RegistrationPage = (props) => {
return;
}
- // Preparing payload for submission
payload = prepareRegistrationPayload(
payload,
configurableFormFields,
flags.showMarketingEmailOptInCheckbox,
totalRegistrationTime,
queryParams);
-
- // making register call
- dispatch(registerNewUser(payload));
+ // making register call with React Query
+ registrationMutation.mutate(payload);
};
const handleSubmit = (e) => {
@@ -385,7 +416,6 @@ const RegistrationPage = (props) => {
+
{validations !== null ? 'Validations Available' : 'Validations Not Available'}
+
{registrationFormData ? 'RegistrationFormData Available' : 'RegistrationFormData Not Available'}
+
{registrationResult ? 'RegistrationResult Available' : 'RegistrationResult Not Available'}
+
{registrationError !== undefined ? 'RegistrationError Available' : 'RegistrationError Not Available'}
+
{backendCountryCode !== undefined ? 'BackendCountryCode Available' : 'BackendCountryCode Not Available'}
+
{usernameSuggestions ? 'UsernameSuggestions Available' : 'UsernameSuggestions Not Available'}
+
{validationApiRateLimited !== undefined ? 'ValidationApiRateLimited Available' : 'ValidationApiRateLimited Not Available'}
+
{backendValidations !== undefined ? 'BackendValidations Available' : 'BackendValidations Not Available'}
+