enh: automatically determine coverage data (#157)

Author: mxschmitt

README.md

@@ -150,15 +150,13 @@ await jestPlaywright.debug()
 
 ## Tracking the coverage
 
-It's possible to track the coverage of the end-to-end tests with the [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul) Babel plugin configured. It needs to be included in the web application which you are gonna test otherwise it won't work. To use it, you have to set `collectCoverage` in the `jest-playwright.config.js` to `true` and add the corresponding `saveCoverage(page)` call to your tests like that:
+It's possible to track the coverage of the end-to-end tests with the [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul) Babel plugin configured. It needs to be included in the web application which you are gonna test otherwise it won't work. To use it, you have to set `collectCoverage` in the `jest-playwright.config.js` to `true`. Per default the test coverage will be automatically saved after each navigation change (`beforeunload` event). If a certain code path is not covered, you can manually call and add the corresponding `saveCoverage(page)` call to your tests like that:
 
 ```js
-afterEach(async () => {
-  await jestPlaywright.saveCoverage(page)
-})
+await jestPlaywright.saveCoverage(page)
 ```
 
-With this change, it will write the coverage data to the `.nyc_output/coverage.json` file which can be transformed using [`nyc`](https://github.com/istanbuljs/nyc#readme) to the lcov format:
+By using coverage collection, it will write the coverage data to the `.nyc_output/coverage.json` file which can be transformed using [`nyc`](https://github.com/istanbuljs/nyc#readme) to the lcov format:
 
 ```
 npx nyc report --reporter=lcovonly

src/PlaywrightEnvironment.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import type { Event, State } from 'jest-circus'
-import type { Browser, Page } from 'playwright-core'
+import type { Browser, Page, BrowserContext } from 'playwright-core'
 import type {
   JestPlaywrightConfig,
   GenericBrowser,
@@ -14,7 +14,7 @@ import {
   getPlaywrightInstance,
   readConfig,
 } from './utils'
-import { savePageCoverage } from './coverage'
+import { saveCoverageOnPage, saveCoverageToFile } from './coverage'
 
 const handleError = (error: Error): void => {
   process.emit('uncaughtException', error)
@@ -46,14 +46,15 @@ const getBrowserPerProcess = async (
   }
 }
 
-export const getPlaywrightEnv = (basicEnv = 'node') => {
+export const getPlaywrightEnv = (basicEnv = 'node'): unknown => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const RootEnv = require(basicEnv === 'node'
     ? 'jest-environment-node'
     : 'jest-environment-jsdom')
 
   return class PlaywrightEnvironment extends RootEnv {
     readonly _config: JestPlaywrightJestConfig
+    _jestPlaywrightConfig!: JestPlaywrightConfig
 
     constructor(config: JestPlaywrightJestConfig) {
       super(config)
@@ -62,11 +63,20 @@ export const getPlaywrightEnv = (basicEnv = 'node') => {
 
     async setup(): Promise<void> {
       const { rootDir, wsEndpoint, browserName } = this._config
-      const config = await readConfig(rootDir)
-      config.connectOptions = { wsEndpoint }
+      this._jestPlaywrightConfig = await readConfig(rootDir)
+      if (
+        wsEndpoint &&
+        !this._jestPlaywrightConfig.connectOptions?.wsEndpoint
+      ) {
+        this._jestPlaywrightConfig.connectOptions = { wsEndpoint }
+      }
       const browserType = getBrowserType(browserName)
-      const { exitOnPageError, selectors } = config
-      let { contextOptions } = config
+      const {
+        exitOnPageError,
+        selectors,
+        collectCoverage,
+      } = this._jestPlaywrightConfig
+      let { contextOptions } = this._jestPlaywrightConfig
       const device = getDeviceType(this._config.device)
       const {
         name,
@@ -100,9 +110,21 @@ export const getPlaywrightEnv = (basicEnv = 'node') => {
       this.global.browser = await getBrowserPerProcess(
         playwrightInstance,
         browserType,
-        config,
+        this._jestPlaywrightConfig,
       )
       this.global.context = await this.global.browser.newContext(contextOptions)
+      if (collectCoverage) {
+        ;(this.global.context as BrowserContext).exposeFunction(
+          'reportCodeCoverage',
+          saveCoverageToFile,
+        )
+        ;(this.global.context as BrowserContext).addInitScript(() =>
+          window.addEventListener('beforeunload', () => {
+            // @ts-ignore
+            reportCodeCoverage(window.__coverage__)
+          }),
+        )
+      }
       this.global.page = await this.global.context.newPage()
       if (exitOnPageError) {
         this.global.page.on('pageerror', handleError)
@@ -147,7 +169,7 @@ export const getPlaywrightEnv = (basicEnv = 'node') => {
           })
         },
         saveCoverage: async (page: Page): Promise<void> =>
-          savePageCoverage(page, config.collectCoverage),
+          saveCoverageOnPage(page, this._jestPlaywrightConfig.collectCoverage),
       }
     }
 
@@ -164,10 +186,22 @@ export const getPlaywrightEnv = (basicEnv = 'node') => {
     }
 
     async teardown(): Promise<void> {
-      const { page, browser } = this.global
+      const { browser, context, page } = this.global
+      const { collectCoverage } = this._jestPlaywrightConfig
       if (page) {
         page.removeListener('pageerror', handleError)
       }
+      if (collectCoverage) {
+        await Promise.all(
+          (context as BrowserContext).pages().map((p) =>
+            p.close({
+              runBeforeUnload: true,
+            }),
+          ),
+        )
+        // wait until coverage data was sent successfully to the exposed function
+        await new Promise((resolve) => setTimeout(resolve, 10))
+      }
 
       if (browser) {
         await browser.close()

src/coverage.ts

@@ -24,7 +24,14 @@ export const setupCoverage = async (): Promise<void> => {
   await fsAsync.mkdir(COV_MERGE_DIR)
 }
 
-export const savePageCoverage = async (
+export const saveCoverageToFile = async (coverage: unknown): Promise<void> => {
+  await fsAsync.writeFile(
+    path.join(COV_MERGE_DIR, `${uuid.v4()}.json`),
+    JSON.stringify(coverage),
+  )
+}
+
+export const saveCoverageOnPage = async (
   page: Page,
   collectCoverage: boolean,
 ): Promise<void> => {
@@ -36,10 +43,7 @@ export const savePageCoverage = async (
   }
   const coverage = await page.evaluate(`window.__coverage__`)
   if (coverage) {
-    await fsAsync.writeFile(
-      path.join(COV_MERGE_DIR, `${uuid.v4()}.json`),
-      JSON.stringify(coverage),
-    )
+    await saveCoverageToFile(coverage)
   }
 }