@opendata-ai/openchart-engine 8.0.0-rc.12 → 8.0.0-rc.3

package/src/__tests__/compile-snapshot.test.ts

@@ -0,0 +1,156 @@
+/**
+ * Integration snapshot test: the backstop for Step 7 refactor.
+ *
+ * Compiles three representative ChartSpecs that exercise the extracted paths
+ * (legend-heavy, clipped-domain, watermark + gradient) and snapshots the full
+ * ChartLayout. Pre-refactor snapshots are captured before helper extraction;
+ * post-refactor snapshots must match exactly without --update-snapshots.
+ *
+ * Non-serializable fields (Map, Function) are normalized into plain structures
+ * so the snapshot can round-trip through the default serializer.
+ */
+
+import type { ChartLayout } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
+
+type AxisTick = { label?: string; value?: unknown; position?: unknown };
+type AxisShape = Record<string, unknown> & { ticks?: AxisTick[] };
+
+/**
+ * Whether an axis carries temporal (Date) ticks. D3 time scales produce
+ * midnight-local Date objects, so tick positions and values shift by hours
+ * between macOS (CDT/PDT) and Linux CI (UTC). We strip temporal axes from
+ * the main snapshot and assert their labels separately.
+ */
+function isTemporalAxis(axis: AxisShape | undefined): boolean {
+  return Array.isArray(axis?.ticks) && axis.ticks.some((t) => t.value instanceof Date);
+}
+
+/** Convert ChartLayout into a fully serializable shape for snapshot comparison. */
+function serializeLayout(
+  layout: ChartLayout,
+  { stripTemporalAxes = false } = {},
+): Record<string, unknown> {
+  const { tooltipDescriptors, measureText: _measure, ...rest } = layout;
+  const axes = rest.axes as { x?: AxisShape; y?: AxisShape } | undefined;
+
+  let serializedAxes = axes;
+  if (axes && stripTemporalAxes) {
+    serializedAxes = {
+      ...axes,
+      x: isTemporalAxis(axes.x) ? undefined : axes.x,
+      y: isTemporalAxis(axes.y) ? undefined : axes.y,
+    };
+  }
+
+  return {
+    ...rest,
+    axes: serializedAxes,
+    tooltipDescriptors: Array.from(tooltipDescriptors.entries()),
+  };
+}
+
+describe('compileChart snapshot (Step 7 oracle)', () => {
+  it('legend-heavy multi-series line chart', () => {
+    const spec = {
+      mark: 'line' as const,
+      data: [
+        { date: '2020-01-01', value: 10, country: 'US' },
+        { date: '2021-01-01', value: 40, country: 'US' },
+        { date: '2020-01-01', value: 15, country: 'UK' },
+        { date: '2021-01-01', value: 35, country: 'UK' },
+        { date: '2020-01-01', value: 8, country: 'FR' },
+        { date: '2021-01-01', value: 22, country: 'FR' },
+        { date: '2020-01-01', value: 12, country: 'DE' },
+        { date: '2021-01-01', value: 28, country: 'DE' },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' as const },
+        y: { field: 'value', type: 'quantitative' as const },
+        color: { field: 'country', type: 'nominal' as const },
+      },
+      chrome: {
+        title: 'GDP Growth',
+        subtitle: 'Four-country comparison',
+        source: 'World Bank',
+      },
+      legend: { show: true },
+      watermark: false,
+    };
+
+    const layout = compileChart(spec, { width: 800, height: 500 });
+
+    // Temporal x-axis positions shift with timezone (macOS CDT vs Linux UTC),
+    // so we strip it from the structural snapshot and assert just the labels.
+    expect(serializeLayout(layout, { stripTemporalAxes: true })).toMatchSnapshot();
+
+    const xAxes = (layout.axes as { x?: AxisShape } | undefined)?.x;
+    const tickLabels = (xAxes?.ticks ?? []).map((t: AxisTick) => t.label);
+    expect(tickLabels.length).toBeGreaterThanOrEqual(3);
+    expect(tickLabels.length).toBeLessThanOrEqual(6);
+    expect(tickLabels.every((l) => typeof l === 'string' && l.length > 0)).toBe(true);
+  });
+
+  it('clipped-domain bar chart (data outside scale.domain filtered)', () => {
+    const spec = {
+      mark: 'bar' as const,
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 25 },
+        { name: 'C', value: 40 },
+        { name: 'D', value: 75 },
+        { name: 'E', value: 90 },
+      ],
+      encoding: {
+        x: {
+          field: 'value',
+          type: 'quantitative' as const,
+          scale: { domain: [0, 50], clip: true },
+        },
+        y: { field: 'name', type: 'nominal' as const },
+      },
+      chrome: {
+        title: 'Clipped Values',
+      },
+      watermark: false,
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(serializeLayout(layout)).toMatchSnapshot();
+  });
+
+  it('watermarked column chart with gradient fill', () => {
+    const spec = {
+      mark: {
+        type: 'bar' as const,
+        fill: {
+          type: 'linear' as const,
+          stops: [
+            { offset: 0, color: '#ff0000' },
+            { offset: 1, color: '#0000ff' },
+          ],
+        },
+      },
+      data: [
+        { category: 'A', score: 30 },
+        { category: 'B', score: 55 },
+        { category: 'C', score: 70 },
+        { category: 'D', score: 45 },
+      ],
+      encoding: {
+        x: { field: 'category', type: 'nominal' as const },
+        y: { field: 'score', type: 'quantitative' as const },
+      },
+      chrome: {
+        title: 'Gradient Columns',
+        source: 'Test data',
+        byline: 'By the engine',
+      },
+      watermark: true,
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(serializeLayout(layout)).toMatchSnapshot();
+  });
+});

