Formation Coverage

Utility to generate code coverage reports for Playwright tests specifically for TypeScript source code.

Installation

npm install -D @alanizcreative/formation-coverage

TypeScript Configuration

Ensure your tsconfig.json includes the following compiler options to enable source map generation:

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": true
  }
}

setupCoverage

setupCoverage(args: CoverageConfig): Promise<void>

Set options and create coverage folder and file.

Parameters

• args CoverageConfig required

Returns

Promise<void>

Examples

It's recommended to configure coverage options in your Playwright globalSetup file:

// tests/setup.ts

import { setupCoverage } from '@alanizcreative/formation-coverage/coverage.js'

export default async function () {
  await setupCoverage({
    dir: 'spec-coverage',
    file: 'spec-coverage.json',
    url: 'http://localhost:8000',
    outDir: 'spec',
    srcDir: 'src',
    reporters: [
      'text',
      'html'
    ],
    include: [
      'spec/components/**\/*.js',
      'spec/effects/**\/*.js',
      'spec/layouts/**\/*.js',
      'spec/objects/**\/*.js'
    ],
    exclude: [
      'spec/utils/**\/*.js',
      'spec/config/**\/*.js',
      'spec/tests/**\/*.js',
      'spec/**\/*.spec.js'
    ]
  })
}

doCoverage

doCoverage(browserName: string, page: Page, start?: boolean): Promise<void>

Start and end Playwright coverage and save to coverage file.

Parameters

• browserName string required
  Coverage only applies to Chromium browsers.
• page Page required
  Page object provided by Playwright.
• start boolean optional
  Start or stop coverage.
  Default: true

Returns

Promise<void>

Examples

Use doCoverage before and after each test to capture coverage data:

// components/Navigation/__tests__/Navigation.spec.ts

import { test, expect } from '@playwright/test'
import { doCoverage } from '@alanizcreative/formation-coverage/coverage.js'

test.describe('Navigation', () => {
  test.beforeEach(async ({ browserName, page }) => {
    await doCoverage(browserName, page, true)
  })

  test.afterEach(async ({ browserName, page }) => {
    await doCoverage(browserName, page, false)
  })

  // Your test cases
})

createCoverageReport

createCoverageReport(): Promise<void>

Create coverage report from JSON data.

Returns

Promise<void>

Examples

Generate coverage reports after tests complete in your Playwright globalTeardown file:

// tests/teardown.ts

import { createCoverageReport } from '@alanizcreative/formation-coverage/coverage.js'

export default async function () {
  await createCoverageReport()
}

Types

CoverageConfig

Type: object

Properties

• dir string optional
  Directory for coverage file and reports.
  Default: 'formation-coverage'
• file string optional
  File name to store test coverage data.
  Default: 'formation-coverage.json'
• url string optional
  Web server URL tests run on.
  Default: 'http://localhost:3000'
• reporters ('text'|'html'|'lcov')[] optional
  Coverage report formats.
  Default: ['text']
• outDir string optional
  Directory with compiled and source map files.
  Default: 'spec'
• srcDir string optional
  Directory with source TypeScript files.
  Default: 'src'
• include string[] optional
  Glob patterns to include in reports.
• exclude string[] optional
  Glob patterns to exclude from reports.