@mandujs/mcp 0.9.19 → 0.9.21

package/src/resources/skills/mandu-testing/rules/test-component-island.md

@@ -0,0 +1,195 @@
+---
+title: Test Island Components
+impact: HIGH
+impactDescription: Ensures UI correctness
+tags: testing, component, island, react
+---
+
+## Test Island Components
+
+**Impact: HIGH (Ensures UI correctness)**
+
+Island 컴포넌트의 렌더링과 인터랙션을 테스트하세요.
+
+**기본 컴포넌트 테스트:**
+
+```typescript
+// app/counter/client.test.tsx
+import { describe, it, expect } from "bun:test";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { CounterIsland } from "./client";
+
+describe("CounterIsland", () => {
+  it("should render initial count", () => {
+    render(<CounterIsland initial={5} />);
+
+    expect(screen.getByText("Count: 5")).toBeDefined();
+  });
+
+  it("should increment on button click", async () => {
+    render(<CounterIsland initial={0} />);
+
+    const button = screen.getByRole("button", { name: /increment/i });
+    fireEvent.click(button);
+
+    expect(screen.getByText("Count: 1")).toBeDefined();
+  });
+
+  it("should decrement on button click", async () => {
+    render(<CounterIsland initial={10} />);
+
+    const button = screen.getByRole("button", { name: /decrement/i });
+    fireEvent.click(button);
+
+    expect(screen.getByText("Count: 9")).toBeDefined();
+  });
+});
+```
+
+## 비동기 동작 테스트
+
+```typescript
+// app/search/client.test.tsx
+import { describe, it, expect, mock } from "bun:test";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { SearchIsland } from "./client";
+
+// fetch 모킹
+global.fetch = mock(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({ results: [{ id: 1, name: "Test" }] }),
+  })
+);
+
+describe("SearchIsland", () => {
+  it("should fetch and display results", async () => {
+    render(<SearchIsland />);
+
+    const input = screen.getByPlaceholderText("Search...");
+    fireEvent.change(input, { target: { value: "test" } });
+
+    // 비동기 결과 대기
+    await waitFor(() => {
+      expect(screen.getByText("Test")).toBeDefined();
+    });
+  });
+
+  it("should show loading state", async () => {
+    render(<SearchIsland />);
+
+    const input = screen.getByPlaceholderText("Search...");
+    fireEvent.change(input, { target: { value: "test" } });
+
+    // 로딩 상태 확인
+    expect(screen.getByText("Loading...")).toBeDefined();
+  });
+});
+```
+
+## 컴파운드 Island 테스트
+
+```typescript
+// app/form/client.test.tsx
+import { describe, it, expect } from "bun:test";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Form } from "./client";
+
+describe("Form Island", () => {
+  it("should submit form data", async () => {
+    const onSubmit = mock(() => {});
+
+    render(
+      <Form.Provider onSubmit={onSubmit}>
+        <Form.Frame>
+          <Form.Input name="email" />
+          <Form.Submit>Submit</Form.Submit>
+        </Form.Frame>
+      </Form.Provider>
+    );
+
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "test@example.com" } });
+
+    const button = screen.getByRole("button", { name: /submit/i });
+    fireEvent.click(button);
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      email: "test@example.com",
+    });
+  });
+});
+```
+
+## useIslandEvent 테스트
+
+```typescript
+import { describe, it, expect } from "bun:test";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { renderHook, act } from "@testing-library/react";
+import { useIslandEvent } from "@mandujs/core/client";
+
+describe("useIslandEvent", () => {
+  it("should emit and receive events", () => {
+    const received: number[] = [];
+
+    // 리스너 설정
+    const { result: listener } = renderHook(() =>
+      useIslandEvent<{ count: number }>("test-event", (data) => {
+        received.push(data.count);
+      })
+    );
+
+    // 이벤트 발송
+    const { result: emitter } = renderHook(() =>
+      useIslandEvent<{ count: number }>("test-event")
+    );
+
+    act(() => {
+      emitter.current.emit({ count: 42 });
+    });
+
+    expect(received).toContain(42);
+  });
+});
+```
+
+## 스냅샷 테스트
+
+```typescript
+import { describe, it, expect } from "bun:test";
+import { render } from "@testing-library/react";
+import { CardIsland } from "./client";
+
+describe("CardIsland", () => {
+  it("should match snapshot", () => {
+    const { container } = render(
+      <CardIsland title="Test" description="Description" />
+    );
+
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+});
+```
+
+## 테스트 설정
+
+```typescript
+// test/setup.ts
+import "@testing-library/jest-dom";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "bun:test";
+
+// 각 테스트 후 정리
+afterEach(() => {
+  cleanup();
+});
+```
+
+```json
+// bunfig.toml
+[test]
+preload = ["./test/setup.ts"]
+```
+
+Reference: [Testing Library React](https://testing-library.com/docs/react-testing-library/intro)

package/src/resources/skills/mandu-testing/rules/test-e2e-playwright.md

@@ -0,0 +1,196 @@
+---
+title: E2E Testing with Playwright
+impact: MEDIUM
+impactDescription: Validates complete user flows
+tags: testing, e2e, playwright, browser
+---
+
+## E2E Testing with Playwright
+
+**Impact: MEDIUM (Validates complete user flows)**
+
+Playwright를 사용하여 실제 브라우저에서 End-to-End 테스트를 실행하세요.
+
+**Playwright 설정:**
+
+```bash
+# 설치
+bun add -d @playwright/test
+bunx playwright install
+```
+
+```typescript
+// playwright.config.ts
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+  },
+
+  webServer: {
+    command: "bun run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});
+```
+
+**기본 E2E 테스트:**
+
+```typescript
+// tests/e2e/home.spec.ts
+import { test, expect } from "@playwright/test";
+
+test.describe("Home Page", () => {
+  test("should display welcome message", async ({ page }) => {
+    await page.goto("/");
+
+    await expect(page.getByRole("heading", { name: "Welcome" })).toBeVisible();
+  });
+
+  test("should navigate to about page", async ({ page }) => {
+    await page.goto("/");
+
+    await page.click('a[href="/about"]');
+
+    await expect(page).toHaveURL("/about");
+    await expect(page.getByRole("heading", { name: "About" })).toBeVisible();
+  });
+});
+```
+
+## 인증 플로우 테스트
+
+```typescript
+// tests/e2e/auth.spec.ts
+import { test, expect } from "@playwright/test";
+
+test.describe("Authentication", () => {
+  test("should login successfully", async ({ page }) => {
+    await page.goto("/login");
+
+    // 폼 입력
+    await page.fill('input[name="email"]', "test@example.com");
+    await page.fill('input[name="password"]', "password123");
+
+    // 제출
+    await page.click('button[type="submit"]');
+
+    // 리다이렉트 확인
+    await expect(page).toHaveURL("/dashboard");
+    await expect(page.getByText("Welcome back")).toBeVisible();
+  });
+
+  test("should show error for invalid credentials", async ({ page }) => {
+    await page.goto("/login");
+
+    await page.fill('input[name="email"]', "wrong@example.com");
+    await page.fill('input[name="password"]', "wrongpassword");
+    await page.click('button[type="submit"]');
+
+    await expect(page.getByText("Invalid credentials")).toBeVisible();
+    await expect(page).toHaveURL("/login");
+  });
+
+  test("should logout", async ({ page }) => {
+    // 먼저 로그인
+    await page.goto("/login");
+    await page.fill('input[name="email"]', "test@example.com");
+    await page.fill('input[name="password"]', "password123");
+    await page.click('button[type="submit"]');
+
+    // 로그아웃
+    await page.click('button[aria-label="Logout"]');
+
+    await expect(page).toHaveURL("/");
+    await expect(page.getByText("Login")).toBeVisible();
+  });
+});
+```
+
+## 인증 상태 재사용
+
+```typescript
+// tests/e2e/auth.setup.ts
+import { test as setup, expect } from "@playwright/test";
+
+const authFile = "tests/.auth/user.json";
+
+setup("authenticate", async ({ page }) => {
+  await page.goto("/login");
+  await page.fill('input[name="email"]', "test@example.com");
+  await page.fill('input[name="password"]', "password123");
+  await page.click('button[type="submit"]');
+
+  await expect(page).toHaveURL("/dashboard");
+
+  // 인증 상태 저장
+  await page.context().storageState({ path: authFile });
+});
+```
+
+```typescript
+// tests/e2e/dashboard.spec.ts
+import { test, expect } from "@playwright/test";
+
+// 저장된 인증 상태 사용
+test.use({ storageState: "tests/.auth/user.json" });
+
+test("should access dashboard when logged in", async ({ page }) => {
+  await page.goto("/dashboard");
+
+  // 로그인 상태로 바로 접근 가능
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+});
+```
+
+## API 모킹
+
+```typescript
+test("should display mocked data", async ({ page }) => {
+  // API 응답 모킹
+  await page.route("/api/users", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        users: [{ id: 1, name: "Mocked User" }],
+      }),
+    });
+  });
+
+  await page.goto("/users");
+
+  await expect(page.getByText("Mocked User")).toBeVisible();
+});
+```
+
+## 테스트 실행
+
+```bash
+# 모든 테스트
+bunx playwright test
+
+# 특정 파일
+bunx playwright test tests/e2e/auth.spec.ts
+
+# UI 모드
+bunx playwright test --ui
+
+# 디버그 모드
+bunx playwright test --debug
+
+# 리포트 보기
+bunx playwright show-report
+```
+
+Reference: [Playwright Documentation](https://playwright.dev/docs/intro)

package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md

@@ -0,0 +1,219 @@
+---
+title: Mock Fetch Requests in Tests
+impact: MEDIUM
+impactDescription: Isolates tests from external dependencies
+tags: testing, mock, fetch, api
+---
+
+## Mock Fetch Requests in Tests
+
+**Impact: MEDIUM (Isolates tests from external dependencies)**
+
+외부 API 호출을 모킹하여 테스트를 격리하고 빠르게 실행하세요.
+
+**기본 fetch 모킹:**
+
+```typescript
+// tests/helpers/mockFetch.ts
+import { mock, beforeEach, afterEach } from "bun:test";
+
+const originalFetch = global.fetch;
+
+export function mockFetch(responses: Record<string, unknown>) {
+  global.fetch = mock((url: string, options?: RequestInit) => {
+    const key = `${options?.method || "GET"} ${url}`;
+    const response = responses[key];
+
+    if (!response) {
+      return Promise.reject(new Error(`No mock for: ${key}`));
+    }
+
+    return Promise.resolve({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve(response),
+      text: () => Promise.resolve(JSON.stringify(response)),
+    } as Response);
+  });
+}
+
+export function restoreFetch() {
+  global.fetch = originalFetch;
+}
+```
+
+**사용 예시:**
+
+```typescript
+// app/users/client.test.tsx
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+import { render, screen, waitFor } from "@testing-library/react";
+import { mockFetch, restoreFetch } from "@/tests/helpers/mockFetch";
+import { UserListIsland } from "./client";
+
+describe("UserListIsland", () => {
+  beforeEach(() => {
+    mockFetch({
+      "GET /api/users": {
+        users: [
+          { id: 1, name: "Alice" },
+          { id: 2, name: "Bob" },
+        ],
+      },
+      "POST /api/users": {
+        user: { id: 3, name: "Charlie" },
+      },
+    });
+  });
+
+  afterEach(() => {
+    restoreFetch();
+  });
+
+  it("should fetch and display users", async () => {
+    render(<UserListIsland />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Alice")).toBeDefined();
+      expect(screen.getByText("Bob")).toBeDefined();
+    });
+  });
+});
+```
+
+## 조건부 응답 모킹
+
+```typescript
+export function createMockFetch() {
+  const mocks: Array<{
+    match: (url: string, options?: RequestInit) => boolean;
+    response: () => Promise<Response>;
+  }> = [];
+
+  const mockFn = mock((url: string, options?: RequestInit) => {
+    for (const { match, response } of mocks) {
+      if (match(url, options)) {
+        return response();
+      }
+    }
+    return Promise.reject(new Error(`No mock for: ${url}`));
+  });
+
+  return {
+    mock: mockFn,
+    when: (pattern: string | RegExp) => ({
+      respond: (data: unknown, status = 200) => {
+        mocks.push({
+          match: (url) =>
+            typeof pattern === "string"
+              ? url.includes(pattern)
+              : pattern.test(url),
+          response: () =>
+            Promise.resolve({
+              ok: status >= 200 && status < 300,
+              status,
+              json: () => Promise.resolve(data),
+            } as Response),
+        });
+      },
+      reject: (error: Error) => {
+        mocks.push({
+          match: (url) =>
+            typeof pattern === "string"
+              ? url.includes(pattern)
+              : pattern.test(url),
+          response: () => Promise.reject(error),
+        });
+      },
+    }),
+    install: () => {
+      global.fetch = mockFn;
+    },
+    restore: () => {
+      global.fetch = originalFetch;
+    },
+  };
+}
+```
+
+**사용:**
+
+```typescript
+const fetchMock = createMockFetch();
+
+beforeEach(() => {
+  fetchMock.when("/api/users").respond({ users: [] });
+  fetchMock.when("/api/users/1").respond({ user: { id: 1, name: "Alice" } });
+  fetchMock.when("/api/error").respond({ message: "Error" }, 500);
+  fetchMock.install();
+});
+
+afterEach(() => {
+  fetchMock.restore();
+});
+```
+
+## 에러 응답 테스트
+
+```typescript
+it("should handle API error", async () => {
+  mockFetch({
+    "GET /api/users": { error: "Server error" },
+  });
+  // status 오버라이드
+  global.fetch = mock(() =>
+    Promise.resolve({
+      ok: false,
+      status: 500,
+      json: () => Promise.resolve({ error: "Server error" }),
+    } as Response)
+  );
+
+  render(<UserListIsland />);
+
+  await waitFor(() => {
+    expect(screen.getByText("Failed to load users")).toBeDefined();
+  });
+});
+```
+
+## 네트워크 에러 테스트
+
+```typescript
+it("should handle network error", async () => {
+  global.fetch = mock(() =>
+    Promise.reject(new Error("Network error"))
+  );
+
+  render(<UserListIsland />);
+
+  await waitFor(() => {
+    expect(screen.getByText("Network error")).toBeDefined();
+  });
+});
+```
+
+## fetch 호출 검증
+
+```typescript
+it("should call API with correct params", async () => {
+  const mockFn = mock(() =>
+    Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({ users: [] }),
+    } as Response)
+  );
+  global.fetch = mockFn;
+
+  render(<UserListIsland filter="active" />);
+
+  await waitFor(() => {
+    expect(mockFn).toHaveBeenCalledWith(
+      "/api/users?filter=active",
+      expect.objectContaining({
+        method: "GET",
+      })
+    );
+  });
+});
+```