all tests

cypress/e2e/cart/add-to-cart.cy.ts

@@ -0,0 +1,59 @@
+import { LoginPage } from '@support/pages/login.page'
+import { InventoryPage } from '@support/pages/inventory.page'
+import { LoginInfo } from '..'
+
+describe('Cart', () => {
+  // create a small type on the fly using jsdoc comment
+  // just to help type check help us
+  const user: LoginInfo = Cypress.env('users').standard
+  // we can even check if the user object is valid
+  if (!user) {
+    throw new Error('Missing the standard user')
+  }
+
+  // before each test, quickly login the user
+  // or restore the previous user session
+  beforeEach(() => {
+    LoginPage.login(user.username, user.password)
+    cy.visit('/inventory.html')
+    cy.location('pathname').should('equal', '/inventory.html')
+  })
+
+  it('adds items to the cart', { viewportHeight: 1200 }, () => {
+    // confirm the cart badge does not exist at first
+    InventoryPage.getCartBadge().should('not.exist')
+
+    // add the item "Sauce Labs Bike Light" to the cart
+    // by clicking the button "Add to cart"
+    InventoryPage.addItemToCart('Sauce Labs Bike Light')
+    cy.contains('.inventory_item', 'Sauce Labs Bike Light').within(() => {
+      // the button should switch to "Remove"
+      cy.contains('button', 'Add to cart').should('not.exist')
+      cy.contains('button', 'Remove')
+    })
+    // the shopping cart link should have number 1
+    InventoryPage.getCartBadge()
+      .should('have.text', 1)
+      .scrollIntoView()
+      .should('be.visible')
+    // add the item "Sauce Labs Bolt T-Shirt" to the cart
+    // by clicking the button "Add to cart"
+    InventoryPage.addItemToCart('Sauce Labs Bolt T-Shirt')
+    cy.contains('.inventory_item', 'Sauce Labs Bolt T-Shirt').within(() => {
+      // the button should switch to "Remove"
+      cy.contains('button', 'Add to cart').should('not.exist')
+      cy.contains('button', 'Remove')
+    })
+    // the shopping cart link should have number 2
+    // tip: use https://on.cypress.io/scrollintoview command
+    // to bring the shopping cart element into the viewport
+    InventoryPage.getCartBadge()
+      .should('have.text', 2)
+      .scrollIntoView()
+      .should('be.visible')
+    // there should be two buttons with text "Remove"
+    // on the inventory page
+    // https://glebbahmutov.com/cypress-examples/#querying
+    cy.get('.inventory_item:contains("Remove")').should('have.length', 2)
+  })
+})

cypress/e2e/cart/cart-app-action.cy.ts

@@ -0,0 +1,64 @@
+import { LoginPage } from '@support/pages/login.page'
+import { InventoryPage } from '@support/pages/inventory.page'
+import { LoginInfo } from '..'
+
+describe('Cart', () => {
+  const user: LoginInfo = Cypress.env('users').standard
+  // we can even check if the user object is valid
+  if (!user) {
+    throw new Error('Missing the standard user')
+  }
+
+  // before each test, quickly login the user
+  // or restore the previous user session
+  beforeEach(() => {
+    LoginPage.login(user.username, user.password)
+    cy.visit('/inventory.html')
+    cy.location('pathname').should('equal', '/inventory.html')
+  })
+
+  it(
+    'can be controlled via application methods',
+    { viewportHeight: 1200 },
+    () => {
+      cy.log('**cart starts empty**')
+      // get the shopping cart object reference
+      // https://on.cypress.io/window
+      // https://on.cypress.io/its
+      cy.window()
+        .its('ShoppingCart')
+        // and call the production code method
+        // that returns the cart contents list of ids
+        .invoke('getCartContents')
+        // it should be an empty array
+        .should('deep.equal', [])
+      cy.log('**adds an item by making a method call**')
+      // add a product id 2 to the cart using ShoppingCart method
+      // add a product id 4 to the cart using ShoppingCart method
+      // confirm the cart badge element on the page
+      // shows the badge text 2
+      // hint: use the InventoryPage page object methods
+      // to interact with the page user interface
+      cy.window().its('ShoppingCart').invoke('addItem', 2)
+      cy.window().its('ShoppingCart').invoke('addItem', 4)
+      InventoryPage.getCartBadge().should('have.text', 2)
+      // grab the ShoppingCart reference again
+      // and call the production method to get the cart contents
+      // it should now be the list [2, 4]
+      cy.window()
+        .its('ShoppingCart')
+        .invoke('getCartContents')
+        .should('deep.equal', [
+          { id: 2, n: 1 },
+          { id: 4, n: 1 },
+        ])
+
+      cy.log('**visit the cart page**')
+      // visit the cart page
+      // https://on.cypress.io/visit
+      cy.visit('/cart.html')
+      // there should be two items in the cart list
+      cy.get('.cart_list .cart_item').should('have.length', 2)
+    },
+  )
+})

