Karma - Vue的自动化测试

Vue使用了Karma+Jasmine实现自动化测试。主要做了以下几方面的测试：

• 开发模式无浏览器测试
• 单元测试：Chorme，Firefox，Safari
• 覆盖率测试
• e2e测试

一、配置文件

1. 基础配置
karma.base.config.js 定义了：测试框架，测试文件，预处理，webpack，plugin

const alias = require('../../scripts/alias')
const featureFlags = require('../../scripts/feature-flags')
const webpack = require('webpack')

const webpackConfig = {
  mode: 'development',
  resolve: {
    alias: alias
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __WEEX__: false,
      'process.env': {
        TRANSITION_DURATION: process.env.CI ? 100 : 50,
        TRANSITION_BUFFER: 10,
        ...featureFlags
      }
    })
  ],
  devtool: '#inline-source-map'
}

// shared config for all unit tests
module.exports = {
  frameworks: ['jasmine'],
  files: [
    './index.js'
  ],
  preprocessors: {
    './index.js': ['webpack', 'sourcemap']
  },
  webpack: webpackConfig,
  webpackMiddleware: {
    noInfo: true
  },
  plugins: [
    'karma-jasmine',
    'karma-mocha-reporter',
    'karma-sourcemap-loader',
    'karma-webpack'
  ]
}

测试入口文件./index.js 使用webpack的APIrequire.context将所有测试文件引进来

require('es6-promise/auto')

// import all helpers
const helpersContext = require.context('../helpers', true)
helpersContext.keys().forEach(helpersContext)

// require all test files
const testsContext = require.context('./', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

2. dev下静默测试
不启动浏览器，仅执行测试用例

const base = require('./karma.base.config.js')

process.env.CHROME_BIN = require('puppeteer').executablePath()

module.exports = function (config) {
  config.set(Object.assign(base, {
    browsers: ['ChromeHeadless'],
    reporters: ['progress'],
    plugins: base.plugins.concat([
      'karma-chrome-launcher'
    ])
  }))
}

3. unit测试
在三大主流浏览器下跑测试用例

const base = require('./karma.base.config.js')

module.exports = function (config) {
  config.set(Object.assign(base, {
    browsers: ['Chrome', 'Firefox', 'Safari'],
    reporters: ['progress'],
    singleRun: true,    // 为true时，Karma启动浏览器执行完测试用例后自动退出浏览器
    plugins: base.plugins.concat([
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-safari-launcher'
    ])
  }))
}

4. 覆盖率测试

const base = require('./karma.base.config.js')

process.env.CHROME_BIN = require('puppeteer').executablePath()

module.exports = function (config) {
  const options = Object.assign(base, {
    browsers: ['ChromeHeadlessCI'],
    customLaunchers: {
      'ChromeHeadlessCI': {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    },
    reporters: ['mocha', 'coverage'],
    coverageReporter: {
      reporters: [
        { type: 'lcov', dir: '../../coverage', subdir: '.' },
        { type: 'text-summary', dir: '../../coverage', subdir: '.' }
      ]
    },
    singleRun: true,
    plugins: base.plugins.concat([
      'karma-coverage',
      'karma-chrome-launcher'
    ])
  })

  // add babel-plugin-istanbul for code instrumentation
  options.webpack.module.rules[0].options = {
    plugins: [['istanbul', {
      exclude: [
        'test/',
        'src/compiler/parser/html-parser.js',
        'src/core/instance/proxy.js',
        'src/sfc/deindent.js',
        'src/platforms/weex/'
      ]
    }]]
  }

  config.set(options)
}

最终会在coverage目录生成一组覆盖率结果页面

image.png

4. 浏览器兼容性测试saucelab

const webpack = require('webpack')
const base = require('./karma.base.config.js')

base.webpack.plugins = [
  new webpack.DefinePlugin({
    __WEEX__: false,
    'process.env': {
      NODE_ENV: '"development"',
      // sauce lab vms are slow!
      TRANSITION_DURATION: 500,
      TRANSITION_BUFFER: 50
    }
  })
]

/**
 * Having too many tests running concurrently on saucelabs
 * causes timeouts and errors, so we have to run them in
 * smaller batches.
 */

const batches = [
  // the cool kids
  {
    sl_chrome: {
      base: 'SauceLabs',
      browserName: 'chrome',
      platform: 'Windows 7'
    },
    sl_firefox: {
      base: 'SauceLabs',
      browserName: 'firefox'
    },
    sl_mac_safari: {
      base: 'SauceLabs',
      browserName: 'safari',
      platform: 'OS X 10.10'
    }
  },
  // ie family
  {
    sl_ie_9: {
      base: 'SauceLabs',
      browserName: 'internet explorer',
      platform: 'Windows 7',
      version: '9'
    },
    sl_ie_10: {
      base: 'SauceLabs',
      browserName: 'internet explorer',
      platform: 'Windows 8',
      version: '10'
    },
    sl_ie_11: {
      base: 'SauceLabs',
      browserName: 'internet explorer',
      platform: 'Windows 8.1',
      version: '11'
    },
    sl_edge: {
      base: 'SauceLabs',
      browserName: 'MicrosoftEdge',
      platform: 'Windows 10'
    }
  },
  // mobile
  {
    sl_ios_safari_9: {
      base: 'SauceLabs',
      browserName: 'iphone',
      version: '10.3'
    },
    sl_android_6_0: {
      base: 'SauceLabs',
      browserName: 'android',
      version: '6.0'
    }
  }
]

module.exports = function (config) {
  const batch = batches[process.argv[4] || 0]

  config.set(Object.assign(base, {
    singleRun: true,
    browsers: Object.keys(batch),
    customLaunchers: batch,
    reporters: process.env.CI
      ? ['dots', 'saucelabs'] // avoid spamming CI output
      : ['progress', 'saucelabs'],
    sauceLabs: {
      testName: 'Vue.js unit tests',
      recordScreenshots: false,
      connectOptions: {
        'no-ssl-bump-domains': 'all' // Ignore SSL error on Android emulator
      },
      build: process.env.CIRCLE_BUILD_NUM || process.env.SAUCE_BUILD_ID || Date.now()
    },
    // mobile emulators are really slow
    captureTimeout: 300000,
    browserNoActivityTimeout: 300000,
    plugins: base.plugins.concat([
      'karma-sauce-launcher'
    ])
  }))
}