Test cart functionalities

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+  },
+});

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

@@ -0,0 +1,91 @@
+describe("can add a product to the cart starting from the homepage", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  context(
+    "can add a product to the cart passing through the category page",
+    () => {
+      it("can add a product to the cart passing through the category-headphones page", () => {
+        cy.getByData("headphones-go-to").click();
+        cy.location("pathname").should("eq", "/headphones");
+        cy.getByData("xx59-headphones-go-to").click();
+        cy.location("pathname").should("eq", "/headphones/xx59-headphones");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").contains("XX59");
+        cy.getByData("cart-item-qty").contains("1");
+      });
+
+      it("can add a product to the cart passing through the category-speakers page", () => {
+        cy.getByData("speakers-go-to").click();
+        cy.location("pathname").should("eq", "/speakers");
+        cy.getByData("zx7-speaker-go-to").click();
+        cy.location("pathname").should("eq", "/speakers/zx7-speaker");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").contains("ZX7");
+        cy.getByData("cart-item-qty").contains("1");
+      });
+
+      it("can add a product to the cart passing through the category-earphones page", () => {
+        cy.getByData("earphones-go-to").click();
+        cy.location("pathname").should("eq", "/earphones");
+        cy.getByData("yx1-earphones-go-to").click();
+        cy.location("pathname").should("eq", "/earphones/yx1-earphones");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").contains("YX1");
+        cy.getByData("cart-item-qty").contains("1");
+      });
+    }
+  );
+
+  context(
+    "can add a product to the cart passing through the products thumbnail in the homepage",
+    () => {
+      it("can add a product to the cart passing through the zx9-speaker thumbnail in the homepage", () => {
+        cy.getByData("zx9-speaker-go-to").click();
+        cy.location("pathname").should("eq", "/speakers/zx9-speaker");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").contains("ZX9");
+        cy.getByData("cart-item-qty").contains("1");
+      });
+
+      it("can add a product to the cart passing through the zx7-speaker thumbnail in the homepage", () => {
+        cy.getByData("zx7-speaker-go-to").click();
+        cy.location("pathname").should("eq", "/speakers/zx7-speaker");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").contains("ZX7");
+        cy.getByData("cart-item-qty").contains("1");
+      });
+
+      it("can add a product to the cart passing through the yx1-earphones thumbnail in the homepage", () => {
+        cy.getByData("yx1-earphones-go-to").click();
+        cy.location("pathname").should("eq", "/earphones/yx1-earphones");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").contains("YX1");
+        cy.getByData("cart-item-qty").contains("1");
+      });
+    }
+  );
+
+  it("can add a product to the cart passing through the header section in the homepage", () => {
+    cy.getByData("xx99-mark-two-headphones-go-to").click();
+    cy.location("pathname").should("eq", "/speakers/xx99-mark-two-headphones");
+    cy.getByData("quantity-to-add").should("contain.text", "1");
+    cy.getByData("add-to-cart").click();
+    cy.get("[data-test-id=cart-toggle]:visible").click();
+    cy.getByData("cart-item-name").contains("XX99");
+    cy.getByData("cart-item-qty").contains("1");
+  });
+});

cypress/e2e/cart-interactions.cy.ts

