fix: handle concurrent runTest calls

Author: ojeytonwilliams

packages/dom-evaluator/src/dom-test-evaluator.ts

@@ -173,7 +173,7 @@ export class DOMTestEvaluator implements TestEvaluator {
     if (e.data.type === "test") {
       const result = await this.#runTest!(e.data.value);
       const msg = { type: "result" as const, value: result };
-      postCloneableMessage((msg) => self.parent.postMessage(msg, "*"), msg);
+      postCloneableMessage((msg) => e.ports[0].postMessage(msg), msg);
     } else if (e.data.type === "init") {
       await this.init(e.data.value);
       self.parent.postMessage(READY_MESSAGE, "*");

packages/javascript-evaluator/src/javascript-test-evaluator.ts

@@ -106,7 +106,7 @@ ${test};`);
     if (e.data.type === "test") {
       const result = await this.#runTest!(e.data.value);
       const msg = { type: "result" as const, value: result };
-      postCloneableMessage(postMessage, msg);
+      postCloneableMessage((msg) => e.ports[0].postMessage(msg), msg);
     } else if (e.data.type === "init") {
       this.init(e.data.value);
       postMessage(READY_MESSAGE);

packages/main/src/awaitable-post.test.ts

@@ -0,0 +1,33 @@
+import { post } from "./awaitable-post";
+
+// Echos the post data back
+class MockWorker {
+  // Simulate posting a message to the worker
+  postMessage<T>(msg: T, opts: WindowPostMessageOptions) {
+    opts.transfer?.forEach((transferable) => {
+      if (transferable instanceof MessagePort) {
+        transferable.postMessage(msg);
+      }
+    });
+  }
+}
+
+describe("post", () => {
+  it("should resolve with the post data", async () => {
+    const postData = { id: 1, title: "Test Post" };
+    const mockWorker = new MockWorker();
+    const result = await post({ messenger: mockWorker, message: postData });
+    expect(result).toEqual(postData);
+  });
+
+  it("should handle multiple messages", async () => {
+    const mockWorker = new MockWorker();
+    const postData1 = { id: 1, title: "First Post" };
+    const postData2 = { id: 2, title: "Second Post" };
+    const result1 = post({ messenger: mockWorker, message: postData1 });
+    const result2 = post({ messenger: mockWorker, message: postData2 });
+    const [res1, res2] = await Promise.all([result1, result2]);
+    expect(res1).toEqual(postData1);
+    expect(res2).toEqual(postData2);
+  });
+});

packages/main/src/awaitable-post.ts

@@ -0,0 +1,24 @@
+export type Messenger<Message> = {
+  postMessage: (message: Message, options: WindowPostMessageOptions) => void;
+};
+
+export function post<Returned>({
+  messenger,
+  message,
+}: {
+  messenger: Messenger<unknown>;
+  message: unknown;
+}): Promise<Returned> {
+  return new Promise((resolve) => {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = (event) => {
+      channel.port1.close();
+      resolve(event.data as Returned);
+    };
+
+    messenger.postMessage(message, {
+      targetOrigin: "*",
+      transfer: [channel.port2],
+    });
+  });
+}

packages/main/src/index.test.ts

@@ -222,6 +222,31 @@ describe("Test Runner", () => {
         text: "JSHandle@error",
       });
     });
+
+    it("should handle concurrent tests", async () => {
+      const results = await page.evaluate(async (type) => {
+        const runner = await window.FCCTestRunner.createTestRunner({
+          type,
+        });
+
+        const testOne = runner.runTest("assert.equal(1, 2)");
+        const testTwo = runner.runTest("assert.equal(2, 3)");
+        return Promise.all([testOne, testTwo]);
+      }, type);
+
+      expect(results[0]).toMatchObject({
+        err: {
+          actual: 1,
+          expected: 2,
+        },
+      });
+      expect(results[1]).toMatchObject({
+        err: {
+          actual: 2,
+          expected: 3,
+        },
+      });
+    });
   });
 
   describe("DOM evaluator", () => {

packages/main/src/test-runner.ts

@@ -1,7 +1,4 @@
-import type {
-  ReadyEvent,
-  ResultEvent,
-} from "../../shared/src/interfaces/test-runner";
+import type { ReadyEvent } from "../../shared/src/interfaces/test-runner";
 import type {
   InitEvent,
   TestEvent,
@@ -15,6 +12,7 @@ import {
   TEST_EVALUATOR_SCRIPT_ID,
   TEST_EVALUATOR_HOOKS_ID,
 } from "../../shared/src/ids";
+import { post } from "./awaitable-post";
 
 interface Runner {
   init(opts?: InitOptions): Promise<void>;
@@ -143,22 +141,13 @@ ${opts.source}`;
   }
 
   runTest(test: string) {
-    const result = new Promise<Pass | Fail>((resolve) => {
-      const listener = (event: ResultEvent) => {
-        if (
-          event.origin === "null" &&
-          event.source === this.#testEvaluator.contentWindow
-        ) {
-          window.removeEventListener("message", listener);
-          resolve(event.data.value);
-        }
-      };
-
-      window.addEventListener("message", listener);
-    });
-
-    const msg: TestEvent["data"] = { type: "test", value: test };
-    this.#testEvaluator.contentWindow?.postMessage(msg, "*");
+    const result = post<{ value: Pass | Fail }>({
+      messenger: this.#testEvaluator.contentWindow!,
+      message: {
+        type: "test",
+        value: test,
+      } as TestEvent["data"],
+    }).then(({ value }) => value);
 
     return result;
   }
@@ -222,21 +211,16 @@ export class WorkerTestRunner implements Runner {
         });
       }, timeout);
     });
-    const result = new Promise<Pass | Fail>((resolve) => {
-      const listener = (event: ResultEvent) => {
-        this.#testEvaluator.removeEventListener("message", listener);
-        // TODO: differentiate between messages
-        resolve(event.data.value);
-      };
-
-      this.#testEvaluator.addEventListener("message", listener);
-    });
 
     const msg: TestEvent["data"] = {
       type: "test",
       value: test,
     };
-    this.#testEvaluator.postMessage(msg);
+
+    const result = post<{ value: Pass | Fail }>({
+      messenger: this.#testEvaluator,
+      message: msg,
+    }).then(({ value }) => value);
 
     try {
       return await Promise.race([result, terminate]);

packages/python-evaluator/src/python-test-evaluator.ts

@@ -198,7 +198,7 @@ class PythonTestEvaluator implements TestEvaluator {
     if (e.data.type === "test") {
       const result = await this.#runTest!(e.data.value);
       const msg = { type: "result" as const, value: result };
-      postCloneableMessage(postMessage, msg);
+      postCloneableMessage((msg) => e.ports[0].postMessage(msg), msg);
     } else if (e.data.type === "init") {
       await this.init(e.data.value);
       postMessage(READY_MESSAGE);

packages/shared/src/interfaces/test-runner.ts

@@ -1,7 +1 @@
-import { Fail, Pass } from "./test-evaluator";
-
 export type ReadyEvent = MessageEvent<{ type: "ready" }>;
-export type ResultEvent = MessageEvent<{
-  type: "result";
-  value: Pass | Fail;
-}>;