@opendata-ai/openchart-vanilla 8.0.0-rc.2 → 8.0.0-rc.21

package/src/__tests__/events.test.ts

@@ -1,387 +0,0 @@
-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, and toggling back restores the same series', () => {
-      const onLegendToggle = vi.fn();
-      const chart = createChart(
-        container,
-        { ...lineSpec, legend: { show: true } },
-        {
-          onLegendToggle,
-        },
-      );
-
-      const firstEntry = container.querySelector('[data-legend-index]') as HTMLElement | null;
-      expect(firstEntry).not.toBeNull();
-      const targetLabel = firstEntry!.getAttribute('data-legend-label')!;
-      expect(targetLabel).toBeTypeOf('string');
-
-      firstEntry!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-
-      expect(onLegendToggle).toHaveBeenCalledTimes(1);
-      const [hiddenSeries, visibleAfterFirst] = onLegendToggle.mock.calls[0];
-      expect(hiddenSeries).toBe(targetLabel);
-      expect(visibleAfterFirst).toBe(false);
-
-      // Toggling triggers a recompile (so the y-scale rebalances and any
-      // endpoint labels for the hidden series clear), which replaces the
-      // legend DOM. Find the same entry by label and click it again.
-      const sameEntry = container.querySelector(
-        `[data-legend-label="${targetLabel}"]`,
-      ) as HTMLElement | null;
-      expect(sameEntry).not.toBeNull();
-      sameEntry!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-
-      expect(onLegendToggle).toHaveBeenCalledTimes(2);
-      const [shownSeries, visibleAfterSecond] = onLegendToggle.mock.calls[1];
-      expect(shownSeries).toBe(targetLabel); // same series, not the other one
-      expect(visibleAfterSecond).toBe(true);
-
-      chart.destroy();
-    });
-
-    it('refuses to hide the last visible series', () => {
-      // Two-series chart: hide one, then attempt to hide the other.
-      // The second click should be a no-op (no toggle callback for the hide).
-      const onLegendToggle = vi.fn();
-      const chart = createChart(
-        container,
-        { ...lineSpec, legend: { show: true } },
-        { onLegendToggle },
-      );
-
-      const entries = container.querySelectorAll('[data-legend-label]');
-      expect(entries.length).toBeGreaterThanOrEqual(2);
-      const firstLabel = (entries[0] as HTMLElement).getAttribute('data-legend-label')!;
-
-      // Hide the first one.
-      (entries[0] as HTMLElement).dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      expect(onLegendToggle).toHaveBeenCalledTimes(1);
-
-      // Click the *other* (still-visible) series. The guard should refuse.
-      const remaining = Array.from(container.querySelectorAll('[data-legend-label]')).find(
-        (el) => (el as HTMLElement).getAttribute('data-legend-label') !== firstLabel,
-      ) as HTMLElement | undefined;
-      expect(remaining).toBeTruthy();
-      remaining!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-
-      // The handler still fires (the click bubbled and the wired listener ran),
-      // but the visible flag should report that nothing was actually hidden.
-      // Implementation detail: we expect the second call to report visible=true
-      // (the series is still visible because the toggle was refused).
-      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('.oc-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('.oc-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('.oc-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('.oc-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('.oc-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('.oc-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('.oc-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

@@ -1,241 +0,0 @@
-/**
- * Export utility tests.
- *
- * Tests exportSVG, exportSVGWithFonts, exportCSV, exportPNG, and exportJPG
- * functions directly, verifying SVG string validity, font embedding,
- * dimension parsing, CSV formatting, and raster export interfaces.
- */
-
-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, exportJPG, exportPNG, exportSVG, exportSVGWithFonts } 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('oc-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);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// exportSVGWithFonts
-// ---------------------------------------------------------------------------
-
-describe('exportSVGWithFonts', () => {
-  it('returns a promise', () => {
-    const svg = renderToSVG();
-    const result = exportSVGWithFonts(svg);
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  it('resolves to a valid SVG string', async () => {
-    const svg = renderToSVG();
-    const result = await exportSVGWithFonts(svg);
-    expect(result.startsWith('<svg')).toBe(true);
-    expect(result.endsWith('</svg>')).toBe(true);
-  });
-
-  it('skips font embedding when embedFonts is false', async () => {
-    const svg = renderToSVG();
-    const result = await exportSVGWithFonts(svg, { embedFonts: false });
-    // Should not contain @font-face (no stylesheets in test env anyway)
-    expect(result).not.toContain('@font-face');
-  });
-
-  it('produces valid SVG even without stylesheets in the document', async () => {
-    const svg = renderToSVG();
-    // In test env, no Google Fonts stylesheets exist, so font collection
-    // should gracefully return nothing and the export should still work
-    const result = await exportSVGWithFonts(svg);
-    expect(result).toContain('viewBox="0 0 600 400"');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Dimension parsing (via exportPNG which uses getSVGDimensions internally)
-// ---------------------------------------------------------------------------
-
-describe('dimension parsing', () => {
-  it('exportPNG reads dimensions from viewBox when width/height are absent', () => {
-    const svg = renderToSVG();
-    // Verify the SVG has viewBox but no explicit width/height
-    expect(svg.getAttribute('viewBox')).toBe('0 0 600 400');
-    expect(svg.getAttribute('width')).toBeNull();
-    // exportPNG should still work (not fall back to 600x400 by accident)
-    const result = exportPNG(svg, { dpi: 1, embedFonts: false });
-    expect(result).toBeInstanceOf(Promise);
-    result.catch(() => {}); // happy-dom canvas limitations
-  });
-});
-
-// ---------------------------------------------------------------------------
-// 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');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// exportPNG
-// ---------------------------------------------------------------------------
-
-describe('exportPNG', () => {
-  it('returns a Promise when called with a rendered SVG element', () => {
-    const svg = renderToSVG();
-    const result = exportPNG(svg, { embedFonts: false });
-    expect(result).toBeInstanceOf(Promise);
-    result.catch(() => {});
-  });
-});
-
-// ---------------------------------------------------------------------------
-// exportJPG
-// ---------------------------------------------------------------------------
-
-describe('exportJPG', () => {
-  it('is a function that accepts an SVG element and options', () => {
-    expect(typeof exportJPG).toBe('function');
-    expect(exportJPG.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('returns a Promise when called with a rendered SVG element', () => {
-    const svg = renderToSVG();
-    const result = exportJPG(svg, { embedFonts: false });
-    expect(result).toBeInstanceOf(Promise);
-    // Clean up: catch any rejection from happy-dom canvas limitations
-    result.catch(() => {});
-  });
-
-  it('accepts quality option between 0 and 1', () => {
-    const svg = renderToSVG();
-    const result = exportJPG(svg, { quality: 0.5, dpi: 1, embedFonts: false });
-    expect(result).toBeInstanceOf(Promise);
-    result.catch(() => {});
-  });
-});