@opendata-ai/openchart-vanilla 8.0.0-rc.9 → 8.0.0

package/src/__tests__/mount.test.ts

@@ -1,357 +0,0 @@
-import type { ChartLayout } from '@opendata-ai/openchart-core';
-import { legendGap } from '@opendata-ai/openchart-engine';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { createAutoHeightContainer, createContainer } from '../__test-fixtures__/dom';
-import {
-  barSpec,
-  lineSpec,
-  longChromeLineSpec,
-  singleSeriesLineSpec,
-} 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('oc-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('.oc-title');
-    expect(title).not.toBeNull();
-    expect(title?.textContent).toBe('GDP Growth');
-
-    const subtitle = container.querySelector('.oc-subtitle');
-    expect(subtitle).not.toBeNull();
-    expect(subtitle?.textContent).toBe('US vs UK over time');
-
-    const source = container.querySelector('.oc-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('.oc-title');
-    expect(titleBefore?.textContent).toBe('GDP Growth');
-
-    chart.update(barSpec);
-
-    const titleAfter = container.querySelector('.oc-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('.oc-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('a11y.description overrides the SVG aria-label', () => {
-    const chart = createChart(container, {
-      ...lineSpec,
-      a11y: { description: 'GDP growth for US and UK.' },
-    });
-
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('aria-label')).toBe('GDP growth for US and UK.');
-
-    chart.destroy();
-  });
-
-  it('a11y.hidden removes the chart from the accessibility tree', () => {
-    const chart = createChart(container, { ...lineSpec, a11y: { hidden: true } });
-
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('aria-hidden')).toBe('true');
-    expect(svg?.getAttribute('role')).toBeNull();
-    expect(svg?.getAttribute('aria-label')).toBeNull();
-    // No screen-reader table, no keyboard tab stop
-    expect(container.querySelector('.oc-sr-only')).toBeNull();
-    expect(container.getAttribute('tabindex')).toBeNull();
-
-    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('.oc-axis-x');
-    const yAxis = container.querySelector('.oc-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('.oc-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();
-  });
-
-  it('does NOT stamp data-display on default (full) charts', () => {
-    const chart = createChart(container, lineSpec);
-    const svg = container.querySelector('svg');
-    expect(svg?.hasAttribute('data-display')).toBe(false);
-    chart.destroy();
-  });
-
-  it('stamps data-display="sparkline" when display is sparkline', () => {
-    const chart = createChart(container, {
-      mark: 'line',
-      data: lineSpec.data,
-      encoding: lineSpec.encoding,
-      display: 'sparkline',
-    });
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('data-display')).toBe('sparkline');
-    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();
-  });
-});
-
-describe('auto-height container growth', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  /** The chrome/legend/metrics blocks the mount grows the figure by. */
-  function overheadsOf(layout: ChartLayout, width: number): number {
-    const topLegendBlock =
-      layout.legend.position === 'top' &&
-      'entries' in layout.legend &&
-      layout.legend.entries.length > 0
-        ? layout.legend.bounds.height + legendGap(width)
-        : 0;
-    return (
-      layout.chrome.topHeight +
-      layout.chrome.bottomHeight +
-      topLegendBlock +
-      (layout.metrics?.height ?? 0)
-    );
-  }
-
-  it('grows the figure beyond the 400px budget by the measured overheads', () => {
-    const container = createAutoHeightContainer(390);
-    const chart = createChart(container, longChromeLineSpec);
-
-    const height = chart.layout.dimensions.height;
-    expect(height).toBeGreaterThan(400);
-    expect(height).toBeCloseTo(400 + overheadsOf(chart.layout, 390), 5);
-
-    // The rendered SVG is sized to the grown figure, not the 400 fallback.
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('viewBox')).toBe(`0 0 390 ${height}`);
-    expect((svg as SVGElement).style.height).toBe(`${height}px`);
-
-    chart.destroy();
-  });
-
-  it('keeps explicit-height containers at the host height', () => {
-    const container = createContainer(390, 500);
-    const chart = createChart(container, longChromeLineSpec);
-
-    // Host constrains the box; chrome must fit inside it, not grow it.
-    expect(chart.layout.dimensions.height).toBe(500);
-
-    chart.destroy();
-  });
-
-  it('re-renders against the 400 budget, not the grown height (no re-pin)', () => {
-    const container = createAutoHeightContainer(390);
-    const chart = createChart(container, longChromeLineSpec);
-
-    const grownHeight = chart.layout.dimensions.height;
-    expect(grownHeight).toBeGreaterThan(400);
-
-    // Same spec again: the container now measures at the grown SVG height,
-    // but the latched-auto mount keeps compiling against the 400 budget, so
-    // the figure height is stable.
-    chart.update(longChromeLineSpec);
-    expect(chart.layout.dimensions.height).toBe(grownHeight);
-
-    // Shorter chrome: the figure must shrink toward the budget instead of
-    // staying pinned at the previously grown container height.
-    chart.update(singleSeriesLineSpec);
-    const shrunkHeight = chart.layout.dimensions.height;
-    expect(shrunkHeight).toBeLessThan(grownHeight);
-    expect(shrunkHeight).toBeCloseTo(400 + overheadsOf(chart.layout, 390), 5);
-
-    chart.destroy();
-  });
-
-  it('does not grow sparkline mounts', () => {
-    const container = createAutoHeightContainer(200);
-    const chart = createChart(container, {
-      mark: 'line',
-      data: lineSpec.data,
-      encoding: lineSpec.encoding,
-      display: 'sparkline',
-    });
-
-    // Sparkline auto-height fallback stays at the tiny 40px default.
-    expect(chart.layout.dimensions.height).toBe(40);
-
-    chart.destroy();
-  });
-});

