@transitrix/diagrams 1.0.0 → 1.1.0

package/src/webview/__tests__/render-process.test.ts

@@ -0,0 +1,538 @@
+import { describe, it, expect } from 'vitest';
+import {
+  renderProcessLayoutSvg,
+  renderProcessBody,
+  type ProcessDiagramLayout,
+  type ProcessFlowElement,
+} from '../render-process.js';
+
+// ---------------------------------------------------------------------------
+// Test fixture helpers
+// ---------------------------------------------------------------------------
+
+function makeLayout(overrides: Partial<ProcessDiagramLayout> = {}): ProcessDiagramLayout {
+  const elements = new Map<string, { x: number; y: number; width: number; height: number }>([
+    ['start', { x: 160, y: 72, width: 36, height: 36 }],
+    ['task1', { x: 250, y: 60, width: 100, height: 80 }],
+    ['end', { x: 410, y: 72, width: 36, height: 36 }],
+  ]);
+
+  const laneBounds = new Map([
+    ['lane1', { x: 88, y: 40, width: 400, height: 200 }],
+  ]);
+
+  const poolBounds = { x: 12, y: 12, width: 500, height: 280 };
+
+  const process = {
+    id: 'proc1',
+    name: 'Test Process',
+    poolId: 'pool1',
+    poolName: 'Test Pool',
+    lanes: [
+      {
+        id: 'lane1',
+        name: 'Lane One',
+        elements: [
+          { id: 'start', type: 'startEvent', name: 'Start' },
+          { id: 'task1', type: 'task', name: 'Do Work' },
+          { id: 'end', type: 'endEvent', name: 'End' },
+        ] as ProcessFlowElement[],
+      },
+    ],
+  };
+
+  const flows = [
+    {
+      id: 'f1',
+      from: 'start',
+      to: 'task1',
+      waypoints: [
+        { x: 196, y: 90 },
+        { x: 250, y: 100 },
+      ],
+    },
+    {
+      id: 'f2',
+      from: 'task1',
+      to: 'end',
+      waypoints: [
+        { x: 350, y: 100 },
+        { x: 410, y: 90 },
+      ],
+    },
+  ];
+
+  return { process, elements, laneBounds, poolBounds, flows, associations: [], ...overrides };
+}
+
+function addElement(
+  layout: ProcessDiagramLayout,
+  el: ProcessFlowElement,
+  bounds: { x: number; y: number; width: number; height: number },
+): ProcessDiagramLayout {
+  layout.process.lanes[0].elements.push(el);
+  layout.elements.set(el.id, bounds);
+  return layout;
+}
+
+// ---------------------------------------------------------------------------
+// SVG root and structure
+// ---------------------------------------------------------------------------
+
+describe('renderProcessLayoutSvg — root', () => {
+  it('opens and closes an SVG element', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toMatch(/^<svg xmlns="http:\/\/www\.w3\.org\/2000\/svg"/);
+    expect(svg.trimEnd().endsWith('</svg>')).toBe(true);
+  });
+
+  it('sets width and height from pool bounds plus padding', () => {
+    const layout = makeLayout();
+    const svg = renderProcessLayoutSvg(layout);
+    // poolBounds x=12, width=500 → svgW = 12+500+16 = 528
+    expect(svg).toContain('width="528"');
+  });
+
+  it('expands height for topInset', () => {
+    const svg = renderProcessLayoutSvg(makeLayout(), { title: '<text>T</text>', topInset: 32 });
+    // poolBounds y=12, height=280 + padding 16 + inset 32 = 340
+    expect(svg).toContain('height="340"');
+  });
+
+  it('injects title markup when provided', () => {
+    const svg = renderProcessLayoutSvg(makeLayout(), {
+      title: '<text class="text-header" x="16" y="20">My Title</text>',
+    });
+    expect(svg).toContain('My Title');
+    expect(svg).toContain('text-header');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// CSS embedding
+// ---------------------------------------------------------------------------
+
+describe('renderProcessLayoutSvg — CSS', () => {
+  it('embeds a <style> block', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('<style>');
+    expect(svg).toContain('</style>');
+  });
+
+  it('includes shared theme CSS custom properties', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('--ts-');
+  });
+
+  it('includes BPMN-specific CSS classes', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('bpmn-pool');
+    expect(svg).toContain('bpmn-lane');
+    expect(svg).toContain('bpmn-task');
+    expect(svg).toContain('bpmn-event');
+    expect(svg).toContain('bpmn-gateway');
+    expect(svg).toContain('bpmn-seq-flow');
+  });
+
+  it('has no font-style italic', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg.toLowerCase()).not.toContain('font-style');
+    expect(svg.toLowerCase()).not.toContain('italic');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Pool and lane structure
+// ---------------------------------------------------------------------------
+
+describe('renderProcessLayoutSvg — pool / lanes', () => {
+  it('renders pool background rect', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('class="bpmn-pool"');
+  });
+
+  it('renders pool name band rect', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('class="bpmn-pool-name"');
+  });
+
+  it('renders pool name text', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('Test Pool');
+    expect(svg).toContain('bpmn-pool-label');
+  });
+
+  it('renders pool name rotated -90 degrees', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('rotate(-90,');
+  });
+
+  it('renders lane background rect', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('class="bpmn-lane"');
+  });
+
+  it('renders lane header rect', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('class="bpmn-lane-header"');
+  });
+
+  it('renders lane name text', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('Lane One');
+    expect(svg).toContain('bpmn-lane-label');
+  });
+
+  it('XML-escapes special characters in pool and lane names', () => {
+    const layout = makeLayout();
+    layout.process.poolName = 'Pool & <Co>';
+    layout.process.lanes[0].name = 'Lane "A"';
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).not.toContain('<Co>');
+    expect(svg).toContain('&lt;Co&gt;');
+    expect(svg).toContain('&amp;');
+    expect(svg).toContain('&quot;');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Flow elements
+// ---------------------------------------------------------------------------
+
+describe('renderProcessLayoutSvg — start / end events', () => {
+  it('renders start event as circle with bpmn-event-start class', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-start"/);
+  });
+
+  it('renders end event as circle with bpmn-event-end class', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-end"/);
+  });
+
+  it('renders event labels below the shape', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('class="bpmn-event-label"');
+    expect(svg).toContain('>Start<');
+    expect(svg).toContain('>End<');
+  });
+});
+
+describe('renderProcessLayoutSvg — tasks', () => {
+  it('renders task as rect with bpmn-task class', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('class="diagram-node bpmn-task"');
+  });
+
+  it('renders task with rounded corners', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('rx="4"');
+  });
+
+  it('renders task name text', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('Do Work');
+    expect(svg).toContain('bpmn-task-name');
+  });
+
+  it('renders userTask and serviceTask the same as task', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'ut', type: 'userTask', name: 'User Step' }, { x: 200, y: 60, width: 100, height: 80 });
+    addElement(layout, { id: 'st', type: 'serviceTask', name: 'Service Step' }, { x: 320, y: 60, width: 100, height: 80 });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('User Step');
+    expect(svg).toContain('Service Step');
+  });
+
+  it('wraps long task names across multiple tspans', () => {
+    const layout = makeLayout();
+    layout.process.lanes[0].elements[1].name = 'A Very Long Task Name Here';
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('<tspan');
+  });
+
+  it('XML-escapes special characters in task names', () => {
+    const layout = makeLayout();
+    layout.process.lanes[0].elements[1].name = 'Send <email> & notify';
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).not.toContain('<email>');
+    expect(svg).toContain('&lt;email&gt;');
+    expect(svg).toContain('&amp;');
+  });
+});
+
+describe('renderProcessLayoutSvg — gateways', () => {
+  it('renders XOR gateway as diamond path', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'gw1', type: 'exclusiveGateway', name: 'Choice?' }, {
+      x: 180, y: 75, width: 50, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-gateway"');
+  });
+
+  it('renders XOR gateway with × marker lines', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'gw1', type: 'exclusiveGateway' }, {
+      x: 180, y: 75, width: 50, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-gateway-marker"');
+    // The × marker has two crossing diagonals — check for the double-M path
+    const markerSection = svg.match(/class="bpmn-gateway-marker"[^>]*d="([^"]+)"/)?.[1] ?? '';
+    expect(markerSection.match(/M/g)?.length).toBe(2);
+  });
+
+  it('renders AND gateway as diamond path', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'gw2', type: 'parallelGateway' }, {
+      x: 180, y: 75, width: 50, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-gateway"');
+    expect(svg).toContain('class="bpmn-gateway-marker"');
+  });
+
+  it('renders inclusive gateway as diamond with circle marker', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'gw3', type: 'inclusiveGateway', name: 'Any?' }, {
+      x: 180, y: 75, width: 50, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-gateway"');
+    expect(svg).toMatch(/<circle[^>]+class="bpmn-gateway-marker"/);
+  });
+
+  it('inclusive gateway circle marker uses gateway-marker class (no fill)', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'gw3', type: 'inclusiveGateway' }, {
+      x: 180, y: 75, width: 50, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    // CSS class bpmn-gateway-marker has fill:none — no inline fill on the element
+    const circle = svg.match(/<circle[^>]+bpmn-gateway-marker[^>]*/)?.[0] ?? '';
+    expect(circle).not.toContain('fill=');
+  });
+
+  it('inclusive gateway renders label below shape', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'gw3', type: 'inclusiveGateway', name: 'Any path?' }, {
+      x: 180, y: 75, width: 50, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('Any path?');
+    expect(svg).toContain('bpmn-gateway-label');
+  });
+});
+
+describe('renderProcessLayoutSvg — data objects', () => {
+  it('renders data object with fold-corner path', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'do1', type: 'dataObject', name: 'Invoice' }, {
+      x: 160, y: 50, width: 36, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-data-obj"');
+  });
+
+  it('renders data object name below shape', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'do1', type: 'dataObject', name: 'Invoice' }, {
+      x: 160, y: 50, width: 36, height: 50,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('Invoice');
+    expect(svg).toContain('bpmn-data-obj-label');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Intermediate events (P2)
+// ---------------------------------------------------------------------------
+
+describe('renderProcessLayoutSvg — intermediate message event', () => {
+  it('renders outer ring with bpmn-event-start class', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'me1', type: 'intermediateMessageEvent', name: 'Receive' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    // Outer ring reuses the start-event circle
+    expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-start"/);
+  });
+
+  it('renders inner ring with bpmn-event-intermediate class', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'me1', type: 'intermediateMessageEvent' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-event-intermediate"');
+  });
+
+  it('renders envelope rect and fold path as bpmn-event-icon', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'me1', type: 'intermediateMessageEvent' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-event-icon"');
+    // Envelope body is a rect
+    expect(svg).toMatch(/<rect[^>]+bpmn-event-icon/);
+    // Envelope flap is a path with at least 2 M/L points
+    const iconPath = svg.match(/class="bpmn-event-icon"[^>]*d="([^"]+)"/)?.[1] ?? '';
+    expect(iconPath).toBeTruthy();
+  });
+
+  it('renders label below the shape', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'me1', type: 'intermediateMessageEvent', name: 'Order Received' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('Order Received');
+    expect(svg).toContain('bpmn-event-label');
+  });
+
+  it('no font-style italic in intermediate message event output', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'me1', type: 'intermediateMessageEvent', name: 'Wait' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).not.toContain('font-style');
+  });
+});
+
+describe('renderProcessLayoutSvg — intermediate timer event', () => {
+  it('renders outer ring with bpmn-event-start class', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'te1', type: 'intermediateTimerEvent', name: 'Wait 1h' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-start"/);
+  });
+
+  it('renders inner ring with bpmn-event-intermediate class', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'te1', type: 'intermediateTimerEvent' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-event-intermediate"');
+  });
+
+  it('renders clock face circle and two hand lines', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'te1', type: 'intermediateTimerEvent' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    // Clock face circle
+    expect(svg).toMatch(/<circle[^>]+class="bpmn-event-icon"/);
+    // Two hand lines
+    const lines = svg.match(/<line[^>]+class="bpmn-event-icon"/g) ?? [];
+    expect(lines.length).toBe(2);
+  });
+
+  it('renders label below the shape', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'te1', type: 'intermediateTimerEvent', name: 'Delay' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('Delay');
+    expect(svg).toContain('bpmn-event-label');
+  });
+
+  it('no font-style italic in intermediate timer event output', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'te1', type: 'intermediateTimerEvent', name: 'Wait' }, {
+      x: 200, y: 72, width: 36, height: 36,
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).not.toContain('font-style');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Sequence flows
+// ---------------------------------------------------------------------------
+
+describe('renderProcessLayoutSvg — sequence flows', () => {
+  it('renders flows as polylines with arrow marker', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('class="bpmn-seq-flow"');
+    expect(svg).toContain('marker-end="url(#bpmn-arrow)"');
+  });
+
+  it('defines the bpmn-arrow marker', () => {
+    const svg = renderProcessLayoutSvg(makeLayout());
+    expect(svg).toContain('id="bpmn-arrow"');
+    expect(svg).toContain('class="arrow-fill"');
+  });
+
+  it('renders conditional flows as solid lines (BPMN 2.0 — no dashes on seq-flow)', () => {
+    const layout = makeLayout();
+    layout.flows[0] = { ...layout.flows[0], condition: 'approved == true' };
+    const svg = renderProcessLayoutSvg(layout);
+    // Conditional flows are solid per BPMN 2.0; the marker-only default-flow convention applies instead.
+    expect(svg).not.toContain('bpmn-seq-cond');
+    expect(svg).toContain('bpmn-seq-flow');
+  });
+
+  it('skips flows with fewer than 2 waypoints', () => {
+    const layout = makeLayout();
+    layout.flows.push({ id: 'bad', from: 'start', to: 'end', waypoints: [{ x: 100, y: 100 }] });
+    expect(() => renderProcessLayoutSvg(layout)).not.toThrow();
+    const svg = renderProcessLayoutSvg(layout);
+    // Should still render the 2 valid flows
+    const matches = svg.match(/class="bpmn-seq-flow"/g);
+    expect(matches?.length).toBe(2);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Associations
+// ---------------------------------------------------------------------------
+
+describe('renderProcessLayoutSvg — associations', () => {
+  it('renders associations as dashed polylines without arrowhead', () => {
+    const layout = makeLayout();
+    addElement(layout, { id: 'do1', type: 'dataObject' }, { x: 160, y: 50, width: 36, height: 50 });
+    layout.associations.push({
+      id: 'a1',
+      from: 'task1',
+      to: 'do1',
+      waypoints: [{ x: 300, y: 100 }, { x: 178, y: 75 }],
+    });
+    const svg = renderProcessLayoutSvg(layout);
+    expect(svg).toContain('class="bpmn-assoc"');
+    // Associations must NOT have arrowheads
+    const assocLine = svg.match(/class="bpmn-assoc"[^/]*/)?.[0] ?? '';
+    expect(assocLine).not.toContain('marker-end');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// renderProcessBody offset
+// ---------------------------------------------------------------------------
+
+describe('renderProcessBody', () => {
+  it('shifts all coordinates by ox/oy', () => {
+    const layout = makeLayout();
+    const bodyAt0 = renderProcessBody(layout, 0, 0);
+    const bodyAt50 = renderProcessBody(layout, 50, 0);
+    // Pool at ox=0 has x=12; at ox=50 should be x=62
+    expect(bodyAt0).toContain('x="12"');
+    expect(bodyAt50).toContain('x="62"');
+    expect(bodyAt50).not.toContain('x="12"');
+  });
+
+  it('includes defs block with arrow marker', () => {
+    const body = renderProcessBody(makeLayout(), 0, 0);
+    expect(body).toContain('<defs>');
+    expect(body).toContain('id="bpmn-arrow"');
+  });
+});

package/src/webview/__tests__/render-util.test.ts

@@ -0,0 +1,66 @@
+/**
+ * Unit tests for the host-neutral metadata reader shared by the VS Code preview
+ * chrome and the IntelliJ JCEF webview bundle (review E — single metadata
+ * reader). Locks the CONTRACT §1.1 precedence: `name` over legacy `title`, and
+ * `generated_at` over legacy `date`.
+ */
+import { describe, expect, it } from 'vitest';
+
+import { escHtml, escXml, extractDiagramMeta } from '../render-util.js';
+
+describe('escXml / escHtml', () => {
+  it('escapes XML-significant characters and aliases escHtml', () => {
+    expect(escXml('a & b < c > d "e"')).toBe('a &amp; b &lt; c &gt; d &quot;e&quot;');
+    expect(escHtml).toBe(escXml);
+  });
+});
+
+describe('extractDiagramMeta', () => {
+  it('reads canonical name/generated_at and version/description', () => {
+    expect(
+      extractDiagramMeta({
+        name: 'Quarterly goals',
+        description: 'Q3 plan',
+        generated_at: '2026-06-22',
+        version: 3,
+      }),
+    ).toEqual({
+      title: 'Quarterly goals',
+      subtitle: 'Q3 plan',
+      date: '2026-06-22',
+      version: '3',
+    });
+  });
+
+  it('prefers name over legacy title and generated_at over legacy date', () => {
+    expect(
+      extractDiagramMeta({
+        name: 'Canonical',
+        title: 'Legacy title',
+        generated_at: '2026-01-01',
+        date: '2020-12-31',
+      }),
+    ).toMatchObject({ title: 'Canonical', date: '2026-01-01' });
+  });
+
+  it('falls back to legacy title/date when canonical keys are absent', () => {
+    expect(
+      extractDiagramMeta({ title: 'Legacy title', date: '2020-12-31' }),
+    ).toMatchObject({ title: 'Legacy title', date: '2020-12-31' });
+  });
+
+  it('returns all-undefined for non-object input', () => {
+    expect(extractDiagramMeta(null)).toEqual({
+      title: undefined,
+      subtitle: undefined,
+      date: undefined,
+      version: undefined,
+    });
+    expect(extractDiagramMeta('not a doc')).toEqual({
+      title: undefined,
+      subtitle: undefined,
+      date: undefined,
+      version: undefined,
+    });
+  });
+});