CIF-1333 - The Minicart shows an incorrect number of items (#239)

* Update the GraphQL query to include the total number of items.
* Update the footer component to read the total number of items from the backend instead of calculating it in the component.
* Put back the dev dependency to @magento/peregrine
* Fix the cart quantity display in the cart trigger as well
* Update unit tests

Author: dplaton

react-components/__mocks__/i18nForTests.js

@@ -22,14 +22,13 @@ import common from '../i18n/en/common.json';
 i18n.use(initReactI18next).init({
     fallbackLng: 'en',
     debug: false,
+    lng: 'en',
 
     interpolation: {
         escapeValue: false,
         format: (value, format, lng) => {
             if (format === 'price') {
-                return new Intl.NumberFormat(lng, { style: 'currency', currency: value.currency }).format(
-                    value.value
-                );
+                return new Intl.NumberFormat(lng, { style: 'currency', currency: value.currency }).format(value.value);
             }
             return value;
         }

react-components/package-lock.json

@@ -39,7 +39,7 @@ exports[`<CartTrigger> renders the icon 1`] = `
       class="root"
       data-testid="cart-counter"
     >
-      2
+      3
     </span>
   </button>
 </DocumentFragment>

react-components/src/components/CartTrigger/__test__/__snapshots__/cartTrigger.test.js.snap

@@ -28,7 +28,7 @@ describe('<CartTrigger>', () => {
         ReactDOM.createPortal.mockClear();
     });
 
-    const stateWithTwoItems = { cart: { items: [{}, {}] } };
+    const stateWithTwoItems = { cart: { items: [{}, {}], total_quantity: 3 } };
 
     it('renders the icon', () => {
         const { asFragment } = render(
@@ -40,7 +40,7 @@ describe('<CartTrigger>', () => {
     });
 
     it('renders the quantity', () => {
-        const expectedQuantity = '2';
+        const expectedQuantity = '3';
         const { getByTestId } = render(
             <CartProvider initialState={stateWithTwoItems} reducerFactory={() => state => state}>
                 <CartTrigger />

react-components/src/components/CartTrigger/__test__/cartTrigger.test.js

@@ -26,7 +26,7 @@ const parentEl = document.querySelector('.header__cartTrigger');
 
 const Trigger = () => {
     const [{ cart }, dispatch] = useCartState();
-    let cartQuantity = cart && Object.entries(cart).length > 0 ? cart.items.length : 0;
+    let cartQuantity = cart && Object.entries(cart).length > 0 ? cart.total_quantity : 0;
 
     const iconColor = 'rgb(var(--venia-text))';
     const svgAttributes = {

react-components/src/components/CartTrigger/cartTrigger.js

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Footer> renders the component 1`] = `
+<DocumentFragment>
+  <div
+    class="root"
+  >
+    <div
+      class="root"
+    >
+      <dl
+        class="totals"
+      >
+        <dt
+          class="subtotalLabel"
+        >
+          <span>
+            Cart Total: 
+            <span
+              class="discounted"
+            >
+              $60.00
+            </span>
+          </span>
+        </dt>
+        <dd
+          class="subtotalValue"
+        >
+          3 items
+        </dd>
+      </dl>
+      <dl
+        class="totalsDiscount"
+      >
+        <dt
+          class="subtotalLabel"
+        >
+          <span>
+            New Cart Total: 
+            <span
+              class=""
+            >
+              $34.00
+            </span>
+          </span>
+        </dt>
+        <dd
+          class="subtotalValue"
+        >
+          3 items
+        </dd>
+      </dl>
+    </div>
+  </div>
+</DocumentFragment>
+`;

react-components/src/components/Minicart/__test__/__snapshots__/footer.test.js.snap

@@ -0,0 +1,48 @@
+/*******************************************************************************
+ *
+ *    Copyright 2019 Adobe. All rights reserved.
+ *    This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License. You may obtain a copy
+ *    of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software distributed under
+ *    the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ *    OF ANY KIND, either express or implied. See the License for the specific language
+ *    governing permissions and limitations under the License.
+ *
+ ******************************************************************************/
+import React from 'react';
+import { render } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+
+import { CartProvider } from '../cartContext';
+import Footer from '../footer';
+import i18n from '../../../../__mocks__/i18nForTests';
+jest.mock('../../Checkout', () => {
+    return () => {
+        return null;
+    };
+});
+describe('<Footer>', () => {
+    it('renders the component', () => {
+        const { asFragment } = render(
+            <I18nextProvider i18n={i18n}>
+                <CartProvider
+                    initialState={{
+                        cart: {
+                            prices: {
+                                subtotal_excluding_tax: { currency: 'USD', value: 60 },
+                                subtotal_with_discount_excluding_tax: { currency: 'USD', value: 34 }
+                            },
+                            total_quantity: 3
+                        }
+                    }}
+                    reducerFactory={() => state => state}>
+                    <Footer />
+                </CartProvider>
+            </I18nextProvider>
+        );
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

react-components/src/components/Minicart/__test__/footer.test.js

@@ -28,7 +28,7 @@ const Footer = () => {
             <TotalsSummary
                 subtotal={subtotal_excluding_tax}
                 subtotalDiscount={subtotal_with_discount_excluding_tax}
-                numItems={cart.items.length}
+                numItems={cart.total_quantity}
             />
             <Checkout />
         </div>

react-components/src/components/Minicart/footer.js

@@ -74,7 +74,7 @@ query cartDetails($cartId: String!) {
         applied_coupon {
             code
         }
-
+        total_quantity
         items {
             id
             quantity