Release diagram Tools v0.1.0

tests/browser/app.spec.ts

@@ -0,0 +1,79 @@
+import { expect, test } from "@playwright/test";
+import { readFile } from "node:fs/promises";
+const ORIGIN = "http://127.0.0.1:4222";
+test("renders nested, local, accessible diagram", async ({ page }) => {
+  const external: string[] = [];
+  await page.route("**/*", async (r) => {
+    if (new URL(r.request().url()).origin !== ORIGIN) {
+      external.push(r.request().url());
+      await r.abort();
+    } else await r.continue();
+  });
+  await page.setViewportSize({ width: 1800, height: 900 });
+  await page.goto("/deep/nested/diagram/");
+  await expect(
+    page.getByRole("heading", { name: "Diagram Tools" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("region", { name: "Diagram textual outline" }),
+  ).toContainText("Local input");
+  await page
+    .getByLabel("Diagram source")
+    .fill("sequenceDiagram\nparticipant A as Ada\nA->>B: hello");
+  await page.getByRole("button", { name: "Render diagram" }).click();
+  await expect(page.locator('p[role="status"]')).toContainText(
+    "2 nodes and 1 edges",
+  );
+  expect(external).toEqual([]);
+  expect(
+    await page
+      .locator(".toolbox-shell__main")
+      .evaluate((n) => getComputedStyle(n).width),
+  ).toBe("1440px");
+});
+test("exports safe SVG and retains last diagram", async ({ page }) => {
+  await page.goto("/deep/nested/diagram/");
+  await page.getByLabel("Diagram source").fill("not a diagram");
+  await page.getByRole("button", { name: "Render diagram" }).click();
+  await expect(page.locator('p[role="status"]')).toContainText(
+    "Last valid diagram",
+  );
+  const pending = page.waitForEvent("download");
+  await page.getByRole("button", { name: "SVG", exact: true }).click();
+  const data = await readFile((await (await pending).path())!, "utf8");
+  expect(data).toContain("<svg");
+  expect(data).not.toContain("<script>");
+});
+test("PWA theme, offline reload, and headers", async ({
+  page,
+  context,
+  request,
+}) => {
+  await page.goto("/deep/nested/diagram/");
+  await page.getByRole("button", { name: "Personalize" }).click();
+  await page.getByRole("button", { name: "Dark" }).click();
+  await expect(page.locator(".toolbox-shell").first()).toHaveAttribute(
+    "data-toolbox-theme",
+    "dark",
+  );
+  expect(
+    await page.evaluate(async () =>
+      Boolean(await navigator.serviceWorker.ready),
+    ),
+  ).toBe(true);
+  await context.setOffline(true);
+  await page.reload();
+  await expect(
+    page.getByRole("heading", { name: "Diagram Tools" }),
+  ).toBeVisible();
+  await context.setOffline(false);
+  const response = await request.get("/deep/nested/diagram/");
+  expect(response.headers()["content-security-policy"]).toContain(
+    "connect-src 'self'",
+  );
+  const manifest = await request.get("/deep/nested/diagram/toolbox-app.json");
+  await expect(manifest.json()).resolves.toMatchObject({
+    id: "de.add-ideas.diagram-tools",
+    version: "0.1.0",
+  });
+});

tests/components/Workbench.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Workbench } from "../../src/components/Workbench";
+
+describe("Diagram Workbench", () => {
+  it("loads and renders a sequence example with an accessible outline", async () => {
+    const user = userEvent.setup();
+    render(<Workbench />);
+
+    await user.click(screen.getByRole("button", { name: "sequence" }));
+    await user.click(screen.getByRole("button", { name: "Render diagram" }));
+
+    expect(screen.getByText(/Rendered 3 nodes and 3 edges/)).toBeVisible();
+    expect(
+      screen.getByRole("region", { name: "Diagram textual outline" }),
+    ).toHaveTextContent("Browser");
+  });
+});

tests/core/diagram.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { parseDiagram, renderSvg } from "../../src/core/diagram";
+describe("diagram grammar", () => {
+  it("parses and escapes flowcharts", () => {
+    const d = parseDiagram("flowchart LR\nA[<script>] -->|safe| B{Choice}");
+    expect(d.nodes).toHaveLength(2);
+    const svg = renderSvg(d);
+    expect(svg).toContain("&lt;script&gt;");
+    expect(svg).not.toContain("<script>");
+  });
+  it("supports sequence, class and state", () => {
+    const sequence = parseDiagram(
+      "sequenceDiagram\nparticipant A as Ada\nparticipant B\nA-->>B: hello",
+    );
+    expect(sequence.mode).toBe("sequence");
+    expect(sequence.nodes.map((node) => node.id)).toEqual(["A", "B"]);
+    expect(sequence.edges[0]).toMatchObject({
+      from: "A",
+      to: "B",
+      dashed: true,
+    });
+    expect(
+      parseDiagram("classDiagram\nclass A\nA : +field\nA <|-- B").nodes[0]
+        ?.members,
+    ).toEqual(["+field"]);
+    expect(parseDiagram("stateDiagram-v2\nIdle --> Ready : go").mode).toBe(
+      "state",
+    );
+  });
+  it("diagnoses directives without executing", () => {
+    const d = parseDiagram(
+      "flowchart LR\n%%{init: {}}%%\nclick A https://bad.test\nA-->B",
+    );
+    expect(d.diagnostics).toHaveLength(2);
+    expect(renderSvg(d)).not.toContain("bad.test");
+  });
+});