Skip to content

Commit 8610b2e

Browse files
rileyhilliardrileyhilliard
committed
fix(engine): strip temporal axes from snapshot to fix macOS/Linux divergence
Rounding positions to 2dp wasn't enough -- D3 time scales map midnight-local dates to pixels, so the positions genuinely differ by ~0.4px between macOS (CDT/PDT) and Linux CI (UTC). That fraction was also enough to tip the fitContinuousTicks overlap check, producing a different tick count (4 vs 5). Strip temporal axes from the structural snapshot entirely and assert only that the tick labels are non-empty strings within a sane count range. The rest of the chart layout (marks, legend, chrome, y-axis) is still snapshotted and will catch regressions.
1 parent 80432bb commit 8610b2e

2 files changed

Lines changed: 52 additions & 120 deletions

File tree

‎packages/engine/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap‎

Lines changed: 18 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,17 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
7979
"ticks": [
8080
{
8181
"label": "0",
82-
"position": 35.27,
82+
"position": 35.269999999999996,
8383
"value": 0,
8484
},
8585
{
8686
"label": "20",
87-
"position": 251.96,
87+
"position": 251.96200000000002,
8888
"value": 20,
8989
},
9090
{
9191
"label": "40",
92-
"position": 468.65,
92+
"position": 468.654,
9393
"value": 40,
9494
},
9595
],
@@ -145,7 +145,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
145145
"ticks": [
146146
{
147147
"label": "A",
148-
"position": 297.08,
148+
"position": 297.0761194029851,
149149
"value": "A",
150150
},
151151
{
@@ -155,7 +155,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
155155
},
156156
{
157157
"label": "C",
158-
"position": 119.52,
158+
"position": 119.52388059701492,
159159
"value": "C",
160160
},
161161
],
@@ -560,64 +560,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
560560
"y": 87.6,
561561
},
562562
"axes": {
563-
"x": {
564-
"domainLine": undefined,
565-
"end": {
566-
"x": 704.293,
567-
"y": 410.4,
568-
},
569-
"gridlines": [],
570-
"label": undefined,
571-
"labelFlush": undefined,
572-
"labelOverlap": undefined,
573-
"labelPadding": undefined,
574-
"labelStyle": {
575-
"fill": "#1d1d1d",
576-
"fontFamily": "Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
577-
"fontSize": 13,
578-
"fontWeight": 500,
579-
"lineHeight": 1.3,
580-
},
581-
"offset": undefined,
582-
"orient": undefined,
583-
"start": {
584-
"x": 42.54,
585-
"y": 410.4,
586-
},
587-
"tickAngle": undefined,
588-
"tickLabelStyle": {
589-
"fill": "#888888",
590-
"fontFamily": "Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
591-
"fontSize": 11,
592-
"fontVariant": "tabular-nums",
593-
"fontWeight": 400,
594-
"lineHeight": 1.2,
595-
},
596-
"tickMarks": undefined,
597-
"ticks": [
598-
{
599-
"label": "2020",
600-
"position": 42.99,
601-
"value": "2020-01-01",
602-
},
603-
{
604-
"label": "Apr 2020",
605-
"position": 207.45,
606-
"value": "2020-04-01",
607-
},
608-
{
609-
"label": "Jul 2020",
610-
"position": 371.99,
611-
"value": "2020-07-01",
612-
},
613-
{
614-
"label": "Oct 2020",
615-
"position": 538.33,
616-
"value": "2020-10-01",
617-
},
618-
],
619-
"titlePadding": undefined,
620-
},
563+
"x": undefined,
621564
"y": {
622565
"domainLine": undefined,
623566
"end": {
@@ -697,12 +640,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
697640
},
698641
{
699642
"label": "5",
700-
"position": 370.05,
643+
"position": 370.04999999999995,
701644
"value": 5,
702645
},
703646
{
704647
"label": "10",
705-
"position": 329.7,
648+
"position": 329.69999999999993,
706649
"value": 10,
707650
},
708651
{
@@ -717,17 +660,17 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
717660
},
718661
{
719662
"label": "25",
720-
"position": 208.65,
663+
"position": 208.64999999999998,
721664
"value": 25,
722665
},
723666
{
724667
"label": "30",
725-
"position": 168.3,
668+
"position": 168.29999999999998,
726669
"value": 30,
727670
},
728671
{
729672
"label": "35",
730-
"position": 127.95,
673+
"position": 127.94999999999999,
731674
"value": 35,
732675
},
733676
{
@@ -1485,22 +1428,22 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
14851428
"ticks": [
14861429
{
14871430
"label": "A",
1488-
"position": 124.63,
1431+
"position": 124.62862068965518,
14891432
"value": "A",
14901433
},
14911434
{
14921435
"label": "B",
1493-
"position": 247.72,
1436+
"position": 247.7228735632184,
14941437
"value": "B",
14951438
},
14961439
{
14971440
"label": "C",
1498-
"position": 370.82,
1441+
"position": 370.8171264367816,
14991442
"value": "C",
15001443
},
15011444
{
15021445
"label": "D",
1503-
"position": 493.91,
1446+
"position": 493.9113793103449,
15041447
"value": "D",
15051448
},
15061449
],
@@ -1565,17 +1508,17 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
15651508
},
15661509
{
15671510
"label": "20",
1568-
"position": 229.03,
1511+
"position": 229.02857142857144,
15691512
"value": 20,
15701513
},
15711514
{
15721515
"label": "40",
1573-
"position": 161.26,
1516+
"position": 161.25714285714287,
15741517
"value": 40,
15751518
},
15761519
{
15771520
"label": "60",
1578-
"position": 93.49,
1521+
"position": 93.4857142857143,
15791522
"value": 60,
15801523
},
15811524
],

‎packages/engine/src/__tests__/compile-snapshot.test.ts‎

Lines changed: 34 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -14,59 +14,39 @@ import type { ChartLayout } from '@opendata-ai/openchart-core';
1414
import { describe, expect, it } from 'vitest';
1515
import { compileChart } from '../compile';
1616

17-
/**
18-
* Normalize a tick value for snapshot comparison. Date objects are converted
19-
* to their UTC ISO date string (YYYY-MM-DD) so the snapshot doesn't encode
20-
* the local timezone offset, which differs between macOS (CDT/PDT) and the
21-
* Linux CI runner (UTC).
22-
*/
23-
function normalizeTickValue(value: unknown): unknown {
24-
if (value instanceof Date) return value.toISOString().slice(0, 10);
25-
return value;
26-
}
17+
type AxisTick = { label?: string; value?: unknown; position?: unknown };
18+
type AxisShape = Record<string, unknown> & { ticks?: AxisTick[] };
2719

2820
/**
29-
* Normalize a tick position to 2 decimal places. D3 time-scale positions are
30-
* floating-point and shift slightly with timezone because the tick Date values
31-
* differ by hours. Rounding eliminates that noise without losing signal.
21+
* Whether an axis carries temporal (Date) ticks. D3 time scales produce
22+
* midnight-local Date objects, so tick positions and values shift by hours
23+
* between macOS (CDT/PDT) and Linux CI (UTC). We strip temporal axes from
24+
* the main snapshot and assert their labels separately.
3225
*/
33-
function normalizePosition(pos: unknown): unknown {
34-
if (typeof pos === 'number') return Math.round(pos * 100) / 100;
35-
return pos;
36-
}
37-
38-
/** Normalize an axis tick array for platform-independent snapshot comparison. */
39-
function normalizeTicks(
40-
ticks: Array<{ label?: string; value?: unknown; position?: unknown }>,
41-
): unknown[] {
42-
return ticks.map((t) => ({
43-
...t,
44-
value: normalizeTickValue(t.value),
45-
position: normalizePosition(t.position),
46-
}));
47-
}
48-
49-
/** Normalize an axis object so tick values and positions are platform-stable. */
50-
function normalizeAxis(axis: Record<string, unknown> | undefined): unknown {
51-
if (!axis) return axis;
52-
const ticks = axis.ticks;
53-
return {
54-
...axis,
55-
ticks: Array.isArray(ticks)
56-
? normalizeTicks(ticks as Parameters<typeof normalizeTicks>[0])
57-
: ticks,
58-
};
26+
function isTemporalAxis(axis: AxisShape | undefined): boolean {
27+
return Array.isArray(axis?.ticks) && axis.ticks.some((t) => t.value instanceof Date);
5928
}
6029

6130
/** Convert ChartLayout into a fully serializable shape for snapshot comparison. */
62-
function serializeLayout(layout: ChartLayout): Record<string, unknown> {
31+
function serializeLayout(
32+
layout: ChartLayout,
33+
{ stripTemporalAxes = false } = {},
34+
): Record<string, unknown> {
6335
const { tooltipDescriptors, measureText: _measure, ...rest } = layout;
64-
const axes = rest.axes as
65-
| { x?: Record<string, unknown>; y?: Record<string, unknown> }
66-
| undefined;
36+
const axes = rest.axes as { x?: AxisShape; y?: AxisShape } | undefined;
37+
38+
let serializedAxes = axes;
39+
if (axes && stripTemporalAxes) {
40+
serializedAxes = {
41+
...axes,
42+
x: isTemporalAxis(axes.x) ? undefined : axes.x,
43+
y: isTemporalAxis(axes.y) ? undefined : axes.y,
44+
};
45+
}
46+
6747
return {
6848
...rest,
69-
axes: axes ? { ...axes, x: normalizeAxis(axes.x), y: normalizeAxis(axes.y) } : axes,
49+
axes: serializedAxes,
7050
tooltipDescriptors: Array.from(tooltipDescriptors.entries()),
7151
};
7252
}
@@ -100,7 +80,16 @@ describe('compileChart snapshot (Step 7 oracle)', () => {
10080
};
10181

10282
const layout = compileChart(spec, { width: 800, height: 500 });
103-
expect(serializeLayout(layout)).toMatchSnapshot();
83+
84+
// Temporal x-axis positions shift with timezone (macOS CDT vs Linux UTC),
85+
// so we strip it from the structural snapshot and assert just the labels.
86+
expect(serializeLayout(layout, { stripTemporalAxes: true })).toMatchSnapshot();
87+
88+
const xAxes = (layout.axes as { x?: AxisShape } | undefined)?.x;
89+
const tickLabels = (xAxes?.ticks ?? []).map((t: AxisTick) => t.label);
90+
expect(tickLabels.length).toBeGreaterThanOrEqual(3);
91+
expect(tickLabels.length).toBeLessThanOrEqual(6);
92+
expect(tickLabels.every((l) => typeof l === 'string' && l.length > 0)).toBe(true);
10493
});
10594

10695
it('clipped-domain bar chart (data outside scale.domain filtered)', () => {

0 commit comments

Comments
 (0)