tests cartItem

src/Cart/Cart.test.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { screen, render, waitFor } from "@testing-library/react";
+import CartProvider from "../provider/CartProvider";
+import Cart from "./Cart";
+
+describe("testing cart in integration", () => {
+  beforeEach(() => {
+    jest.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        json: jest.fn().mockResolvedValue(mockResponse),
+      })
+    );
+  });
+  afterEach(() => jest.clearAllMocks());
+
+  const setup = () => {
+    render(
+      <CartProvider>
+        <Cart />
+      </CartProvider>
+    );
+  };
+
+  const mockResponse = {
+    products: [],
+  };
+  test("renders cart", async () => {
+    jest.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        json: jest.fn().mockResolvedValue(mockResponse),
+      })
+    );
+
+    await waitFor(() => {
+      setup();
+    });
+    expect(screen.getByText("Cart")).toBeInTheDocument();
+    expect(screen.getByText("Cart is empty")).toBeInTheDocument();
+  });
+});

src/Cart/CartItem.jsx → src/Cart/cartItem/CartItem.jsx

@@ -1,28 +1,39 @@
+import React from "react";
 import styles from "./CartItem.module.css";
 
 function CartItem({ data, increaseQuantity, decreaseQuantity }) {
   return (
     <div className={styles.cartItemContainer}>
       <div className={styles.item}>
         <div className={styles.imageContainer}>
-          <img className={styles.image} src={data.thumbnail} alt="item-image" />
+          <img
+            className={styles.image}
+            src={data.thumbnail}
+            alt="item-image"
+            data-testid="product-image"
+          />
         </div>
         <div className={styles.controls}>
           <button
             type="button"
             onClick={() => decreaseQuantity(data.id, data.quantity)}
+            data-testid="decrease-quantity-button"
           >
             -
           </button>
-          <p>{data.quantity}</p>
-          <button type="button" onClick={() => increaseQuantity(data.id)}>
+          <p data-testid="product-count">{data.quantity}</p>
+          <button
+            type="button"
+            onClick={() => increaseQuantity(data.id)}
+            data-testid="increase-quantity-button"
+          >
             +
           </button>
         </div>
       </div>
       <div className={styles.details}>
-        <p>Qty: {data.quantity}</p>
-        <p>Price: {data.quantity * data.price}</p>
+        <p data-testid="product-quantity">Qty: {data.quantity}</p>
+        <p data-testid="product-price">Price: {data.quantity * data.price}</p>
       </div>
     </div>
   );

src/Cart/cartItem/CartItem.test.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { screen, render } from "@testing-library/react";
+import CartItem from "./CartItem";
+import userEvent from "@testing-library/user-event";
+
+describe("cart item", () => {
+  const setup = () => {
+    const increaseQuantity = jest.fn();
+    const decreaseQuantity = jest.fn();
+    const data = {
+      id: "12345",
+      title: "iPhone 14 pro",
+      price: "140000",
+      quantity: 1,
+      thumbnail: "",
+    };
+    render(
+      <CartItem
+        data={data}
+        decreaseQuantity={decreaseQuantity}
+        increaseQuantity={increaseQuantity}
+      />
+    );
+    const incBtn = screen.getByTestId("increase-quantity-button");
+    const decBtn = screen.getByTestId("decrease-quantity-button");
+    return {
+      incBtn,
+      decBtn,
+      increaseQuantity,
+      decreaseQuantity,
+    };
+  };
+  test("renders single cart item", () => {
+    setup();
+    expect(screen.getByTestId("product-count")).toHaveTextContent("1");
+    expect(screen.getByTestId("product-quantity")).toHaveTextContent("Qty: 1");
+  });
+
+  test("increase and decrease buttons function properly", async () => {
+    const { incBtn, decBtn, decreaseQuantity, increaseQuantity } = setup();
+
+    // increase quantity
+    await userEvent.click(incBtn);
+    expect(increaseQuantity).toHaveBeenCalled();
+    expect(increaseQuantity).toHaveBeenCalledWith("12345");
+
+    // decrease quantity
+    await userEvent.click(decBtn);
+    expect(decreaseQuantity).toHaveBeenCalled();
+    expect(decreaseQuantity).toHaveBeenCalledWith("12345", 1);
+  });
+});