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

package/src/story/__tests__/camera-math.test.ts

@@ -1,145 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-  type Camera,
-  camerasClose,
-  cameraTransform,
-  damp,
-  dampCamera,
-  FULL_VIEW,
-  fitTarget,
-  interpolateCamera,
-  scrubCamera,
-} from '../camera-math';
-import { easingFns } from '../tween';
-
-const VB = { width: 400, height: 340 };
-
-describe('fitTarget', () => {
-  it('full viewBox target is the identity camera', () => {
-    const cam = fitTarget(FULL_VIEW(VB), VB);
-    expect(cam).toEqual({ cx: 200, cy: 170, k: 1 });
-  });
-
-  it('limits by the tighter axis', () => {
-    // Wide, short target: width is the limiting axis
-    const wide = fitTarget({ x: 0, y: 0, width: 200, height: 20 }, VB);
-    expect(wide.k).toBeCloseTo(400 / 200);
-
-    // Narrow, tall target: height limits
-    const tall = fitTarget({ x: 0, y: 0, width: 20, height: 170 }, VB);
-    expect(tall.k).toBeCloseTo(340 / 170);
-  });
-
-  it('padding reduces zoom', () => {
-    const noPad = fitTarget({ x: 0, y: 0, width: 100, height: 100 }, VB);
-    const padded = fitTarget({ x: 0, y: 0, width: 100, height: 100, padding: 20 }, VB);
-    expect(padded.k).toBeLessThan(noPad.k);
-    expect(padded.k).toBeCloseTo(Math.min(400 / 140, 340 / 140));
-  });
-
-  it('centers on the target rect', () => {
-    const cam = fitTarget({ x: 50, y: 80, width: 100, height: 60 }, VB);
-    expect(cam.cx).toBe(100);
-    expect(cam.cy).toBe(110);
-  });
-});
-
-describe('interpolateCamera', () => {
-  const a: Camera = { cx: 0, cy: 0, k: 1 };
-  const b: Camera = { cx: 100, cy: 50, k: 4 };
-
-  it('endpoints are exact', () => {
-    expect(interpolateCamera(a, b, 0)).toEqual(a);
-    const end = interpolateCamera(a, b, 1);
-    expect(end.cx).toBeCloseTo(100);
-    expect(end.k).toBeCloseTo(4);
-  });
-
-  it('zoom midpoint is geometric (log space): 1->4 passes through 2', () => {
-    const mid = interpolateCamera(a, b, 0.5);
-    expect(mid.k).toBeCloseTo(2); // not 2.5
-    expect(mid.cx).toBeCloseTo(50); // pan stays linear
-  });
-});
-
-describe('cameraTransform', () => {
-  function apply(transform: string, x: number, y: number): [number, number] {
-    // Parse `translate(tx ty) scale(k) translate(-cx -cy)` and apply.
-    const nums = transform.match(/-?\d+(\.\d+)?(e-?\d+)?/g)!.map(Number);
-    const [tx, ty, k, ncx, ncy] = nums;
-    return [tx! + k! * (x + ncx!), ty! + k! * (y + ncy!)];
-  }
-
-  it('identity camera maps viewBox corners to themselves', () => {
-    const t = cameraTransform({ cx: 200, cy: 170, k: 1 }, VB);
-    expect(apply(t, 0, 0)).toEqual([0, 0]);
-    expect(apply(t, 400, 340)).toEqual([400, 340]);
-  });
-
-  it('zoomed camera maps its center to the viewBox center', () => {
-    const t = cameraTransform({ cx: 100, cy: 90, k: 2 }, VB);
-    expect(apply(t, 100, 90)).toEqual([200, 170]);
-  });
-});
-
-describe('damp', () => {
-  it('converges toward the target', () => {
-    let v = 0;
-    for (let i = 0; i < 100; i++) v = damp(v, 100, 100, 16);
-    expect(v).toBeCloseTo(100, 1);
-  });
-
-  it('is frame-rate independent: two 8ms steps ~= one 16ms step', () => {
-    const one = damp(0, 100, 100, 16);
-    const two = damp(damp(0, 100, 100, 8), 100, 100, 8);
-    expect(two).toBeCloseTo(one, 6);
-  });
-
-  it('tau of 0 snaps', () => {
-    expect(damp(0, 100, 0, 16)).toBe(100);
-  });
-});
-
-describe('dampCamera / camerasClose', () => {
-  it('damps k in log space and converges', () => {
-    let cam: Camera = { cx: 0, cy: 0, k: 1 };
-    const target: Camera = { cx: 10, cy: 10, k: 4 };
-    for (let i = 0; i < 200; i++) cam = dampCamera(cam, target, 100, 16);
-    expect(camerasClose(cam, target)).toBe(true);
-  });
-});
-
-describe('scrubCamera (hold zones)', () => {
-  const fitted: Camera[] = [
-    { cx: 200, cy: 170, k: 1 },
-    { cx: 110, cy: 160, k: 1.6 },
-    { cx: 290, cy: 160, k: 1.6 },
-  ];
-  const HOLD = 0.65;
-
-  it('holds the active target through the hold zone', () => {
-    // The camera must DWELL on what the text describes, not depart on entry.
-    expect(scrubCamera(1, 0, fitted, HOLD, easingFns.linear)).toEqual(fitted[1]);
-    expect(scrubCamera(1, 0.4, fitted, HOLD, easingFns.linear)).toEqual(fitted[1]);
-    expect(scrubCamera(1, 0.65, fitted, HOLD, easingFns.linear)).toEqual(fitted[1]);
-  });
-
-  it('interpolates toward the next target only in the tail', () => {
-    const mid = scrubCamera(1, 0.825, fitted, HOLD, easingFns.linear);
-    expect(mid.cx).toBeCloseTo((110 + 290) / 2);
-    const end = scrubCamera(1, 1, fitted, HOLD, easingFns.linear);
-    expect(end.cx).toBeCloseTo(290);
-  });
-
-  it('step -1 pins to the first target', () => {
-    expect(scrubCamera(-1, 0.5, fitted, HOLD, easingFns.linear)).toEqual(fitted[0]);
-  });
-
-  it('last step never departs', () => {
-    expect(scrubCamera(2, 0.99, fitted, HOLD, easingFns.linear)).toEqual(fitted[2]);
-  });
-
-  it('empty targets fall back to identity', () => {
-    expect(scrubCamera(0, 0.5, [], HOLD, easingFns.linear)).toEqual({ cx: 0, cy: 0, k: 1 });
-  });
-});

