From f62266480047bbaea81a488201929d08da0024c5 Mon Sep 17 00:00:00 2001
From: Tommy Wiebell <twiebell@adobe.com>
Date: Thu, 16 Jan 2020 12:02:23 -0600
Subject: [PATCH] - Validate cart id before fetching data - Update tests

---
 .../ProductListing/useProductListing.js       | 26 ++++++---
 .../__tests__/productListing.spec.js          | 56 ++++++++++---------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/useProductListing.js b/packages/peregrine/lib/talons/CartPage/ProductListing/useProductListing.js
index 3666ce1778..be20b19101 100644
--- 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,17 +8,24 @@ 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) {
@@ -26,6 +33,11 @@ export const useProductListing = props => {
         }
     }, [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
index cefaf880f7..a72c7076d5 100644
--- 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();