cypress/e2e/cart/cart-page.cy.ts

@@ -0,0 +1,35 @@
+import { LoginPage } from '@support/pages/login.page'
+import { LoginInfo } from '..'
+
+const user: LoginInfo = Cypress.env('users').standard
+// we can even check if the user object is valid
+if (!user) {
+  throw new Error('Missing the standard user')
+}
+
+// before each test, quickly login the user
+// or restore the previous user session
+beforeEach(() => {
+  LoginPage.login(user.username, user.password)
+})
+
+it('shows the cart items', { viewportHeight: 1200 }, () => {
+  const ids = [
+    { id: 0, n: 1 },
+    { id: 1, n: 2 },
+    { id: 2, n: 5 },
+  ]
+  // set the ids in the local storage item "cart-contents"
+  window.localStorage.setItem('cart-contents', JSON.stringify(ids))
+  cy.visit('/cart.html')
+  cy.getByTest('CartBadge', '3')
+  cy.getByTest('CartContents').should('be.visible')
+  cy.getByTest('CartItem').should('have.length', 3)
+  // iterate over the data and verify each item shown
+  ids.forEach((id, k) => {
+    cy.getByTest('CartItem')
+      .eq(k)
+      .getByTest('CartQuantity')
+      .should('have.value', ids[k].n)
+  })
+})

cypress/e2e/cart/cart.cy.ts

@@ -0,0 +1,139 @@
+import { LoginPage } from '@support/pages/login.page'
+import { InventoryPage } from '@support/pages/inventory.page'
+import { LoginInfo } from '..'
+import { InventoryData } from '@fixtures/inventory-data'
+import { ShoppingCart } from '../../../src/utils/shopping-cart'
+
+describe('Cart', { viewportHeight: 1200 }, () => {
+  const user: LoginInfo = Cypress.env('users').standard
+  // we can even check if the user object is valid
+  if (!user) {
+    throw new Error('Missing the standard user')
+  }
+
+  // before each test, quickly login the user
+  // or restore the previous user session
+  beforeEach(() => {
+    LoginPage.login(user.username, user.password)
+    cy.visit('/inventory.html')
+    cy.location('pathname').should('equal', '/inventory.html')
+  })
+
+  it('shows the added items in order they were added', () => {
+    const items = [
+      'Sauce Labs Bike Light',
+      'Sauce Labs Bolt T-Shirt',
+      'Sauce Labs Onesie',
+    ]
+    // find an id for each inventory item by name
+    // and store the ids in the array "ids"
+    // const ids = ...
+    const ids = items
+      .map((name) => Cypress._.find(InventoryData, { name })!.id)
+      .map((id) => ({ id, n: 1 }))
+    // add each item to cart using the InventoryPage object
+    items.forEach(InventoryPage.addItemToCart)
+    cy.log('**added all items to cart**')
+    // confirm the cart badge shows the right number of items
+    // then click on it
+    // https://on.cypress.io/click
+    InventoryPage.getCartBadge()
+      .should('have.text', items.length)
+      .scrollIntoView()
+      .wait(1000)
+      .click()
+    // confirm we move to the cart page
+    // https://on.cypress.io/location
+    cy.location('pathname').should('equal', '/cart.html')
+    // confirm the cart items list has the right number of elements
+    cy.get('.cart_list .cart_item').should('have.length', items.length)
+    cy.log('**shows each item in order**')
+    // iterate over the items
+    items.forEach((itemName, k) => {
+      // confirm each itm is at the right place
+      // on the page in the list of items
+      // https://on.cypress.io/get
+      // https://on.cypress.io/eq
+      cy.get('.cart_list .cart_item')
+        .eq(k)
+        .within(() => {
+          // and confirm that within the item the name
+          // is correct and the quantity is 1
+          cy.contains('.inventory_item_name', itemName)
+          cy.get('.cart_quantity').should('have.value', 1)
+        })
+    })
+    // get the application window object
+    // https://on.cypress.io/window
+    cy.window()
+      // get its property "localStorage"
+      // https://on.cypress.io/its
+      .its('localStorage')
+      // and call the method "getItem" to get the cart contents
+      // https://on.cypress.io/invoke
+      .invoke('getItem', 'cart-contents')
+      .should('exist')
+      // confirm the list has the expected product ids
+      // https://glebbahmutov.com/cypress-examples/commands/assertions.html
+      // Tip: local storage usually has stringified JSON
+      // @ts-ignore
+      .then(JSON.parse)
+      .should('deep.equal', ids)
+
+    cy.log('**continue shopping**')
+    cy.contains('button', 'Continue Shopping').click()
+    cy.location('pathname').should('equal', '/inventory.html')
+  })
+
+  it('navigates to the item from the cart', () => {
+    const itemId = 3
+    const item = InventoryData[itemId]
+    ShoppingCart.setCartContents([{ id: itemId, n: 1 }])
+    // visit the cart page
+    cy.visit('/cart.html')
+    // find the anchor link for the item and click it
+    // https://on.cypress.io/contains
+    // https://on.cypress.io/click
+    cy.contains('.cart_item_label a', item.name).click()
+    // confirm you are on the inventory item page
+    // and the search parameters include id=itemId
+    cy.location('pathname').should('equal', '/inventory-item.html')
+    cy.location('search').should('include', `id=${itemId}`)
+  })
+
+  it('has id and quantity data- attributes', () => {
+    // set the shopping cart contents
+    // to 3 different items with 3 different quantities
+    ShoppingCart.setCartContents([
+      { id: 1, n: 1 },
+      { id: 4, n: 2 },
+      { id: 5, n: 3 },
+    ])
+    // visit the cart page
+    cy.visit('/cart.html')
+    // there should be 3 cart item elements on the page
+    cy.get('.cart_list .cart_item')
+      .should('have.length', 3)
+      // grab the first cart item element
+      // https://on.cypress.io/first
+      .first()
+      // the next commands come from cypress-map plugin
+      // the first cart element should have property "dataset"
+      // that you can print to Command Log
+      // see cy.prop and cy.print
+      .prop('dataset')
+      .print('data %o')
+      // the dataset is an object with string values
+      // which you should map to numbers using cy.map
+      .map({
+        itemId: Number,
+        itemQuantity: Number,
+      })
+      // the object should have item id 1 with quantity 1
+      .should('deep.equal', {
+        itemId: 1,
+        itemQuantity: 1,
+        test: 'CartItem',
+      })
+  })
+})

