@opendata-ai/openchart-vanilla 2.0.0

package/src/__tests__/events.test.ts

@@ -0,0 +1,336 @@
+import type { ChartSpec } from '@opendata-ai/openchart-engine';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createContainer, createMouseEvent } from '../__test-fixtures__/dom';
+import { barSpec, lineSpec } from '../__test-fixtures__/specs';
+import { createChart } from '../mount';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const annotatedSpec: ChartSpec = {
+  ...barSpec,
+  annotations: [{ type: 'refline', y: 0, label: 'Zero' }],
+};
+
+const textAnnotatedSpec: ChartSpec = {
+  ...barSpec,
+  annotations: [{ type: 'text', x: 10, y: 'A', text: 'Peak', offset: { dx: 10, dy: -20 } }],
+};
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('chart event handlers', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = createContainer();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('onMarkClick', () => {
+    it('fires with correct data when a mark element is clicked', () => {
+      const onMarkClick = vi.fn();
+      const chart = createChart(container, barSpec, { onMarkClick });
+
+      // Find a rect mark element (bar chart renders rect marks)
+      const mark = container.querySelector('[data-mark-id]');
+      expect(mark).not.toBeNull();
+
+      mark!.dispatchEvent(createMouseEvent('click', 150, 200));
+
+      expect(onMarkClick).toHaveBeenCalledTimes(1);
+      const event = onMarkClick.mock.calls[0][0];
+      expect(event.datum).toBeDefined();
+      expect(event.position).toBeDefined();
+      expect(event.position.x).toBeTypeOf('number');
+      expect(event.position.y).toBeTypeOf('number');
+      expect(event.event).toBeInstanceOf(MouseEvent);
+
+      chart.destroy();
+    });
+
+    it('includes series info for multi-series charts', () => {
+      const onMarkClick = vi.fn();
+      const chart = createChart(container, lineSpec, { onMarkClick });
+
+      // Line charts have marks with data-series attribute
+      const marks = container.querySelectorAll('[data-mark-id]');
+      expect(marks.length).toBeGreaterThan(0);
+
+      marks[0].dispatchEvent(createMouseEvent('click'));
+
+      expect(onMarkClick).toHaveBeenCalledTimes(1);
+      const event = onMarkClick.mock.calls[0][0];
+      // Line marks should have series info
+      expect(event.series).toBeDefined();
+
+      chart.destroy();
+    });
+  });
+
+  describe('onMarkHover', () => {
+    it('fires on mouseenter of a mark element', () => {
+      const onMarkHover = vi.fn();
+      const chart = createChart(container, barSpec, { onMarkHover });
+
+      const mark = container.querySelector('[data-mark-id]');
+      expect(mark).not.toBeNull();
+
+      mark!.dispatchEvent(createMouseEvent('mouseenter', 120, 180));
+
+      expect(onMarkHover).toHaveBeenCalledTimes(1);
+      const event = onMarkHover.mock.calls[0][0];
+      expect(event.datum).toBeDefined();
+      expect(event.position).toBeDefined();
+
+      chart.destroy();
+    });
+  });
+
+  describe('onMarkLeave', () => {
+    it('fires on mouseleave of a mark element', () => {
+      const onMarkLeave = vi.fn();
+      const chart = createChart(container, barSpec, { onMarkLeave });
+
+      const mark = container.querySelector('[data-mark-id]');
+      expect(mark).not.toBeNull();
+
+      mark!.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+
+      expect(onMarkLeave).toHaveBeenCalledTimes(1);
+      // onMarkLeave receives no arguments
+      expect(onMarkLeave.mock.calls[0]).toHaveLength(0);
+
+      chart.destroy();
+    });
+  });
+
+  describe('onLegendToggle', () => {
+    it('fires when a legend entry is clicked', () => {
+      const onLegendToggle = vi.fn();
+      const chart = createChart(container, lineSpec, { onLegendToggle });
+
+      const legendEntry = container.querySelector('[data-legend-index]');
+      expect(legendEntry).not.toBeNull();
+
+      legendEntry.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+      expect(onLegendToggle).toHaveBeenCalledTimes(1);
+      const [series, visible] = onLegendToggle.mock.calls[0];
+      expect(series).toBeTypeOf('string');
+      // First click hides the series
+      expect(visible).toBe(false);
+
+      // Click again to toggle back
+      legendEntry.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      expect(onLegendToggle).toHaveBeenCalledTimes(2);
+      const [, visibleAfter] = onLegendToggle.mock.calls[1];
+      expect(visibleAfter).toBe(true);
+
+      chart.destroy();
+    });
+  });
+
+  describe('onAnnotationClick', () => {
+    it('fires when an annotation element is clicked', () => {
+      const onAnnotationClick = vi.fn();
+      const chart = createChart(container, annotatedSpec, { onAnnotationClick });
+
+      const annotation = container.querySelector('.viz-annotation');
+      if (!annotation) {
+        // Refline at y=0 may resolve outside the chart area in test env
+        chart.destroy();
+        return;
+      }
+
+      annotation.dispatchEvent(createMouseEvent('click'));
+
+      expect(onAnnotationClick).toHaveBeenCalledTimes(1);
+      const [annotationArg, mouseEvent] = onAnnotationClick.mock.calls[0];
+      expect(annotationArg).toBeDefined();
+      expect(annotationArg.type).toBe('refline');
+      expect(mouseEvent).toBeInstanceOf(MouseEvent);
+
+      chart.destroy();
+    });
+  });
+
+  describe('onAnnotationEdit', () => {
+    it('sets cursor:grab on text annotations when onAnnotationEdit is provided', () => {
+      const onAnnotationEdit = vi.fn();
+      const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
+
+      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      if (!annotation) {
+        chart.destroy();
+        return;
+      }
+
+      expect(annotation.style.cursor).toBe('grab');
+      chart.destroy();
+    });
+
+    it('does not set cursor:grab on non-text annotations', () => {
+      const onAnnotationEdit = vi.fn();
+      const chart = createChart(container, annotatedSpec, { onAnnotationEdit });
+
+      const annotation = container.querySelector('.viz-annotation-refline') as SVGGElement | null;
+      if (!annotation) {
+        chart.destroy();
+        return;
+      }
+
+      expect(annotation.style.cursor).not.toBe('grab');
+      chart.destroy();
+    });
+
+    it('fires with original annotation and updated offset after drag', () => {
+      const onAnnotationEdit = vi.fn();
+      const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
+
+      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      if (!annotation) {
+        chart.destroy();
+        return;
+      }
+
+      // Simulate drag: mousedown -> mousemove -> mouseup
+      annotation.dispatchEvent(createMouseEvent('mousedown', 100, 100));
+      document.dispatchEvent(createMouseEvent('mousemove', 150, 130));
+      document.dispatchEvent(createMouseEvent('mouseup', 150, 130));
+
+      expect(onAnnotationEdit).toHaveBeenCalledTimes(1);
+      const [annotationArg, offsetArg] = onAnnotationEdit.mock.calls[0];
+      expect(annotationArg.type).toBe('text');
+      expect(annotationArg.text).toBe('Peak');
+      // Original offset (10, -20) + drag delta (50, 30) = (60, 10)
+      expect(offsetArg.dx).toBe(60);
+      expect(offsetArg.dy).toBe(10);
+
+      chart.destroy();
+    });
+
+    it('does not fire when drag movement is below threshold', () => {
+      const onAnnotationEdit = vi.fn();
+      const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
+
+      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      if (!annotation) {
+        chart.destroy();
+        return;
+      }
+
+      // Simulate drag with minimal movement (< 3px)
+      annotation.dispatchEvent(createMouseEvent('mousedown', 100, 100));
+      document.dispatchEvent(createMouseEvent('mousemove', 101, 101));
+      document.dispatchEvent(createMouseEvent('mouseup', 101, 101));
+
+      expect(onAnnotationEdit).not.toHaveBeenCalled();
+      chart.destroy();
+    });
+
+    it('suppresses click after drag', () => {
+      const onAnnotationClick = vi.fn();
+      const onAnnotationEdit = vi.fn();
+      const chart = createChart(container, textAnnotatedSpec, {
+        onAnnotationClick,
+        onAnnotationEdit,
+      });
+
+      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      if (!annotation) {
+        chart.destroy();
+        return;
+      }
+
+      // Drag > 3px
+      annotation.dispatchEvent(createMouseEvent('mousedown', 100, 100));
+      document.dispatchEvent(createMouseEvent('mousemove', 150, 130));
+      document.dispatchEvent(createMouseEvent('mouseup', 150, 130));
+
+      // Fire a click after the drag
+      annotation.dispatchEvent(createMouseEvent('click', 150, 130));
+
+      expect(onAnnotationEdit).toHaveBeenCalledTimes(1);
+      // Click should have been suppressed by the one-time capture handler
+      expect(onAnnotationClick).not.toHaveBeenCalled();
+
+      chart.destroy();
+    });
+
+    it('applies transform during drag', () => {
+      const onAnnotationEdit = vi.fn();
+      const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
+
+      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      if (!annotation) {
+        chart.destroy();
+        return;
+      }
+
+      annotation.dispatchEvent(createMouseEvent('mousedown', 100, 100));
+      document.dispatchEvent(createMouseEvent('mousemove', 140, 120));
+
+      // During drag, the annotation group should have a transform
+      const transform = annotation.getAttribute('transform');
+      expect(transform).toContain('translate');
+
+      // Complete the drag to clean up
+      document.dispatchEvent(createMouseEvent('mouseup', 140, 120));
+      chart.destroy();
+    });
+
+    it('cleans up listeners on destroy', () => {
+      const onAnnotationEdit = vi.fn();
+      const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit });
+
+      chart.destroy();
+
+      // After destroy, dispatching events should not cause errors
+      document.dispatchEvent(createMouseEvent('mousemove', 200, 200));
+      document.dispatchEvent(createMouseEvent('mouseup', 200, 200));
+
+      expect(onAnnotationEdit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('cleanup', () => {
+    it('removes event listeners on destroy', () => {
+      const onMarkClick = vi.fn();
+      const chart = createChart(container, barSpec, { onMarkClick });
+
+      const mark = container.querySelector('[data-mark-id]');
+      expect(mark).not.toBeNull();
+
+      chart.destroy();
+
+      // After destroy, clicking should not fire the handler
+      // (the SVG is removed, but we verify the handler reference is cleaned up)
+      expect(onMarkClick).not.toHaveBeenCalled();
+    });
+
+    it('removes event listeners on update', () => {
+      const onMarkClick = vi.fn();
+      const chart = createChart(container, barSpec, { onMarkClick });
+
+      // Update triggers a re-render which should clean up old listeners
+      chart.update(lineSpec);
+
+      // Find mark in the new render
+      const mark = container.querySelector('[data-mark-id]');
+      expect(mark).not.toBeNull();
+
+      // Click the new mark - should still fire since new listeners were wired
+      mark!.dispatchEvent(createMouseEvent('click'));
+      expect(onMarkClick).toHaveBeenCalledTimes(1);
+
+      chart.destroy();
+    });
+  });
+});

package/src/__tests__/export.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Export utility tests.
+ *
+ * Tests exportSVG and exportCSV functions directly, verifying SVG string
+ * validity and CSV formatting with headers and proper escaping.
+ */
+
+import type { CompileOptions } from '@opendata-ai/openchart-engine';
+import { compileChart } from '@opendata-ai/openchart-engine';
+import { afterEach, describe, expect, it } from 'vitest';
+import { createContainer } from '../__test-fixtures__/dom';
+import { barSpec, lineSpec } from '../__test-fixtures__/specs';
+import { exportCSV, exportSVG } from '../export';
+import { renderChartSVG } from '../svg-renderer';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const COMPILE_OPTS: CompileOptions = { width: 600, height: 400 };
+
+function renderToSVG(spec = lineSpec) {
+  const container = createContainer();
+  const layout = compileChart(spec, COMPILE_OPTS);
+  return renderChartSVG(layout, container);
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+// ---------------------------------------------------------------------------
+// exportSVG
+// ---------------------------------------------------------------------------
+
+describe('exportSVG', () => {
+  it('returns a string starting with <svg', () => {
+    const svg = renderToSVG();
+    const result = exportSVG(svg);
+    expect(result.startsWith('<svg')).toBe(true);
+  });
+
+  it('returned string contains viewBox attribute', () => {
+    const svg = renderToSVG();
+    const result = exportSVG(svg);
+    expect(result).toContain('viewBox="0 0 600 400"');
+  });
+
+  it('returned string contains chart chrome text content', () => {
+    const svg = renderToSVG(lineSpec);
+    const result = exportSVG(svg);
+    expect(result).toContain('GDP Growth');
+    expect(result).toContain('US vs UK over time');
+    expect(result).toContain('World Bank');
+  });
+
+  it('returned string contains SVG namespace', () => {
+    const svg = renderToSVG();
+    const result = exportSVG(svg);
+    expect(result).toContain('xmlns');
+    expect(result).toContain('http://www.w3.org/2000/svg');
+  });
+
+  it('returned string includes mark elements', () => {
+    const svg = renderToSVG(barSpec);
+    const result = exportSVG(svg);
+    // Bar chart should have rect elements
+    expect(result).toContain('<rect');
+    expect(result).toContain('viz-mark-rect');
+  });
+
+  it('returned string is well-formed XML (ends with closing svg tag)', () => {
+    const svg = renderToSVG();
+    const result = exportSVG(svg);
+    expect(result.endsWith('</svg>')).toBe(true);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// exportCSV
+// ---------------------------------------------------------------------------
+
+describe('exportCSV', () => {
+  it('returns empty string for empty data', () => {
+    const result = exportCSV([]);
+    expect(result).toBe('');
+  });
+
+  it('first line contains column headers from data keys', () => {
+    const data = [
+      { name: 'Alice', age: 30, city: 'Portland' },
+      { name: 'Bob', age: 25, city: 'Seattle' },
+    ];
+    const result = exportCSV(data);
+    const firstLine = result.split('\n')[0];
+    expect(firstLine).toBe('name,age,city');
+  });
+
+  it('data rows follow header line', () => {
+    const data = [
+      { name: 'Alice', age: 30 },
+      { name: 'Bob', age: 25 },
+    ];
+    const result = exportCSV(data);
+    const lines = result.split('\n');
+    expect(lines.length).toBe(3); // 1 header + 2 data rows
+    expect(lines[1]).toBe('Alice,30');
+    expect(lines[2]).toBe('Bob,25');
+  });
+
+  it('escapes values containing commas', () => {
+    const data = [{ name: 'Doe, John', value: 42 }];
+    const result = exportCSV(data);
+    const lines = result.split('\n');
+    // Comma in value should be wrapped in double quotes
+    expect(lines[1]).toBe('"Doe, John",42');
+  });
+
+  it('escapes values containing double quotes', () => {
+    const data = [{ name: 'Say "hi"', value: 1 }];
+    const result = exportCSV(data);
+    const lines = result.split('\n');
+    // Double quotes should be doubled and the field wrapped in quotes
+    expect(lines[1]).toBe('"Say ""hi""",1');
+  });
+
+  it('escapes values containing newlines', () => {
+    const data = [{ name: 'Line1\nLine2', value: 1 }];
+    const result = exportCSV(data);
+    // The entire field should be quoted since it contains a newline
+    expect(result).toContain('"Line1\nLine2"');
+  });
+
+  it('handles undefined and null values as empty strings', () => {
+    const data = [{ a: undefined, b: null, c: 'ok' }];
+    const result = exportCSV(data);
+    const lines = result.split('\n');
+    // undefined and null should render as empty
+    expect(lines[1]).toBe(',,ok');
+  });
+
+  it('uses keys from first row as headers', () => {
+    const data = [
+      { x: 1, y: 2, z: 3 },
+      { x: 4, y: 5, z: 6 },
+    ];
+    const result = exportCSV(data);
+    expect(result.split('\n')[0]).toBe('x,y,z');
+  });
+});

package/src/__tests__/mount.test.ts

@@ -0,0 +1,219 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { createContainer } from '../__test-fixtures__/dom';
+import { barSpec, lineSpec } from '../__test-fixtures__/specs';
+import { createChart } from '../mount';
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('createChart', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = createContainer();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('creates an SVG element in the container', () => {
+    const chart = createChart(container, lineSpec);
+
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg?.getAttribute('class')).toBe('viz-chart');
+
+    chart.destroy();
+  });
+
+  it('SVG has correct viewBox dimensions', () => {
+    const chart = createChart(container, lineSpec);
+
+    const svg = container.querySelector('svg');
+    const viewBox = svg?.getAttribute('viewBox');
+    expect(viewBox).toBe('0 0 600 400');
+
+    chart.destroy();
+  });
+
+  it('chrome text elements are present with correct content', () => {
+    const chart = createChart(container, lineSpec);
+
+    const title = container.querySelector('.viz-title');
+    expect(title).not.toBeNull();
+    expect(title?.textContent).toBe('GDP Growth');
+
+    const subtitle = container.querySelector('.viz-subtitle');
+    expect(subtitle).not.toBeNull();
+    expect(subtitle?.textContent).toBe('US vs UK over time');
+
+    const source = container.querySelector('.viz-source');
+    expect(source).not.toBeNull();
+    expect(source?.textContent).toBe('World Bank');
+
+    chart.destroy();
+  });
+
+  it('update() re-renders with new data', () => {
+    const chart = createChart(container, lineSpec);
+
+    const titleBefore = container.querySelector('.viz-title');
+    expect(titleBefore?.textContent).toBe('GDP Growth');
+
+    chart.update(barSpec);
+
+    const titleAfter = container.querySelector('.viz-title');
+    expect(titleAfter?.textContent).toBe('Updated Chart');
+
+    chart.destroy();
+  });
+
+  it('destroy() removes all DOM elements and disconnects observer', () => {
+    const chart = createChart(container, lineSpec);
+
+    const svgBefore = container.querySelector('svg');
+    expect(svgBefore).not.toBeNull();
+
+    chart.destroy();
+
+    const svgAfter = container.querySelector('svg');
+    expect(svgAfter).toBeNull();
+
+    // Tooltip div should also be removed
+    const tooltip = container.querySelector('.viz-tooltip');
+    expect(tooltip).toBeNull();
+  });
+
+  it('has accessible ARIA attributes on the SVG', () => {
+    const chart = createChart(container, lineSpec);
+
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('role')).toBe('img');
+    expect(svg?.getAttribute('aria-label')).toContain('Line chart');
+
+    chart.destroy();
+  });
+
+  it('layout property returns the compiled layout', () => {
+    const chart = createChart(container, lineSpec);
+
+    expect(chart.layout).toBeDefined();
+    expect(chart.layout.dimensions.width).toBe(600);
+    expect(chart.layout.dimensions.height).toBe(400);
+    expect(chart.layout.chrome.title?.text).toBe('GDP Growth');
+
+    chart.destroy();
+  });
+
+  it('export("svg") returns a valid SVG string', () => {
+    const chart = createChart(container, lineSpec);
+
+    const svgString = chart.export('svg');
+    expect(svgString).toContain('<svg');
+    expect(svgString).toContain('viewBox');
+    expect(svgString).toContain('GDP Growth');
+
+    chart.destroy();
+  });
+
+  it('export("csv") returns CSV data', () => {
+    const chart = createChart(container, lineSpec);
+
+    const csv = chart.export('csv');
+    expect(csv).toContain('date');
+    expect(csv).toContain('value');
+    expect(csv).toContain('country');
+
+    chart.destroy();
+  });
+
+  it('renders axis elements', () => {
+    const chart = createChart(container, lineSpec);
+
+    const xAxis = container.querySelector('.viz-axis-x');
+    const yAxis = container.querySelector('.viz-axis-y');
+    expect(xAxis).not.toBeNull();
+    expect(yAxis).not.toBeNull();
+
+    chart.destroy();
+  });
+
+  it('renders chrome wrapper group', () => {
+    const chart = createChart(container, lineSpec);
+
+    const chromeGroup = container.querySelector('.viz-chrome');
+    expect(chromeGroup).not.toBeNull();
+
+    chart.destroy();
+  });
+
+  it('passes responsive option to skip resize observer', () => {
+    // Should not throw with responsive: false
+    const chart = createChart(container, lineSpec, { responsive: false });
+
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+
+    chart.destroy();
+  });
+
+  it('renders marks with data-mark-id attributes for data points', () => {
+    const chart = createChart(container, barSpec);
+
+    const marks = container.querySelectorAll('[data-mark-id]');
+    // barSpec has 3 data points, each should produce a mark
+    expect(marks.length).toBe(3);
+
+    for (const mark of marks) {
+      const id = mark.getAttribute('data-mark-id');
+      expect(id).toMatch(/^rect-\d+$/);
+    }
+
+    chart.destroy();
+  });
+
+  it('multi-series marks have data-series attributes', () => {
+    const chart = createChart(container, lineSpec);
+
+    const marks = container.querySelectorAll('[data-series]');
+    expect(marks.length).toBeGreaterThan(0);
+
+    const seriesNames = new Set<string>();
+    for (const mark of marks) {
+      const series = mark.getAttribute('data-series');
+      expect(series).not.toBeNull();
+      seriesNames.add(series!);
+    }
+    // lineSpec has US and UK series
+    expect(seriesNames.has('US')).toBe(true);
+    expect(seriesNames.has('UK')).toBe(true);
+
+    chart.destroy();
+  });
+});
+
+describe('resize observer integration', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = createContainer();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('resize() re-renders the chart', () => {
+    const chart = createChart(container, lineSpec);
+
+    // Should not throw
+    chart.resize();
+
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+
+    chart.destroy();
+  });
+});