package/src/story/__tests__/create-chart-story.test.ts

@@ -1,317 +0,0 @@
-/**
- * Integration tests for `createChartStory`, driven through the public API and
- * the real compile/render pipeline (no mocked internal modules). Assertions
- * target observable output: rendered marks, DOM attributes, the marks-group
- * camera transform, and warning side effects.
- */
-
-import type { ChartSpec } from '@opendata-ai/openchart-core';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createContainer } from '../../__test-fixtures__/dom';
-import { createChartStory } from '../create-chart-story';
-
-const baseSpec: ChartSpec = {
-  mark: 'line',
-  data: [
-    { year: '2008', value: 10, country: 'US' },
-    { year: '2012', value: 40, country: 'US' },
-    { year: '2016', value: 25, country: 'US' },
-    { year: '2008', value: 15, country: 'Germany' },
-    { year: '2012', value: 35, country: 'Germany' },
-    { year: '2016', value: 30, country: 'Germany' },
-  ],
-  encoding: {
-    x: { field: 'year', type: 'ordinal' },
-    y: { field: 'value', type: 'quantitative' },
-    color: { field: 'country', type: 'nominal' },
-  },
-  chrome: { title: 'Base' },
-};
-
-/** Read the current chart title text, or null. */
-function title(container: HTMLElement): string | null {
-  return container.querySelector('.oc-title')?.textContent ?? null;
-}
-
-/** Read the camera transform stamped on the marks group, or null. */
-function cameraTransform(container: HTMLElement): string | null {
-  return container.querySelector('[data-oc-marks-group]')?.getAttribute('transform') ?? null;
-}
-
-/**
- * The neutral gray the color-scale-range applies to non-highlighted line
- * series when a highlight is active (color-scale-range.ts MUTED_COLOR). Its
- * presence on a line stroke is the observable signal that a highlight is
- * active; its absence means no highlight.
- */
-const MUTED_STROKE = '#bfc3c8';
-
-/** Count line-mark strokes painted the muted gray (i.e. non-highlighted series). */
-function mutedStrokeCount(container: HTMLElement): number {
-  const paths = container.querySelectorAll('.oc-mark-line path');
-  let count = 0;
-  for (const p of paths) {
-    if (p.getAttribute('stroke')?.toLowerCase() === MUTED_STROKE) count++;
-  }
-  return count;
-}
-
-describe('createChartStory', () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = createContainer();
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    vi.unstubAllGlobals();
-  });
-
-  it('mounts the base spec at step 0', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { spec: { chrome: { title: 'Step 1' } } }],
-    });
-
-    expect(container.querySelector('svg')).not.toBeNull();
-    expect(title(container)).toBe('Base');
-    expect(story.currentStep).toBe(-1);
-    expect(story.totalSteps).toBe(2);
-
-    story.destroy();
-  });
-
-  it('applies cumulative patches: goTo(n) reflects patches 0..n', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [
-        {},
-        { spec: { chrome: { title: 'One' } } },
-        { spec: { chrome: { subtitle: 'Two' } } },
-      ],
-    });
-
-    story.goTo(2);
-
-    expect(title(container)).toBe('One');
-    expect(container.querySelector('.oc-subtitle')?.textContent).toBe('Two');
-    expect(story.currentStep).toBe(2);
-
-    story.destroy();
-  });
-
-  it('goTo(n) from step 0 converges to the same state as stepping 0..n', () => {
-    const steps = [
-      {},
-      { spec: { chrome: { title: 'A' } } },
-      { spec: { chrome: { subtitle: 'B' } } },
-      { spec: { chrome: { source: 'C' } } },
-      { highlight: ['US'] },
-    ];
-
-    const jumpContainer = createContainer();
-    const jump = createChartStory(jumpContainer, { spec: baseSpec, steps });
-    jump.goTo(4);
-
-    const stepContainer = createContainer();
-    const stepwise = createChartStory(stepContainer, { spec: baseSpec, steps });
-    for (let i = 0; i <= 4; i++) stepwise.goTo(i);
-
-    // Same observable chrome DOM after the jump vs. sequential stepping.
-    expect(jumpContainer.querySelector('.oc-title')?.textContent).toBe(
-      stepContainer.querySelector('.oc-title')?.textContent,
-    );
-    expect(jumpContainer.querySelector('.oc-subtitle')?.textContent).toBe(
-      stepContainer.querySelector('.oc-subtitle')?.textContent,
-    );
-    expect(jumpContainer.querySelector('.oc-source')?.textContent).toBe(
-      stepContainer.querySelector('.oc-source')?.textContent,
-    );
-    expect(jump.currentStep).toBe(stepwise.currentStep);
-
-    jump.destroy();
-    stepwise.destroy();
-  });
-
-  it('highlight sugar sets encoding.color.highlight without a nested spec patch', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { highlight: ['Germany'] }],
-    });
-
-    story.goTo(1);
-
-    // Highlighting Germany resolves through the color encoding: US (the
-    // non-highlighted series) gets the muted gray stroke. So exactly one line
-    // stroke should be muted.
-    expect(container.querySelector('svg')).not.toBeNull();
-    expect(mutedStrokeCount(container)).toBe(1);
-
-    story.destroy();
-  });
-
-  it('highlight null clears an earlier highlight', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { highlight: ['Germany'] }, { highlight: null }],
-    });
-
-    // Step 1 highlights Germany, so US is muted.
-    story.goTo(1);
-    expect(mutedStrokeCount(container)).toBe(1);
-
-    // Step 2 clears the highlight (null -> []). No series should stay muted:
-    // if the clear were a no-op, US would still carry the muted gray stroke.
-    story.goTo(2);
-    expect(container.querySelector('svg')).not.toBeNull();
-    expect(mutedStrokeCount(container)).toBe(0);
-
-    story.destroy();
-  });
-
-  it('clamps out-of-range indices', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { spec: { chrome: { title: 'One' } } }],
-    });
-
-    story.goTo(99);
-    expect(story.currentStep).toBe(1);
-    expect(title(container)).toBe('One');
-
-    story.goTo(-5);
-    expect(story.currentStep).toBe(0);
-    expect(title(container)).toBe('Base');
-
-    story.destroy();
-  });
-
-  it('re-encode steps (outside the morph gate) swap without throwing', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { spec: { encoding: { y: { field: 'value', type: 'quantitative' } } } }],
-    });
-
-    // Step 1 re-encodes: this falls outside the morph gate and takes the
-    // crossfade path. It must still land on a valid rendered chart.
-    story.goTo(1);
-    expect(container.querySelector('svg')).not.toBeNull();
-
-    story.destroy();
-  });
-
-  it('resolves a data-coordinate camera target to a marks-group transform', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { camera: { x: ['2008', '2012'] } }],
-    });
-
-    // Step 0 has no camera: identity-ish full-view transform (or none yet).
-    story.goTo(1);
-
-    const t = cameraTransform(container);
-    expect(t).not.toBeNull();
-    // A framed region zooms in (scale > 1), so the transform must contain a
-    // scale factor greater than 1.
-    const scaleMatch = t?.match(/scale\(([\d.]+)\)/);
-    expect(scaleMatch).not.toBeNull();
-    expect(Number(scaleMatch?.[1])).toBeGreaterThan(1);
-
-    story.destroy();
-  });
-
-  it('returns the camera to full view on a step with no camera', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { camera: { x: ['2008', '2012'] } }, {}],
-    });
-
-    story.goTo(1);
-    const zoomed = cameraTransform(container);
-    const zoomedScale = Number(zoomed?.match(/scale\(([\d.]+)\)/)?.[1] ?? '1');
-    expect(zoomedScale).toBeGreaterThan(1);
-
-    story.goTo(2);
-    const reset = cameraTransform(container);
-    const resetScale = Number(reset?.match(/scale\(([\d.]+)\)/)?.[1] ?? '1');
-    // Full-view fit is scale 1 (within rounding).
-    expect(resetScale).toBeCloseTo(1, 3);
-
-    story.destroy();
-  });
-
-  it('snaps camera moves immediately under prefers-reduced-motion', () => {
-    vi.stubGlobal('matchMedia', (query: string) => ({
-      matches: query === '(prefers-reduced-motion: reduce)',
-      media: query,
-      addEventListener: () => {},
-      removeEventListener: () => {},
-    }));
-
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { camera: { x: ['2008', '2012'] } }],
-    });
-
-    story.goTo(1);
-
-    // Reduced motion snaps: the zoomed transform is present synchronously with
-    // no rAF pumping.
-    const t = cameraTransform(container);
-    const scale = Number(t?.match(/scale\(([\d.]+)\)/)?.[1] ?? '1');
-    expect(scale).toBeGreaterThan(1);
-
-    story.destroy();
-  });
-
-  it('warns and disables the drive loop when edit-mode callbacks are passed', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-    const story = createChartStory(
-      container,
-      { spec: baseSpec, steps: [{}, { spec: { chrome: { title: 'One' } } }] },
-      { onSelect: () => {} },
-    );
-
-    expect(warn).toHaveBeenCalledWith(expect.stringContaining('mutually exclusive'));
-
-    // goTo still applies (public control stays live); the scroll driver is what
-    // gets disabled.
-    story.goTo(1);
-    expect(title(container)).toBe('One');
-
-    warn.mockRestore();
-    story.destroy();
-  });
-
-  it('destroy tears down the chart and is idempotent', () => {
-    const story = createChartStory(container, {
-      spec: baseSpec,
-      steps: [{}, { spec: { chrome: { title: 'One' } } }],
-    });
-
-    story.destroy();
-    expect(container.querySelector('svg')).toBeNull();
-
-    // Second destroy is a no-op, not a throw.
-    expect(() => story.destroy()).not.toThrow();
-    // goTo after destroy is inert.
-    story.goTo(1);
-    expect(container.querySelector('svg')).toBeNull();
-  });
-
-  it('registerStep and setContainer are safe no-ops in edit mode', () => {
-    const story = createChartStory(
-      container,
-      { spec: baseSpec, steps: [{}, {}] },
-      { onEdit: () => {} },
-    );
-
-    const stepEl = document.createElement('div');
-    expect(() => story.registerStep(0, stepEl)).not.toThrow();
-    expect(() => story.setContainer(document.createElement('div'))).not.toThrow();
-
-    story.destroy();
-  });
-});

