Add browser to integration test suite

Author: aron

.github/workflows/ci.yml

@@ -35,10 +35,12 @@ jobs:
       matrix:
         # See supported Node.js release schedule at https://nodejs.org/en/about/previous-releases
         node-version: [18.x, 20.x]
-        suite: [commonjs, esm, typescript, cloudflare-worker]
+        suite: [commonjs, esm, typescript, cloudflare-worker, browser]
         exclude:
           - suite: cloudflare-worker
             node-version: 18.x # Only test Cloudflare suite with the latest Node version
+          - suite: browser
+            node-version: 18.x # Only test Cloudflare suite with the latest Node version
       fail-fast: false
 
     env:

index.js

@@ -5,6 +5,7 @@ const {
   withAutomaticRetries,
   validateWebhook,
   parseProgressFromLogs,
+  streamAsyncIterator,
 } = require("./lib/util");
 
 const accounts = require("./lib/accounts");
@@ -297,18 +298,7 @@ class Replicate {
         options: { signal },
       });
 
-      const reader = stream.getReader();
-
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
-        yield value;
-      }
-      reader.releaseLock();
+      yield* streamAsyncIterator(stream);
     } else {
       throw new Error("Prediction does not support streaming");
     }

integration/browser/README.md

@@ -0,0 +1,39 @@
+# Browser integration tests
+
+Uses [`playwright`](https://playwright.dev/docs) to run a basic integration test against the three most common browser engines, Firefox, Chromium and WebKit.
+
+It uses the `replicate/canary` model for the moment, which requires a Replicate API token available in the environment under `REPLICATE_API_TOKEN`.
+
+The entire suite is a single `main()` function that calls a single model exercising the streaming API.
+
+The test uses `esbuild` within the test generate a browser friendly version of the `index.js` file which is loaded into the given browser and calls the `main()` function asserting the response content.
+
+## CORS
+
+The Replicate API doesn't support Cross Origin Resource Sharing at this time. We work around this in Playwright by intercepting the request in a `page.route` handler. We don't modify the request/response, but this seems to work around the restriction.
+
+## Setup
+
+    npm install
+
+## Local
+
+The following command will run the tests across all browsers.
+
+    npm test
+
+To run against the default browser (chromium) run:
+
+    npm exec playwright test
+
+Or, specify a browser with:
+
+    npm exec playwright test --browser firefox
+
+## Debugging
+
+Running `playwright test` with the `--debug` flag opens a browser window with a debugging interface, and a breakpoint set at the start of the test. It can also be connected directly to VSCode.
+
+    npm exec playwright test --debug
+
+The browser.js file is injected into the page via a script tag, to be able to set breakpoints in this file you'll need to use a `debugger` statement and open the devtools in the spawned browser window before continuing the test suite.

integration/browser/package.json

@@ -6,7 +6,8 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "test": "node index.test.js"
+    "test": "playwright test --browser all",
+    "postinstall": "playwright install && playwright install-deps"
   },
   "license": "ISC",
   "dependencies": {

lib/stream.js

@@ -1,6 +1,7 @@
 // Attempt to use readable-stream if available, attempt to use the built-in stream module.
 
 const ApiError = require("./error");
+const { streamAsyncIterator } = require("./util");
 const {
   EventSourceParserStream,
 } = require("../vendor/eventsource-parser/stream");
@@ -73,15 +74,7 @@ function createReadableStream({ url, fetch, options = {} }) {
         .pipeThrough(new TextDecoderStream())
         .pipeThrough(new EventSourceParserStream());
 
-      const reader = stream.getReader();
-
-      while (true) {
-        const { done, value: event } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
+      for await (const event of streamAsyncIterator(stream)) {
         if (event.event === "error") {
           controller.error(new Error(event.data));
           break;
@@ -96,7 +89,6 @@ function createReadableStream({ url, fetch, options = {} }) {
         }
       }
 
-      reader.releaseLock();
       controller.close();
     },
   });

lib/util.js

@@ -354,9 +354,33 @@ function parseProgressFromLogs(input) {
   return null;
 }
 
+/**
+ * Helper to make any `ReadableStream` iterable, this is supported
+ * by most server runtimes but browsers still haven't implemented
+ * it yet.
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#browser_compatibility
+ *
+ * @template T
+ * @param {ReadableStream<T>} stream an instance of a `ReadableStream`
+ * @yields {T} a chunk/event from the stream
+ */
+async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
 module.exports = {
   transformFileInputs,
   validateWebhook,
   withAutomaticRetries,
   parseProgressFromLogs,
+  streamAsyncIterator,
 };

tsconfig.json

@@ -5,7 +5,5 @@
     "strict": true,
     "allowJs": true
   },
-  "exclude": [
-    "**/node_modules"
-  ]
-}
+  "exclude": ["integration/**", "**/node_modules"]
+}