cypress/e2e/cart/empty-cart.cy.ts

@@ -0,0 +1,19 @@
+import { LoginPage } from '@support/pages/login.page'
+import { InventoryPage } from '@support/pages/inventory.page'
+import { LoginInfo } from '..'
+
+describe('Empty cart', () => {
+  const user: LoginInfo = Cypress.env('users').standard
+  // we can even check if the user object is valid
+  if (!user) {
+    throw new Error('Missing the standard user')
+  }
+
+  it('disables the Checkout button', () => {
+    LoginPage.login(user.username, user.password)
+    cy.visit('/cart.html')
+    InventoryPage.getCartBadge().should('not.exist')
+    // confirm the user can see the disabled button
+    cy.getByTest('CartCheckout').should('be.visible').and('be.disabled')
+  })
+})

cypress/e2e/cart/instant-cart.cy.ts

@@ -0,0 +1,56 @@
+import { LoginPage } from '@support/pages/login.page'
+import { LoginInfo } from '..'
+import { InventoryData } from '@fixtures/inventory-data'
+
+describe('Cart', () => {
+  const user: LoginInfo = Cypress.env('users').standard
+  // we can even check if the user object is valid
+  if (!user) {
+    throw new Error('Missing the standard user')
+  }
+
+  // before each test, quickly login the user
+  // or restore the previous user session
+  beforeEach(() => {
+    LoginPage.login(user.username, user.password)
+  })
+
+  it('shows the cart items', { viewportHeight: 1200 }, () => {
+    const items = [
+      'Sauce Labs Bike Light',
+      'Sauce Labs Bolt T-Shirt',
+      'Sauce Labs Onesie',
+    ]
+    // find an id for each inventory item by name
+    // and store the ids in the array "ids"
+    // const ids = ...
+    const ids = items
+      .map((name) => Cypress._.find(InventoryData, { name })!.id)
+      .map((id) => ({ id, n: 1 }))
+    // set the ids in the local storage item "cart-contents"
+    // Tip: local storage usually has stringified data
+    window.localStorage.setItem('cart-contents', JSON.stringify(ids))
+    // visit the cart page
+    // https://on.cypress.io/visit
+    cy.visit('/cart.html')
+    // confirm each item name is present
+    // confirm the cart items list has the right number of elements
+    cy.get('.cart_list .cart_item').should('have.length', items.length)
+    cy.log('**shows each item in order**')
+    // iterate over the items
+    items.forEach((itemName, k) => {
+      // confirm each itm is at the right place
+      // on the page in the list of items
+      // https://on.cypress.io/get
+      // https://on.cypress.io/eq
+      cy.get('.cart_list .cart_item')
+        .eq(k)
+        .within(() => {
+          // and confirm that within the item the name
+          // is correct and the quantity is 1
+          cy.contains('.inventory_item_name', itemName)
+          cy.get('.cart_quantity').should('have.value', 1)
+        })
+    })
+  })
+})