상품 상세 페이지

상품 상세보기 기능

상품 상세 정보를 얻어서 표시하는 화면

조회 API를 호출할 때 상품을 찾을 수 없는 경우와 API 오류가 발생한 경우를 고려하여 사용자에게 명확한 안내 메시지 제공

• 상품을 찾을 수 없는 경우 → "해당 상품을 찾을 수 없습니다."

• API 오류가 발생한 경우 → "오류가 발생했습니다. 잠시 후 다시 시도해주세요."

User Scenario

• 상품 이름, 이미지, 옵션, 설명이 노출된다.

• 장바구니에 상품을 담을 수 있는 버튼을 제공한다.

• 사용자는 상품 상세페이지에서 상품 옵션과 수량을 선택하여 장바구니에 담을 수 있다.

Unit Test

ProductDetail.test.tsx

import { render, screen, waitFor } from "@testing-library/react";
import { Route } from "react-router-dom";

import { productDetails } from "@/fixtures";
import { withAllContexts, withRouter } from "@/tests/utils";
import { numberFormat } from "@/utils/numberFormat";

import ProductDetail from "./ProductDetail";

const context = describe;

describe("ProductDetail", () => {
  const detail = productDetails[0];

  function renderProductDetail(productId: string) {
    return render(
      withAllContexts(
        withRouter(
          <Route path="/:id" element={<ProductDetail />} />,
          `/${productId}`
        )
      )
    );
  }

  context("with an valid product id", () => {
    it("render correctly", async () => {
      renderProductDetail(detail.id);

      await waitFor(() =>
        expect(
          screen.getByRole("heading", { name: detail.name })
        ).toBeInTheDocument()
      );

      expect(
        screen.getByText(`${numberFormat(detail.price)}원`)
      ).toBeInTheDocument();

      const line = detail.description.split("\n");

      line.forEach((str) => {
        expect(screen.getByText(new RegExp(str))).toBeInTheDocument();
      });

      detail.images.forEach((img) => {
        expect(screen.getByRole("img")).toHaveAttribute("src", img.url);
      });
    });
  });

  context("with an invalid product id", () => {
    it('render text "해당 상품을 찾을 수 없습니다."', async () => {
      renderProductDetail("soso");

      await waitFor(() =>
        expect(
          screen.getByText("해당 상품을 찾을 수 없습니다.")
        ).toBeInTheDocument()
      );
    });
  });
});

E2E Test

/// <reference types="cypress" />
import "@testing-library/cypress/add-commands";

describe("Product Detail", () => {
  beforeEach(() => {
    cy.visit("http://localhost:8081/products");
    cy.findByRole("link", { name: /CBCL 하트자수맨투맨/ }).click();
  });

  it("display product detail", () => {
    cy.findByText(/CBCL 하트자수맨투맨/).should("exist");
    cy.findByText(/편하게 입을 수 있는 맨투맨/).should("exist");
    cy.findByRole("img").should("exist");
    cy.findByRole("button", { name: "장바구니 담기" }).should("exist");
  });

  context("when change the quantity of a product", () => {
    it('default quantity is "1"', () => {
      cy.findByRole("textbox").should("have.value", "1");
    });

    it('changeable minimum qunatity is "1"', () => {
      cy.findByRole("textbox").should("have.value", "1");

      cy.findByRole("button", { name: "decrease" }).click();
      cy.findByRole("button", { name: "decrease" }).click();

      cy.findByRole("textbox").should("have.value", "1");
    });

    it('changeable maximum quantity is "10"', () => {
      Array.from({ length: 12 }).forEach(() => {
        cy.findByRole("button", { name: "increase" }).click();
      });

      cy.findByRole("textbox").should("have.value", "10");
    });

    it("the price changes as well", () => {
      cy.findByText(/128,000/).should("exist");

      cy.findByRole("button", { name: "increase" }).click();

      cy.findByText(/128,000/).should("not.exist");
      cy.findByText(/256,000/).should("exist");
    });
  });

  context("when change option", () => {
    it("display selected option", () => {
      cy.findByRole("combobox", { name: "컬러" }).click();
      cy.findByRole("option", { name: "grey" }).click();

      cy.findByText(/grey/).should("exist");
    });
  });

  context("when product no found", () => {
    it('display "해당 상품을 찾을 수 없습니다."', () => {
      cy.visit("http://localhost:8081/products/xxx");

      cy.findByText(/해당 상품을 찾을 수 없습니다./).should("exist");
    });
  });
});

