From 4b74ba8204dfd9b2f16b4e91755b6ea0e3f57c87 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 2 Jun 2020 15:00:43 -0500 Subject: [PATCH 1/3] Set cart page is loading while fetching data from network --- .../CartPage/__tests__/useCartPage.spec.js | 5 +- .../lib/talons/CartPage/useCartPage.js | 20 ++--- .../__snapshots__/cartPage.spec.js.snap | 8 +- .../CartPage/__tests__/cartPage.spec.js | 83 +++++++------------ 4 files changed, 43 insertions(+), 73 deletions(-) diff --git a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js index bc04700152..9339d9125c 100644 --- a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js +++ b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js @@ -4,15 +4,14 @@ import { createTestInstance } from '@magento/peregrine'; import { useCartPage } from '../useCartPage'; jest.mock('@apollo/react-hooks', () => { - const runQuery = jest.fn(); const queryResult = { data: null, error: null, loading: false }; - const useLazyQuery = jest.fn(() => [runQuery, queryResult]); + const useQuery = jest.fn(() => queryResult); - return { useLazyQuery }; + return { useQuery }; }); jest.mock('@magento/peregrine/lib/context/app', () => { diff --git a/packages/peregrine/lib/talons/CartPage/useCartPage.js b/packages/peregrine/lib/talons/CartPage/useCartPage.js index e026777cca..c974dcc4db 100644 --- a/packages/peregrine/lib/talons/CartPage/useCartPage.js +++ b/packages/peregrine/lib/talons/CartPage/useCartPage.js @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; -import { useLazyQuery } from '@apollo/react-hooks'; +import { useQuery } from '@apollo/react-hooks'; import { useAppContext } from '@magento/peregrine/lib/context/app'; import { useUserContext } from '@magento/peregrine/lib/context/user'; @@ -16,10 +16,13 @@ export const useCartPage = props => { const [isCartUpdating, setIsCartUpdating] = useState(false); - const [fetchCartData, { data }] = useLazyQuery(getCartDetails, { + const { data, loading } = useQuery(getCartDetails, { // TODO: Purposely overfetch and hit the network until all components // are correctly updating the cache. Will be fixed by PWA-321. - fetchPolicy: 'cache-and-network' + fetchPolicy: 'cache-and-network', + // Don't make this call if we don't have a cartId + skip: !cartId, + variables: { cartId } }); const handleSignIn = useCallback(() => { @@ -28,14 +31,9 @@ export const useCartPage = props => { }, [toggleDrawer]); useEffect(() => { - if (cartId) { - fetchCartData({ - variables: { - cartId - } - }); - } - }, [cartId, fetchCartData]); + // Let the cart page know it is updating while we're waiting on network data. + setIsCartUpdating(loading); + }, [loading]); return { hasItems: !!(data && data.cart.total_quantity), diff --git a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap index 0be8d1ccd0..c1e13beaa0 100644 --- a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap +++ b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap @@ -10,7 +10,7 @@ exports[`renders components if cart has items 1`] = ` Cart - ) : null; - }, [classes.sign_in, handleSignIn, isSignedIn]); + if (shouldShowLoadingIndicator) { + return fullPageLoadingIndicator; + } + + const signInDisplay = !isSignedIn ? ( + + ) : null; const productListing = hasItems ? ( From 95be85fe151ec2158f5d69ae999b9f5650437d94 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Mon, 15 Jun 2020 15:04:10 -0500 Subject: [PATCH 3/3] Adds unit tests --- .../CartPage/__tests__/useCartPage.spec.js | 49 ++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js index 25ac065627..52dd175881 100644 --- a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js +++ b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js @@ -1,8 +1,19 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { createTestInstance } from '@magento/peregrine'; +import { useQuery } from '@apollo/react-hooks'; import { useCartPage } from '../useCartPage'; +jest.mock('react', () => { + const React = jest.requireActual('react'); + const spy = jest.spyOn(React, 'useState'); + + return { + ...React, + useState: spy + }; +}); + jest.mock('@apollo/react-hooks', () => { const queryResult = { called: false, @@ -70,3 +81,39 @@ test('it returns the proper shape', () => { shouldShowLoadingIndicator: expect.any(Boolean) }); }); + +test('it calls setIsCartUpdating true when loading is true', () => { + // Arrange. + useQuery.mockReturnValueOnce({ + called: true, + data: { cart: { total_quantity: 0 } }, + loading: true + }); + // isCartUpdating + useState.mockReturnValueOnce([false, jest.fn()]); + + // Act. + createTestInstance(); + + // Assert. + const { setIsCartUpdating } = log.mock.calls[0][0]; + expect(setIsCartUpdating).toBeCalledWith(true); +}); + +test('it calls setIsCartUpdating false when loading is false', () => { + // Arrange. + useQuery.mockReturnValueOnce({ + called: true, + data: { cart: { total_quantity: 0 } }, + loading: false + }); + // isCartUpdating + useState.mockReturnValueOnce([false, jest.fn()]); + + // Act. + createTestInstance(); + + // Assert. + const { setIsCartUpdating } = log.mock.calls[0][0]; + expect(setIsCartUpdating).toBeCalledWith(false); +});