- Validate cart id before fetching data

- Update tests
magento · Jan 16, 2020 · f622664 · f622664
1 parent 324bbb9
commit f622664
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 34 deletions.
diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/useProductListing.js b/packages/peregrine/lib/talons/CartPage/ProductListing/useProductListing.js
@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useLazyQuery } from '@apollo/react-hooks';
 
 import { useCartContext } from '../../../context/cart';
 import { useEffect } from 'react';
@@ -8,24 +8,36 @@ export const useProductListing = props => {
 
     const [{ cartId }] = useCartContext();
 
-    const { data, error, loading } = useQuery(query, {
-        variables: { cartId },
+    const [
+        fetchProductListing,
+        { called, data, error, loading }
+    ] = useLazyQuery(query, {
         // 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'
     });
 
-    let items = [];
-    if (!error && !loading) {
-        items = data.cart.items;
-    }
+    useEffect(() => {
+        if (cartId) {
+            fetchProductListing({
+                variables: {
+                    cartId
+                }
+            });
+        }
+    }, [cartId, fetchProductListing]);
 
     useEffect(() => {
         if (error) {
             console.error(error);
         }
     }, [error]);
 
+    let items = [];
+    if (called && !error && !loading) {
+        items = data.cart.items;
+    }
+
     return {
         isLoading: !!loading,
         items

diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/__tests__/productListing.spec.js b/packages/venia-ui/lib/components/CartPage/ProductListing/__tests__/productListing.spec.js
@@ -1,21 +1,13 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useLazyQuery } from '@apollo/react-hooks';
 import { createTestInstance } from '@magento/peregrine';
 
 import LoadingIndicator from '../../../LoadingIndicator';
 import ProductListing from '../productListing';
 
-const queryResult = {
-    loading: false,
-    error: null,
-    data: null
-};
-
 jest.mock('../../../../classify');
 jest.mock('@apollo/react-hooks', () => {
-    const useQuery = jest.fn(() => {});
-
-    return { useQuery };
+    return { useLazyQuery: jest.fn() };
 });
 
 jest.mock('@magento/peregrine/lib/context/cart', () => {
@@ -29,40 +21,50 @@ jest.mock('@magento/peregrine/lib/context/cart', () => {
 jest.mock('../product', () => 'Product');
 
 test('renders loading indicator while data fetching', () => {
-    useQuery.mockImplementationOnce(() => {
-        return {
-            ...queryResult,
+    useLazyQuery.mockReturnValueOnce([
+        () => {},
+        {
             loading: true
-        };
-    });
+        }
+    ]);
 
     const { root } = createTestInstance(<ProductListing />);
     expect(root.findByType(LoadingIndicator)).toBeDefined();
 });
 
 test('renders string with no items in cart', () => {
-    useQuery.mockImplementationOnce(() => ({
-        ...queryResult,
-        data: {
-            cart: {
-                items: []
+    useLazyQuery.mockReturnValueOnce([
+        () => {},
+        {
+            called: true,
+            loading: false,
+            error: null,
+            data: {
+                cart: {
+                    items: []
+                }
             }
         }
-    }));
+    ]);
     const tree = createTestInstance(<ProductListing />);
 
     expect(tree.toJSON()).toMatchSnapshot();
 });
 
 test('renders list of products with items in cart', () => {
-    useQuery.mockImplementationOnce(() => ({
-        ...queryResult,
-        data: {
-            cart: {
-                items: ['1', '2', '3']
+    useLazyQuery.mockReturnValueOnce([
+        () => {},
+        {
+            called: true,
+            loading: false,
+            error: null,
+            data: {
+                cart: {
+                    items: ['1', '2', '3']
+                }
             }
         }
-    }));
+    ]);
     const tree = createTestInstance(<ProductListing />);
 
     expect(tree.toJSON()).toMatchSnapshot();