Add onStart/onFinish callbacks to BrowserTestDriver

docs/modules/test-utils/browser-test-driver.md

@@ -76,6 +76,8 @@ Parameters:
 * `exposeFunctions` (Object) - keys are function names to be added to the page's `window` object, and the values are callback functions to execute in Node.js. See [exposeFunction](https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#pageexposefunctionname-puppeteerfunction) for details.
 * `url` (String) - if supplied, will be used instead of the URL returned by the dev server.
 * `maxConsoleMessageLength` (Number) - used in `headless: true` mode to crop log messages that are piped to the console. Default `500`.
+* `onFinish` (Function) - callback when the test finishes running and the browser is about to close. Receives the following arguments:
+  - `success` (Boolean) - if all tests passed.
 
 ## Built-in Exposed Globals
 

examples/browser-test-vite/.nycrc

@@ -0,0 +1,7 @@
+{
+  "all": "true",
+  "include": [
+    "test/**/*.*"
+  ],
+  "exclude": []
+}

examples/browser-test-vite/package.json

@@ -8,14 +8,17 @@
   "scripts": {
     "start": "npm run test-browser",
     "test": "node test/start.js headless",
-    "test-browser": "node test/start.js"
+    "test-browser": "node test/start.js",
+    "coverage": "VITE_COVERAGE=true npm run test && npx nyc report --reporter=text"
   },
   "dependencies": {
     "@probe.gl/test-utils": "4.0.5",
     "tape": "^4.5.1"
   },
   "devDependencies": {
+    "nyc": "^15.1.0",
     "typescript": "^5.3.0",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0",
+    "vite-plugin-istanbul": "^5.0.0"
   }
 }

examples/browser-test-vite/test/start.js

@@ -1,5 +1,6 @@
 import {BrowserTestDriver} from '@probe.gl/test-utils';
 import {createServer} from 'vite';
+import fs from 'fs/promises';
 
 const mode = process.argv[2];
 
@@ -21,11 +22,24 @@ async function startViteServer(opts) {
   };
 }
 
-new BrowserTestDriver().run({
-  title: 'Unit Tests',
-  server: {
-    port: 'auto',
-    start: startViteServer
-  },
-  headless: mode === 'headless'
-});
+async function runTest(testDriver) {
+  await testDriver.run({
+    title: 'Unit Tests',
+    server: {
+      port: 'auto',
+      start: startViteServer
+    },
+    headless: mode === 'headless',
+    onFinish: async success => {
+      if (!success) return;
+      const coverage = await testDriver.page.evaluate('window.__coverage__');
+      if (coverage) {
+        await fs.rm('./.nyc_output', {force: true, recursive: true});
+        await fs.mkdir('./.nyc_output');
+        await fs.writeFile('./.nyc_output/out.json', JSON.stringify(coverage), 'utf8');
+      }
+    }
+  });
+}
+
+runTest(new BrowserTestDriver());

examples/browser-test-vite/vite.config.js

@@ -1,5 +1,6 @@
 import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill';
 import {NodeModulesPolyfillPlugin} from '@esbuild-plugins/node-modules-polyfill';
+import istanbul from 'vite-plugin-istanbul';
 
 export default {
   optimizeDeps: {
@@ -16,5 +17,14 @@ export default {
         NodeModulesPolyfillPlugin()
       ]
     }
-  }
+  },
+  plugins: [
+    istanbul({
+      include: 'test/*',
+      exclude: ['node_modules'],
+      extension: ['.js', '.ts', '.cjs', '.mjs', '.jsx', '.tsx'],
+      // require the env var VITE_COVERAGE to equal true in order to instrument the code
+      requireEnv: true
+    })
+  ]
 };

modules/test-utils/src/browser-automation/browser-driver.ts

@@ -57,9 +57,9 @@ export default class BrowserDriver {
     onLoad?: () => void;
     onConsole?: (e: ConsoleMessage) => void;
     onError?: (e: Error) => void;
-  }): Promise<void> {
+  }): Promise<Page> {
     const {
-      url = 'http://localhost',
+      url,
       exposeFunctions = {},
       onLoad = noop,
       onConsole = noop,
@@ -96,7 +96,11 @@ export default class BrowserDriver {
     }
     await Promise.all(promises);
 
-    await this.page.goto(url);
+    if (url) {
+      await this.page.goto(url);
+    }
+
+    return this.page;
   }
 
   async stopBrowser(): Promise<void> {

modules/test-utils/src/browser-automation/browser-test-driver.ts

@@ -25,6 +25,8 @@ type BrowserTestDriverProps = {
   browser?: object;
   exposeFunctions?: any;
   url?: string;
+  onStart?: () => void | Promise<void>;
+  onFinish?: (success: boolean) => void | Promise<void>;
 };
 
 export type DiffImagesOpts = DiffImagesOptions & {
@@ -80,6 +82,11 @@ export default class BrowserTestDriver extends BrowserDriver {
       }
 
       const result = await this._openPage(url, config);
+
+      if (config.onFinish) {
+        await config.onFinish(this.failures === 0);
+      }
+
       this._onFinish(result);
     } catch (error: unknown) {
       this._fail((error as Error).message || 'puppeteer run failes');
@@ -91,7 +98,7 @@ export default class BrowserTestDriver extends BrowserDriver {
 
     return this.startBrowser(browserConfig).then(
       _ =>
-        new Promise<string>((resolve, reject) => {
+        new Promise<string>(async (resolve, reject) => {
           const exposeFunctions = {
             ...config.exposeFunctions,
             browserTestDriver_fail: () => this.failures++,
@@ -120,12 +127,17 @@ export default class BrowserTestDriver extends BrowserDriver {
             : url;
 
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          this.openPage({
-            url: pageUrl,
+          const page = await this.openPage({
             exposeFunctions,
             onConsole: event => this._onConsole(event),
             onError: reject
           });
+
+          if (config.onStart) {
+            await config.onStart();
+          }
+
+          await page.goto(pageUrl);
         })
     );
   }