@@ -0,0 +1,99 @@
+describe("cart should perform cart-actions correctly from both cart component and product detail page", () => {
+  beforeEach(() => {
+    cy.visit("/speakers/xx99-mark-two-headphones");
+  });
+
+  context(
+    "cart should perform cart-actions correctly if the item is added from the product page",
+    function () {
+      it("cart should perform cart-actions correctly if the item is added from the product page and is the only one inside the cart", () => {
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").as("addToCart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").as("toggleCart").click();
+        cy.getByData("cart-item-name").contains("XX99 Mark II");
+        cy.getByData("cart-item-price").contains("2999");
+        cy.getByData("cart-item-qty").contains("1");
+        cy.clickOutside();
+        cy.get("@addToCart").click();
+        cy.get("@toggleCart").click();
+        cy.getByData("cart-items-total").contains("5998");
+        cy.clickOutside();
+        cy.getByData("add-qty").click();
+        cy.getByData("add-qty").click();
+        cy.getByData("quantity-to-add").should("contain.text", "3");
+        cy.get("@addToCart").click();
+        cy.get("@toggleCart").click();
+        cy.getByData("cart-items-total").contains("14995");
+      });
+      it("cart should perform cart-actions correctly if the item is added from the product page and there is another object in the cart", () => {
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").as("addToCart").click();
+        cy.visit("/speakers/zx9-speaker");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.get("@addToCart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").as("toggleCart").click();
+        cy.getByData("cart-item-name").eq(0).contains("XX99 Mark II");
+        cy.getByData("cart-item-price").eq(0).contains("2999");
+        cy.getByData("cart-item-qty").eq(0).contains("1");
+        cy.getByData("cart-item-name").eq(1).contains("ZX9");
+        cy.getByData("cart-item-price").eq(1).contains("4500");
+        cy.getByData("cart-item-qty").eq(1).contains("1");
+        cy.getByData("cart-items-total").contains("7499");
+        cy.clickOutside();
+        cy.getByData("add-qty").click();
+        cy.getByData("add-qty").click();
+        cy.getByData("quantity-to-add").should("contain.text", "3");
+        cy.get("@addToCart").click();
+        cy.get("@toggleCart").click();
+        cy.getByData("cart-item-qty").eq(1).contains("4");
+        cy.getByData("cart-items-total").contains("20999");
+      });
+    }
+  );
+
+  context(
+    "cart should perform cart-actions correctly if the item is added from the product page and the actions are triggered inside the cart",
+    function () {
+      it("cart should perform cart-actions correctly if the item is added from the product page, is the only one and the actions are triggered inside the cart", () => {
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").contains("XX99 Mark II");
+        cy.getByData("cart-item-price").contains("2999");
+        cy.getByData("cart-item-qty").contains("1");
+        cy.getByData("increase-item-from-cart").click();
+        cy.getByData("cart-item-qty").contains("2");
+        cy.getByData("cart-items-total").contains("5998");
+        cy.getByData("decrease-item-from-cart").click();
+        cy.getByData("decrease-item-from-cart").click();
+        cy.getByData("cart-items-total").contains("0");
+        cy.getByData("cart-item-name").should("not.exist");
+        cy.getByData("cart-item-price").should("not.exist");
+        cy.getByData("cart-item-qty").should("not.exist");
+      });
+
+      it("cart should perform cart-actions correctly if the item is added from the product page, is NOT the only one and the actions are triggered inside the cart", () => {
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.visit("/speakers/zx9-speaker");
+        cy.getByData("quantity-to-add").should("contain.text", "1");
+        cy.getByData("add-to-cart").click();
+        cy.get("[data-test-id=cart-toggle]:visible").click();
+        cy.getByData("cart-item-name").eq(0).contains("XX99 Mark II");
+        cy.getByData("cart-item-price").eq(0).contains("2999");
+        cy.getByData("cart-item-qty").eq(0).contains("1");
+        cy.getByData("cart-item-name").eq(1).contains("ZX9");
+        cy.getByData("cart-item-price").eq(1).contains("4500");
+        cy.getByData("cart-item-qty").eq(1).contains("1");
+        cy.getByData("cart-items-total").contains("7499");
+        cy.getByData("increase-item-from-cart").eq(0).click();
+        cy.getByData("increase-item-from-cart").eq(1).click();
+        cy.getByData("cart-items-total").contains("14998");
+        cy.getByData("remove-all-from-cart").click();
+        cy.getByData("cart-item-name").should("not.exist");
+        cy.getByData("cart-item-price").should("not.exist");
+        cy.getByData("cart-item-qty").should("not.exist");
+      });
+    }
+  );
+});

cypress/support/commands.ts

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+Cypress.Commands.add("getByData", (selector) => {
+  return cy.get(`[data-test-id=${selector}]`);
+});
+
+Cypress.Commands.add("clickOutside", () => {
+  return cy.get("body").click(0, 0);
+});

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/support/index.d.ts

@@ -0,0 +1,6 @@
+declare namespace Cypress {
+  interface Chainable {
+    getByData(selector: string): Chainable<JQuery<HTMLElement>>;
+    clickOutside(): Chainable<JQuery<HTMLElement>>;
+  }
+}

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}