ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-11-14 13:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(studio): share the flat-inspector test render harness across panel suites

Browse Source 
The eight flat property-panel suites each carried an identical copy of the
React act-environment setup and a local renderInto() helper. Extract both into
testRenderUtils so the harness has one definition to fix.

No behavior change: setupReactActEnvironment() registers the same
document.body cleanup each file registered inline, and renderInto() is the
same createRoot + act wrapper.
This commit is contained in:
Vance Ingalls
2026-07-31 02:24:16 -07:00
parent a3c8f897f2
commit fbb83f25af
9 changed files with 54 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/PropertyPanel.test.ts
+2 -2
View File
@@ -8,11 +8,11 @@ import {
getCssFilterFunctionPx,
inferBoxShadowPreset,
inferClipPathPreset,
isSelectedElementHidden,
normalizePanelPxValue,
parseInsetClipPathSides,
setCssFilterFunctionPx,
} from "./PropertyPanel";
import { isSelectedElementHidden } from "./propertyPanelHelpers";
} from "./propertyPanelHelpers";
describe("PropertyPanel style helpers", () => {
it("normalizes bounded pixel values without accepting incompatible units", () => {
packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx
+4 -18
View File
@@ -1,26 +1,12 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { act } from "react";
import { describe, expect, it, vi } from "vitest";
import { PropertyPanelEmptyState } from "./PropertyPanelEmptyState";
import type { DomEditSelection } from "./domEditingTypes";
import { renderInto, setupReactActEnvironment } from "./testRenderUtils";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
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 };
}
setupReactActEnvironment();
describe("PropertyPanelEmptyState — flat empty", () => {
it("shows the cursor glyph, headline, and the two shortcut rows", () => {
packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
+4 -18
View File
@@ -1,8 +1,7 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { act } from "react";
import { describe, expect, it, vi } from "vitest";
import {
FlatColorGradingAccessory,
FlatColorGradingSection,
@@ -11,22 +10,9 @@ import {
normalizeHfColorGrading,
type NormalizedHfColorGrading,
} from "@hyperframes/core/color-grading";
import { renderInto, setupReactActEnvironment } from "./testRenderUtils";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
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 };
}
setupReactActEnvironment();
function neutralGrading() {
const grading = normalizeHfColorGrading("neutral");
packages/studio/src/components/editor/propertyPanelFlatLayoutSection.test.tsx
+4 -18
View File
@@ -1,8 +1,7 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { act } from "react";
import { describe, expect, it, vi } from "vitest";
import {
FlatLayoutSection,
LayoutFlexBlock,
@@ -10,22 +9,9 @@ import {
LayoutTransform3DBlock,
LayoutZIndexRow,
} from "./propertyPanelFlatLayoutSection";
import { renderInto, setupReactActEnvironment } from "./testRenderUtils";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
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 };
}
setupReactActEnvironment();
function getFlatRowInput(host: HTMLElement, label: string): HTMLInputElement {
const rows = Array.from(host.querySelectorAll<HTMLElement>(".group"));
packages/studio/src/components/editor/propertyPanelFlatMotionSection.test.tsx
+3 -14
View File
@@ -1,16 +1,15 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { act } from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { FlatMotionSection, FlatTimingRow } from "./propertyPanelFlatMotionSection";
import type { DomEditSelection } from "./domEditing";
import { usePlayerStore } from "../../player";
import { renderInto, setupReactActEnvironment } from "./testRenderUtils";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
setupReactActEnvironment();
afterEach(() => {
document.body.innerHTML = "";
// The store is module-global, so a test that parks a focused ease segment
// would otherwise leak it into every test that runs after it.
usePlayerStore.getState().reset();
@@ -47,16 +46,6 @@ function baseElement(overrides: Partial<DomEditSelection> = {}): DomEditSelectio
} 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(
packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+3 -17
View File
@@ -1,8 +1,7 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { describe, expect, it, vi } from "vitest";
import {
FlatGroupHeader,
FlatRow,
@@ -10,22 +9,9 @@ import {
FlatSelectRow,
FlatSlider,
} from "./propertyPanelFlatPrimitives";
import { renderInto, setupReactActEnvironment } from "./testRenderUtils";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
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 };
}
setupReactActEnvironment();
describe("FlatRow", () => {
it("renders the default tier with no reset button", () => {
packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx
+4 -17
View File
@@ -1,28 +1,15 @@
// @vitest-environment happy-dom
import React, { act, useState } from "react";
import { act, useState } from "react";
import { createRoot } from "react-dom/client";
import postcss from "postcss";
import tailwindcss from "tailwindcss";
import { afterEach, describe, expect, it, vi } from "vitest";
import { describe, expect, it, vi } from "vitest";
import { FlatTextLayerList, FlatTextSection } from "./propertyPanelFlatTextSection";
import type { DomEditSelection, DomEditTextField } from "./domEditingTypes";
import { renderInto, setupReactActEnvironment } from "./testRenderUtils";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
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 };
}
setupReactActEnvironment();
const FIELDS = [
{
packages/studio/src/components/editor/propertyPanelFlatToggle.test.tsx
+4 -18
View File
@@ -1,25 +1,11 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { act } from "react";
import { describe, expect, it, vi } from "vitest";
import { FlatToggle } from "./propertyPanelFlatToggle";
import { renderInto, setupReactActEnvironment } from "./testRenderUtils";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
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 };
}
setupReactActEnvironment();
describe("FlatToggle", () => {
it("renders the off state with a dim label and dim knob, and fires onChange(true) on click", () => {
packages/studio/src/components/editor/testRenderUtils.tsx
+26
View File
@@ -0,0 +1,26 @@
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach } from "vitest";
/**
* Marks the current environment as React-act-aware and registers the shared
* per-test DOM cleanup. Call once per test file, at module scope, before any
* `describe`/`it` blocks run.
*/
export function setupReactActEnvironment(): void {
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
}
export 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 };
}