mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-08 02:36:10 +00:00
Miguel Angel Simon Sierra
ffd513130b
The structural refresh now force-syncs data-active on freshly queried clip nodes instead of diffing. A clip that changes lanes on a reorder remounts as a new DOM node; if it stayed under the playhead the diff skipped it and it rendered as inactive.
114 lines
4.5 KiB
TypeScript
114 lines
4.5 KiB
TypeScript
// @vitest-environment happy-dom
|
|
|
|
import { describe, expect, it } from "vitest";
|
|
import { updateTimelineActiveClipClasses } from "./useTimelineActiveClips";
|
|
|
|
function appendClip(container: HTMLElement, id: string, start: string, end: string): HTMLElement {
|
|
const clip = document.createElement("div");
|
|
clip.dataset.clip = "true";
|
|
clip.dataset.elId = id;
|
|
clip.dataset.clipStart = start;
|
|
clip.dataset.clipEnd = end;
|
|
container.append(clip);
|
|
return clip;
|
|
}
|
|
|
|
describe("updateTimelineActiveClipClasses", () => {
|
|
it("toggles data-active only for clips containing the current time", () => {
|
|
const container = document.createElement("div");
|
|
const intro = appendClip(container, "intro", "0", "2");
|
|
const hero = appendClip(container, "hero", "2", "5");
|
|
const outro = appendClip(container, "outro", "5", "8");
|
|
const previous = new Set<string>();
|
|
|
|
updateTimelineActiveClipClasses(container, previous, 2.25);
|
|
|
|
expect(intro.hasAttribute("data-active")).toBe(false);
|
|
expect(hero.hasAttribute("data-active")).toBe(true);
|
|
expect(outro.hasAttribute("data-active")).toBe(false);
|
|
expect(previous).toEqual(new Set(["hero"]));
|
|
});
|
|
|
|
it("never marks hidden clips active inside their time window", () => {
|
|
const container = document.createElement("div");
|
|
const hidden = appendClip(container, "hidden", "0", "5");
|
|
const visible = appendClip(container, "visible", "0", "5");
|
|
hidden.dataset.clipHidden = "true";
|
|
const previous = new Set<string>();
|
|
|
|
updateTimelineActiveClipClasses(container, previous, 2);
|
|
|
|
expect(hidden.hasAttribute("data-active")).toBe(false);
|
|
expect(visible.hasAttribute("data-active")).toBe(true);
|
|
expect(previous).toEqual(new Set(["visible"]));
|
|
});
|
|
|
|
it("diffs against the previous active set", () => {
|
|
const container = document.createElement("div");
|
|
const intro = appendClip(container, "intro", "0", "2");
|
|
const hero = appendClip(container, "hero", "2", "5");
|
|
const previous = new Set(["intro"]);
|
|
intro.toggleAttribute("data-active", true);
|
|
|
|
updateTimelineActiveClipClasses(container, previous, 2);
|
|
|
|
expect(intro.hasAttribute("data-active")).toBe(true);
|
|
expect(hero.hasAttribute("data-active")).toBe(true);
|
|
expect(previous).toEqual(new Set(["intro", "hero"]));
|
|
});
|
|
|
|
it("keeps a clip active through its inclusive end boundary", () => {
|
|
const container = document.createElement("div");
|
|
const intro = appendClip(container, "intro", "0", "2");
|
|
const previous = new Set<string>();
|
|
|
|
updateTimelineActiveClipClasses(container, previous, 0);
|
|
|
|
expect(intro.hasAttribute("data-active")).toBe(true);
|
|
expect(previous).toEqual(new Set(["intro"]));
|
|
|
|
updateTimelineActiveClipClasses(container, previous, 2);
|
|
|
|
expect(intro.hasAttribute("data-active")).toBe(true);
|
|
expect(previous).toEqual(new Set(["intro"]));
|
|
|
|
updateTimelineActiveClipClasses(container, previous, 2.001);
|
|
|
|
expect(intro.hasAttribute("data-active")).toBe(false);
|
|
expect(previous).toEqual(new Set());
|
|
});
|
|
|
|
it("re-applies data-active to a fresh DOM node that stayed active across a re-render", () => {
|
|
// A clip that moves lanes on a reorder remounts as a new element. It stays
|
|
// in the previous active set, so the plain diff would skip it and leave the
|
|
// new node without data-active. syncAll must force the attribute on.
|
|
const container = document.createElement("div");
|
|
appendClip(container, "hero", "0", "5");
|
|
const previous = new Set<string>();
|
|
updateTimelineActiveClipClasses(container, previous, 2);
|
|
expect(previous).toEqual(new Set(["hero"]));
|
|
|
|
// Simulate a remount: replace the hero clip's DOM node (no data-active).
|
|
container.replaceChildren();
|
|
const heroReborn = appendClip(container, "hero", "0", "5");
|
|
expect(heroReborn.hasAttribute("data-active")).toBe(false);
|
|
|
|
// Diff-only would skip it (still active → unchanged); syncAll re-applies.
|
|
updateTimelineActiveClipClasses(container, previous, 2, true);
|
|
expect(heroReborn.hasAttribute("data-active")).toBe(true);
|
|
});
|
|
|
|
it("ignores clips with invalid timing data", () => {
|
|
const container = document.createElement("div");
|
|
const missingId = appendClip(container, "", "0", "2");
|
|
const missingTiming = appendClip(container, "bad", "", "2");
|
|
const previous = new Set<string>();
|
|
|
|
updateTimelineActiveClipClasses(container, previous, 1);
|
|
|
|
expect(missingId.hasAttribute("data-active")).toBe(false);
|
|
expect(missingTiming.hasAttribute("data-active")).toBe(false);
|
|
expect(previous).toEqual(new Set());
|
|
});
|
|
});
|