package/src/__tests__/pattern-fills.test.ts

@@ -1,105 +0,0 @@
-/**
- * Fill pattern rendering: <pattern> defs lifecycle and mark fill references.
- *
- * Mirrors gradient-ids.test.ts for the pattern half of the defs system:
- * pattern IDs come from the shared nextSvgId counter, so they are
- * deterministic at generation time and globally unique across charts.
- */
-
-import type { ChartSpec } from '@opendata-ai/openchart-core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { createContainer } from '../__test-fixtures__/dom';
-import { createChart } from '../mount';
-
-function stackedSpec(): ChartSpec {
-  return {
-    mark: { type: 'bar', fillPattern: 'auto' },
-    data: [
-      { quarter: 'Q1', source: 'Solar', twh: 30 },
-      { quarter: 'Q1', source: 'Wind', twh: 45 },
-      { quarter: 'Q1', source: 'Hydro', twh: 25 },
-      { quarter: 'Q1', source: 'Gas', twh: 60 },
-      { quarter: 'Q2', source: 'Solar', twh: 35 },
-      { quarter: 'Q2', source: 'Wind', twh: 50 },
-      { quarter: 'Q2', source: 'Hydro', twh: 22 },
-      { quarter: 'Q2', source: 'Gas', twh: 55 },
-    ],
-    encoding: {
-      x: { field: 'quarter', type: 'nominal' },
-      y: { field: 'twh', type: 'quantitative', stack: 'zero' },
-      color: { field: 'source', type: 'nominal' },
-    },
-  };
-}
-
-function collectPatternIds(root: HTMLElement): string[] {
-  const ids: string[] = [];
-  for (const el of root.querySelectorAll('pattern')) {
-    const id = el.getAttribute('id');
-    if (id) ids.push(id);
-  }
-  return ids;
-}
-
-describe('pattern fill rendering', () => {
-  let a: HTMLDivElement;
-  let b: HTMLDivElement;
-
-  beforeEach(() => {
-    a = createContainer();
-    b = createContainer();
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('creates one pattern def per series and references them from bar fills', () => {
-    const chart = createChart(a, stackedSpec());
-
-    const ids = collectPatternIds(a);
-    expect(ids.length).toBe(4);
-    for (const id of ids) {
-      expect(id).toMatch(/^oc-pattern-\d+$/);
-    }
-
-    // Each pattern tile carries a base rect plus pattern geometry
-    for (const pattern of a.querySelectorAll('pattern')) {
-      expect(pattern.querySelector('rect')).not.toBeNull();
-      expect(pattern.children.length).toBe(2);
-    }
-
-    // Every large-enough bar segment fills from a pattern url
-    const rects = a.querySelectorAll('.oc-mark-rect rect, .oc-mark-rect path');
-    const patternFills = [...rects].filter((el) =>
-      (el.getAttribute('fill') ?? '').startsWith('url(#oc-pattern-'),
-    );
-    expect(patternFills.length).toBeGreaterThan(0);
-
-    chart.destroy();
-  });
-
-  it('renders solid fills when fillPattern is absent', () => {
-    const spec = stackedSpec();
-    spec.mark = { type: 'bar' };
-    const chart = createChart(a, spec);
-    expect(collectPatternIds(a)).toEqual([]);
-    chart.destroy();
-  });
-
-  it('two charts produce disjoint pattern IDs', () => {
-    const chartA = createChart(a, stackedSpec());
-    const chartB = createChart(b, stackedSpec());
-
-    const idsA = collectPatternIds(a);
-    const idsB = collectPatternIds(b);
-    expect(idsA.length).toBeGreaterThan(0);
-    expect(idsB.length).toBeGreaterThan(0);
-
-    const all = [...idsA, ...idsB];
-    expect(new Set(all).size).toBe(all.length);
-
-    chartA.destroy();
-    chartB.destroy();
-  });
-});

package/src/__tests__/resize-timing.test.ts

@@ -1,218 +0,0 @@
-/**
- * Resize timing behavior.
- *
- * These tests verify that:
- * 1. The inner observer's 16ms debounce coalesces a rapid burst of
- *    ResizeObserver entries into a single render (no thrash).
- * 2. First ResizeObserver fire does not blank-flash (SVG stays mounted).
- * 3. Resize events during an entrance animation are deferred and replayed
- *    on animation end.
- *
- * happy-dom ships a ResizeObserver stub that does not auto-fire on layout,
- * so we override it with a controllable mock that lets us invoke the
- * observer callback synchronously.
- */
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createAutoHeightContainer, createContainer } from '../__test-fixtures__/dom';
-import { lineSpec, longChromeLineSpec } from '../__test-fixtures__/specs';
-import { createChart } from '../mount';
-
-// ---------------------------------------------------------------------------
-// Controllable ResizeObserver mock
-// ---------------------------------------------------------------------------
-
-type ObserverCallback = (entries: ResizeObserverEntry[]) => void;
-
-interface FakeObserver {
-  element: Element | null;
-  callback: ObserverCallback;
-  disconnected: boolean;
-}
-
-const observers: FakeObserver[] = [];
-
-class MockResizeObserver {
-  private readonly record: FakeObserver;
-
-  constructor(callback: ObserverCallback) {
-    this.record = { element: null, callback, disconnected: false };
-    observers.push(this.record);
-  }
-
-  observe(element: Element): void {
-    this.record.element = element;
-  }
-
-  disconnect(): void {
-    this.record.disconnected = true;
-  }
-
-  unobserve(): void {
-    // no-op
-  }
-}
-
-/** Fire a ResizeObserver callback for the given element with width/height. */
-function fireResize(element: Element, width: number, height: number): void {
-  for (const o of observers) {
-    if (o.element === element && !o.disconnected) {
-      const entry = {
-        contentRect: { width, height, top: 0, left: 0, right: width, bottom: height, x: 0, y: 0 },
-        target: element,
-      } as unknown as ResizeObserverEntry;
-      o.callback([entry]);
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('chart resize timing', () => {
-  let container: HTMLDivElement;
-  let originalRO: typeof globalThis.ResizeObserver;
-
-  beforeEach(() => {
-    observers.length = 0;
-    originalRO = globalThis.ResizeObserver;
-    // Use MockResizeObserver so tests can drive observer fires deterministically.
-    // Cast via unknown to satisfy the stricter ResizeObserver type.
-    globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
-    vi.useFakeTimers();
-    container = createContainer();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    globalThis.ResizeObserver = originalRO;
-    document.body.innerHTML = '';
-  });
-
-  it('coalesces a rapid burst of resize events into a single render', async () => {
-    const chart = createChart(container, lineSpec);
-    const initialSvg = container.querySelector('svg');
-    expect(initialSvg).not.toBeNull();
-
-    // Track SVG node identity across renders: each render() replaces the SVG,
-    // so counting how many distinct SVG nodes appear tells us how many renders ran.
-    let renderCount = 0;
-    const mo = new MutationObserver((records) => {
-      for (const r of records) {
-        for (let i = 0; i < r.addedNodes.length; i++) {
-          const node = r.addedNodes[i];
-          if (node instanceof Element && node.tagName.toLowerCase() === 'svg') {
-            renderCount++;
-          }
-        }
-      }
-    });
-    mo.observe(container, { childList: true });
-
-    // Fire 20 resize events within a tight window.
-    for (let i = 0; i < 20; i++) {
-      fireResize(container, 600 + i, 400);
-    }
-
-    // Before the debounce window elapses, no new SVG has been appended.
-    expect(renderCount).toBe(0);
-
-    // Run all pending timers (16ms inner debounce + any outer delay).
-    await vi.runAllTimersAsync();
-
-    // MutationObserver records are delivered as microtasks; flush them.
-    mo.takeRecords().forEach((r) => {
-      for (let i = 0; i < r.addedNodes.length; i++) {
-        const node = r.addedNodes[i];
-        if (node instanceof Element && node.tagName.toLowerCase() === 'svg') {
-          renderCount++;
-        }
-      }
-    });
-
-    // Exactly one re-render should have run for the whole burst (no thrash).
-    expect(renderCount).toBe(1);
-
-    mo.disconnect();
-    chart.destroy();
-  });
-
-  it('does not blank-flash: SVG remains mounted through first observer fire', async () => {
-    const chart = createChart(container, lineSpec);
-
-    // SVG is painted immediately on mount, before the observer fires.
-    const svgBefore = container.querySelector('svg');
-    expect(svgBefore).not.toBeNull();
-
-    // Fire the observer as it would on first layout.
-    fireResize(container, 600, 400);
-
-    // Even before the debounce elapses, the SVG must still be in the DOM.
-    expect(container.querySelector('svg')).not.toBeNull();
-
-    // And after timers flush, the SVG is still there (possibly a new node).
-    await vi.runAllTimersAsync();
-    expect(container.querySelector('svg')).not.toBeNull();
-
-    chart.destroy();
-  });
-
-  it('disconnects the observer on destroy', () => {
-    const chart = createChart(container, lineSpec);
-    expect(observers.length).toBe(1);
-    expect(observers[0].disconnected).toBe(false);
-
-    chart.destroy();
-
-    expect(observers[0].disconnected).toBe(true);
-  });
-
-  it('clears any pending resize timer on destroy (no callback after teardown)', async () => {
-    const chart = createChart(container, lineSpec);
-
-    fireResize(container, 700, 500);
-    // Destroy before the debounce elapses.
-    chart.destroy();
-
-    await vi.runAllTimersAsync();
-
-    // destroy() removes the SVG; if the timer fired after destroy it would
-    // try to render a new one. No SVG should be present.
-    expect(container.querySelector('svg')).toBeNull();
-  });
-
-  describe('auto-height observer feedback guard', () => {
-    it('ignores the observer echo from the figure growing itself', async () => {
-      const autoContainer = createAutoHeightContainer(390);
-      const chart = createChart(autoContainer, longChromeLineSpec);
-
-      const grownHeight = chart.layout.dimensions.height;
-      expect(grownHeight).toBeGreaterThan(400);
-      const genBefore = autoContainer.dataset.ocRenderGen;
-
-      // Growing the SVG grows the container, which fires the observer with
-      // our own dimensions. That echo must not trigger a re-render (the
-      // re-render would grow again and loop).
-      fireResize(autoContainer, 390, grownHeight);
-      await vi.runAllTimersAsync();
-      expect(autoContainer.dataset.ocRenderGen).toBe(genBefore);
-
-      chart.destroy();
-    });
-
-    it('still re-renders when the width changes', async () => {
-      const autoContainer = createAutoHeightContainer(390);
-      const chart = createChart(autoContainer, longChromeLineSpec);
-
-      const grownHeight = chart.layout.dimensions.height;
-      const genBefore = autoContainer.dataset.ocRenderGen;
-
-      fireResize(autoContainer, 340, grownHeight);
-      await vi.runAllTimersAsync();
-      expect(autoContainer.dataset.ocRenderGen).not.toBe(genBefore);
-
-      chart.destroy();
-    });
-  });
-});