9. Story와 harness

/**
 * 실제 주문 화면의 빈 상태를 대신한 문구
 */
export const Default = () => {
	return <p role="status">주문이 없습니다</p>;
};

import { StoryRoute } from "@test/_gallery/story-route";

import { AppProviders } from "@/app-providers";
import { PgOrders } from "@/page/(main)/orders/pg-orders";

/**
 * 주문 첫 페이지. gallery가 provider를 제공하는 프로젝트에서는 AppProviders 중복 제외
 */
export const Default = () => {
	return (
		<AppProviders>
			<StoryRoute entry="/orders" path="/orders">
				<PgOrders />
			</StoryRoute>
		</AppProviders>
	);
};

/**
 * URL 정렬 상태를 재현하는 입력
 */
export interface WithSearchProps {
	/**
	 * 화면이 처음 읽을 search 문자열
	 */
	search: string;
}

/**
 * 같은 화면의 URL 입력만 바꾼 story
 */
export const WithSearch = (props: WithSearchProps) => {
	return (
		<AppProviders>
			<StoryRoute entry={`/orders${props.search}`} path="/orders">
				<PgOrders />
			</StoryRoute>
		</AppProviders>
	);
};

import { expect, test } from "@test/_fixture/test";

import { createGetOrdersStatus200 } from "@/service/__kubb/mock/orders/get-orders";
import { getOrdersHandler } from "@/service/__kubb/msw/orders/get-orders-handler";

test("빈 주문 목록에 안내가 표시된다", async ({ mockApi, mount }) => {
	/**
	 * GIVEN
	 * 빈 주문 목록을 응답하는 서버
	 */
	mockApi.use(getOrdersHandler(createGetOrdersStatus200({
		items: [], total: 0, page: 1, updatedAt: "2026-03-01T03:00:00Z",
	})));

	/**
	 * WHEN
	 * 주문 story 진입
	 */
	const view = await mount("orders/Default");

	/**
	 * THEN
	 * 빈 상태와 관계없는 root 존재만 검사
	 */
	await expect(view).toBeVisible();
});

import { expect, test } from "@test/_fixture/test";

import { createGetOrdersStatus200 } from "@/service/__kubb/mock/orders/get-orders";
import { getOrdersHandler } from "@/service/__kubb/msw/orders/get-orders-handler";

test("빈 주문 목록에 안내가 표시된다", async ({ mockApi, mount }) => {
	/**
	 * GIVEN
	 * 빈 주문 목록을 응답하는 서버
	 */
	mockApi.use(getOrdersHandler(createGetOrdersStatus200({
		items: [], total: 0, page: 1, updatedAt: "2026-03-01T03:00:00Z",
	})));

	/**
	 * WHEN
	 * 실제 provider와 주문 화면을 가진 story 진입
	 */
	const view = await mount("orders/Default");

	/**
	 * THEN
	 * 실제 응답 처리 뒤 빈 목록 안내
	 */
	await expect(view.getByRole("status")).toHaveText("주문이 없습니다");
});

import { Fragment, useState } from "react";

import { WgOrderDialog } from "@/component/widget/order-dialog/wg-order-dialog";

/**
 * 저장 callback의 결과를 브라우저 DOM에 남기는 story
 */
export const SaveResult = () => {
	const [savedOrderId, setSavedOrderId] = useState("");

	return (
		<Fragment>
			{/*
			 * 브라우저 안에서 생성한 callback
			 */}
			<WgOrderDialog orderId="order-1" onSave={setSavedOrderId} />
			{/*
			 * 테스트에서 읽을 저장 결과
			 */}
			<output data-testid="saved-order">{savedOrderId}</output>
		</Fragment>
	);
};

import { expect, test } from "@playwright/test";

test("주문을 저장하면 callback에 선택한 ID를 전달한다", async ({ mount }) => {
	/**
	 * GIVEN
	 * 브라우저에서 callback 결과를 기록하는 story
	 */
	const storyId = "orders/order-dialog/SaveResult";

	/**
	 * WHEN
	 * 모달을 mount하고 저장
	 */
	const view = await mount(storyId);
	await view.getByRole("button", { name: "저장", exact: true }).click();

	/**
	 * THEN
	 * story가 실제 callback으로 받은 주문 ID
	 */
	await expect(view.getByTestId("saved-order")).toHaveText("order-1");
});

import { defineConfig } from "@playwright/test";

export default defineConfig({
	projects: [
		{ name: "e2e", testMatch: "**/*.e2e.spec.ts", use: { baseURL: "http://localhost:5175" } },
		{
			name: "integration",
			testMatch: "**/*.integration.spec.ts",
			use: { baseURL: "http://localhost:5175/test/_gallery/index.html", serviceWorkers: "block" },
		},
	],
	webServer: {
		// 프로젝트에서 앱과 gallery를 같은 테스트 빌드로 만드는 명령
		command: "npm run preview:test",
		url: "http://localhost:5175/test/_gallery/index.html",
	},
});