주문 목록 & 주문 상세

주문 목록 보기 기능

User Scenario

Unit Test

OrderList.test.tsx

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

import { orders } from "@/fixtures";
import { withAllContexts, withRouter, regex } from "@/tests/utils";

import OrderList from "./OrderList";

const context = describe;

describe("OrderList", () => {
  it("render correctly", async () => {
    render(
      withAllContexts(withRouter(<Route path="/" element={<OrderList />} />))
    );

    await Promise.all(
      orders.map(async (order) => {
        await waitFor(() =>
          expect(screen.getByText(regex(order.id))).toBeInTheDocument()
        );
        await waitFor(() =>
          expect(screen.getByText(regex(order.title))).toBeInTheDocument()
        );
      })
    );
  });

  context("when order item is clicked", () => {
    const [order] = orders;

    it("navigate to the order detail page", async () => {
      function DetailPage() {
        const params = useParams();
        return <pre>{JSON.stringify(params)}</pre>;
      }

      render(
        withAllContexts(
          withRouter(
            <>
              <Route path="/" element={<OrderList />} />
              <Route path="/:id" element={<DetailPage />} />
            </>
          )
        )
      );

      await waitFor(() => screen.getByText(regex(order.title)));
      const linkBtn = screen.getAllByRole("link")[0];

      userEvent.click(linkBtn);

      await waitFor(() =>
        expect(screen.getByText(regex(order.id))).toBeInTheDocument()
      );
    });
  });
});

E2E Test

/// <reference types="cypress" />

// 로그인 한 사용자만 접근이 가능하다.
// 주문 일자, 주문 금액, 주문 상품들을 확인할 수 있다.
// 각 주문 내역을 클릭하면 주문 상세 페이지로 이동한다.

describe("Order List", () => {
  context("with not logged in", () => {
    it("cant not access the order page", () => {
      cy.visit("/orders");
      cy.url().should("not.include", "/orders");
    });
  });

  context("with logged in", () => {
    beforeEach(() => {
      cy.sessionLogin("[e-mail]", "password");
      cy.visit("/orders");
    });

    it("can access the order page", () => {
      cy.findByRole("heading", { level: 1, name: "주문 목록" }).should("exist");
      cy.url().should("include", "/orders");
    });

    context("when order item is clicked", () => {
      it("navigate detail page", () => {
        cy.findByRole("link", { name: /CBCL 하트자수맨투맨/ }).click();

        cy.findByText("주문 상세").should("exist");
      });
    });
  });
});

주문 상세 보기 기능

Unit Test