feat: support top-level await in tests (#385)

Author: ojeytonwilliams

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

@@ -22,6 +22,7 @@ import {
 import { MockLocalStorage } from "./mock-local-storage";
 import { ProxyConsole } from "../../shared/src/proxy-console";
 import { format } from "../../shared/src/format";
+import { createAsyncIife } from "../../shared/src/async-iife";
 
 const READY_MESSAGE: ReadyEvent["data"] = { type: "ready" };
 
@@ -112,15 +113,30 @@ export class DOMTestEvaluator implements TestEvaluator {
       Enzyme.configure({ adapter: new Adapter16() });
     }
 
-    this.#runTest = async function (testString: string): Promise<Fail | Pass> {
+    this.#runTest = async function (rawTest: string): Promise<Fail | Pass> {
       this.#proxyConsole.on();
       try {
-        // Eval test string to actual JavaScript
-        // This return can be a function
-        // i.e. function() { assert(true, 'happy coding'); }
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const test = await eval(`${opts.hooks?.beforeEach ?? ""}
-${testString}`);
+        let test;
+        try {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          test = await eval(`${opts.hooks?.beforeEach ?? ""}
+${rawTest}`);
+        } catch (err) {
+          if (
+            err instanceof SyntaxError &&
+            err.message.includes(
+              "await is only valid in async functions and the top level bodies of modules",
+            )
+          ) {
+            const iifeTest = createAsyncIife(rawTest);
+            // There's no need to assign this to 'test', since it replaces that
+            // functionality.
+            await eval(iifeTest);
+          } else {
+            throw err;
+          }
+        }
+
         if (typeof test === "function") {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           await test();

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

@@ -13,6 +13,7 @@ import type {
 import type { ReadyEvent } from "../../shared/src/interfaces/test-runner";
 import { postCloneableMessage } from "../../shared/src/messages";
 import { format } from "../../shared/src/format";
+import { createAsyncIife } from "../../shared/src/async-iife";
 import { ProxyConsole } from "../../shared/src/proxy-console";
 
 const READY_MESSAGE: ReadyEvent["data"] = { type: "ready" };
@@ -28,11 +29,6 @@ globalThis.__helpers = curriculumHelpers;
 Object.freeze(globalThis.__helpers);
 Object.freeze(globalThis.assert);
 
-// The newline is important, because otherwise comments will cause the trailing
-// `}` to be ignored, breaking the tests.
-const wrapCode = (code: string) => `(async () => {${code};
-})();`;
-
 // TODO: currently this is almost identical to DOMTestEvaluator, can we make
 // it more DRY? Don't attempt until they're both more fleshed out.
 export class JavascriptTestEvaluator implements TestEvaluator {
@@ -50,7 +46,7 @@ export class JavascriptTestEvaluator implements TestEvaluator {
 
     this.#runTest = async (rawTest) => {
       this.#proxyConsole.on();
-      const test = wrapCode(rawTest);
+      const test = createAsyncIife(rawTest);
       // This can be reassigned by the eval inside the try block, so it should be declared as a let
       // eslint-disable-next-line prefer-const
       let __userCodeWasExecuted = false;

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

@@ -18,6 +18,7 @@ import { ReadyEvent } from "../../shared/src/interfaces/test-runner";
 import { postCloneableMessage } from "../../shared/src/messages";
 import { format } from "../../shared/src/format";
 import { ProxyConsole } from "../../shared/src/proxy-console";
+import { createAsyncIife } from "../../shared/src/async-iife";
 
 type EvaluatedTeststring = {
   input?: string[];
@@ -95,7 +96,19 @@ class PythonTestEvaluator implements TestEvaluator {
               const test: unknown = eval(testString);
               resolve(test);
             } catch (err) {
-              reject(err as Error);
+              if (
+                err instanceof SyntaxError &&
+                err.message.includes(
+                  "await is only valid in async functions and the top level bodies of modules",
+                )
+              ) {
+                const iifeTest = createAsyncIife(testString);
+
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+                eval(iifeTest).then(resolve).catch(reject);
+              } else {
+                reject(err as Error);
+              }
             }
           },
         );

packages/shared/src/async-iife.ts

@@ -0,0 +1,4 @@
+// The newline is important, because otherwise comments will cause the trailing
+// `}` to be ignored, breaking the tests.
+export const createAsyncIife = (code: string) => `(async () => {${code};
+})();`;

packages/tests/integration-tests/index.test.ts

@@ -427,6 +427,41 @@ for(let i = 0; i < 3; i++) {
 
       expect(result).toEqual([]);
     });
+
+    it("should support top-level await in tests", async () => {
+      const result = await page.evaluate(async (type) => {
+        const runner = await window.FCCTestRunner.createTestRunner({
+          type,
+        });
+
+        return runner.runTest(`
+          const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+          await delay(10);
+          assert.equal(1, 2);`);
+      }, type);
+      expect(result).toMatchObject({ err: { actual: 1 } });
+    });
+
+    // The old api wasn't consistent: only DOM tests supported async tests, but
+    // this needs to be maintained while it's deprecated.
+    it.runIf(type === "dom")(
+      "should support `async () => {}` style tests",
+      async () => {
+        const result = await page.evaluate(async (type) => {
+          const runner = await window.FCCTestRunner.createTestRunner({
+            type,
+          });
+
+          return runner.runTest(`
+          async () => {
+            const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+            await delay(10);
+            assert.equal(1, 2);
+          }`);
+        }, type);
+        expect(result).toMatchObject({ err: { actual: 1 } });
+      },
+    );
   });
 
   describe.each([