@alanizcreative/formation-coverage v0.0.3

Formation Coverage

A 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
  }
}

Configuration Options

setCoverageConfig

Setup Guide

Global Setup

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

// tests/setup.ts

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

export default async function () {
  setCoverageConfig({
    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'
    ]
  })

  await setupCoverage()
}

Test Setup

doCoverage

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
})

Global Teardown

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()
}