장바구니 상품 담기 기능

장바구니에 상품을 담는다라는 것은 정확히는 상품 그 자체가 장바구니에 담기는것이 아니라, 해당 상품과 관련된 다양한 옵션 정보, 수량 등이 함께 조합되어 장바구니의 아이템으로 구성되는 것을 의미한다.

User Scenario

• 장바구니에 담기 버튼을 클릭하면 선택한 상품의 옵션, 수량 값이 장바구니에 추가된다.

• 장바구니에 담을 상품의 옵션과 수량을 변경할 수 있다.

  • 상품 수량의 기본값은 1이다.

  • 수량은 1 ~ 10 범위 내에서 선택이 가능하다.

• 수량이 변경될 때 마다 상품 가격도 변경된다.

• 장바구니 담기가 성공하면 '장바구니에 담았습니다' 텍스트가 노출된다.

Unit Test

ProductFormStore.test.tsx

import { productDetails } from "@/fixtures";

import ProductFormStore from "./ProductFormStore";

const context = describe;

describe("ProductFormStore", () => {
  let store: ProductFormStore;

  beforeEach(() => {
    store = new ProductFormStore();
  });

  describe("changeOptionItem", () => {
    const [product] = productDetails;
    const [option1, option2] = product.options;

    it("sets option item", () => {
      store.changeOptionItem({
        id: option1.id,
        itemId: option1.items[0].id,
      });

      store.changeOptionItem({
        id: option2.id,
        itemId: option1.items[0].id,
      });

      expect(store.selectedOptionItems).toEqual([
        {
          id: option1.id,
          itemId: option1.items[0].id,
        },
        {
          id: option2.id,
          itemId: option1.items[0].id,
        },
      ]);
    });

    context("with same option", () => {
      it("replace option item", () => {
        store.changeOptionItem({
          id: option1.id,
          itemId: option1.items[0].id,
        });

        store.changeOptionItem({
          id: option1.id,
          itemId: option1.items[1].id,
        });

        expect(store.selectedOptionItems).toEqual([
          { id: option1.id, itemId: option1.items[1].id },
        ]);
      });
    });
  });

  describe("getSelectedOptionItem", () => {
    const [product] = productDetails;
    const [option] = product.options;

    context("when the value of that option is selected", () => {
      it("returns the corresponding option item", () => {
        store.changeOptionItem({
          id: option.id,
          itemId: option.items[0].id,
        });

        expect(store.getSelectedOptionItem(option)).toEqual(option.items[0]);
      });
    });

    context("when no value selected", () => {
      it("returns undefined", () => {
        expect(store.getSelectedOptionItem(option)).toBeUndefined();
      });
    });
  });

  describe("changeQuantity", () => {
    context("with correct value", () => {
      it("changes quantity", () => {
        store.changeQuantity(3);

        expect(store.quantity).toBe(3);
      });
    });

    context("when value is less than 1", () => {
      it("doesn't changes quantity", () => {
        store.changeQuantity(-1);
        expect(store.quantity).toBe(1);
      });
    });

    context("when value is greater than 10", () => {
      it("doesn't changes quantity", () => {
        store.changeQuantity(11);
        expect(store.quantity).toBe(1);
      });
    });
  });
});

AddToCartForm.test.tsx

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import { productDetails } from "@/fixtures";
import { withAllContexts } from "@/tests/utils";
import { numberFormat } from "@/utils/format";

