feat(next-image-snapshot): Add Browsers API (#22)

packages/next-image-snapshot/lib/browser.ts

@@ -1,6 +1,6 @@
 import { RenderedPage, closeAll } from "./index.js";
 import { NextTestServer } from "./next-server.js";
-import { Builder, ThenableWebDriver } from "selenium-webdriver";
+import { Builder, WebDriver } from "selenium-webdriver";
 import chrome from "selenium-webdriver/chrome";
 import firefox from "selenium-webdriver/firefox";
 import safari from "selenium-webdriver/safari";
@@ -22,13 +22,66 @@ type BrowserOptions = {
   edge?: Mapper<import("selenium-webdriver/edge").Options>;
 };
 
+/**
+ * Browser[] with some helper methods, including `close()` and `Symbol.asyncDispose`.
+ */
+export class Browsers {
+  constructor(public readonly browsers: readonly Browser[]) {}
+
+  /**
+   * Creates an array of browsers. This method will close all browsers if an error occurs.
+   */
+  public static async all(
+    server: NextTestServer,
+    browsers: string[],
+    options?: BrowserOptions,
+  ): Promise<Browsers> {
+    const built = await Promise.allSettled(
+      browsers.map((browser) => Browser.create(server, browser, options)),
+    );
+
+    // This will close all browsers if an error occurs.
+    if (built.some((result) => result.status === "rejected")) {
+      await closeAll(built.map((result) => "value" in result && result.value));
+    }
+
+    // `await` above will make this code path unreachable if an error occurs.
+
+    return new Browsers(
+      built.map((result) => {
+        if (result.status === "fulfilled") {
+          return result.value;
+        } else {
+          throw result.reason;
+        }
+      }),
+    );
+  }
+
+  public async [Symbol.asyncDispose]() {
+    await this.close();
+  }
+
+  public async close() {
+    await closeAll(this.browsers);
+  }
+
+  public get drivers(): WebDriver[] {
+    return this.browsers.map((browser) => browser.driver);
+  }
+
+  [Symbol.iterator]() {
+    return this.browsers[Symbol.iterator]();
+  }
+}
+
 /**
  * An instance of browser which is bound to a [NextTestServer]
  */
 export class Browser {
   constructor(
     private readonly server: NextTestServer,
-    public readonly driver: Awaited<ThenableWebDriver>,
+    public readonly driver: WebDriver,
     public readonly name: string,
   ) {}
 
@@ -75,34 +128,6 @@ export class Browser {
     return new Browser(server, driver, browser);
   }
 
-  /**
-   * Creates an array of browsers. This method will close all browsers if an error occurs.
-   */
-  public static async all(
-    server: NextTestServer,
-    browsers: string[],
-    options?: BrowserOptions,
-  ): Promise<Browser[]> {
-    const built = await Promise.allSettled(
-      browsers.map((browser) => Browser.create(server, browser, options)),
-    );
-
-    // This will close all browsers if an error occurs.
-    if (built.some((result) => result.status === "rejected")) {
-      await closeAll(built.map((result) => "value" in result && result.value));
-    }
-
-    // `await` above will make this code path unreachable if an error occurs.
-
-    return built.map((result) => {
-      if (result.status === "fulfilled") {
-        return result.value;
-      } else {
-        throw result.reason;
-      }
-    });
-  }
-
   public async load(pathname: string): Promise<RenderedPage> {
     console.log(`Rendering ${pathname}...`);
 
@@ -112,7 +137,7 @@ export class Browser {
   }
 
   public async [Symbol.asyncDispose]() {
-    await this.driver.quit();
+    await this.close();
   }
 
   public async close() {

packages/next-image-snapshot/lib/index.ts

@@ -43,7 +43,7 @@ type Close =
 /**
  * Falsy values will be ignored.
  */
-export type Closable = Close | Close[];
+export type Closable = Close | Iterable<Close>;
 /**
  *  Closes every disposable in order, while catching and aggregating all errors.
  *
@@ -56,11 +56,12 @@ export async function closeAll(...disposables: Closable[]): Promise<void> {
     try {
       if (!disposable) continue;
 
-      if (Array.isArray(disposable)) {
-        await closeAll(...disposable);
-      } else {
+      if ("close" in disposable) {
         await disposable.close();
+        continue;
       }
+
+      await closeAll(...disposable);
     } catch (e: unknown) {
       errors.push(e);
     }

packages/next-image-snapshot/tests/browser.test.ts

@@ -1,19 +1,19 @@
 import { describe, it, beforeEach, afterEach, expect } from "@jest/globals";
 import { NextTestServer } from "../lib/next-server.js";
 import "jest-expect-image";
-import { Browser } from "../lib/browser.js";
+import { Browsers } from "../lib/browser.js";
 import { closeAll } from "../lib/index.js";
 
 describe("Browser", () => {
   let server!: NextTestServer;
-  let browsers!: Browser[];
+  let browsers!: Browsers;
 
   beforeEach(async () => {
     server = await NextTestServer.create({
       dir: "./examples/next-app",
       dev: true,
     });
-    browsers = await Browser.all(server, ["chrome"], {
+    browsers = await Browsers.all(server, ["chrome"], {
       chrome: (options) => options.headless(),
       firefox: (options) => options.headless(),
     });
@@ -36,7 +36,7 @@ describe("Browser", () => {
   });
 });
 
-describe("Browser.all()", () => {
+describe("Browsers.all()", () => {
   let server!: NextTestServer;
 
   beforeEach(async () => {
@@ -66,7 +66,7 @@ describe("Browser.all()", () => {
 
     describe("headless", () => {
       it("should propagate to all browsers", async () => {
-        const browsers = await Browser.all(server, ["chrome"], {
+        const browsers = await Browsers.all(server, ["chrome"], {
           common: {
             headless: true,
           },
@@ -88,14 +88,14 @@ describe("Browser.all()", () => {
   describe("when a browser is not installed", () => {
     it("should throw an error", async () => {
       expect(
-        Browser.all(server, ["chrome", "unknown-browser"]),
+        Browsers.all(server, ["chrome", "unknown-browser"]),
       ).rejects.toBeInstanceOf(Error);
     });
 
     it("should close other browsers", async () => {
       // TODO: Check browsers
       try {
-        await Browser.all(server, ["chrome", "unknown-browser"]);
+        await Browsers.all(server, ["chrome", "unknown-browser"]);
       } catch (e: unknown) {
         console.log(e);
       }