import { describe, it, test, expect } from "vitest"; import { splitBlocks, splitBlocksWithRanges, diffBlocks, renderTrackChanges, colorByAuthor, type AuthorSpan } from "../src/trackChangesModel"; describe("splitBlocks", () => { it("splits prose paragraphs on blank lines, dropping empties", () => { const blocks = splitBlocks("# Heading\n\nFirst para.\n\nSecond para.\n"); expect(blocks.map((b) => b.type)).toEqual(["prose", "prose", "prose"]); expect(blocks[0].raw).toBe("# Heading"); expect(blocks[2].raw).toBe("Second para."); }); it("keeps a fenced code block whole and tags it `code`", () => { const text = "Intro.\n\n```ts\nconst a = 1;\n\nconst b = 2;\n```\n\nOutro.\n"; const blocks = splitBlocks(text); expect(blocks.map((b) => b.type)).toEqual(["prose", "code", "prose"]); expect(blocks[1].raw).toBe("```ts\nconst a = 1;\n\nconst b = 2;\n```"); }); it("tags a mermaid fence `mermaid`", () => { const blocks = splitBlocks("```mermaid\nflowchart LR\n a-->b\n```\n"); expect(blocks).toHaveLength(1); expect(blocks[0].type).toBe("mermaid"); }); it("normalizes the key (whitespace-collapsed) for matching", () => { const blocks = splitBlocks("Hello world\n"); expect(blocks[0].key).toBe("hello world"); }); }); describe("diffBlocks", () => { const kinds = (base: string, cur: string) => diffBlocks(base, cur).map((o) => o.kind); it("unchanged doc → all unchanged", () => { const doc = "Alpha.\n\nBravo.\n"; expect(kinds(doc, doc)).toEqual(["unchanged", "unchanged"]); }); it("a pure addition → an added op", () => { const ops = diffBlocks("Alpha.\n", "Alpha.\n\nBravo.\n"); expect(ops.map((o) => o.kind)).toEqual(["unchanged", "added"]); }); it("a pure deletion → a removed op", () => { const ops = diffBlocks("Alpha.\n\nBravo.\n", "Alpha.\n"); expect(ops.map((o) => o.kind)).toEqual(["unchanged", "removed"]); }); it("a prose modification → a non-atomic changed op", () => { const ops = diffBlocks("The quick fox.\n", "The slow fox.\n"); expect(ops).toHaveLength(1); expect(ops[0].kind).toBe("changed"); expect(ops[0].kind === "changed" && ops[0].atomic).toBe(false); }); it("a code-fence change → an ATOMIC changed op (INV-23)", () => { const base = "```ts\nconst a = 1;\n```\n"; const cur = "```ts\nconst a = 2;\n```\n"; const ops = diffBlocks(base, cur); expect(ops).toHaveLength(1); expect(ops[0].kind).toBe("changed"); expect(ops[0].kind === "changed" && ops[0].atomic).toBe(true); }); it("a mermaid-fence change → an ATOMIC changed op", () => { const base = "```mermaid\nflowchart LR\n a-->b\n```\n"; const cur = "```mermaid\nflowchart LR\n a-->c\n```\n"; const ops = diffBlocks(base, cur); expect(ops[0].kind).toBe("changed"); expect(ops[0].kind === "changed" && ops[0].atomic).toBe(true); }); it("a reorder → keeps a matched block unchanged", () => { const ops = diffBlocks("One.\n\nTwo.\n", "Two.\n\nOne.\n"); const k = ops.map((o) => o.kind); expect(k).toContain("unchanged"); }); }); describe("renderTrackChanges", () => { it("wraps each block in a cw-blk div with its kind class", () => { const html = renderTrackChanges("Alpha.\n", "Alpha.\n\nBravo.\n"); expect(html).toContain('class="cw-blk cw-unchanged"'); expect(html).toContain('class="cw-blk cw-added"'); }); it("emits inline / for a prose modification", () => { const html = renderTrackChanges("The quick fox.\n", "The slow fox.\n"); expect(html).toContain(""); expect(html).toContain(""); expect(html).toContain("cw-changed"); }); it("renders a changed CODE fence atomically: cw-changed, no inline ins/del", () => { const html = renderTrackChanges("```ts\nconst a = 1;\n```\n", "```ts\nconst a = 2;\n```\n"); expect(html).toContain("cw-changed"); expect(html).not.toContain(""); expect(html).not.toContain(""); expect(html).toContain("cw-badge"); }); it('emits
 for a changed flowchart, augmented intra-diagram (#22)', () => {
    const html = renderTrackChanges(
      "```mermaid\nflowchart LR\n a-->b\n```\n",
      "```mermaid\nflowchart LR\n a-->c\n```\n",
    );
    expect(html).toContain('
');
    expect(html).toContain("a-->c"); // current source preserved as prefix, escaped
    // a changed flowchart is now diffed in place (INV-29): styling, not a whole-block badge
    expect(html).toContain("classDef cwAdded");
    expect(html).not.toContain('changed');
  });

  it("unchanged doc renders with no marks", () => {
    const html = renderTrackChanges("Alpha.\n", "Alpha.\n");
    expect(html).not.toContain("cw-added");
    expect(html).not.toContain("cw-removed");
    expect(html).not.toContain("cw-changed");
  });

  it("is deterministic (same inputs → identical HTML) (INV-22)", () => {
    const a = renderTrackChanges("X.\n\nY.\n", "X.\n\nZ.\n");
    const b = renderTrackChanges("X.\n\nY.\n", "X.\n\nZ.\n");
    expect(a).toBe(b);
  });
});

describe("error chip (PUC-6)", () => {
  it("a block whose render throws becomes an error chip; the rest still renders", () => {
    const throwing = (src: string) => {
      if (src.includes("BOOM")) throw new Error("kaboom");
      return `

${src}

`; }; const html = renderTrackChanges("Good one.\n\nBOOM here.\n", "Good one.\n\nBOOM here.\n", { render: throwing, }); expect(html).toContain("cw-error"); expect(html).toContain("kaboom"); expect(html).toContain("

Good one.

"); // the healthy block still rendered }); }); describe("splitBlocksWithRanges — block offsets align with the source string", () => { it("each block's [start,end) slices back to its raw from the source", () => { const text = "# Title\n\nA prose paragraph.\n\n```js\ncode()\n```\n"; const blocks = splitBlocksWithRanges(text); expect(blocks.map((b) => b.type)).toEqual(["prose", "prose", "code"]); for (const b of blocks) { expect(text.slice(b.start, b.end)).toBe(b.raw); } expect(blocks[1].raw).toBe("A prose paragraph."); }); it("marks a mermaid fence and preserves its source offsets", () => { const text = "intro\n\n```mermaid\ngraph TD; A-->B;\n```\n"; const blocks = splitBlocksWithRanges(text); expect(blocks[1].type).toBe("mermaid"); expect(text.slice(blocks[1].start, blocks[1].end)).toBe(blocks[1].raw); }); }); describe("colorByAuthor", () => { test("colorByAuthor wraps human-authored prose in cw-by-human spans", () => { const raw = "hello world"; const spans: AuthorSpan[] = [{ start: 0, end: 5, author: "human" }]; const render = (src: string) => `

${src}

`; const html = colorByAuthor(raw, 0, spans, render); expect(html).toContain('hello'); expect(html).toContain("world"); }); }); import { renderPlain } from "../src/trackChangesModel"; describe("renderPlain", () => { test("renderPlain renders current buffer as plain markdown (no marks)", () => { const html = renderPlain("# Title\n\nhello"); expect(html).toContain("

Title

"); expect(html).toContain("hello"); expect(html).not.toContain("cw-"); }); }); import { renderReview, type ProposalView } from "../src/trackChangesModel"; describe("renderReview", () => { test("renderReview: human addition since baseline renders green ins / cw-by-human", () => { const html = renderReview("hello", "hello world", [{ start: 6, end: 11, author: "human" }], []); expect(html).toMatch(/[^<]*world[^<]*<\/ins>|cw-by-human/); }); test("renderReview: deletion since baseline renders struck del/cw-del", () => { const html = renderReview("hello world", "hello", [], []); expect(html).toMatch(/|cw-del/); }); test("renderReview: a pending proposal renders a blue block with data-proposal-id and ✓/✗ actions", () => { const proposals: ProposalView[] = [{ id: "p1", anchorStart: 0, anchorEnd: 5, replaced: "hello", replacement: "goodbye" }]; const html = renderReview("hello", "hello", [], proposals); expect(html).toContain('class="cw-proposal"'); expect(html).toContain('data-proposal-id="p1"'); expect(html).toContain("cw-actions"); expect(html).toContain("goodbye"); expect(html).toMatch(/]*>[^<]*hello[^<]*<\/del>|cw-del/); }); test("renderReview: an unresolved proposal renders as a trailing block (never dropped)", () => { const proposals: ProposalView[] = [{ id: "p2", anchorStart: null, anchorEnd: null, replaced: "x", replacement: "y" }]; const html = renderReview("a", "a", [], proposals); expect(html).toContain('data-proposal-id="p2"'); expect(html).toContain("cw-proposal-unanchored"); }); test("renderReview is deterministic (same inputs → identical HTML)", () => { const a = renderReview("hello", "hello world", [{ start: 6, end: 11, author: "human" }], []); const b = renderReview("hello", "hello world", [{ start: 6, end: 11, author: "human" }], []); expect(a).toBe(b); }); test("renderReview: an atomic mermaid change is diffed whole (no inner author sentinels)", () => { const base = "```mermaid\nflowchart LR\n A --> B\n```"; const cur = "```mermaid\nflowchart LR\n A --> C\n```"; const html = renderReview(base, cur, [], []); expect(html).toContain("mermaid"); expect(html).not.toContain("cw-by-"); }); test("renderReview: author-colors the correct block when two paragraphs are identical", () => { // Two identical paragraphs; baseline has only the first, so the SECOND is an // added block authored by human. Its span must color THAT block, not the first. const baseline = "Hello world"; const current = "Hello world\n\nHello world"; // second "Hello world" starts at offset 13; "world" at 19..24 const spans = [{ start: 19, end: 24, author: "human" as const }]; const html = renderReview(baseline, current, spans, []); // exactly one cw-by-human span (the added second block's "world"), not zero, not on the first. const count = (html.match(/cw-by-human/g) ?? []).length; expect(count).toBe(1); }); }); import { renderTrackChanges as rtc2 } from "../src/trackChangesModel"; describe("renderTrackChanges — intra-diagram mermaid (#22)", () => { it("augments a changed flowchart with styling directives (INV-29)", () => { const base = "```mermaid\nflowchart LR\n A-->B\n```\n"; const cur = "```mermaid\nflowchart LR\n A-->B\n B-->C\n```\n"; const html = rtc2(base, cur); expect(html).toContain("classDef cwAdded"); expect(html).toMatch(/class\s+C\s+cwAdded/); expect(html).toContain('class="cw-mermaid-legend"'); // no single whole-block "changed" badge when we augmented expect(html).not.toContain('changed'); }); it("augments a changed sequence diagram", () => { const base = "```mermaid\nsequenceDiagram\n A->>B: hi\n```\n"; const cur = "```mermaid\nsequenceDiagram\n A->>B: hi\n B->>C: on\n```\n"; const html = rtc2(base, cur); expect(html).toContain("rect rgb(46, 160, 67)"); }); it("falls back to the v1 badge for an unsupported diagram type (INV-30)", () => { const base = "```mermaid\nclassDiagram\n class A\n```\n"; const cur = "```mermaid\nclassDiagram\n class B\n```\n"; const html = rtc2(base, cur); expect(html).toContain('changed'); expect(html).not.toContain("classDef cwAdded"); }); });