-
Notifications
You must be signed in to change notification settings - Fork 685
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PWA-989: Real Data Wishlists and Wishlist Create (#3041)
* PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create * PWA-989: Real Data Wishlists and Wishlist Create
- Loading branch information
Showing
25 changed files
with
516 additions
and
248 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
179 changes: 143 additions & 36 deletions
179
packages/peregrine/lib/talons/WishlistPage/__tests__/useCreateWishlist.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,164 @@ | ||
| import React from 'react'; | ||
|
|
||
| import createTestInstance from '../../../util/createTestInstance'; | ||
| import { MockedProvider } from '@apollo/client/testing'; | ||
| import { renderHook, act } from '@testing-library/react-hooks'; | ||
|
|
||
| import { useCreateWishlist } from '../useCreateWishlist'; | ||
| import defaultOperations from '../createWishlist.gql'; | ||
| import wishlistPageOperations from '../wishlistPage.gql'; | ||
|
|
||
| const Component = props => { | ||
| const talonProps = useCreateWishlist(props); | ||
| jest.mock('@magento/peregrine/lib/context/app', () => { | ||
| const state = {}; | ||
| const api = { actions: { setPageLoading: jest.fn() } }; | ||
| const useAppContext = jest.fn(() => [state, api]); | ||
|
|
||
| return <i talonProps={talonProps} />; | ||
| }; | ||
| return { useAppContext }; | ||
| }); | ||
|
|
||
| const getTalonProps = props => { | ||
| const tree = createTestInstance(<Component {...props} />); | ||
| const { root } = tree; | ||
| const { talonProps } = root.findByType('i').props; | ||
| const createWishlistVariables = { | ||
| name: 'Test WishList', | ||
| visibility: 'PUBLIC' | ||
| }; | ||
|
|
||
| const update = newProps => { | ||
| tree.update(<Component {...{ ...props, ...newProps }} />); | ||
| let createWishlistMutationCalled = false; | ||
| let getCustomerWishlistsQueryCalled = false; | ||
| let getMultipleWishlistsEnabledQueryCalled = false; | ||
|
|
||
| const getCustomerWishlistsMock = { | ||
| request: { | ||
| query: wishlistPageOperations.getCustomerWishlistQuery | ||
| }, | ||
| loading: false, | ||
| result: () => { | ||
| getCustomerWishlistsQueryCalled = true; | ||
| return { | ||
| data: { | ||
| customer: { | ||
| id: 'customerId', | ||
| wishlists: [ | ||
| { | ||
| id: 42, | ||
| items_count: 0, | ||
| name: 'Test WishList', | ||
| visibility: 'PUBLIC', | ||
| sharing_code: 'code' | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
|
|
||
| return root.findByType('i').props.talonProps; | ||
| }; | ||
| const getMultipleWishlistsEnabledQueryMock = { | ||
| request: { | ||
| query: defaultOperations.getMultipleWishlistsEnabledQuery | ||
| }, | ||
| loading: false, | ||
| result: () => { | ||
| getMultipleWishlistsEnabledQueryCalled = true; | ||
| return { | ||
| data: { | ||
| storeConfig: { | ||
| id: '42', | ||
| enable_multiple_wishlists: '1' | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
|
|
||
| return { talonProps, tree, update }; | ||
| const createWishlistMock = { | ||
| request: { | ||
| query: defaultOperations.createWishlistMutation, | ||
| variables: { input: createWishlistVariables } | ||
| }, | ||
| result: () => { | ||
| createWishlistMutationCalled = true; | ||
| return { | ||
| data: { | ||
| createWishlist: { | ||
| wishlist: { | ||
| id: '42' | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
|
|
||
| test('should return properly', () => { | ||
| const { talonProps } = getTalonProps(); | ||
| const renderHookWithProviders = ({ | ||
| renderHookOptions = {}, | ||
| mocks = [ | ||
| createWishlistMock, | ||
| getCustomerWishlistsMock, | ||
| getMultipleWishlistsEnabledQueryMock | ||
| ] | ||
| } = {}) => { | ||
| const wrapper = ({ children }) => ( | ||
| <MockedProvider mocks={mocks} addTypename={false}> | ||
| {children} | ||
| </MockedProvider> | ||
| ); | ||
|
|
||
| return renderHook(useCreateWishlist, { wrapper, ...renderHookOptions }); | ||
| }; | ||
|
|
||
| expect(talonProps).toMatchSnapshot(); | ||
| test('should return properly', async () => { | ||
| const { result } = renderHookWithProviders(); | ||
| await new Promise(resolve => setTimeout(resolve, 0)); | ||
| expect(getMultipleWishlistsEnabledQueryCalled).toBe(true); | ||
| expect(result.current).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('handleShowModal should set isModalOpen to true', () => { | ||
| const { talonProps, update } = getTalonProps(); | ||
|
|
||
| talonProps.handleShowModal(); | ||
| const { isModalOpen } = update(); | ||
|
|
||
| expect(isModalOpen).toBeTruthy(); | ||
| test('shouldRender is false when multiple wishlists disabled', async () => { | ||
| const multipleWishlistsDisabledMock = { | ||
| request: getMultipleWishlistsEnabledQueryMock.request, | ||
| result: { | ||
| data: { storeConfig: { id: '42', enable_multiple_wishlists: '0' } } | ||
| } | ||
| }; | ||
| const { result } = renderHookWithProviders({ | ||
| mocks: [ | ||
| createWishlistMock, | ||
| getCustomerWishlistsMock, | ||
| multipleWishlistsDisabledMock | ||
| ] | ||
| }); | ||
| await new Promise(resolve => setTimeout(resolve, 0)); | ||
| expect(result.current.shouldRender).toBe(false); | ||
| }); | ||
|
|
||
| test('handleHideModal should set isModalOpen to false', () => { | ||
| const { talonProps, update } = getTalonProps(); | ||
|
|
||
| talonProps.handleHideModal(); | ||
| const { isModalOpen } = update(); | ||
|
|
||
| expect(isModalOpen).toBeFalsy(); | ||
| test('should return error', async () => { | ||
| const createWishlistErrorMock = { | ||
| request: createWishlistMock.request, | ||
| error: new Error('Only 5 wish list(s) can be created.') | ||
| }; | ||
| const { result } = renderHookWithProviders({ | ||
| mocks: [createWishlistErrorMock, getMultipleWishlistsEnabledQueryMock] | ||
| }); | ||
| await act(() => result.current.handleCreateList(createWishlistVariables)); | ||
| expect( | ||
| result.current.formErrors.get('createWishlistMutation') | ||
| ).toMatchInlineSnapshot(`[Error: Only 5 wish list(s) can be created.]`); | ||
| }); | ||
|
|
||
| test('handleCreateList should set isModalOpen to false', () => { | ||
| const { talonProps, update } = getTalonProps(); | ||
| test('handleShowModal should set isModalOpen to true', async () => { | ||
| const { result } = renderHookWithProviders(); | ||
| await act(() => result.current.handleShowModal()); | ||
| expect(result.current.isModalOpen).toBe(true); | ||
| }); | ||
|
|
||
| talonProps.handleCreateList(); | ||
| const { isModalOpen } = update(); | ||
| test('handleHideModal should set isModalOpen to false', async () => { | ||
| const { result } = renderHookWithProviders(); | ||
| await act(() => result.current.handleHideModal()); | ||
| expect(result.current.isModalOpen).toBe(false); | ||
| }); | ||
|
|
||
| expect(isModalOpen).toBeFalsy(); | ||
| test('handleCreateList should update cache and set isModalOpen to false', async () => { | ||
| const { result } = renderHookWithProviders(); | ||
| await act(() => result.current.handleCreateList(createWishlistVariables)); | ||
| expect(createWishlistMutationCalled).toBe(true); | ||
| expect(getCustomerWishlistsQueryCalled).toBe(true); | ||
| expect(result.current.isModalOpen).toBe(false); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.