Back to Repositories

Testing Linter Configuration Prompt Module in vue-cli

This test suite validates the linter configuration prompts and options in Vue CLI’s prompt module system. It ensures proper handling of different linting configurations including ESLint presets and lint-on-save/commit options.

Test Coverage Overview

The test suite provides comprehensive coverage of linter configuration scenarios in Vue CLI.

Key areas tested include:

Base ESLint configuration with error prevention
Airbnb style guide integration
Standard JS configuration
Prettier formatting setup
Lint-on-save and lint-on-commit options

Implementation Analysis

The tests utilize Jest’s mocking capabilities for filesystem and inquirer interactions, demonstrating clean isolation of the prompt module. Each test case follows a consistent pattern of defining expected prompts and validating resulting plugin configurations.

Technical implementation leverages:

Async/await pattern for prompt testing
Mock assertions for user interactions
Structured expectation objects

Technical Details

Testing infrastructure includes:

Jest test framework
Custom assertPromptModule utility
Mocked fs and inquirer modules
ESLint plugin configuration validation
Structured test data objects

Best Practices Demonstrated

The test suite exemplifies robust testing practices for command-line interfaces and configuration systems.

Notable practices include:

Isolated test cases for each linter configuration
Comprehensive option combination testing
Consistent test structure and naming
Clear separation of test data and assertions
Effective use of mock objects

vuejs/vue-cli

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

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

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

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

test('base', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['Linter'],
      check: [0]
    },
    {
      message: 'Pick a linter / formatter config',
      choices: ['error prevention only', 'Airbnb', 'Standard', 'Prettier'],
      choose: 0
    },
    {
      message: 'Pick additional lint features',
      choices: ['on save', 'on commit'],
      check: [0, 1]
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-eslint': {
        config: 'base',
        lintOn: ['save', 'commit']
      }
    }
  }

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

test('airbnb', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['Linter'],
      check: [0]
    },
    {
      choose: 1
    },
    {
      check: [1]
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-eslint': {
        config: 'airbnb',
        lintOn: ['commit']
      }
    }
  }

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

test('standard', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['Linter'],
      check: [0]
    },
    {
      choose: 2
    },
    {
      check: []
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-eslint': {
        config: 'standard',
        lintOn: []
      }
    }
  }

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

test('prettier', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['Linter'],
      check: [0]
    },
    {
      choose: 3
    },
    {
      check: [0]
    }
  ]

  const expectedOptions = {
    plugins: {
      '@vue/cli-plugin-eslint': {
        config: 'prettier',
        lintOn: ['save']
      }
    }
  }

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