【Karma】多環境自動測試框架 -- 基礎教程

介紹

前身 Testacular， AngularJs Team 建立出來的. 如下是官網對Karma的相關特色介紹

1. 支持真實瀏覽器, 無瀏覽器PhantomJS
2. 熱更新，文件變化後自動測試
3. 測試框架無關性 支持（Jasmine, Mocha, QUnit）
4. 開源
5. 易測試
6. 持續集成

安裝

npm install -g karma
or 
npm install -D karma

配置

karma init
or
karma init karma.conf.js

配置項

-- autoWatch 自動監控更新
-- basePath 若是 basePath 爲相對路徑， 則加上 __dirname做爲前綴, 配合files
-- browsers 運行瀏覽器 ['Chrome', 'Firefox']
-- captureTimeout 若是瀏覽器在指定時間內監控失敗，karma將會刪殺死進程並重啓, 若是重試3次都失敗，則放棄啓動
-- colors 輸出是否輸出顏色
-- exclude 忽略加載的文件列表
-- files 瀏覽器訪問的文件列表
-- hostname 主機名
-- logLevel 日誌等級 LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG
-- loggers 日誌輸出
-- port 端口號
-- preprocessors 預處理
-- proxies 代理配置
-- reportSlowerThan 運行慢時間標準, 0 表示不開啓
-- reporters
-- runnerPort karma run 端口
-- singleRun 是否逐個運行瀏覽器
-- urlRoot
-- jsVersion firexfox 瀏覽器支持

files 配置介紹

{
  files: [
    {pattern: 'test/unit/*.js', watched: true, include: true, served: true},
    {pattern: 'src/**/*.js', included: false},
    'test/test-main.js'
  ]
}

-- pattern 匹配的模式， 使用 minimatch庫匹配
-- watched 是否監控文件變化
-- included 是否直接script引入
-- served 文件是否部署在 karma 的 web服務上
-- nocache 默認爲 false，表示開啓緩存

啓動

karma start

若是使用 karma start 啓動了服務, 但沒經過監聽文件變化自動運行測試腳本, 能夠手動執行karma run測試.

瀏覽器配置

{
    browsers: ['Chrome', 'Firefox']
}

注意： 大多數瀏覽器啓動須要安裝插件

# Install the launcher first with NPM:
$ npm install karma-xxx-launcher --save-dev

配置啓動插件

{
  plugins: [
    'karma-chrome-launcher',
    'karma-firefox-launcher'
  ]
}

設置瀏覽器啓動路徑

# Changing the path to the Chrome binary
$ export CHROME_BIN=/usr/local/bin/my-chrome-build

# Changing the path to the Chrome Canary binary
$ export CHROME_CANARY_BIN=/usr/local/bin/my-chrome-build

# Changing the path to the PhantomJs binary
$ export PHANTOMJS_BIN=$HOME/local/bin/phantomjs

Coverage 代碼覆蓋率

激活代碼覆蓋率報告

{
    reporters: ['coverage'],
    preprocessors: {
      // source files, that you wanna generate coverage for
      // do not include tests or libraries
      // (these files will be instrumented by Istanbul)
      'src/**/*.js': ['coverage']
    },

    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    }
}

代碼覆蓋率配置

type

• html
• lcov (lcov + html)
• lcovonly
• text
• text-summary
• cobertura

dir
輸出文件夾位置

file
type 爲 text 或者 text-summary 時， file 有效， 生成指定文件

Preprocessors 預處理插件

• 代碼預處理，能夠使用 es6， ts 編寫js， 經過 babel 或 ts解釋器 進行轉換.
• 常見的預處理插件，karma-coverage, karma-webpack

基於webpack的預處理配置

{
  files: [
    './index.js'
  ],
  preprocessors: {
    './index.js': ['webpack', 'sourcemap']
  },
  webpack: webpackConfig, // webpack 配置
  webpackMiddleware: {
    noInfo: true
  },
  plugins: [
    'karma-jasmine',
    'karma-mocha-reporter',
    'karma-sourcemap-loader',
    'karma-webpack'  // 前提要求 webpack已經包含
  ]
}