Back to Repositories

Testing E2E Framework Configuration Prompts in Vue CLI

This test suite validates the E2E testing configuration prompts in Vue CLI, covering the integration of Cypress, Nightwatch, and WebdriverIO testing frameworks. It ensures proper plugin installation and browser configuration options for end-to-end testing in Vue.js applications.

Test Coverage Overview

The test suite provides comprehensive coverage of E2E testing framework selection and configuration in Vue CLI.

Key areas tested include:

Framework selection between Cypress, Nightwatch, and WebdriverIO
Browser selection for Nightwatch and WebdriverIO implementations
Plugin configuration validation for each testing framework
CLI prompt flow and user interaction simulation

Implementation Analysis

The testing approach utilizes Jest’s mocking capabilities to simulate file system and user interactions. The implementation follows a consistent pattern of defining expected prompts and validating resulting plugin configurations.

Technical aspects include:

Mock implementations for fs and inquirer modules
Structured test cases for each E2E framework option
Validation of plugin configuration objects
Assertion of correct prompt sequences

Technical Details

Testing tools and configuration:

Jest as the primary testing framework
Custom assertPromptModule utility for validation
Mock implementations for filesystem and CLI prompts
Structured expectedPrompts and expectedOptions objects
Plugin-specific configuration validation

Best Practices Demonstrated

The test suite exemplifies strong testing practices through organized and maintainable code structure.

Notable practices include:

Consistent test case structure across different frameworks
Proper isolation through mocking
Clear separation of test setup and assertions
Comprehensive coverage of user interaction flows
Explicit expected vs actual result validation

vuejs/vue-cli

packages/@vue/cli/lib/promptModules/__tests__/e2e.spec.js

            
jest.mock('fs')
jest.mock('inquirer')

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

const moduleToTest = require('../e2e')

test('cypress', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['E2E Testing'],
      check: [0]
    },
    {
      message: 'Pick an E2E testing solution',
      choices: ['Cypress', 'Nightwatch', 'WebdriverIO'],
      choose: 0
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-e2e-cypress': {}
    }
  }

  await assertPromptModule(
    moduleToTest,
    expectedPrompts,
    expectedOptions,
    { pluginsOnly: true }
  )
})

test('nightwatch', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['E2E Testing'],
      check: [0]
    },
    {
      message: 'Pick an E2E testing solution',
      choices: ['Cypress', 'Nightwatch', 'WebdriverIO'],
      choose: 1
    },
    {
      message: 'Pick browsers to run end-to-end test on',
      choice: ['Chrome', 'Firefox'],
      check: [0, 1]
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-e2e-nightwatch': {
        webdrivers: ['chrome', 'firefox']
      }
    }
  }

  await assertPromptModule(
    moduleToTest,
    expectedPrompts,
    expectedOptions,
    { pluginsOnly: true }
  )
})

test('webdriverio', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['E2E Testing'],
      check: [0]
    },
    {
      message: 'Pick an E2E testing solution',
      choices: ['Cypress', 'Nightwatch', 'WebdriverIO'],
      choose: 2
    },
    {
      message: 'Pick browsers to run end-to-end test on',
      choice: ['Chrome', 'Firefox'],
      check: [0, 1]
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-e2e-webdriverio': {
        webdrivers: ['chrome', 'firefox']
      }
    }
  }

  await assertPromptModule(
    moduleToTest,
    expectedPrompts,
    expectedOptions,
    { pluginsOnly: true }
  )
})