package/src/__tests__/compound-labels.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const albumData = [
+  { album: 'Abbey Road', artist: 'The Beatles', sales: 31 },
+  { album: 'Thriller', artist: 'Michael Jackson', sales: 66 },
+  { album: 'Back in Black', artist: 'AC/DC', sales: 50 },
+  { album: 'The Dark Side of the Moon', artist: 'Pink Floyd', sales: 45 },
+  { album: 'Rumours', artist: 'Fleetwood Mac', sales: 40 },
+];
+
+function makeBarSpec(axisConfig?: Record<string, unknown>) {
+  return {
+    mark: 'bar' as const,
+    data: albumData,
+    encoding: {
+      x: { field: 'sales', type: 'quantitative' as const },
+      y: {
+        field: 'album',
+        type: 'nominal' as const,
+        axis: axisConfig,
+      },
+    },
+  };
+}
+
+const compileOpts = { width: 600, height: 400 };
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('compound axis labels (labelField)', () => {
+  it('populates subtitle on ticks when labelField is set', () => {
+    const spec = makeBarSpec({ labelField: 'artist' });
+    const layout = compileChart(spec, compileOpts);
+
+    const yTicks = layout.axes.y?.ticks ?? [];
+    expect(yTicks.length).toBeGreaterThan(0);
+
+    // Every tick should have a subtitle matching the artist for that album
+    for (const tick of yTicks) {
+      const row = albumData.find((r) => r.album === tick.label);
+      expect(row).toBeDefined();
+      expect(tick.subtitle).toBe(row!.artist);
+    }
+  });
+
+  it('does not add subtitle when labelField is omitted', () => {
+    const spec = makeBarSpec();
+    const layout = compileChart(spec, compileOpts);
+
+    const yTicks = layout.axes.y?.ticks ?? [];
+    expect(yTicks.length).toBeGreaterThan(0);
+
+    for (const tick of yTicks) {
+      expect(tick.subtitle).toBeUndefined();
+    }
+  });
+
+  it('handles missing labelField value gracefully', () => {
+    const dataWithMissing = [
+      { album: 'Abbey Road', artist: 'The Beatles', sales: 31 },
+      { album: 'Unknown Album', sales: 20 }, // no artist field
+    ];
+    const spec = {
+      mark: 'bar' as const,
+      data: dataWithMissing,
+      encoding: {
+        x: { field: 'sales', type: 'quantitative' as const },
+        y: {
+          field: 'album',
+          type: 'nominal' as const,
+          axis: { labelField: 'artist' },
+        },
+      },
+    };
+
+    const layout = compileChart(spec, compileOpts);
+    const yTicks = layout.axes.y?.ticks ?? [];
+
+    // Abbey Road should have a subtitle
+    const abbeyRoad = yTicks.find((t) => t.label === 'Abbey Road');
+    expect(abbeyRoad?.subtitle).toBe('The Beatles');
+
+    // Unknown Album has no artist field, so subtitle should be undefined
+    const unknown = yTicks.find((t) => t.label === 'Unknown Album');
+    expect(unknown?.subtitle).toBeUndefined();
+  });
+
+  it('maps subtitle correctly across multiple ticks', () => {
+    const spec = makeBarSpec({ labelField: 'artist' });
+    const layout = compileChart(spec, compileOpts);
+
+    const yTicks = layout.axes.y?.ticks ?? [];
+    expect(yTicks.length).toBe(5);
+
+    // Verify specific mappings
+    const thrillerTick = yTicks.find((t) => t.label === 'Thriller');
+    expect(thrillerTick?.subtitle).toBe('Michael Jackson');
+
+    const rumoursTick = yTicks.find((t) => t.label === 'Rumours');
+    expect(rumoursTick?.subtitle).toBe('Fleetwood Mac');
+  });
+
+  it('preserves subtitle mapping with sort: descending', () => {
+    const spec = {
+      mark: 'bar' as const,
+      data: albumData,
+      encoding: {
+        x: { field: 'sales', type: 'quantitative' as const },
+        y: {
+          field: 'album',
+          type: 'nominal' as const,
+          sort: 'descending' as const,
+          axis: { labelField: 'artist' },
+        },
+      },
+    };
+
+    const layout = compileChart(spec, compileOpts);
+    const yTicks = layout.axes.y?.ticks ?? [];
+
+    // Regardless of sort order, each tick should still map to the right artist
+    for (const tick of yTicks) {
+      const row = albumData.find((r) => r.album === tick.label);
+      expect(row).toBeDefined();
+      expect(tick.subtitle).toBe(row!.artist);
+    }
+  });
+
+  it('reserves wider dimension with labelField than without', () => {
+    const specWith = makeBarSpec({ labelField: 'artist' });
+    const specWithout = makeBarSpec();
+
+    const layoutWith = compileChart(specWith, compileOpts);
+    const layoutWithout = compileChart(specWithout, compileOpts);
+
+    // Chart area x (left edge) should be larger with labelField because more
+    // left margin is reserved for the wider compound labels
+    expect(layoutWith.area.x).toBeGreaterThanOrEqual(layoutWithout.area.x);
+  });
+});