Animation Map Sampling Test

1import assert from "node:assert/strict";
2import test from "node:test";
3import { sampleTweenBboxes } from "./animation-map-sampling.mjs";
4
5test("samples every tween time in one browser evaluation", async () => {
6  const calls = [];
7  const seekTimes = [];
8  const originalGlobals = {
9    window: globalThis.window,
10    document: globalThis.document,
11    getComputedStyle: globalThis.getComputedStyle,
12  };
13  let currentTime = 0;
14  globalThis.window = { __hf: { seek: (time) => (currentTime = time) } };
15  globalThis.document = {
16    querySelector: () => ({
17      getBoundingClientRect: () => ({ x: currentTime, y: 20, width: 30, height: 40 }),
18    }),
19  };
20  globalThis.getComputedStyle = () => ({ opacity: "1", visibility: "visible", display: "block" });
21  const page = {
22    async evaluate(callback, payload) {
23      calls.push(payload);
24      const originalSeek = globalThis.window.__hf.seek;
25      globalThis.window.__hf.seek = (time) => {
26        seekTimes.push(time);
27        originalSeek(time);
28      };
29      return callback(payload);
30    },
31  };
32
33  try {
34    const result = await sampleTweenBboxes(page, "#card", [1, 2, 3]);
35
36    assert.deepEqual(result, [
37      { t: 1, x: 1, y: 20, w: 30, h: 40, opacity: 1, visible: true },
38      { t: 2, x: 2, y: 20, w: 30, h: 40, opacity: 1, visible: true },
39      { t: 3, x: 3, y: 20, w: 30, h: 40, opacity: 1, visible: true },
40    ]);
41    assert.deepEqual(seekTimes, [1, 2, 3]);
42    assert.deepEqual(calls, [{ selector: "#card", times: [1, 2, 3] }]);
43  } finally {
44    globalThis.window = originalGlobals.window;
45    globalThis.document = originalGlobals.document;
46    globalThis.getComputedStyle = originalGlobals.getComputedStyle;
47  }
48});