feat(studio): add FlatTimingRow for the flat Motion group

2026-09-11 06:30:03 +00:00 · 2026-07-14 15:50:42 -07:00
parent 8602e1a8c9
commit fb1373905f
3 changed files with 186 additions and 1 deletions
@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FlatTimingRow } from "./propertyPanelFlatMotionSection";
+import type { DomEditSelection } from "./domEditing";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function baseElement(overrides: Partial<DomEditSelection> = {}): DomEditSelection {
+  return {
+    element: document.createElement("div"),
+    id: "hero",
+    selector: "#hero",
+    label: "Hero",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 100, height: 100 },
+    textContent: "",
+    dataAttributes: { start: "8", duration: "4" },
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+    ...overrides,
+  } as DomEditSelection;
+}
+
+function renderInto(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return { host, root };
+}
+
+describe("FlatTimingRow", () => {
+  it("renders Start, End, and Duration from the element's data attributes", () => {
+    const { host, root } = renderInto(
+      <FlatTimingRow element={baseElement()} onSetAttribute={vi.fn()} />,
+    );
+    expect(host.textContent).toContain("Start");
+    expect(host.textContent).toContain("End");
+    expect(host.textContent).toContain("Duration");
+    // Values render inside <input>s (CommitField), not as text nodes, so they
+    // don't show up in textContent — assert on the rendered input values,
+    // in the same Start/End/Duration order the row is built in.
+    const inputs = host.querySelectorAll<HTMLInputElement>("input");
+    expect(inputs[0]?.value).toBe("8.00s");
+    expect(inputs[1]?.value).toBe("12.00s");
+    expect(inputs[2]?.value).toBe("4.00s");
+    act(() => root.unmount());
+  });
+
+  it("shows the inferred note when duration is derived from animations, not authored", () => {
+    const onSetAttribute = vi.fn();
+    const element = baseElement({ dataAttributes: { start: "0", duration: "0" } });
+    const { host, root } = renderInto(
+      <FlatTimingRow
+        element={element}
+        animations={[{ position: 2, duration: 3 } as never]}
+        onSetAttribute={onSetAttribute}
+      />,
+    );
+    expect(host.textContent).toContain("Inferred");
+    act(() => root.unmount());
+  });
+
+  it("commits a Start edit through onSetAttribute", () => {
+    const onSetAttribute = vi.fn();
+    const { host, root } = renderInto(
+      <FlatTimingRow element={baseElement()} onSetAttribute={onSetAttribute} />,
+    );
+    const startInput = host.querySelectorAll("input")[0];
+    if (!startInput) throw new Error("expected a Start input");
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+    act(() => {
+      setter.call(startInput, "10s");
+      startInput.dispatchEvent(new Event("input", { bubbles: true }));
+      startInput.dispatchEvent(new Event("focusout", { bubbles: true }));
+    });
+    expect(onSetAttribute).toHaveBeenCalledWith("start", "10.00");
+    act(() => root.unmount());
+  });
+});