diff --git a/packages/peregrine/lib/talons/Wishlist/Wishlist/__tests__/__snapshots__/useWishlist.ee.spec.js.snap b/packages/peregrine/lib/talons/Wishlist/Wishlist/__tests__/__snapshots__/useWishlist.ee.spec.js.snap new file mode 100644 index 0000000000..1e1e1a4d0c --- /dev/null +++ b/packages/peregrine/lib/talons/Wishlist/Wishlist/__tests__/__snapshots__/useWishlist.ee.spec.js.snap @@ -0,0 +1,60 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should return correct shape 1`] = ` +Object { + "called": true, + "error": null, + "handleAddToWishlist": [Function], + "handleModalClose": [Function], + "handleModalOpen": [Function], + "isDisabled": true, + "isItemAdded": false, + "isModalOpen": false, + "loading": true, +} +`; + +exports[`testing handleAddToWishlist should add the product to list 1`] = ` +Array [ + Object { + "variables": Object { + "itemOptions": Object { + "quantity": "1", + "selected_options": "selected options", + "sku": "sku", + }, + "wishlistId": "0", + }, + }, +] +`; + +exports[`testing handleAddToWishlist should call onWishlistUpdateError if there was an error calling the mutation 1`] = ` +Array [ + "Something went wrong", +] +`; + +exports[`testing handleAddToWishlist should call updateWishlistToastProps 1`] = ` +Array [ + Object { + "message": "Item successfully added to Bday List.", + "timeout": 5000, + "type": "info", + }, +] +`; + +exports[`testing handleAddToWishlist should use necessary translations 1`] = ` +Array [ + Array [ + Object { + "defaultMessage": "Item successfully added to Bday List.", + "id": "cartPage.wishlist.ee.successMessage", + }, + Object { + "wishlistName": "Bday List", + }, + ], +] +`; diff --git a/packages/peregrine/lib/talons/Wishlist/Wishlist/__tests__/useWishlist.ee.spec.js b/packages/peregrine/lib/talons/Wishlist/Wishlist/__tests__/useWishlist.ee.spec.js new file mode 100644 index 0000000000..f58b8a1a73 --- /dev/null +++ b/packages/peregrine/lib/talons/Wishlist/Wishlist/__tests__/useWishlist.ee.spec.js @@ -0,0 +1,230 @@ +import React from 'react'; +import { useMutation, useQuery } from '@apollo/client'; + +import { useWishlist } from '../useWishlist.ee'; +import createTestInstance from '../../../../util/createTestInstance'; +import { useIntl } from 'react-intl'; + +jest.mock('@apollo/client', () => ({ + useMutation: jest.fn().mockReturnValue([ + jest.fn().mockResolvedValue({ data: 'data' }), + { + loading: false, + called: false, + error: null + } + ]), + useQuery: jest.fn().mockReturnValue({}) +})); + +jest.mock('react-intl', () => ({ + useIntl: jest.fn().mockReturnValue({ formatMessage: jest.fn() }) +})); + +jest.mock('../../../../util/shallowMerge', () => () => ({ + addProductToWishlistMutation: 'addProductToWishlistMutation' +})); + +jest.mock('../product.gql', () => () => ({})); + +const onWishlistUpdate = jest.fn(); +const onWishlistUpdateError = jest.fn(); +const updateWishlistToastProps = jest.fn(); + +const defaultProps = { + item: { + sku: 'sku', + quantity: '1', + selected_options: 'selected options' + }, + onWishlistUpdate, + onWishlistUpdateError, + updateWishlistToastProps +}; + +const Component = props => { + const talonProps = useWishlist(props); + + return ; +}; + +const getTalonProps = props => { + const tree = createTestInstance(); + const { root } = tree; + const { talonProps } = root.findByType('i').props; + + const update = newProps => { + tree.update(); + + return root.findByType('i').props.talonProps; + }; + + return { talonProps, tree, update }; +}; + +const addProductToWishlist = jest.fn().mockResolvedValue({ + data: { + addProductsToWishlist: { + wishlist: { + name: 'Bday List' + } + } + } +}); + +const formatMessage = jest + .fn() + .mockImplementation(({ defaultMessage }) => defaultMessage); + +const wishlistData = { + storeConfig: { + enable_multiple_wishlists: '1', + maximum_number_of_wishlists: 3 + }, + customer: { wishlists: ['Bday List', 'New Year List'] } +}; + +beforeAll(() => { + useMutation.mockReturnValue([ + addProductToWishlist, + { called: true, loading: true, error: null } + ]); + + useQuery.mockReturnValue({ + data: wishlistData + }); + + useIntl.mockReturnValue({ + formatMessage + }); +}); + +beforeEach(() => { + onWishlistUpdate.mockClear(); + onWishlistUpdateError.mockClear(); + updateWishlistToastProps.mockClear(); +}); + +test('should return correct shape', () => { + const { talonProps } = getTalonProps(defaultProps); + + expect(talonProps).toMatchSnapshot(); +}); + +describe('testing handleAddToWishlist', () => { + test('should add the product to list', async () => { + const { talonProps } = getTalonProps(defaultProps); + + await talonProps.handleAddToWishlist(); + + expect(addProductToWishlist.mock.calls[0]).toMatchSnapshot(); + }); + + test('should set isItemAdded to true if mutation is successful', async () => { + const { talonProps, update } = getTalonProps(defaultProps); + + await talonProps.handleAddToWishlist(); + + const { isItemAdded } = update(); + + expect(isItemAdded).toBeTruthy(); + }); + + test('should call updateWishlistToastProps', async () => { + const { talonProps } = getTalonProps(defaultProps); + + await talonProps.handleAddToWishlist(); + + expect(updateWishlistToastProps.mock.calls[0]).toMatchSnapshot(); + }); + + test('should call onWishlistUpdate', async () => { + const { talonProps } = getTalonProps(defaultProps); + + await talonProps.handleAddToWishlist(); + + expect(onWishlistUpdate).toHaveBeenCalled(); + }); + + test('should call onWishlistUpdateError if there was an error calling the mutation', async () => { + const error = 'Something went wrong'; + addProductToWishlist.mockRejectedValueOnce(error); + const { talonProps } = getTalonProps(defaultProps); + + await talonProps.handleAddToWishlist(); + + expect(onWishlistUpdateError.mock.calls[0]).toMatchSnapshot(); + }); + + test('should use necessary translations', async () => { + const { talonProps } = getTalonProps(defaultProps); + + await talonProps.handleAddToWishlist(); + + expect(formatMessage.mock.calls).toMatchSnapshot(); + }); + + test('should close modal if store config has multiple wishlists enabled and max num of wishlists is less than customer wishlists', async () => { + const { talonProps, update } = getTalonProps(defaultProps); + + talonProps.handleModalOpen(); + await talonProps.handleAddToWishlist(); + + const { isModalOpen } = update(); + + expect(isModalOpen).toBeFalsy(); + }); +}); + +test('should reset isItemAdded if selected_options change', async () => { + const { talonProps, update } = getTalonProps(defaultProps); + + await talonProps.handleAddToWishlist(); + + const { isItemAdded } = update(); + + expect(isItemAdded).toBeTruthy(); + + update({ + ...defaultProps, + item: { + ...defaultProps.item, + selected_options: 'new selected options' + } + }); + + const { isItemAdded: newIsItemAdded } = update(); + + expect(newIsItemAdded).toBeFalsy(); +}); + +test('handleModalOpen should set isModalOpen to true', () => { + const { talonProps, update } = getTalonProps(defaultProps); + + talonProps.handleModalOpen(); + + const { isModalOpen } = update(); + + expect(isModalOpen).toBeTruthy(); +}); + +test('handleModalClose should set isModalOpen to false', () => { + const { talonProps, update } = getTalonProps(defaultProps); + + talonProps.handleModalClose(); + + const { isModalOpen } = update(); + + expect(isModalOpen).toBeFalsy(); +}); + +test('handleModalClose should set isModalOpen to false and set isItemAdded to true', () => { + const { talonProps, update } = getTalonProps(defaultProps); + + talonProps.handleModalClose(true); + + const { isModalOpen, isItemAdded } = update(); + + expect(isModalOpen).toBeFalsy(); + expect(isItemAdded).toBeTruthy(); +}); diff --git a/packages/peregrine/lib/talons/Wishlist/Wishlist/useWishlist.ee.js b/packages/peregrine/lib/talons/Wishlist/Wishlist/useWishlist.ee.js index f2eb5c6cdf..677e04339f 100644 --- a/packages/peregrine/lib/talons/Wishlist/Wishlist/useWishlist.ee.js +++ b/packages/peregrine/lib/talons/Wishlist/Wishlist/useWishlist.ee.js @@ -115,11 +115,11 @@ export const useWishlist = props => { setIsModalOpen(true); }, []); - const handleModalClose = useCallback(success => { + const handleModalClose = useCallback(isSuccess => { setIsModalOpen(false); // only set item added true if someone calls handleModalClose(true) - if (success === true) { + if (isSuccess) { setIsItemAdded(true); } }, []);