package/src/story/__tests__/progress-math.test.ts

@@ -1,95 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { computeProgress, framesEqual, quantizeFrame } from '../progress-math';
-
-// Three steps: tops at 100, 500, 900; last step ends at 1300.
-const TOPS = [100, 500, 900];
-const LAST_BOTTOM = 1300;
-
-describe('computeProgress', () => {
-  it('returns -1 sentinel while the trigger line is above step 0', () => {
-    expect(computeProgress(TOPS, LAST_BOTTOM, 50)).toEqual({
-      step: -1,
-      stepProgress: 0,
-      progress: 0,
-    });
-  });
-
-  it('returns sentinel for empty steps', () => {
-    expect(computeProgress([], 0, 400).step).toBe(-1);
-  });
-
-  it("stepProgress is 0 at a step's top and approaches 1 at its end", () => {
-    const atTop = computeProgress(TOPS, LAST_BOTTOM, 100);
-    expect(atTop.step).toBe(0);
-    expect(atTop.stepProgress).toBe(0);
-
-    const nearEnd = computeProgress(TOPS, LAST_BOTTOM, 499);
-    expect(nearEnd.step).toBe(0);
-    expect(nearEnd.stepProgress).toBeCloseTo(0.9975, 3);
-  });
-
-  it('hands off continuously at step boundaries', () => {
-    const before = computeProgress(TOPS, LAST_BOTTOM, 500 - 0.001);
-    const after = computeProgress(TOPS, LAST_BOTTOM, 500);
-    expect(before.step).toBe(0);
-    expect(before.stepProgress).toBeCloseTo(1, 3);
-    expect(after.step).toBe(1);
-    expect(after.stepProgress).toBeCloseTo(0, 3);
-    // overall progress is continuous across the boundary
-    expect(after.progress - before.progress).toBeLessThan(0.001);
-  });
-
-  it('clamps past the last step bottom', () => {
-    const past = computeProgress(TOPS, LAST_BOTTOM, 5000);
-    expect(past.step).toBe(2);
-    expect(past.stepProgress).toBe(1);
-    expect(past.progress).toBe(1);
-  });
-
-  it('last step span runs to lastBottom', () => {
-    const mid = computeProgress(TOPS, LAST_BOTTOM, 1100);
-    expect(mid.step).toBe(2);
-    expect(mid.stepProgress).toBeCloseTo(0.5);
-  });
-
-  it('degenerate spans do not divide by zero', () => {
-    const collapsed = computeProgress([100, 100], 100, 100);
-    expect(Number.isFinite(collapsed.stepProgress)).toBe(true);
-    expect(Number.isFinite(collapsed.progress)).toBe(true);
-  });
-
-  it('overall progress is monotonic in scroll', () => {
-    let prev = -1;
-    for (let y = 0; y <= 1400; y += 25) {
-      const { progress } = computeProgress(TOPS, LAST_BOTTOM, y);
-      expect(progress).toBeGreaterThanOrEqual(prev);
-      prev = progress;
-    }
-  });
-});
-
-describe('quantizeFrame', () => {
-  it('zeroes stepProgress and quantizes progress to step fractions', () => {
-    const q = quantizeFrame({ step: 1, stepProgress: 0.7, progress: 0.55 }, 3);
-    expect(q).toEqual({ step: 1, stepProgress: 0, progress: 1 / 3 });
-  });
-
-  it('keeps the -1 sentinel at zero progress', () => {
-    const q = quantizeFrame({ step: -1, stepProgress: 0, progress: 0 }, 3);
-    expect(q).toEqual({ step: -1, stepProgress: 0, progress: 0 });
-  });
-});
-
-describe('framesEqual', () => {
-  const frame = { step: 1, stepProgress: 0.5, progress: 0.4, direction: 'down' as const };
-
-  it('null is never equal', () => {
-    expect(framesEqual(null, frame)).toBe(false);
-  });
-
-  it('compares all fields', () => {
-    expect(framesEqual({ ...frame }, frame)).toBe(true);
-    expect(framesEqual({ ...frame, direction: 'up' }, frame)).toBe(false);
-    expect(framesEqual({ ...frame, stepProgress: 0.51 }, frame)).toBe(false);
-  });
-});

