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

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();
-    });
-  });
-});

package/src/__tests__/sankey.test.ts

@@ -1,133 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { createContainer } from '../__test-fixtures__/dom';
-import { createSankey } from '../sankey-mount';
-
-// ---------------------------------------------------------------------------
-// Shared fixtures
-// ---------------------------------------------------------------------------
-
-const basicSankeySpec = {
-  type: 'sankey' as const,
-  data: [
-    { from: 'A', to: 'C', amount: 10 },
-    { from: 'B', to: 'C', amount: 20 },
-    { from: 'C', to: 'D', amount: 15 },
-    { from: 'C', to: 'E', amount: 15 },
-  ],
-  encoding: {
-    source: { field: 'from', type: 'nominal' as const },
-    target: { field: 'to', type: 'nominal' as const },
-    value: { field: 'amount', type: 'quantitative' as const },
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('createSankey', () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = createContainer();
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('mounts an SVG element into the container', () => {
-    const instance = createSankey(container, basicSankeySpec, { responsive: false });
-
-    const svg = container.querySelector('svg');
-    expect(svg).not.toBeNull();
-    expect(svg?.getAttribute('class')).toContain('oc-chart');
-
-    instance.destroy();
-  });
-
-  it('renders the correct number of sankey node elements', () => {
-    const instance = createSankey(container, basicSankeySpec, { responsive: false });
-
-    const nodes = container.querySelectorAll('.oc-sankey-node');
-    // A, B, C, D, E = 5 nodes
-    expect(nodes).toHaveLength(5);
-
-    instance.destroy();
-  });
-
-  it('renders the correct number of sankey link elements', () => {
-    const instance = createSankey(container, basicSankeySpec, { responsive: false });
-
-    const links = container.querySelectorAll('.oc-sankey-link');
-    // A->C, B->C, C->D, C->E = 4 links
-    expect(links).toHaveLength(4);
-
-    instance.destroy();
-  });
-
-  it('creates gradient defs when linkStyle is gradient', () => {
-    const spec = { ...basicSankeySpec, linkStyle: 'gradient' as const };
-    const instance = createSankey(container, spec, { responsive: false });
-
-    const gradients = container.querySelectorAll('linearGradient');
-    expect(gradients.length).toBeGreaterThan(0);
-
-    instance.destroy();
-  });
-
-  it('update() replaces the SVG with new content', () => {
-    const instance = createSankey(container, basicSankeySpec, { responsive: false });
-
-    const svgBefore = container.querySelector('svg');
-    expect(svgBefore).not.toBeNull();
-
-    // Update with different data
-    const updatedSpec = {
-      ...basicSankeySpec,
-      data: [{ from: 'X', to: 'Y', amount: 50 }],
-    };
-    instance.update(updatedSpec);
-
-    const svgAfter = container.querySelector('svg');
-    expect(svgAfter).not.toBeNull();
-
-    // Should now have 2 nodes (X and Y) instead of 5
-    const nodes = container.querySelectorAll('.oc-sankey-node');
-    expect(nodes).toHaveLength(2);
-
-    instance.destroy();
-  });
-
-  it('destroy() removes the SVG from the container', () => {
-    const instance = createSankey(container, basicSankeySpec, { responsive: false });
-
-    const svgBefore = container.querySelector('svg');
-    expect(svgBefore).not.toBeNull();
-
-    instance.destroy();
-
-    const svgAfter = container.querySelector('svg');
-    expect(svgAfter).toBeNull();
-  });
-
-  it('has oc-animate class when animation is enabled', () => {
-    const spec = { ...basicSankeySpec, animation: true };
-    const instance = createSankey(container, spec, { responsive: false });
-
-    const svg = container.querySelector('svg');
-    expect(svg?.classList.contains('oc-animate')).toBe(true);
-
-    instance.destroy();
-  });
-
-  it('layout property returns the compiled layout', () => {
-    const instance = createSankey(container, basicSankeySpec, { responsive: false });
-
-    expect(instance.layout).toBeDefined();
-    expect(instance.layout.nodes).toHaveLength(5);
-    expect(instance.layout.links).toHaveLength(4);
-
-    instance.destroy();
-  });
-});