fix: missing `act()` in flowchart tests (#8354)

packages/excalidraw/element/flowchart.test.tsx

@@ -36,7 +36,7 @@ describe("flow chart creation", () => {
       height: 100,
     });
 
-    h.elements = [rectangle];
+    API.setElements([rectangle]);
     API.setSelectedElements([rectangle]);
   });
 
@@ -166,7 +166,7 @@ describe("flow chart navigation", () => {
       height: 100,
     });
 
-    h.elements = [rectangle];
+    API.setElements([rectangle]);
     API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ ctrl: true }, () => {
@@ -234,7 +234,7 @@ describe("flow chart navigation", () => {
       height: 100,
     });
 
-    h.elements = [rectangle];
+    API.setElements([rectangle]);
     API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ ctrl: true }, () => {
@@ -325,7 +325,7 @@ describe("flow chart navigation", () => {
       height: 100,
     });
 
-    h.elements = [rectangle];
+    API.setElements([rectangle]);
     API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ ctrl: true }, () => {

packages/excalidraw/tests/helpers/colorize.ts

@@ -0,0 +1,2 @@
+export const yellow = (str: string) => `\u001b[33m${str}\u001b[0m`;
+export const red = (str: string) => `\u001b[31m${str}\u001b[0m`;

setupTests.ts

@@ -5,6 +5,7 @@ import fs from "fs";
 import { vi } from "vitest";
 import polyfill from "./packages/excalidraw/polyfill";
 import { testPolyfills } from "./packages/excalidraw/tests/helpers/polyfills";
+import { yellow } from "./packages/excalidraw/tests/helpers/colorize";
 
 Object.assign(globalThis, testPolyfills);
 
@@ -98,18 +99,20 @@ const element = document.createElement("div");
 element.id = "root";
 document.body.appendChild(element);
 
-const logger = console.error.bind(console);
+const _consoleError = console.error.bind(console);
 console.error = (...args) => {
   // the react's act() warning usually doesn't contain any useful stack trace
   // so we're catching the log and re-logging the message with the test name,
   // also stripping the actual component stack trace as it's not useful
   if (args[0]?.includes("act(")) {
-    logger(
+    _consoleError(
-      `<<< WARNING: test "${
+      yellow(
-        expect.getState().currentTestName
+        `<<< WARNING: test "${
-      }" does not wrap some state update in act() >>>`,
+          expect.getState().currentTestName
+        }" does not wrap some state update in act() >>>`,
+      ),
     );
   } else {
-    logger(...args);
+    _consoleError(...args);
   }
 };