Back to Repositories

Testing Vue CLI Preset Generation and Template Processing in vue-cli

This test suite validates the preset functionality in Vue CLI, focusing on local preset handling, generator recognition, and file generation behaviors. It ensures proper template processing and package configuration across different preset scenarios.

Test Coverage Overview

The test suite provides comprehensive coverage of Vue CLI’s preset handling capabilities.

Key areas tested include:

Local preset processing with prompts and generators
Recognition of generator/index.js in preset directories
Async generator functionality
README.md generation and preservation
Package.json dependency management

Implementation Analysis

The testing approach employs Jest’s mocking capabilities to simulate user interactions and file system operations. It utilizes async/await patterns extensively for handling asynchronous preset operations and file generation processes.

The tests leverage Vue CLI’s create function with various preset configurations, validating both synchronous and asynchronous generator implementations.

Technical Details

Testing tools and setup:

Jest as the testing framework
inquirer for prompt mocking
fs-extra for file system operations
Path module for cross-platform path handling
Custom mock presets for different test scenarios

Best Practices Demonstrated

The test suite exemplifies robust testing practices for CLI tools and generators.

Notable practices include:

Isolation of test cases using unique project names
Proper cleanup of test artifacts
Comprehensive validation of generated files and configurations
Effective mocking of user interactions
Clear test case organization and naming

vuejs/vue-cli

packages/@vue/cli/__tests__/preset.spec.js

            
jest.mock('inquirer')
const { expectPrompts } = require('inquirer')

const path = require('path')
const fs = require('fs-extra')
const create = require('@vue/cli/lib/create')

test('fetching local preset with prompts and generator', async () => {
  const cwd = path.resolve(__dirname, '../../../test')
  const name = 'test-preset'

  expectPrompts([{
    message: 'Are you ok',
    confirm: true
  }])

  await create(
    name,
    {
      force: true,
      git: false,
      cwd,
      preset: path.resolve(__dirname, './mock-preset')
    }
  )

  const testFile = await fs.readFile(path.resolve(cwd, name, 'test.js'), 'utf-8')
  expect(testFile).toBe('true')

  const pkg = require(path.resolve(cwd, name, 'package.json'))
  expect(pkg.devDependencies).toHaveProperty('@vue/cli-plugin-babel')
})

test('should recognize generator/index.js in a local preset directory', async () => {
  const cwd = path.resolve(__dirname, '../../../test')
  const name = 'test-preset-template'

  expectPrompts([{
    message: 'Are you ok',
    confirm: true
  }])

  await create(
    name,
    {
      force: true,
      git: false,
      cwd,
      preset: path.resolve(__dirname, './mock-preset-with-template')
    }
  )

  const testFile = await fs.readFile(path.resolve(cwd, name, 'test.js'), 'utf-8')
  expect(testFile).toBe('true\n')

  const pkg = require(path.resolve(cwd, name, 'package.json'))
  expect(pkg.devDependencies).toHaveProperty('@vue/cli-plugin-babel')
})

test('should recognize generator/index.js in a local preset directory by async generatory', async () => {
  const cwd = path.resolve(__dirname, '../../../test')
  const name = 'test-preset-template-async-generator'

  expectPrompts([{
    message: 'Are you ok',
    confirm: true
  }])

  await create(
    name,
    {
      force: true,
      git: false,
      cwd,
      preset: path.resolve(__dirname, './mock-preset-with-async-generator')
    }
  )

  const testFile = await fs.readFile(path.resolve(cwd, name, 'test.js'), 'utf-8')
  expect(testFile).toBe('true\n')

  const pkg = require(path.resolve(cwd, name, 'package.json'))
  expect(pkg.devDependencies).toHaveProperty('@vue/cli-plugin-babel')
  expect(pkg.devDependencies).toHaveProperty('vue-cli-plugin-async-generator')
  expect(pkg.scripts).toHaveProperty('testasync')

  // as the package.json includes a made-up dep, it may interfere with other tests that requires installation
  await fs.remove(path.resolve(cwd, name, 'package.json'))
})

test('should not override the README.md generated by plugins', async () => {
  const cwd = path.resolve(__dirname, '../../../test')
  const name = 'test-preset-readme'

  await create(
    name,
    {
      force: true,
      git: false,
      cwd,
      preset: path.resolve(__dirname, './mock-preset-with-readme')
    }
  )

  const readme = await fs.readFile(path.resolve(cwd, name, 'README.md'), 'utf-8')
  expect(readme).toBe('hello')

  const pkg = require(path.resolve(cwd, name, 'package.json'))
  expect(pkg.devDependencies).toHaveProperty('@vue/cli-plugin-babel')
})