mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Miguel Angel Simon Sierra
675cbe194d
Two more regressions the QA triage attributed to this stack. Dragging a flat tween's boundary diamond did nothing: the handler bailed on `!anim.keyframes` even though resolveKeyframeRetime already resolves that case to a position/duration resize. The empty remap now dispatches update-meta, which moves the window without rewriting the authored flat tween into keyframes form (what the keyframed-resize writer would do as a side effect). The property panel's keyframe gutter guessed one animation per property group, so clicking a keyframe authored by a sibling tween on a merged row named the wrong tween and the writer silently removed nothing. The diamond now reports the clicked keyframe's own animationId, with the group guess kept as the fallback for cache rows that carry no identity.
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
// @vitest-environment happy-dom
|
|
|
|
import { act } from "react";
|
|
import { beforeAll, describe, expect, it, vi } from "vitest";
|
|
import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
|
|
import { KeyframeNavigation } from "./KeyframeNavigation";
|
|
|
|
beforeAll(installReactActEnvironment);
|
|
|
|
/**
|
|
* Regression: a merged gutter row shows the keyframes of EVERY tween in the
|
|
* property group. The panel guesses "the group's animation" for the write, so a
|
|
* click on a keyframe authored by a sibling tween named the wrong animation and
|
|
* the writer silently found nothing to remove. The diamond now reports the
|
|
* clicked keyframe's own animationId.
|
|
*/
|
|
const MERGED_ROW = [
|
|
{ percentage: 0, tweenPercentage: 0, properties: { x: 0 }, animationId: "delta-to-500-position" },
|
|
{
|
|
percentage: 50,
|
|
tweenPercentage: 25,
|
|
properties: { x: 120 },
|
|
animationId: "delta-to-4000-position",
|
|
},
|
|
];
|
|
|
|
function clickDiamond(currentPercentage: number, onRemoveKeyframe: (...args: never[]) => void) {
|
|
const root = mountReactHarness(
|
|
<KeyframeNavigation
|
|
property="x"
|
|
keyframes={MERGED_ROW}
|
|
currentPercentage={currentPercentage}
|
|
onSeek={vi.fn()}
|
|
onAddKeyframe={vi.fn()}
|
|
onRemoveKeyframe={onRemoveKeyframe as never}
|
|
onConvertToKeyframes={vi.fn()}
|
|
/>,
|
|
);
|
|
const diamond = document.querySelector<HTMLElement>('[title="Remove x keyframe"]');
|
|
expect(diamond).not.toBeNull();
|
|
act(() => {
|
|
diamond?.click();
|
|
});
|
|
act(() => root.unmount());
|
|
}
|
|
|
|
describe("KeyframeNavigation diamond", () => {
|
|
it("reports the clicked keyframe's own animation on a merged row", () => {
|
|
const onRemoveKeyframe = vi.fn();
|
|
clickDiamond(50, onRemoveKeyframe);
|
|
expect(onRemoveKeyframe).toHaveBeenCalledWith(25, "delta-to-4000-position");
|
|
});
|
|
|
|
it("still reports the first tween's keyframe as its own", () => {
|
|
const onRemoveKeyframe = vi.fn();
|
|
clickDiamond(0, onRemoveKeyframe);
|
|
expect(onRemoveKeyframe).toHaveBeenCalledWith(0, "delta-to-500-position");
|
|
});
|
|
});
|