From 0998b66bfbb4e7a7f8354813b03476da1e2ca65f Mon Sep 17 00:00:00 2001 From: del15881 Date: Tue, 19 Nov 2024 23:08:29 +0530 Subject: [PATCH] Updating tests to match with Component Changes --- .../useOrderConfirmationPage.spec.js | 37 +++++++++++++++++++ .../__tests__/useCreateAccount.spec.js | 27 ++++++++++++++ .../talons/SignIn/__tests__/useSignIn.spec.js | 24 ++++++++++++ .../__tests__/createAccount.spec.js | 30 +++++++++++++++ .../SignIn/__tests__/signIn.spec.js | 31 ++++++++++++++++ 5 files changed, 149 insertions(+) diff --git a/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/useOrderConfirmationPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/useOrderConfirmationPage.spec.js index de70d4354a..edcab582f6 100644 --- a/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/useOrderConfirmationPage.spec.js +++ b/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(); 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( ); @@ -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 } }); diff --git a/packages/peregrine/lib/talons/CreateAccount/__tests__/useCreateAccount.spec.js b/packages/peregrine/lib/talons/CreateAccount/__tests__/useCreateAccount.spec.js index 6c22e62abe..457d71c06b 100644 --- a/packages/peregrine/lib/talons/CreateAccount/__tests__/useCreateAccount.spec.js +++ b/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', () => { diff --git a/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js b/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js index 42845b790a..db93f04cde 100644 --- a/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js +++ b/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 diff --git a/packages/venia-ui/lib/components/CreateAccount/__tests__/createAccount.spec.js b/packages/venia-ui/lib/components/CreateAccount/__tests__/createAccount.spec.js index c174a60ae3..f2cd3e6638 100644 --- a/packages/venia-ui/lib/components/CreateAccount/__tests__/createAccount.spec.js +++ b/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() }]) })); diff --git a/packages/venia-ui/lib/components/SignIn/__tests__/signIn.spec.js b/packages/venia-ui/lib/components/SignIn/__tests__/signIn.spec.js index f8249d57c5..feb4eb699f 100755 --- a/packages/venia-ui/lib/components/SignIn/__tests__/signIn.spec.js +++ b/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', () => () => ); 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(),