6. 네트워크 경계

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

test("빈 주문 목록에 안내가 표시된다", async ({ page }) => {
	/**
	 * GIVEN
	 * 실제 주문 화면
	 */
	await page.goto("/orders");

	/**
	 * WHEN
	 * DOM에 정답 문구 직접 삽입
	 */
	await page.getByRole("main").evaluate((element) => {
		element.innerHTML = '<p role="status">주문이 없습니다</p>';
	});

	/**
	 * THEN
	 * 삽입한 문구의 존재
	 */
	await expect(page.getByRole("status")).toHaveText("주문이 없습니다");
});

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

test("빈 주문 목록에 안내가 표시된다", async ({ page }) => {
	/**
	 * GIVEN
	 * 빈 주문 목록을 응답하는 서버
	 */
	await page.route("**/api/orders", async (route) => {
		await route.fulfill({ json: { items: [], total: 0 } });
	});

	/**
	 * WHEN
	 * 실제 주문 화면 진입
	 */
	await page.goto("/orders");

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

import { afterAll, afterEach, beforeAll, expect, test } from "vitest";
import { HttpResponse, http } from "msw";
import { setupServer } from "msw/node";

const server = setupServer(
	http.get("https://app.example.test/api/orders", () => {
		return HttpResponse.json({ items: [], total: 0 });
	}),
);

beforeAll(() => {
	server.listen({ onUnhandledRequest: "bypass" });
});
afterEach(() => {
	server.resetHandlers();
});
afterAll(() => {
	server.close();
});

test("주문 목록 응답을 받는다", async () => {
	/**
	 * GIVEN
	 * 모듈 fixture의 주문 목록 handler
	 */
	const url = "https://app.example.test/api/orders";

	/**
	 * WHEN
	 * 주문 API 요청
	 */
	const response = await fetch(url);

	/**
	 * THEN
	 * fixture에서 정한 빈 목록과 건수
	 */
	expect(await response.json()).toStrictEqual({ items: [], total: 0 });
});

import { afterAll, afterEach, beforeAll, expect, test } from "vitest";
import { HttpResponse, http } from "msw";
import { setupServer } from "msw/node";

const server = setupServer(
	http.get("https://app.example.test/api/orders", () => {
		return HttpResponse.json({ items: [], total: 0 });
	}),
);

beforeAll(() => {
	server.listen({ onUnhandledRequest: "error" });
});
afterEach(() => {
	server.resetHandlers();
});
afterAll(() => {
	server.close();
});

test("주문 목록 응답을 받는다", async () => {
	/**
	 * GIVEN
	 * 모듈 fixture의 주문 목록 handler
	 */
	const url = "https://app.example.test/api/orders";

	/**
	 * WHEN
	 * 주문 API 요청
	 */
	const response = await fetch(url);

	/**
	 * THEN
	 * fixture에서 정한 빈 목록과 건수
	 */
	expect(await response.json()).toStrictEqual({ items: [], total: 0 });
});

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

test("기본 주문 목록의 수량을 표시한다", async ({ page }) => {
	/**
	 * GIVEN
	 * spec마다 직접 복사한 정상 응답
	 */
	await page.route("**/api/orders", async (route) => {
		await route.fulfill({ json: { items: [{ id: "order-1", quantity: 1234 }], total: 1 } });
	});

	/**
	 * WHEN
	 * 주문 화면 진입
	 */
	await page.goto("/orders");

	/**
	 * THEN
	 * 표시된 수량
	 */
	await expect(page.getByRole("cell", { name: "1,234.00", exact: true })).toBeVisible();
});

import { createOrderDto } from "@/service/__kubb/mock/order-dto";

/**
 * 주문 목록의 정상 본문. 화면이 읽는 값과 목록 건수 고정
 */
export const mockOrders = () => {
	const items = [createOrderDto({ id: "order-1", quantity: 1234, status: "open" })];

	return { items, total: items.length, page: 1, updatedAt: "2026-03-01T03:00:00Z" };
};

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

/**
 * 주문 조회의 성공 응답. 본문 계산은 도메인 builder 소유
 */
export const get_orders_handler = getOrdersHandler(() => {
	return getOrdersHandlerResponse200(createGetOrdersStatus200(mockOrders()));
});

import type { RequestHandler } from "msw";

import { handlers } from "@/service/__kubb/msw/handlers";
import { get_orders_handler } from "@/service/msw/orders/get-orders";

/**
 * 개발, mock 앱 E2E, story 통합의 반복 응답. once, generator, 공유 가변 상태 제외
 */
export const mock_handlers = [get_orders_handler, ...handlers] satisfies RequestHandler[];

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

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

test("주문 조회가 실패하면 오류 안내가 표시된다", async ({ mockApi, mount }) => {
	/**
	 * GIVEN
	 * 정상 registry에서 주문 조회만 500으로 실패하는 서버
	 */
	mockApi.use(getOrdersHandler(() => {
		return getOrdersHandlerResponse500(createGetOrdersStatus500({ message: "목록을 불러오지 못했습니다" }));
	}));

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

	/**
	 * THEN
	 * 실패 응답 처리 뒤 오류 안내
	 */
	await expect(view.getByRole("alert")).toHaveText("목록을 불러오지 못했습니다");
});

import { http, HttpResponse } from "msw";
import { setupWorker } from "msw/browser";

import { mock_unhandled_api_prefix } from "@/service/msw/_constant/mock";

/**
 * Node registry와 따로 만든 브라우저 전용 정상 데이터
 */
const browser_handlers = [http.get("*/api/orders", () => {
	return HttpResponse.json({ items: [], total: 0 });
})];

/**
 * mock 모드 진입에서만 호출하는 브라우저 worker 시작
 */
export const startMockWorker = async () => {
	return setupWorker(...browser_handlers).start({
		onUnhandledRequest: (request, print) => {
			if (new URL(request.url).pathname.startsWith("/api/")) {
				console.error(mock_unhandled_api_prefix, request.method, request.url);
				print.error();
			}
		},
	});
};

/**
 * 브라우저 worker와 실행 fixture가 함께 읽는 미처리 API 표식
 */
export const mock_unhandled_api_prefix = "[mock-api-unhandled]";

import { setupWorker } from "msw/browser";

import { mock_unhandled_api_prefix } from "@/service/msw/_constant/mock";
import { mock_handlers } from "@/service/msw/handlers";

/**
 * mock 모드 진입에서만 호출하는 브라우저 worker 시작
 */
export const startMockWorker = async () => {
	return setupWorker(...mock_handlers).start({
		onUnhandledRequest: (request, print) => {
			if (new URL(request.url).pathname.startsWith("/api/")) {
				console.error(mock_unhandled_api_prefix, request.method, request.url);
				print.error();
			}
		},
	});
};

import { Buffer } from "node:buffer";
import { getResponse } from "msw";

import type { Route } from "@playwright/test";
import type { RequestHandler } from "msw";

/**
 * API 전용 bridge. 미처리와 passthrough는 실제 호출 허용 없이 외부로 보내지 않음
 */
export const toMockRoute = (handlers: RequestHandler[]) => {
	return async (route: Route) => {
		const request = route.request();
		const requestBody = request.postDataBuffer();
		const response = await getResponse(handlers, new Request(request.url(), {
			method: request.method(),
			headers: await request.allHeaders(),
			body: requestBody === null ? undefined : new Uint8Array(requestBody),
		}), { baseUrl: new URL(request.url()).origin });

		if (!response || response.headers.get("x-msw-intention") === "passthrough") {
			throw new Error(`Unhandled mock API: ${request.method()} ${request.url()}`);
		}
		const cookies = response.headers.getSetCookie();

		await route.fulfill({
			status: response.status,
			headers: {
				...Object.fromEntries(response.headers),
				...(cookies.length > 0 ? { "set-cookie": cookies.join("\n") } : {}),
			},
			body: Buffer.from(await response.arrayBuffer()),
		});
	};
};

import { test as base, expect } from "@playwright/test";
import { toMockRoute } from "@test/_fixture/to-mock-route";

import type { RequestHandler } from "msw";

import { mock_handlers } from "@/service/msw/handlers";

/**
 * 사례별 응답 덮어쓰기
 */
interface Fixtures {
	/**
	 * 기본 registry보다 먼저 해석할 handler의 등록
	 */
	mockApi: {
		/**
		 * 요청 시작 전에 추가할 사례 handler
		 */
		use: (...handlers: RequestHandler[]) => void;
	};
}

export { expect };

/**
 * 테스트마다 공유 registry 복사와 route 수명 소유. 새 context 사용을 기본값으로 유지
 */
export const test = base.extend<Fixtures>({
	mockApi: [async ({ page }, use) => {
		const handlers: RequestHandler[] = [...mock_handlers];
		const route = toMockRoute(handlers);
		await page.route("**/api/**", route);
		try {
			await use({
				use: (...overrides) => {
					handlers.unshift(...overrides);
				},
			});
		} finally {
			await page.unroute("**/api/**", route);
		}
	}, { auto: true }],
});

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

import type { ConsoleMessage } from "@playwright/test";

import { mock_unhandled_api_prefix } from "@/service/msw/_constant/mock";

/**
 * mock 앱 E2E에서 자동 적용하는 미처리 API 검사
 */
interface Fixtures {
	/**
	 * 테스트의 모든 이동을 통틀어 수집하는 오류
	 */
	mockApiFailures: undefined;
}

export { expect };

/**
 * mock 앱 E2E spec이 가져오는 test. 화면의 오류 처리와 별개로 API 누락을 검출
 */
export const test = base.extend<Fixtures>({
	mockApiFailures: [async ({ page }, use) => {
		const unhandled: string[] = [];
		/**
		 * 브라우저 문서가 교체돼도 보존되는 Node 기록
		 */
		const collectMockError = (message: ConsoleMessage) => {
			if (message.type() === "error" && message.text().startsWith(mock_unhandled_api_prefix)) {
				unhandled.push(message.text());
			}
		};
		page.on("console", collectMockError);
		try {
			await use(undefined);
			expect(unhandled, "미처리 mock API 요청").toStrictEqual([]);
		} finally {
			page.off("console", collectMockError);
		}
	}, { auto: true }],
});