Updating tests to match with Component Changes

packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/useOrderConfirmationPage.spec.js

@@ -11,6 +11,10 @@ import { useLazyQuery } from '@apollo/client';
 
 import { useUserContext } from '../../../../context/user';
 
+import { useDispatch, connect } from 'react-redux'; // Import `connect` and `useDispatch` here
+
+import { setUserOnOrderSuccess } from '../../../../store/actions/user/asyncActions'; // Import `setUserOnOrderSuccess`
+
 jest.mock('../../../../context/user');
 useUserContext.mockImplementation(() => {
     return [
@@ -28,6 +32,21 @@ jest.mock('@apollo/client', () => {
     };
 });
 
+// Mock `react-redux`'s `useDispatch` and `connect` functions
+
+jest.mock('react-redux', () => ({
+    useDispatch: jest.fn(),
+    connect: jest.fn().mockReturnValue(Component => Component) // Mock `connect` as an identity function
+}));
+
+jest.mock('../../../../store/actions/user/asyncActions', () => ({
+    setUserOnOrderSuccess: jest.fn(value => ({
+        type: 'SET_USER_ON_ORDER_SUCCESS',
+
+        payload: value
+    })) // Mock `setUserOnOrderSuccess` to return an action object
+}));
+
 const Component = props => {
     const talonProps = useOrderConfirmationPage(props);
 
@@ -131,6 +150,11 @@ describe('for guest', () => {
                 }
             ];
         });
+
+        const mockDispatch = jest.fn(); // Mock dispatch for this test
+
+        useDispatch.mockReturnValue(mockDispatch);
+
         const tree = createTestInstance(<Component {...DEFAULT_PROPS} />);
 
         const { root } = tree;
@@ -143,6 +167,7 @@ describe('for guest', () => {
 describe('for authenticated customers', () => {
     it('returns the correct shape', () => {
         const mockFetch = jest.fn();
+        const mockDispatch = jest.fn(); // Mock dispatch for this test
 
         useLazyQuery.mockReturnValueOnce([
             mockFetch,
@@ -153,8 +178,16 @@ describe('for authenticated customers', () => {
             }
         ]);
 
+        useDispatch.mockReturnValue(mockDispatch);
+
         const mockOrderNumber = '12345';
 
+        // Create a mock dispatch function
+
+        //const mockDispatch = jest.fn();
+
+        //useDispatch.mockReturnValue(mockDispatch);  // Mock useDispatch to return the mock function
+
         const tree = createTestInstance(
             <Component orderNumber={mockOrderNumber} />
         );
@@ -164,6 +197,10 @@ describe('for authenticated customers', () => {
 
         expect(talonProps).toMatchSnapshot();
 
+        // Check if dispatch was called with the correct action
+
+        expect(mockDispatch).toHaveBeenCalledWith(setUserOnOrderSuccess(true));
+
         expect(mockFetch).toHaveBeenCalledWith({
             variables: { orderNumber: mockOrderNumber }
         });

packages/peregrine/lib/talons/CreateAccount/__tests__/useCreateAccount.spec.js

@@ -9,6 +9,17 @@ import { retrieveCartId } from '../../../store/actions/cart';
 import createTestInstance from '../../../util/createTestInstance';
 import { useCreateAccount } from '../useCreateAccount';
 import { useEventingContext } from '../../../context/eventing';
+import { useHistory, useLocation } from 'react-router-dom'; // Added import for useHistory and useLocation
+
+// Mocking useHistory and useLocation
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'), // Keep the other functionality intact
+
+    useHistory: jest.fn(),
+
+    useLocation: jest.fn()
+}));
 
 jest.mock('@apollo/client', () => {
     const apolloClient = jest.requireActual('@apollo/client');
@@ -186,6 +197,22 @@ beforeAll(() => {
     });
 
     useApolloClient.mockReturnValue(client);
+
+    // Mock useHistory and useLocation here if needed for specific tests
+
+    useHistory.mockReturnValue({
+        push: jest.fn() // You can mock any methods that useHistory would provide
+    });
+
+    useLocation.mockReturnValue({
+        pathname: '/mock-path',
+
+        search: '',
+
+        hash: '',
+
+        state: null
+    });
 });
 
 test('should return properly', () => {

packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js

@@ -53,6 +53,24 @@ jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));
 
+jest.mock('react-router-dom', () => ({
+    useHistory: jest.fn().mockReturnValue({
+        push: jest.fn(),
+
+        replace: jest.fn()
+    }),
+
+    useLocation: jest.fn().mockReturnValue({
+        pathname: '/checkout',
+
+        search: '',
+
+        hash: '',
+
+        state: null
+    })
+}));
+
 const Component = props => {
     const talonProps = useSignIn(props);
 
@@ -277,6 +295,12 @@ test('mutation error is returned by talon', async () => {
     expect(talonProps.errors).toMatchSnapshot();
 });
 
+test('useLocation and useHistory are used correctly', () => {
+    const { talonProps } = getTalonProps({ ...defaultProps });
+
+    expect(talonProps).toBeDefined(); // Placeholder assertion.
+});
+
 it('should call handleForgotPassword when Enter key is pressed', () => {
     const { talonProps } = getTalonProps({
         ...defaultProps

packages/venia-ui/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -4,6 +4,8 @@ import { createTestInstance } from '@magento/peregrine';
 
 import CreateAccount from '../createAccount';
 
+import { useHistory, useLocation } from 'react-router-dom';
+
 jest.mock('@apollo/client', () => ({
     gql: jest.fn(),
     useApolloClient: jest.fn().mockImplementation(() => {}),
@@ -24,6 +26,16 @@ jest.mock('@apollo/client', () => ({
     }))
 }));
 
+// Mocking the react-router hooks
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+
+    useHistory: jest.fn(),
+
+    useLocation: jest.fn()
+}));
+
 jest.mock('../../../util/formValidators');
 jest.mock('@magento/peregrine/lib/context/user', () => {
     const userState = {
@@ -58,6 +70,24 @@ jest.mock('@magento/peregrine/lib/hooks/useAwaitQuery', () => {
     return { useAwaitQuery };
 });
 
+// Mocking useLocation and useHistory for the tests
+
+beforeEach(() => {
+    useHistory.mockReturnValue({
+        push: jest.fn() // mock any methods you need from useHistory
+    });
+
+    useLocation.mockReturnValue({
+        pathname: '/mock-path', // mock the location properties
+
+        search: '',
+
+        hash: '',
+
+        state: null
+    });
+});
+
 jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));

packages/venia-ui/lib/components/SignIn/__tests__/signIn.spec.js

@@ -8,6 +8,8 @@ import SignIn from '../signIn';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
 import { useMutation } from '@apollo/client';
 
+import { useHistory, useLocation } from 'react-router-dom';
+
 jest.mock('@apollo/client', () => ({
     gql: jest.fn(),
     useApolloClient: jest.fn().mockImplementation(() => {}),
@@ -23,6 +25,17 @@ jest.mock('@apollo/client', () => ({
         loading: false
     }))
 }));
+
+// Mocking the react-router hooks
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+
+    useHistory: jest.fn(),
+
+    useLocation: jest.fn()
+}));
+
 jest.mock('../../../classify');
 jest.mock('../../Button', () => () => <i />);
 jest.mock('../../FormError/formError', () => 'FormError');
@@ -67,6 +80,24 @@ jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));
 
+// Mocking useLocation and useHistory for the tests
+
+beforeEach(() => {
+    useHistory.mockReturnValue({
+        push: jest.fn() // mock any methods you need from useHistory
+    });
+
+    useLocation.mockReturnValue({
+        pathname: '/mock-path', // mock the location properties
+
+        search: '',
+
+        hash: '',
+
+        state: null
+    });
+});
+
 const props = {
     setDefaultUsername: jest.fn(),
     showCreateAccount: jest.fn(),