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

package/src/__tests__/font-race.test.ts

@@ -1,199 +0,0 @@
-/**
- * Font-race regression tests.
- *
- * On real devices the primary webfont (Inter via display=swap) swaps in after
- * first paint, changing text metrics. These tests cover the two halves of the
- * fix: the measurer honors the provided font family, and the mount recompiles
- * exactly once when a late FontFaceSet resolves.
- */
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createContainer } from '../__test-fixtures__/dom';
-import { lineSpec } from '../__test-fixtures__/specs';
-import { createMeasureText } from '../measure-text';
-import { createChart } from '../mount';
-
-// ---------------------------------------------------------------------------
-// Canvas ctx stub: happy-dom's getContext returns null, so stub it to capture
-// the font string createMeasureText writes.
-// ---------------------------------------------------------------------------
-
-interface FakeCtx {
-  font: string;
-  measureText(text: string): { width: number };
-}
-
-function stubCanvasContext(): FakeCtx {
-  const ctx: FakeCtx = {
-    font: '',
-    measureText: (text: string) => ({ width: text.length * 7 }),
-  };
-  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(
-    ctx as unknown as CanvasRenderingContext2D,
-  );
-  return ctx;
-}
-
-// ---------------------------------------------------------------------------
-// Controllable FontFaceSet stub. check() reports the font missing; ready is a
-// promise we resolve on demand to simulate a late font swap.
-// ---------------------------------------------------------------------------
-
-interface FakeFontFaceSet {
-  check: () => boolean;
-  ready: Promise<unknown>;
-  resolveReady: () => void;
-}
-
-function makeFontFaceSet(loaded: boolean): FakeFontFaceSet {
-  let resolveReady: () => void = () => {};
-  const ready = new Promise<void>((resolve) => {
-    resolveReady = resolve;
-  });
-  return {
-    check: () => loaded,
-    ready,
-    resolveReady,
-  };
-}
-
-function installFonts(set: FakeFontFaceSet | undefined): void {
-  Object.defineProperty(document, 'fonts', {
-    configurable: true,
-    value: set,
-  });
-}
-
-describe('createMeasureText font family', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('uses the provided font family in ctx.font', () => {
-    const ctx = stubCanvasContext();
-    const measure = createMeasureText('"My Font", Georgia, serif');
-
-    measure('hello', 14, 600);
-
-    expect(ctx.font).toBe('600 14px "My Font", Georgia, serif');
-  });
-
-  it('defaults to the Inter fallback stack when no family is given', () => {
-    const ctx = stubCanvasContext();
-    const measure = createMeasureText();
-
-    measure('hi', 12);
-
-    expect(ctx.font).toBe('400 12px Inter, sans-serif');
-  });
-});
-
-describe('createChart font-load recompile', () => {
-  let container: HTMLDivElement;
-  const originalFonts = Object.getOwnPropertyDescriptor(document, 'fonts');
-
-  beforeEach(() => {
-    container = createContainer();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    if (originalFonts) {
-      Object.defineProperty(document, 'fonts', originalFonts);
-    } else {
-      // happy-dom has no document.fonts by default; remove our stub.
-      Object.defineProperty(document, 'fonts', { configurable: true, value: undefined });
-    }
-    document.body.innerHTML = '';
-  });
-
-  it('marks pending then ready and re-renders once when fonts resolve late', async () => {
-    const fonts = makeFontFaceSet(false);
-    installFonts(fonts);
-
-    const chart = createChart(container, lineSpec);
-
-    expect(container.dataset.ocFontsState).toBe('pending');
-    const genBefore = Number(container.dataset.ocRenderGen);
-    expect(genBefore).toBeGreaterThanOrEqual(1);
-
-    fonts.resolveReady();
-    await fonts.ready;
-    // Let the .then() microtask flush.
-    await Promise.resolve();
-
-    expect(container.dataset.ocFontsState).toBe('ready');
-    const genAfter = Number(container.dataset.ocRenderGen);
-    expect(genAfter).toBe(genBefore + 1);
-
-    chart.destroy();
-  });
-
-  it('marks ready immediately and does not re-render when fonts already loaded', async () => {
-    const fonts = makeFontFaceSet(true);
-    installFonts(fonts);
-
-    const chart = createChart(container, lineSpec);
-
-    expect(container.dataset.ocFontsState).toBe('ready');
-    const genBefore = Number(container.dataset.ocRenderGen);
-
-    fonts.resolveReady();
-    await Promise.resolve();
-
-    expect(Number(container.dataset.ocRenderGen)).toBe(genBefore);
-
-    chart.destroy();
-  });
-
-  it('defers ready until the post-animation recompile, not the deferred resize', async () => {
-    // Entrance animation running -> resize() defers to pendingResize. The
-    // fonts-ready flip must wait for the recompile that actually happens on the
-    // pendingResize replay, so 'ready' never claims final-font layout early.
-    vi.useFakeTimers();
-    try {
-      const fonts = makeFontFaceSet(false);
-      installFonts(fonts);
-
-      const animatedSpec = { ...lineSpec, animation: true as const };
-      const chart = createChart(container, animatedSpec);
-      expect(container.dataset.ocFontsState).toBe('pending');
-      const genBefore = Number(container.dataset.ocRenderGen);
-
-      fonts.resolveReady();
-      await fonts.ready;
-      await Promise.resolve();
-
-      // resize() deferred (animation in flight): no recompile yet, still pending.
-      expect(container.dataset.ocRenderGen).toBe(String(genBefore));
-      expect(container.dataset.ocFontsState).toBe('pending');
-
-      // Animation completes -> pendingResize replays -> recompile -> ready.
-      vi.runAllTimers();
-      expect(Number(container.dataset.ocRenderGen)).toBe(genBefore + 1);
-      expect(container.dataset.ocFontsState).toBe('ready');
-
-      chart.destroy();
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('does not re-render after the chart is destroyed', async () => {
-    const fonts = makeFontFaceSet(false);
-    installFonts(fonts);
-
-    const chart = createChart(container, lineSpec);
-    expect(container.dataset.ocFontsState).toBe('pending');
-    const genBefore = Number(container.dataset.ocRenderGen);
-
-    chart.destroy();
-
-    fonts.resolveReady();
-    await fonts.ready;
-    await Promise.resolve();
-
-    // Destroyed chart must not bump the render generation.
-    expect(Number(container.dataset.ocRenderGen)).toBe(genBefore);
-  });
-});

package/src/__tests__/gradient-ids.test.ts

@@ -1,159 +0,0 @@
-/**
- * Multi-chart SVG ID uniqueness: gradients AND clip-paths.
- *
- * Originally locked gradient-counter behavior from commit 73ef048 (fix for
- * random-hex gradient collisions). Step 6 of refactor/v7-cohesion unified
- * gradient and clip-path ID generation under `nextSvgId` in `svg-ids.ts`,
- * so this test now guards both halves.
- *
- * Why it matters: SVG `url(#id)` resolves against the full document. If two
- * charts on the same page generate overlapping IDs, one chart silently
- * inherits the other's gradient fill or clip region. The shared monotonic
- * counter makes uniqueness unconditional.
- */
-
-import type { ChartSpec, LinearGradient } from '@opendata-ai/openchart-core';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { createContainer } from '../__test-fixtures__/dom';
-import { createChart } from '../mount';
-
-const barGradient: LinearGradient = {
-  gradient: 'linear',
-  x1: 0,
-  y1: 0,
-  x2: 1,
-  y2: 0,
-  stops: [
-    { offset: 0, color: '#1b7fa3', opacity: 0.4 },
-    { offset: 1, color: '#1b7fa3' },
-  ],
-};
-
-// A visibly different gradient so charts have distinct gradient defs, not
-// identical ones that could be deduped by the gradient key system.
-const altGradient: LinearGradient = {
-  gradient: 'linear',
-  x1: 0,
-  y1: 0,
-  x2: 1,
-  y2: 0,
-  stops: [
-    { offset: 0, color: '#cc3366', opacity: 0.2 },
-    { offset: 1, color: '#cc3366' },
-  ],
-};
-
-function makeBarSpec(fill: LinearGradient): ChartSpec {
-  return {
-    mark: { type: 'bar', fill },
-    data: [
-      { category: 'A', value: 10 },
-      { category: 'B', value: 20 },
-      { category: 'C', value: 30 },
-    ],
-    encoding: {
-      x: { field: 'value', type: 'quantitative' },
-      y: { field: 'category', type: 'nominal' },
-    },
-  };
-}
-
-function collectGradientIds(root: HTMLElement): string[] {
-  const ids: string[] = [];
-  for (const el of root.querySelectorAll('linearGradient, radialGradient')) {
-    const id = el.getAttribute('id');
-    if (id) ids.push(id);
-  }
-  return ids;
-}
-
-function collectClipPathIds(root: HTMLElement): string[] {
-  const ids: string[] = [];
-  for (const el of root.querySelectorAll('clipPath')) {
-    const id = el.getAttribute('id');
-    if (id) ids.push(id);
-  }
-  return ids;
-}
-
-describe('SVG ID uniqueness across charts', () => {
-  let a: HTMLDivElement;
-  let b: HTMLDivElement;
-
-  beforeEach(() => {
-    a = createContainer();
-    b = createContainer();
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('two charts produce disjoint gradient IDs', () => {
-    const chartA = createChart(a, makeBarSpec(barGradient));
-    const chartB = createChart(b, makeBarSpec(altGradient));
-
-    const idsA = collectGradientIds(a);
-    const idsB = collectGradientIds(b);
-
-    // Each chart must have produced at least one gradient def.
-    expect(idsA.length).toBeGreaterThan(0);
-    expect(idsB.length).toBeGreaterThan(0);
-
-    // Union has no duplicates: size of the Set equals the total count.
-    const all = [...idsA, ...idsB];
-    expect(new Set(all).size).toBe(all.length);
-
-    // Every generated id follows the locked "oc-grad-N" shape.
-    for (const id of all) {
-      expect(id).toMatch(/^oc-grad-\d+$/);
-    }
-
-    chartA.destroy();
-    chartB.destroy();
-  });
-
-  it('two charts produce disjoint clip-path IDs', () => {
-    // Every chart render creates a <clipPath> for the plot area, so any spec
-    // works here. Reuse the gradient specs for consistency.
-    const chartA = createChart(a, makeBarSpec(barGradient));
-    const chartB = createChart(b, makeBarSpec(altGradient));
-
-    const idsA = collectClipPathIds(a);
-    const idsB = collectClipPathIds(b);
-
-    expect(idsA.length).toBeGreaterThan(0);
-    expect(idsB.length).toBeGreaterThan(0);
-
-    const all = [...idsA, ...idsB];
-    expect(new Set(all).size).toBe(all.length);
-
-    for (const id of all) {
-      expect(id).toMatch(/^oc-clip-\d+$/);
-    }
-
-    chartA.destroy();
-    chartB.destroy();
-  });
-
-  it('gradient and clip-path IDs never collide across two charts', () => {
-    // Core guarantee of the unified nextSvgId counter: even though gradients
-    // and clip-paths use different prefixes, the counter values are shared.
-    // Collecting every ID from both <defs> trees should yield a strict set.
-    const chartA = createChart(a, makeBarSpec(barGradient));
-    const chartB = createChart(b, makeBarSpec(altGradient));
-
-    const all = [
-      ...collectGradientIds(a),
-      ...collectClipPathIds(a),
-      ...collectGradientIds(b),
-      ...collectClipPathIds(b),
-    ];
-
-    expect(all.length).toBeGreaterThan(0);
-    expect(new Set(all).size).toBe(all.length);
-
-    chartA.destroy();
-    chartB.destroy();
-  });
-});

package/src/__tests__/gradient-utils.test.ts

@@ -1,125 +0,0 @@
-import type { GradientDef } from '@opendata-ai/openchart-core';
-import { describe, expect, it } from 'vitest';
-import { buildGradientDefs, resolveMarkFill } from '../gradient-utils';
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-
-function createDefs(): SVGElement {
-  return document.createElementNS(SVG_NS, 'defs') as SVGElement;
-}
-
-const linearGrad: GradientDef = {
-  gradient: 'linear',
-  stops: [
-    { offset: 0, color: '#f00' },
-    { offset: 1, color: '#00f' },
-  ],
-};
-
-const radialGrad: GradientDef = {
-  gradient: 'radial',
-  stops: [
-    { offset: 0, color: '#fff' },
-    { offset: 1, color: '#000' },
-  ],
-};
-
-describe('buildGradientDefs', () => {
-  it('creates a linearGradient element for a linear gradient fill', () => {
-    const defs = createDefs();
-    buildGradientDefs([{ fill: linearGrad }], defs);
-    const el = defs.querySelector('linearGradient');
-    expect(el).not.toBeNull();
-  });
-
-  it('creates a radialGradient element for a radial gradient fill', () => {
-    const defs = createDefs();
-    buildGradientDefs([{ fill: radialGrad }], defs);
-    const el = defs.querySelector('radialGradient');
-    expect(el).not.toBeNull();
-  });
-
-  it('deduplicates identical gradients', () => {
-    const defs = createDefs();
-    buildGradientDefs([{ fill: linearGrad }, { fill: linearGrad }], defs);
-    const els = defs.querySelectorAll('linearGradient');
-    expect(els.length).toBe(1);
-  });
-
-  it('creates separate gradient elements for different gradients', () => {
-    const defs = createDefs();
-    buildGradientDefs([{ fill: linearGrad }, { fill: radialGrad }], defs);
-    expect(defs.querySelector('linearGradient')).not.toBeNull();
-    expect(defs.querySelector('radialGradient')).not.toBeNull();
-    expect(defs.children.length).toBe(2);
-  });
-
-  it('skips marks with string fills', () => {
-    const defs = createDefs();
-    buildGradientDefs([{ fill: '#ff0000' }, { fill: 'steelblue' }], defs);
-    expect(defs.children.length).toBe(0);
-  });
-
-  it('handles empty marks array', () => {
-    const defs = createDefs();
-    const map = buildGradientDefs([], defs);
-    expect(map.size).toBe(0);
-    expect(defs.children.length).toBe(0);
-  });
-
-  it('sets correct default attributes on linearGradient', () => {
-    const defs = createDefs();
-    buildGradientDefs([{ fill: linearGrad }], defs);
-    const el = defs.querySelector('linearGradient')!;
-    expect(el.getAttribute('x1')).toBe('0');
-    expect(el.getAttribute('y1')).toBe('0');
-    expect(el.getAttribute('x2')).toBe('0');
-    expect(el.getAttribute('y2')).toBe('1');
-  });
-
-  it('sets correct stop attributes', () => {
-    const grad: GradientDef = {
-      gradient: 'linear',
-      stops: [
-        { offset: 0, color: '#f00', opacity: 0.5 },
-        { offset: 1, color: '#00f' },
-      ],
-    };
-    const defs = createDefs();
-    buildGradientDefs([{ fill: grad }], defs);
-    const stops = defs.querySelectorAll('stop');
-    expect(stops.length).toBe(2);
-    expect(stops[0].getAttribute('offset')).toBe('0');
-    expect(stops[0].getAttribute('stop-color')).toBe('#f00');
-    expect(stops[0].getAttribute('stop-opacity')).toBe('0.5');
-    expect(stops[1].getAttribute('offset')).toBe('1');
-    expect(stops[1].getAttribute('stop-color')).toBe('#00f');
-    expect(stops[1].hasAttribute('stop-opacity')).toBe(false);
-  });
-
-  it('sets gradientUnits="objectBoundingBox"', () => {
-    const defs = createDefs();
-    buildGradientDefs([{ fill: linearGrad }], defs);
-    const el = defs.querySelector('linearGradient')!;
-    expect(el.getAttribute('gradientUnits')).toBe('objectBoundingBox');
-  });
-});
-
-describe('resolveMarkFill', () => {
-  it('returns the string directly for string fills', () => {
-    const map = new Map<string, string>();
-    expect(resolveMarkFill('#ff0000', map)).toBe('#ff0000');
-  });
-
-  it('returns url(#id) for gradient fills that are in the map', () => {
-    const defs = createDefs();
-    const map = buildGradientDefs([{ fill: linearGrad }], defs);
-    const result = resolveMarkFill(linearGrad, map);
-    expect(result).toMatch(/^url\(#oc-grad-\d+\)$/);
-  });
-
-  it('returns #000000 for gradient fills not in the map', () => {
-    const map = new Map<string, string>();
-    expect(resolveMarkFill(linearGrad, map)).toBe('#000000');
-  });
-});

package/src/__tests__/known-bugs-render.test.ts

@@ -1,183 +0,0 @@
-/**
- * Red-locked tests for known layout bugs.
- *
- * These use `test.fails(...)` so they pass today (the assertion is inverted).
- * When the underlying bug is fixed, the test will start failing, signaling
- * that the red-lock can be converted to a normal passing test.
- */
-
-import type { CategoricalLegendLayout } from '@opendata-ai/openchart-core';
-import { estimateTextWidth } from '@opendata-ai/openchart-core';
-import { compileChart } from '@opendata-ai/openchart-engine';
-import { describe, expect, test } from 'vitest';
-import { renderLegend } from '../renderers/legend';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Collect distinct y-attribute values from <text> elements, sorted ascending. */
-function distinctLabelYValues(svg: SVGElement): number[] {
-  const texts = svg.querySelectorAll('text');
-  const ySet = new Set<number>();
-  for (const t of texts) {
-    const y = t.getAttribute('y');
-    if (y != null) ySet.add(Number(y));
-  }
-  return [...ySet].sort((a, b) => a - b);
-}
-
-// ---------------------------------------------------------------------------
-// Constants (mirrors packages/engine/src/legend/wrap.ts)
-// ---------------------------------------------------------------------------
-
-const SWATCH_SIZE = 12;
-const SWATCH_GAP = 6;
-const ENTRY_GAP = 16;
-const ENGINE_ROW_HEIGHT = SWATCH_SIZE + 4; // 16 - what the engine reserves
-const LEGEND_PADDING = 8;
-
-// ---------------------------------------------------------------------------
-// Fixtures
-// ---------------------------------------------------------------------------
-
-const entries: CategoricalLegendLayout['entries'] = [
-  { label: 'United States of America', color: '#1f77b4', shape: 'square', active: true },
-  { label: 'United Kingdom', color: '#ff7f0e', shape: 'square', active: true },
-  { label: 'Federal Republic of Germany', color: '#2ca02c', shape: 'square', active: true },
-  { label: 'French Republic', color: '#d62728', shape: 'square', active: true },
-  { label: 'Kingdom of Spain', color: '#9467bd', shape: 'square', active: true },
-  { label: 'Republic of Italy', color: '#8c564b', shape: 'square', active: true },
-  { label: 'Kingdom of Netherlands', color: '#e377c2', shape: 'square', active: true },
-  { label: 'Swiss Confederation', color: '#7f7f7f', shape: 'square', active: true },
-];
-
-const labelStyle = {
-  fontSize: 11,
-  lineHeight: 1.3,
-  fontWeight: 400 as const,
-  fontFamily: 'sans-serif',
-  fill: '#333',
-};
-
-/**
- * Compute row count by simulating the same wrap logic the engine uses
- * (measureLegendWrap in packages/engine/src/legend/wrap.ts).
- */
-function computeRowCount(maxWidth: number): number {
-  let rowCount = 1;
-  let rowWidth = 0;
-  for (const entry of entries) {
-    const labelWidth = estimateTextWidth(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
-    const entryWidth = SWATCH_SIZE + SWATCH_GAP + labelWidth + ENTRY_GAP;
-    if (rowWidth + entryWidth > maxWidth && rowWidth > 0) {
-      rowCount++;
-      rowWidth = entryWidth;
-    } else {
-      rowWidth += entryWidth;
-    }
-  }
-  return rowCount;
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('known layout bugs', () => {
-  // Red-locked: fixed by docs/plans/04-resolved-layout-contract.md
-  test.fails('5a.1: legend row advancement matches engine row height', () => {
-    const boundsWidth = 400;
-    const rowCount = computeRowCount(boundsWidth);
-    const boundsHeight = rowCount * ENGINE_ROW_HEIGHT + LEGEND_PADDING * 2;
-
-    const legendFixture: CategoricalLegendLayout = {
-      position: 'top',
-      entries,
-      swatchSize: SWATCH_SIZE,
-      swatchGap: SWATCH_GAP,
-      entryGap: ENTRY_GAP,
-      swatchChipFill: '#f0f0f0',
-      labelStyle,
-      bounds: { x: 0, y: 0, width: boundsWidth, height: boundsHeight },
-    };
-
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    renderLegend(svg, legendFixture);
-
-    const yValues = distinctLabelYValues(svg);
-    // With 4 rows we expect 4 distinct y-values. Consecutive rows should
-    // differ by ENGINE_ROW_HEIGHT (16). The renderer uses swatchSize + 6 = 18,
-    // so this assertion will fail until the drift is fixed.
-    expect(yValues.length).toBeGreaterThanOrEqual(2);
-    for (let i = 1; i < yValues.length; i++) {
-      const gap = yValues[i] - yValues[i - 1];
-      expect(gap).toBe(ENGINE_ROW_HEIGHT);
-    }
-  });
-
-  // Red-locked: fixed by docs/plans/04-resolved-layout-contract.md and docs/plans/03-measure-then-freeze-layout.md
-  test.fails('5a.2: rows drawn by renderer match rows reserved by engine', () => {
-    // Build a line spec with 8 series whose labels vary in length.
-    const countries = [
-      'United States of America',
-      'United Kingdom',
-      'Federal Republic of Germany',
-      'French Republic',
-      'Kingdom of Spain',
-      'Republic of Italy',
-      'Kingdom of Netherlands',
-      'Swiss Confederation',
-    ];
-
-    const data = countries.flatMap((country) => [
-      { date: '2020-01-01', value: 10, country },
-      { date: '2021-01-01', value: 20, country },
-    ]);
-
-    const spec = {
-      mark: 'line' as const,
-      data,
-      encoding: {
-        x: { field: 'date', type: 'temporal' as const },
-        y: { field: 'value', type: 'quantitative' as const },
-        color: { field: 'country', type: 'nominal' as const },
-      },
-      legend: { position: 'top' as const },
-    };
-
-    // Try widths 500-700 to find one where the legend wraps AND the
-    // bounds.width narrowing causes extra rows in the renderer.
-    let foundMismatch = false;
-
-    for (let width = 500; width <= 700; width += 10) {
-      const layout = compileChart(spec, { width, height: 400 });
-      const legend = layout.legend as CategoricalLegendLayout;
-      if (!legend || !legend.entries || legend.entries.length === 0) continue;
-
-      // Rows reserved by the engine
-      const effectivePadding = width < 420 ? 2 : LEGEND_PADDING;
-      const rowsReserved = Math.round(
-        (legend.bounds.height - effectivePadding * 2) / ENGINE_ROW_HEIGHT,
-      );
-      if (rowsReserved <= 1) continue; // only interesting when wrapping occurs
-
-      // Render and count rows drawn
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      renderLegend(svg, legend);
-      const yValues = distinctLabelYValues(svg);
-      const rowsDrawn = yValues.length;
-
-      if (rowsDrawn !== rowsReserved) {
-        foundMismatch = true;
-        // This is the bug: the renderer drew more rows than the engine reserved.
-        expect(rowsDrawn).toBe(rowsReserved);
-        return;
-      }
-    }
-
-    // If no width triggered a mismatch, fail so test.fails still inverts.
-    // If this path fires, widen the width range above.
-    expect(foundMismatch).toBe(true);
-  });
-});