Add more info to console error detection in integration tests (#881)

* Add args to console logging in integration tests * more info * wait for bridge to set up event handler
mui · Sep 1, 2022 · 39bd2c7 · 39bd2c7
1 parent 8bf2033
commit 39bd2c7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx
@@ -160,8 +160,7 @@ export default React.forwardRef<EditorCanvasHostHandle, EditorCanvasHostProps>(
       () => {
         return {
           getViewCoordinates(clientX, clientY) {
-            invariant(bridge, 'bridge not initialized');
-            return bridge.getViewCoordinates(clientX, clientY);
+            return bridge?.getViewCoordinates(clientX, clientY) || null;
           },
           getPageViewState() {
             invariant(bridge, 'bridge not initialized');
@@ -199,12 +198,12 @@ export default React.forwardRef<EditorCanvasHostHandle, EditorCanvasHostProps>(
     }, [contentWindow]);
 
     React.useEffect(() => {
-      if (!contentWindow) {
+      if (!contentWindow || !bridge) {
         return undefined;
       }
 
       return setEventHandler(contentWindow, handleRuntimeEvent);
-    }, [handleRuntimeEvent, contentWindow]);
+    }, [handleRuntimeEvent, contentWindow, bridge]);
 
     return (
       <CanvasRoot className={className}>

diff --git a/test/playwright/test.ts b/test/playwright/test.ts
@@ -10,6 +10,7 @@ interface ConsoleEntry {
     lineNumber: number;
     columnNumber: number;
   };
+  args: any[];
 }
 
 const IGNORED_ERRORS = [
@@ -18,14 +19,21 @@ const IGNORED_ERRORS = [
 
 export const test = base.extend({
   page: async ({ page }, use) => {
-    const entries: ConsoleEntry[] = [];
+    const entryPromises: Promise<ConsoleEntry>[] = [];
 
     const consoleHandler = (msg: ConsoleMessage) => {
-      entries.push({
-        type: msg.type(),
-        text: msg.text(),
-        location: msg.location(),
-      });
+      entryPromises.push(
+        Promise.all(
+          msg.args().map(async (argHandle) => argHandle.jsonValue().catch(() => '<circular>')),
+        ).then((args) => {
+          return {
+            type: msg.type(),
+            text: msg.text(),
+            location: msg.location(),
+            args,
+          };
+        }),
+      );
     };
 
     page.on('console', consoleHandler);
@@ -34,11 +42,12 @@ export const test = base.extend({
 
     page.off('console', consoleHandler);
 
+    const entries = await Promise.all(entryPromises);
     for (const entry of entries) {
       if (entry.type === 'error' && !IGNORED_ERRORS.some((regex) => regex.test(entry.text))) {
         // Currently a catch-all for console error messages. Expecting us to add a way of blacklisting
         // expected error messages at some point here
-        throw new Error(`Console error message detected\n${entry.text}`);
+        throw new Error(`Console error message detected\n${JSON.stringify(entry, null, 2)}`);
       }
     }
   },