メニュー
Use when writing or running tests in either package (frontend Stimulus/lib or server Fastify/sanitizer/Playwright). Provides Vitest setup, mounting helpers, route inject patterns, and Playwright stubbing templates.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when modifying the iframe DOM mirror (server `sanitize.ts`) or the in-iframe overlay script (`frontend/src/lib/overlay.ts`). Covers the sanitization pipeline rules, the overlay script contract, the postMessage protocol, and the cross-package sync requirement.
Use when opening a pull request for this repository. Enforces atomic commits, the required PR body shape (quick explainer of what we're doing + why), and the mandatory assignee.
Use when adding or modifying a Fastify route in `server/src/routes/`. Covers the buildApp DI pattern, request validation with Fastify schemas, error mapping per `09-api-contracts.md`, and the matching test template.
Use when adding or modifying a Stimulus controller in `frontend/src/controllers/`. Covers naming, registration, targets/values/actions conventions, custom events, and the matching test template.
| name | testing |
| description | Use when writing or running tests in either package (frontend Stimulus/lib or server Fastify/sanitizer/Playwright). Provides Vitest setup, mounting helpers, route inject patterns, and Playwright stubbing templates. |
Read docs/11-testing.md first. This skill is the practical companion.
frontend/package.json devDeps:
vitest, jsdom, @testing-library/dom, @testing-library/user-event,
@vitest/coverage-v8 (optional)
frontend/vitest.config.ts:
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
environment: "jsdom",
globals: false,
include: ["src/**/*.test.ts"],
setupFiles: ["src/test/setup.ts"],
},
});
frontend/src/test/setup.ts:
// Stimulus loads from ESM; nothing global needed yet.
// Add jest-dom-style matchers here if desired.
import { Application } from "@hotwired/stimulus";
import { fireEvent } from "@testing-library/dom";
import { describe, it, expect, beforeEach, afterEach } from "vitest";
import AppController from "./app_controller";
function mount(html: string) {
document.body.innerHTML = html;
const app = Application.start();
app.register("app", AppController);
return {
app,
el: document.body.firstElementChild as HTMLElement,
teardown: () => app.stop(),
};
}
describe("AppController", () => {
let ctx: ReturnType<typeof mount>;
afterEach(() => ctx?.teardown());
it("emits open-modal on valid URL", async () => {
ctx = mount(`
<form data-controller="app" data-action="submit->app#open">
<input name="url" value="https://example.com">
<input name="webhookUrl" value="https://hooks.example.com/x">
<button type="submit">Open</button>
</form>
`);
const events: CustomEvent[] = [];
ctx.el.addEventListener("open-modal", (e) => events.push(e as CustomEvent));
fireEvent.submit(ctx.el);
expect(events).toHaveLength(1);
expect(events[0].detail).toEqual({
url: "https://example.com",
webhookUrl: "https://hooks.example.com/x",
});
});
});
Rules:
teardown() in afterEach.document.body.innerHTML each test (mount does it).import { vi } from "vitest";
vi.mock("../lib/api", () => ({
fetchPage: vi.fn(async () => ({ html: "<html></html>", baseUrl: "https://x" })),
sendWebhook: vi.fn(async () => ({ ok: true, status: 200, body: "OK" })),
}));
server/package.json devDeps: vitest, @types/node.
server/vitest.config.ts:
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
environment: "node",
include: ["src/**/*.test.ts"],
},
});
server/src/app.ts:
import Fastify from "fastify";
import type { FastifyInstance } from "fastify";
export interface Deps {
pool: { withPage: <T>(fn: (page: any) => Promise<T>) => Promise<T> };
fetcher?: typeof fetch;
}
export function buildApp(deps: Deps): FastifyInstance {
const app = Fastify({ logger: false });
// app.register(fetchRoute, { deps });
// app.register(webhookRoute, { deps });
return app;
}
Tests call buildApp({ pool: fakePool }). Production entry constructs
the real pool.
import { describe, it, expect, vi } from "vitest";
import { buildApp } from "../app";
describe("POST /fetch", () => {
it("returns sanitized html on success", async () => {
const fakePool = {
withPage: async (fn: any) =>
fn({
goto: vi.fn().mockResolvedValue(undefined),
content: async () => "<html><body>hi<script>x</script></body></html>",
url: () => "https://example.com/page",
}),
};
const app = buildApp({ pool: fakePool });
const res = await app.inject({
method: "POST",
url: "/fetch",
payload: { url: "https://example.com/page" },
});
expect(res.statusCode).toBe(200);
const body = res.json();
expect(body.baseUrl).toBe("https://example.com/page");
expect(body.html).not.toContain("<script>");
});
it("rejects invalid url", async () => {
const app = buildApp({ pool: { withPage: vi.fn() as any } });
const res = await app.inject({
method: "POST",
url: "/fetch",
payload: { url: "not-a-url" },
});
expect(res.statusCode).toBe(400);
expect(res.json()).toEqual({ error: "invalid_url" });
});
});
await and
await vi.waitFor(...).data-state="loading" attributes you can assert against.