# 주문 목록 & 주문 상세

주문 목록 보기 기능

### User Scenario

<details>

<summary>Unit Test</summary>

#### OrderList.test.tsx

```typescript
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()
      );
    });
  });
});

```

</details>

<details>

<summary>E2E Test</summary>

```typescript
/// <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("tester@example.com", "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");
      });
    });
  });
});

```

</details>

## 주문 상세 보기 기능

<details>

<summary>Unit Test</summary>

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_road/week-10/and.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.