From 3ca3c62cf8548a0735c87df88ca989d9a8ec9487 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Thu, 20 Aug 2026 22:52:41 -0700
Subject: [PATCH] refactor(studio): land the last three raw renders on the
 shared harness

`propertyPanelFlatTextSection.test.tsx` adopted `renderInto` for eight of its
eleven renders and open-coded the same createElement / append / createRoot /
act(render) sequence for the other three, keeping the `createRoot` import
alive. All three destructure `{ host, root }`, which is exactly what the
harness returns, so the sweep the PR claims is now actually complete for this
file and the import is gone.
---
 .../propertyPanelFlatTextSection.test.tsx     | 42 ++++++-------------
 1 file changed, 13 insertions(+), 29 deletions(-)

diff --git a/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx
index b2004725d..4c52de210 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx
@@ -1,7 +1,6 @@
 // @vitest-environment happy-dom
 
 import { act, useState } from "react";
-import { createRoot } from "react-dom/client";
 import postcss from "postcss";
 import tailwindcss from "tailwindcss";
 import { describe, expect, it, vi } from "vitest";
@@ -352,12 +351,7 @@ describe("FlatTextSection — multi-field", () => {
       );
     }
 
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(<Harness />);
-    });
+    const { host, root } = renderInto(<Harness />);
 
     let rows = host.querySelectorAll('[data-flat-text-layer-row="true"]');
     expect(rows).toHaveLength(2);
@@ -448,12 +442,7 @@ describe("FlatTextSection — multi-field", () => {
       );
     }
 
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(<Harness />);
-    });
+    const { host, root } = renderInto(<Harness />);
 
     const addButton = host.querySelector<HTMLButtonElement>('[data-flat-text-layer-add="true"]');
     // Wait for onAddTextField's promise to resolve (adds field "c" and makes it
@@ -476,22 +465,17 @@ describe("FlatTextSection — multi-field", () => {
     const element = makeMultiFieldElement();
     element.textFields[0].value = "First line\nSecond line\nThird line";
 
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(
-        <FlatTextSection
-          element={element}
-          styles={{}}
-          fontAssets={[]}
-          onSetText={vi.fn()}
-          onSetTextFieldStyle={vi.fn()}
-          onAddTextField={vi.fn()}
-          onRemoveTextField={vi.fn()}
-        />,
-      );
-    });
+    const { host, root } = renderInto(
+      <FlatTextSection
+        element={element}
+        styles={{}}
+        fontAssets={[]}
+        onSetText={vi.fn()}
+        onSetTextFieldStyle={vi.fn()}
+        onAddTextField={vi.fn()}
+        onRemoveTextField={vi.fn()}
+      />,
+    );
 
     const contentTextarea = host.querySelector<HTMLTextAreaElement>("textarea");
     expect(contentTextarea?.value).toBe("First line\nSecond line\nThird line");