菜单
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.