Back to Repositories

Validating WebdriverIO TypeScript Configuration Integration in Vue CLI

This test suite validates the WebdriverIO E2E testing plugin integration with Vue CLI, specifically focusing on TypeScript configuration handling. It ensures proper type definitions are added to existing tsconfig.json files when the WebdriverIO plugin is installed.

Test Coverage Overview

The test coverage focuses on TypeScript configuration management when integrating WebdriverIO E2E testing.

Key areas covered:

Verification of tsconfig.json modification
Type definition integration for WebdriverIO and Mocha
Preservation of existing TypeScript configurations
Chrome webdriver setup validation

Implementation Analysis

The testing approach utilizes Vue CLI’s test utilities to create a temporary test project and validate plugin behavior. It implements a systematic verification of TypeScript configuration updates, ensuring the WebdriverIO plugin correctly modifies existing tsconfig.json files while preserving original type definitions.

The test leverages Jest’s async/await patterns and CLI test utilities for project creation and manipulation.

Technical Details

Testing tools and configuration:

Jest as the test runner
@vue/cli-test-utils for project creation
WebdriverIO with Chrome driver
TypeScript configuration management
Custom timeout settings for CI environments (Appveyor)

Best Practices Demonstrated

The test implementation showcases several testing best practices for plugin development.

Notable practices include:

Environment-aware timeout configuration
Proper async/await usage
Isolated test environment creation
Explicit type checking
JSON structure validation

vuejs/vue-cli

packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioGenerator.spec.js

            
jest.setTimeout(process.env.APPVEYOR ? 120000 : 60000)

const create = require('@vue/cli-test-utils/createTestProject')

test('should add types to existing tsconfig.json', async () => {
  const { dir, read, write } = await create('e2e-webdriverio-tsconfig', {
    plugins: {
      '@vue/cli-plugin-typescript': {},
      '@vue/cli-plugin-e2e-webdriverio': {
        webdrivers: ['chrome']
      }
    }
  })
  await write('tsconfig.json', JSON.stringify({ compilerOptions: { types: ['some-type'] } }))

  const invoke = require('@vue/cli/lib/invoke')
  await invoke('e2e-webdriverio', { webdrivers: ['chrome'] }, dir)

  const tsconfig = await read('tsconfig.json')
  expect(tsconfig).toMatch(/\r?\n$/)
  expect(JSON.parse(tsconfig).compilerOptions.types)
    .toEqual(['some-type', 'mocha', '@wdio/mocha-framework', 'webdriverio/sync'])
})