feat: add ability to show user log in component tests

src/runner/browser-env/vite/browser-modules/constants.ts

@@ -22,3 +22,5 @@ export const MAX_ARGS_LENGTH = 50;
 // used from - https://github.com/jestjs/jest/blob/726ca20752e38c18e20aa21740cec7aba7891946/packages/pretty-format/src/plugins/AsymmetricMatcher.ts#L11-L14
 export const ASYMMETRIC_MATCHER =
     typeof Symbol === "function" && Symbol.for ? Symbol.for("jest.asymmetricMatcher") : 0x13_57_a5;
+
+export const CONSOLE_METHODS = ["log", "info", "warn", "error", "debug", "table"] as const;

src/runner/browser-env/vite/browser-modules/mocha/index.ts

@@ -1,4 +1,5 @@
 import { TestParser } from "./parser.js";
+import { wrapConsoleMethods } from "../utils/index.js";
 import { getErrorsOnPageLoad, getErrorsOnRunRunnable, BrowserError } from "../errors/index.js";
 import { BrowserEventNames, WorkerEventNames, type BrowserViteSocket, type RunnableFn } from "../types.js";
 
@@ -33,6 +34,8 @@ export class MochaWrapper {
         }
 
         this._socket.emit(BrowserEventNames.initialize, getErrorsOnPageLoad(error));
+
+        wrapConsoleMethods();
     }
 
     private _validate(): never | void {

src/runner/browser-env/vite/browser-modules/types.ts

@@ -1,4 +1,4 @@
-import { BROWSER_EVENT_PREFIX, WORKER_EVENT_PREFIX } from "./constants.js";
+import { BROWSER_EVENT_PREFIX, WORKER_EVENT_PREFIX, CONSOLE_METHODS } from "./constants.js";
 import { BrowserError, type ViteError } from "./errors/index.js";
 import type { Socket } from "socket.io-client";
 import type { Expect, MatcherState } from "expect";
@@ -13,6 +13,7 @@ export enum BrowserEventNames {
     initialize = `${BROWSER_EVENT_PREFIX}:initialize`,
     runBrowserCommand = `${BROWSER_EVENT_PREFIX}:runBrowserCommand`,
     runExpectMatcher = `${BROWSER_EVENT_PREFIX}:runExpectMatcher`,
+    callConsoleMethod = `${BROWSER_EVENT_PREFIX}:callConsoleMethod`,
 }
 
 export interface BrowserRunBrowserCommandPayload {
@@ -28,6 +29,11 @@ export interface BrowserRunExpectMatcherPayload {
     context?: WebdriverIO.Browser | WebdriverIO.Element | ElementArray | ChainablePromiseElement<WebdriverIO.Element>;
 }
 
+export interface BrowserCallConsoleMethodPayload {
+    method: (typeof CONSOLE_METHODS)[number];
+    args: unknown[];
+}
+
 export interface BrowserViteEvents {
     [BrowserEventNames.initialize]: (payload: ViteError[]) => void;
     [BrowserEventNames.runBrowserCommand]: (
@@ -38,6 +44,7 @@ export interface BrowserViteEvents {
         payload: BrowserRunExpectMatcherPayload,
         cb: (args: [{ pass: boolean; message: string }]) => void,
     ) => void;
+    [BrowserEventNames.callConsoleMethod]: (payload: BrowserCallConsoleMethodPayload) => void;
 }
 
 // TODO: use from nodejs code when migrate to esm

src/runner/browser-env/vite/browser-modules/utils/console.ts

@@ -0,0 +1,16 @@
+import { CONSOLE_METHODS } from "../constants.js";
+import { BrowserEventNames } from "../types.js";
+
+export const wrapConsoleMethods = (): void => {
+    const { socket } = window.__testplane__;
+
+    for (const method of CONSOLE_METHODS) {
+        const origCommand = console[method].bind(console);
+
+        console[method] = (...args: unknown[]): void => {
+            socket.emit(BrowserEventNames.callConsoleMethod, { method, args });
+
+            origCommand(...args);
+        };
+    }
+};

src/runner/browser-env/vite/browser-modules/utils/index.ts

@@ -1 +1,2 @@
 export * from "./selector.js";
+export * from "./console.js";

src/runner/browser-env/vite/socket.ts

@@ -104,6 +104,12 @@ function handleBrowserEvents(
         io.to(runUuid).except(socket.id).emit(BrowserEventNames.initialize, payload);
     });
 
+    socket.on(BrowserEventNames.callConsoleMethod, payload => {
+        const { runUuid } = socket.handshake.auth;
+
+        io.to(runUuid).except(socket.id).emit(BrowserEventNames.callConsoleMethod, payload);
+    });
+
     socket.on(BrowserEventNames.runBrowserCommand, async (payload, cb) => {
         const { runUuid } = socket.handshake.auth;
 

src/runner/browser-env/vite/types.ts

@@ -16,4 +16,5 @@ export enum BrowserEventNames {
     initialize = `${BROWSER_EVENT_PREFIX}:initialize`,
     runBrowserCommand = `${BROWSER_EVENT_PREFIX}:runBrowserCommand`,
     runExpectMatcher = `${BROWSER_EVENT_PREFIX}:runExpectMatcher`,
+    callConsoleMethod = `${BROWSER_EVENT_PREFIX}:callConsoleMethod`,
 }

src/worker/browser-env/runner/test-runner/index.ts

@@ -69,6 +69,10 @@ export class TestRunner extends NodejsEnvTestRunner {
             async (): Promise<void> => {
                 const { default: expectMatchers } = await import("expect-webdriverio/lib/matchers");
 
+                this._socket.on(BrowserEventNames.callConsoleMethod, payload => {
+                    console[payload.method](...(payload.args || []));
+                });
+
                 this._socket.on(BrowserEventNames.runBrowserCommand, this._handleRunBrowserCommand(browser));
                 this._socket.on(
                     BrowserEventNames.runExpectMatcher,

test/src/worker/browser-env/runner/test-runner/index.ts

@@ -278,6 +278,20 @@ describe("worker/browser-env/runner/test-runner", () => {
             assert.calledOnceWith(NodejsEnvRunner.prototype.run as SinonStub, { ...runOpts, ExecutionThreadCls });
         });
 
+        describe(`"${BrowserEventNames.callConsoleMethod}" event`, () => {
+            it("should call console method with passed args", async () => {
+                sandbox.stub(console, "log");
+
+                const socket = mkSocket_() as BrowserViteSocket;
+                socketClientStub.returns(socket);
+
+                await runWithEmitBrowserInit(socket);
+                socket.emit(BrowserEventNames.callConsoleMethod, { method: "log", args: ["foo", "bar"] });
+
+                assert.calledOnceWith(console.log, "foo", "bar");
+            });
+        });
+
         describe(`"${WorkerEventNames.initialize}" event`, () => {
             it("should emit with correct args", async () => {
                 const expectMatchers = { foo: sinon.stub(), bar: sinon.stub() };