import AddToCartForm from "./AddToCartForm";

const [product] = productDetails;
const { options } = product;

const store = {
  selectedOptionItems: options.map((opt) => ({
    id: opt.id,
    itemId: opt.items[0].id,
  })),
  quantity: 1,
  totalPrice: jest.fn(),
  getSelectedOptionItem: jest.fn(),
  changeOptionItem: jest.fn(),
  clear: jest.fn(),
};

jest.mock("@/hooks/useProductFormStore", () => () => store);

const context = describe;

describe("AddToCartForm", () => {
  function renerAddToCartForm() {
    return render(withAllContexts(<AddToCartForm product={product} />));
  }

  beforeEach(() => {
    jest.clearAllMocks();
    store.totalPrice.mockImplementation(
      (price: number) => store.quantity * price
    );
  });

  it("renders correctly", () => {
    renerAddToCartForm();

    expect(screen.getAllByRole("combobox")).toHaveLength(options.length);

    const totalPrice = store.quantity * product.price;
    expect(screen.getByText(`${numberFormat(totalPrice)}원`));
  });

  context("when selectedItem is changed", () => {
    it("changeOptionItem is called", async () => {
      renerAddToCartForm();

      const selectEl = screen.getByRole("combobox", { name: "Color" });
      await userEvent.click(selectEl);

      const optionEl = screen.getByRole("option", { name: "Black" });
      await userEvent.click(optionEl);

      expect(store.changeOptionItem).toBeCalled();
    });
  });
});

Quantity.test.tsx

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import { withAllContexts } from "@/tests/utils";

import Quantity from "./Quantity";

const store = {
  quantity: 4,
  changeQuantity: jest.fn(),
};

jest.mock("@/hooks/useProductFormStore", () => () => store);

const context = describe;

describe("Quantity", () => {
  function renderQuantity() {
    return render(withAllContexts(<Quantity />));
  }

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("renders quantity", () => {
    renderQuantity();

    expect(screen.getByRole("textbox")).toHaveValue("4");
  });

  context('with "+" button is clicked', () => {
    it("couchangeQuantity is called", async () => {
      renderQuantity();

      const decreaseBtn = screen.getByRole("button", { name: "decrease" });

      await userEvent.click(decreaseBtn);

      expect(store.changeQuantity).toHaveBeenCalledWith(3);
    });
  });

  context('with "-" button is clicked', () => {
    it("changeQuantity is called", async () => {
      renderQuantity();

      const increaseBtn = screen.getByRole("button", { name: "increase" });

      await userEvent.click(increaseBtn);

      expect(store.changeQuantity).toHaveBeenCalledWith(5);
    });
  });
});

E2E Test

/// <reference types="cypress" />
import "@testing-library/cypress/add-commands";

describe("Product Detail", () => {
  beforeEach(() => {
    cy.visit("http://localhost:8081/products");
    cy.findByRole("link", { name: /CBCL 하트자수맨투맨/ }).click();
  });

  describe("add to cart", () => {
    context("when none of the options are selected", () => {
      it('alert will pop up with the message "옵션을 선택해주세요"', () => {
        cy.findByRole("button", { name: "장바구니 담기" }).click();

        cy.on("window:alert", (txt) => {
          expect(txt).to.contains("옵션을 선택해주세요");
        });
      });
    });

    context("when product to cart is succeed", () => {
      it('display "장바구니에 담았습니다', () => {
        cy.findByRole("combobox", { name: "컬러" }).click();
        cy.findByRole("option", { name: "grey" }).click();
        cy.findByRole("combobox", { name: "사이즈" }).click();
        cy.findByRole("option", { name: "ONE" }).click();

        cy.findByRole("button", { name: "장바구니 담기" }).click();

        cy.findByText(/장바구니에 담았습니다/).should("exist");
      });
    });
  });
});