package/src/story/__tests__/scroll-driver.test.ts

@@ -1,130 +0,0 @@
-/**
- * Scroll-driver tests, focused on the host that broke it: a page that scrolls
- * an INNER CONTAINER rather than the document.
- *
- * That is not an edge case. Ladle sets `body { overflow: hidden }` and scrolls a
- * nested div; so do modals, dashboard panes, and most app shells. In all of them
- * `window.scrollY` stays pinned at 0 and scroll events never reach a `window`
- * listener (scroll does not bubble), so the driver saw nothing and the story sat
- * frozen on step 0.
- *
- * Both tests below fail against a driver that listens on `window` and reads
- * `window.scrollY`.
- */
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createScrollDriver } from '../scroll-driver';
-
-const VIEWPORT_H = 800;
-
-/** Drive rects from a virtual scroll offset instead of a real layout engine. */
-function makeStep(offsetTop: number, height: number, scrollRef: { y: number }): HTMLElement {
-  const el = document.createElement('div');
-  el.getBoundingClientRect = () =>
-    ({
-      top: offsetTop - scrollRef.y,
-      bottom: offsetTop + height - scrollRef.y,
-      height,
-    }) as DOMRect;
-  return el;
-}
-
-describe('createScrollDriver in an inner-container scroller', () => {
-  let scroller: HTMLElement;
-  let container: HTMLElement;
-  let steps: HTMLElement[];
-  /** The inner container's scroll offset. `window.scrollY` stays 0 throughout. */
-  const scrollRef = { y: 0 };
-
-  beforeEach(() => {
-    scrollRef.y = 0;
-    vi.stubGlobal('innerHeight', VIEWPORT_H);
-    // The page itself never scrolls. This is the whole point.
-    vi.stubGlobal('scrollY', 0);
-    // The driver rAF-throttles its scroll handler; run the callback inline so a
-    // dispatched scroll event is fully processed by the time the test asserts.
-    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
-      cb(0);
-      return 1;
-    });
-    vi.stubGlobal('cancelAnimationFrame', () => {});
-
-    scroller = document.createElement('div');
-    container = document.createElement('div');
-    container.getBoundingClientRect = () =>
-      ({ top: 0 - scrollRef.y, bottom: 3000 - scrollRef.y, height: 3000 }) as DOMRect;
-
-    steps = [0, 1000, 2000].map((top) => makeStep(top, 1000, scrollRef));
-    for (const s of steps) container.appendChild(s);
-    scroller.appendChild(container);
-    document.body.appendChild(scroller);
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    vi.unstubAllGlobals();
-  });
-
-  /** Scroll the inner container and dispatch the event it would really emit. */
-  function scrollInnerTo(y: number) {
-    scrollRef.y = y;
-    scroller.dispatchEvent(new Event('scroll', { bubbles: false }));
-  }
-
-  it('advances the step when an inner container scrolls, not the window', () => {
-    const driver = createScrollDriver({ triggerPosition: 0.4 });
-    const frames: number[] = [];
-    driver.progress.subscribe((f) => frames.push(f.step));
-
-    driver.setContainer(container);
-    steps.forEach((el, i) => {
-      driver.registerStep(i, el);
-    });
-
-    // Trigger line sits at 0.4 * 800 = 320px. Scrolling the inner container by
-    // 1200px puts step 1 (top 1000) at -200 and step 2 (top 2000) at 800, so the
-    // last step whose top has crossed the trigger is step 1.
-    scrollInnerTo(1200);
-
-    expect(driver.progress.get().step).toBe(1);
-    expect(frames.at(-1)).toBe(1);
-
-    driver.destroy();
-  });
-
-  it('reads direction from the container rect, not window.scrollY', () => {
-    const driver = createScrollDriver({ triggerPosition: 0.4 });
-    driver.progress.subscribe(() => {});
-    driver.setContainer(container);
-    steps.forEach((el, i) => {
-      driver.registerStep(i, el);
-    });
-
-    scrollInnerTo(1200);
-    expect(driver.progress.get().direction).toBe('down');
-
-    // Scroll back up. window.scrollY never moved, so a scrollY-based driver
-    // would still report 'down' here.
-    scrollInnerTo(400);
-    expect(driver.progress.get().direction).toBe('up');
-
-    driver.destroy();
-  });
-
-  it('stops emitting after destroy', () => {
-    const driver = createScrollDriver();
-    const seen: number[] = [];
-    driver.progress.subscribe((f) => seen.push(f.step));
-    driver.setContainer(container);
-    steps.forEach((el, i) => {
-      driver.registerStep(i, el);
-    });
-
-    driver.destroy();
-    const countAtDestroy = seen.length;
-
-    scrollInnerTo(1200);
-
-    expect(seen.length).toBe(countAtDestroy);
-  });
-});