Add e2e integration test for data-eval=async

Author: kateinoigakukun

packages/npm-packages/ruby-wasm-wasi/package.json

@@ -28,8 +28,9 @@
     "test": "npm run test:head",
     "test:jest": "NODE_OPTIONS=\"--experimental-wasi-unstable-preview1\" jest --coverage",
     "test:unit": "./tools/run-test-unit.mjs",
-    "test:e2e": "npm run test:e2e:example",
-    "test:e2e:example": "playwright install && playwright test -c test-e2e/playwright.examples.config.ts",
+    "test:e2e": "playwright install && npm run test:e2e:examples && npm run test:e2e:integrations",
+    "test:e2e:examples": "playwright test -c test-e2e/playwright.examples.config.ts",
+    "test:e2e:integrations": "playwright test -c test-e2e/playwright.integrations.config.ts",
     "serve:example": "bundle exec ruby -run -e httpd ./example -p 8085",
     "format": "prettier --write .",
     "build:static": "./tools/pack-bindgen-src.sh ./dist",

packages/npm-packages/ruby-wasm-wasi/test-e2e/examples/examples.spec.ts

@@ -1,30 +1,16 @@
 import { test, expect, Page } from '@playwright/test';
-import fs from "fs"
 import path from "path"
+import { waitForRubyVM, setupDebugLog, setupProxy } from "../support"
 
 test.beforeEach(async ({ context }) => {
-  if (process.env.DEBUG) {
-    context.on('request', request => console.log('>>', request.method(), request.url()));
-    context.on('response', response => console.log('<<', response.status(), response.url()));
-    context.on("console", msg => console.log("LOG:", msg.text()))
-  }
+  setupDebugLog(context);
   if (process.env.RUBY_NPM_PACKAGE_ROOT) {
-    const cdnPattern = /cdn.jsdelivr.net\/npm\/ruby-head-wasm-wasi@.+\/dist\/(.+)/
-    context.route(cdnPattern, route => {
-      const request = route.request()
-      console.log(">> [MOCK]", request.method(), request.url())
-      const relativePath = request.url().match(cdnPattern)[1]
-      route.fulfill({ path: path.join(process.env.RUBY_NPM_PACKAGE_ROOT, "dist", relativePath) })
-    })
+    setupProxy(context);
   } else {
     console.info("Testing against CDN deployed files")
   }
 })
 
-const waitForRubyVM = async (page: Page) => {
-  await page.waitForFunction(() => window["rubyVM"])
-}
-
 test('hello.html is healthy', async ({ page }) => {
   const messages = []
   page.on("console", msg => messages.push(msg.text()))

packages/npm-packages/ruby-wasm-wasi/test-e2e/integrations/browser-script.spec.ts

@@ -0,0 +1,44 @@
+import { test, expect, Page } from '@playwright/test';
+
+import { setupDebugLog, setupProxy, waitForRubyVM } from "../support"
+
+if (!process.env.RUBY_NPM_PACKAGE_ROOT) {
+  test.skip('skip', () => {})
+} else {
+  test.beforeEach(async ({ context }) => {
+    setupDebugLog(context);
+    setupProxy(context);
+  })
+
+  test.describe('data-eval="async"', () => {
+    test("JS::Object#await returns value", async ({ page, context }) => {
+      let checkResolved;
+      const resolvedValue = new Promise((resolve) => {
+        checkResolved = resolve;
+      })
+      await page.exposeBinding('checkResolved', async (source, v) => {
+        checkResolved(v);
+      });
+      await page.setContent(`
+      <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@latest/dist/browser.script.iife.js"></script>
+      <script type="text/ruby" data-eval="async">
+      require "js"
+      JS.global.checkResolved JS.global[:Promise].resolve(42).await
+      </script>
+    `)
+      expect(await resolvedValue).toBe(42);
+    })
+
+    test("JS::Object#await throws error on default attr", async ({ page, context }) => {
+      await page.setContent(`
+      <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@latest/dist/browser.script.iife.js"></script>
+      <script type="text/ruby">
+      require "js"
+      JS.global[:Promise].resolve(42).await
+      </script>
+     `)
+      const error = await page.waitForEvent("pageerror")
+      expect(error.message).toMatch(/please ensure that you specify `data-eval="async"`/)
+    })
+  })
+}

packages/npm-packages/ruby-wasm-wasi/test-e2e/playwright.base.config.ts

@@ -0,0 +1,5 @@
+export default {
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+};

packages/npm-packages/ruby-wasm-wasi/test-e2e/playwright.examples.config.ts

@@ -1,10 +1,9 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
+import base from "./playwright.base.config"
 
 export default defineConfig({
+  ...base,
   testDir: 'examples',
-  fullyParallel: true,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
   use: {
     baseURL: 'http://127.0.0.1:8085',
   },

packages/npm-packages/ruby-wasm-wasi/test-e2e/playwright.integrations.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@playwright/test';
+import base from "./playwright.base.config"
+
+export default defineConfig({
+  ...base,
+  testDir: 'integrations',
+});

packages/npm-packages/ruby-wasm-wasi/test-e2e/support.ts

@@ -0,0 +1,24 @@
+import { BrowserContext, Page } from '@playwright/test';
+import path from "path"
+
+export const waitForRubyVM = async (page: Page) => {
+  await page.waitForFunction(() => window["rubyVM"])
+}
+
+export const setupDebugLog = (context: BrowserContext) => {
+  if (process.env.DEBUG) {
+    context.on('request', request => console.log('>>', request.method(), request.url()));
+    context.on('response', response => console.log('<<', response.status(), response.url()));
+    context.on("console", msg => console.log("LOG:", msg.text()))
+  }
+}
+
+export const setupProxy = (context: BrowserContext) => {
+  const cdnPattern = /cdn.jsdelivr.net\/npm\/ruby-head-wasm-wasi@.+\/dist\/(.+)/
+  context.route(cdnPattern, route => {
+    const request = route.request()
+    console.log(">> [MOCK]", request.method(), request.url())
+    const relativePath = request.url().match(cdnPattern)[1]
+    route.fulfill({ path: path.join(process.env.RUBY_NPM_PACKAGE_ROOT, "dist", relativePath) })
+  })
+}