bonus 40

cypress/e2e/cart/loads-saved-cart.cy.ts

@@ -0,0 +1,48 @@
+import { LoginPage } from '@support/pages/login.page'
+import { LoginInfo } from '..'
+
+const user: LoginInfo = Cypress.env('users').standard
+
+interface ItemInCart {
+  id: string
+  n: number
+}
+
+// Tip: read the Cypress Network testing guide before implementing this test
+// https://on.cypress.io/network-requests
+
+it('loads the saved cart contents', () => {
+  LoginPage.login(user.username, user.password)
+  // stub network call to "GET /user-cart" API endpoint
+  // https://on.cypress.io/intercept
+  // return fixture "cypress/fixtures/user-cart.json"
+  //
+  // give the network intercept alias "cart"
+  // https://on.cypress.io/as
+  //
+  // visit the cart page
+  cy.visit('/cart.html')
+  // confirm we are at the cart page and are not redirected anywhere else
+  cy.location('pathname').should('equal', '/cart.html')
+  // confirm the page requested the user cart
+  // https://on.cypress.io/wait
+  //
+  // confirm that every item from the fixture cart "user-cart.json" is shown
+  // and the number of items is correct
+  // https://on.cypress.io/fixture
+  //
+  // there should be same number of items on the page
+  // as loaded  from the fixture
+  //
+  // iterate over items in the fixture
+  // each item has properties "id" and "n"
+  // just like interface ItemInCart shows
+  //
+  // find the item cart item on the page with data item id attribute
+  // equal to the item's "id" property
+  //
+  // find the quantity input element
+  //
+  // it should have value equal to the item's "n" property
+  //
+})

cypress/fixtures/user-cart.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": 4,
+    "n": 2
+  },
+  {
+    "id": 5,
+    "n": 3
+  }
+]

package.json

@@ -12,6 +12,7 @@
     "react-app-polyfill": "^2.0.0",
     "react-burger-menu": "^3.0.6",
     "react-dom": "^17.0.2",
+    "react-fetch-hook": "^1.9.5",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^1.1.1"

src/pages/Cart.css

@@ -1,3 +1,10 @@
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
 .cart_contents_container {
   padding-top: 30px;
 }

src/pages/Cart.jsx

@@ -8,8 +8,31 @@ import SwagLabsFooter from '../components/Footer'
 import HeaderContainer from '../components/HeaderContainer'
 import Button, { BUTTON_SIZES, BUTTON_TYPES } from '../components/Button'
 import './Cart.css'
+import useFetch from 'react-fetch-hook'
 
 const Cart = ({ history }) => {
+  const { isLoading, data } = useFetch('/user-cart', {
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+
+  if (isLoading) {
+    return (
+      <div id="page_wrapper" className="page_wrapper">
+        <div id="contents_wrapper">
+          <HeaderContainer secondaryTitle="Your Cart" />
+          <div className="loading">Loading cart...</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isLoading && data) {
+    console.log(data)
+    ShoppingCart.setCartContents(data)
+  }
+
   const contents = ShoppingCart.getCartContents()
 
   return (