Back to Repositories

Testing CSS Pre-processor Selection Module in vue-cli

This test suite validates the CSS pre-processor selection functionality in Vue CLI, focusing on user prompt interactions and configuration generation. It ensures proper handling of different CSS pre-processor options and their integration into Vue projects.

Test Coverage Overview

The test suite provides comprehensive coverage of CSS pre-processor selection in Vue CLI.

Key areas tested include:

User prompt validation for CSS pre-processor feature selection
Specific pre-processor option selection (Sass/SCSS, Less, Stylus)
Configuration generation for dart-sass implementation
Plugin integration verification

Implementation Analysis

The testing approach utilizes Jest’s mocking capabilities for file system and inquirer interactions. It implements a structured prompt assertion pattern using @vue/cli-test-utils, allowing for precise validation of user interaction flows and resulting configurations.

The test leverages specific technical patterns including:

Mock implementations for external dependencies
Structured prompt validation
Asynchronous test execution
Expected state verification

Technical Details

Testing tools and configuration:

Jest test framework
Custom assertPromptModule utility
Mock implementations for ‘fs’ and ‘inquirer’
Structured test assertions for prompt choices
Plugin-specific configuration validation

Best Practices Demonstrated

The test implementation showcases several testing best practices for Vue CLI modules.

Notable practices include:

Isolation of external dependencies through mocking
Clear separation of test expectations and assertions
Structured validation of user interactions
Comprehensive configuration verification
Plugin-specific testing considerations

vuejs/vue-cli

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

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

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

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

test('CSS pre-processor ', async () => {
  const expectedPrompts = [
    {
      message: 'features',
      choices: ['CSS Pre-processors'],
      check: [0]
    },
    {
      message: 'Pick a CSS pre-processor',
      choices: ['Sass/SCSS (with dart-sass)', 'Less', 'Stylus'],
      choose: 0
    }
  ]

  const expectedOptions = {
    cssPreprocessor: 'dart-sass',
    plugins: {}
  }

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