import MarkdownIt from "markdown-it"; import { describe, expect, it } from "vitest"; import { cowritingMarkdownItPlugin } from "../src/previewAnnotations"; function render(src: string, inputs: any): string { const md = new MarkdownIt(); cowritingMarkdownItPlugin(md, { inputsFor: () => inputs }); return md.render(src); } const base = { baselineReason: "entered", proposals: [], enabled: true }; describe("preview annotations (PUC-3/D21)", () => { it("renders clean when disabled", () => { const html = render("hello brave world\n", { ...base, enabled: false, baselineText: "hello world\n", spans: [] }); expect(html).not.toContain("cw-"); }); it("colors machine spans blue and human insertions green vs baseline", () => { const html = render("hello brave new world\n", { ...base, baselineText: "hello world\n", spans: [{ start: 6, end: 12, author: "claude" }, { start: 12, end: 16, author: "human" }], }); expect(html).toContain('class="cw-ins-claude"'); expect(html).toContain('class="cw-ins-human"'); }); it("strikes deletions vs baseline", () => { const html = render("hello world\n", { ...base, baselineText: "hello cruel world\n", spans: [] }); expect(html).toContain("cw-del"); expect(html).toContain("cruel"); }); it("pinned baseline renders clean even with spans (pin→clean, INV-33/#48)", () => { const html = render("hello brave world\n", { ...base, baselineReason: "pinned", baselineText: "hello brave world\n", spans: [{ start: 6, end: 12, author: "claude" }], }); expect(html).not.toContain("cw-ins"); }); it("survives intra-emphasis boundaries (#33 discipline)", () => { const html = render("a *bold claim* here\n", { ...base, baselineText: "a here\n", spans: [{ start: 2, end: 14, author: "claude" }], }); expect(html).toContain("cw-ins-claude"); expect(html).not.toMatch(/[-]/); // no PUA sentinel leaks }); // Task 8 (coverage moved from the deleted f10Review.test.ts PUC-3/9): a // pending F4 proposal is optimistically applied in the buffer (F12, INV-48), // so the preview renders its applied text ins-claude and reinserts the // pre-apply original as a deletion — proposals are agent-authored by // definition, so this is unconditional (no `spans` entry needed). it("a pending proposal renders its applied text cw-ins-claude and the original as a deletion", () => { const src = "hello CLAUDE world\n"; const html = render(src, { ...base, baselineText: "hello world\n", spans: [], proposals: [ { id: "p1", anchorStart: 6, anchorEnd: 12, replaced: "world", replacement: "CLAUDE" }, ], }); expect(html).toContain('class="cw-ins-claude"'); expect(html).toContain("CLAUDE"); expect(html).toContain("cw-del"); expect(html).toContain("world"); }); // Task 8 (INV-32/33 coverage moved from f10Review.test.ts): a block with no // spans and no baseline divergence carries no cw- marks at all, even when // annotations are enabled — "changed since baseline" is the only trigger. it("an unchanged block (baseline == src, no spans) renders with no cw- marks", () => { const html = render("hello unchanged world\n", { ...base, baselineText: "hello unchanged world\n", spans: [], }); expect(html).not.toContain("cw-"); }); }); // Task 7 §2.6 / cross-task review follow-up (plan-mandated, INV-29..31): the // built-in preview's mermaid fence rendering reuses the F7.1 (#22) pure // re-emit, same as the sunset webview did — a changed mermaid diagram gets // intra-diagram change styling, not just the plain current diagram. Ports the // substance of the E2E assertions Task 8 deleted with the webview // (`git show 2170a0d^:test/e2e/suite/trackChangesPreview.test.ts`, "a changed // flowchart augments the emitted mermaid source (#22, INV-29)") as pure unit // tests here instead — no DOM/webview needed to verify SOURCE augmentation. describe("intra-diagram mermaid diff in the built-in preview (plan T7 §2.6, INV-29)", () => { const flowchartBefore = "```mermaid\nflowchart LR\n a --> b\n```\n"; const flowchartAfter = "```mermaid\nflowchart LR\n a --> b\n a --> c\n```\n"; it("a changed flowchart fence is re-emitted with cwAdded styling + a legend", () => { const html = render(flowchartAfter, { ...base, baselineText: flowchartBefore, spans: [] }); expect(html).toMatch(/classDef cwAdded/); expect(html).toMatch(/class\s+c\s+cwAdded/); expect(html).toContain("cw-mermaid-legend"); expect(html).toContain('class="mermaid"'); }); it("an unchanged mermaid fence passes through byte-identical (no diff markup)", () => { const html = render(flowchartBefore, { ...base, baselineText: flowchartBefore, spans: [] }); expect(html).not.toContain("cwAdded"); expect(html).not.toContain("cw-mermaid-legend"); expect(html).toContain("flowchart LR"); expect(html).toContain("a --> b"); }); it("annotations disabled: a changed mermaid fence renders the plain current diagram", () => { const html = render(flowchartAfter, { ...base, enabled: false, baselineText: flowchartBefore, spans: [] }); expect(html).not.toContain("cwAdded"); expect(html).not.toContain("cw-mermaid-legend"); expect(html).toContain("a --> c"); }); it("pinned baseline with zero landed diff: mermaid fence renders the plain current diagram (INV-33/#48 parity)", () => { const html = render(flowchartAfter, { ...base, baselineReason: "pinned", baselineText: flowchartAfter, spans: [], }); expect(html).not.toContain("cwAdded"); expect(html).not.toContain("cw-mermaid-legend"); }); it("no baseline (no coediting context established): mermaid fence renders the plain current diagram", () => { const html = render(flowchartAfter, { ...base, baselineText: undefined, spans: [] }); expect(html).not.toContain("cwAdded"); expect(html).not.toContain("cw-mermaid-legend"); }); it("a non-mermaid changed fence is untouched by the mermaid queue (fence-kind gate)", () => { const before = "```js\nconst a = 1;\n```\n"; const after = "```js\nconst a = 2;\n```\n"; const html = render(after, { ...base, baselineText: before, spans: [] }); expect(html).not.toContain("cwAdded"); expect(html).not.toContain("cw-mermaid-legend"); expect(html).toContain('class="language-js"'); }); });