前端包管理工具
代碼重用和複用是快捷開發的一種重要方式，但是原始的代碼模塊散佈於各個平臺上，不好尋找，程序員對其進行有效管理也成爲了一大難題。此時，依賴（包、插件、工具都可以稱呼，本質是他人寫好封裝後的代碼模塊）管理工具應需而生。依賴管理工具使用簡單的命令即可提供 依賴的查找、安裝、卸載等操作，深受廣大程序員喜愛。
前端 Node.js 最爲常用的依賴管理工具 是npm，npm 之於Node.js，就如 pip 之於 Python，gem 之於 Ruby，pear 之於 PHP , maven 之於Java 。
Karma 環境的搭建
安裝 karma (karma用於run自動化測試腳本)
npm install karma --save-dev安裝karma-jasmine (jasmine用於編寫單元測試用例)
npm install karma-jasmine --save-dev
npm install jasmine-core --save-dev安裝karma-chrome-launcher(用於啓動chrome瀏覽器;如果是firefox可以使用karma-firefox-launcher;同理可得其他)
npm install karma-chrome-launcher --save-dev
npm install karma-firefox-launcher --save-dev安裝coverage(測試代碼覆蓋率)
npm install karma-coverage --save-devJasmine
jasmine有四種類型的函數:
1. 分組 describe
// 聲明一類測試用例
describe('add algorithm',function(){
// 在裏面可以定義一些變量，如
var a=1,b=2;
});2. 用例 it
// 聲明一類測試用例
describe('add algorithm',function(){
// 在裏面可以定義一些變量，如
var a=1,b=2;
// 聲明一種測試用例
it('test add one',function(){
});
it('test add two',function(){
});
});3. 期望 expect
4. 匹配to****
// 聲明一類測試用例
describe('add algorithm',function(){
// 可以定義一些變量，如
var a=1,b=2;
// 聲明一種測試用例
it('test add one',function(){
// 期望 自定義的函數 addOne(1) 結果爲 2, 反向讀代碼
expect(2).toEqual(addOne(a));
expect(3).toEqual(addOne(b));
});
it('test add two',function(){
expect(3).toEqual(addTwo(a));
expect(5).toEqual(addTwo(b));
});
});你可以在 github 或者 入門指導網站 瞭解到 jasmine 的詳細信息
github地址: https://github.com/jasmine/jasmine
guide地址: https://jasmine.github.io/2.0/introduction.html
Karma 配置文件
讀到這裏，可能會有疑問：被測試函數 和 測試腳本應該放在哪裏？
下面來看 karma 配置文件
在 karma.exe 所在目錄下 或者 已將 karma 安裝至 global
命令行輸入（當然你也可以 命名爲 **.conf.js）
karma init karma.conf.js然後根據提示配置文件
配置 被測試代碼路徑 和 測試腳本路徑 ( ** / * 通配 文件路徑/名稱)
省略省略省略…………
出現以下提示表示配置完成
如果想做一些個性化的處理，可以打開文件並 添加/修改 配置項
/**
* Created by lonelydawn on 2017-03-04.
*/
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'public/bower_components/angular/angular.js',
'app/javascripts/**/*.js',
'test/**/*.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
//代碼覆蓋率測試 ,使用 karma-coverage
preprocessors: {
'app/javascripts/**/*.js': 'coverage'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress','coverage'],
coverageReporter: {
type: 'html',
dir: 'coverage/'
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
})
};之後 命令行執行 ,即可開始測試 ( 在配置和啓動的時候一定要注意路徑問題 )
karma start karma.conf.js
Gulp下 karma 的使用
gulp 是一款非常簡單好用的自動化構建工具，中文文檔很詳細。
gulp 中文文檔地址 : http://www.gulpjs.com.cn/
在 gulp 中使用karma 不再需要安裝 gulp-karma組件
github原文:
Karma integration into Gulp.js-based build.
將 Karma 配置到項目 node_modules中並將配置文件建好之後
在 gulpfile.js 中寫入
var gulp=require('gulp');
var Karma=require('karma').Server;
// 前端自動化測試
gulp.task('test', function (done) {
new Karma({
// 配置文件所在路徑
configFile: __dirname + '/karma.conf.js',
// 執行測試結束後退出
singleRun:true
}, done).start();
});
gulp.task('tdd', function (done) {
new Karma({
configFile: __dirname + '/karma.conf.js'
}, done).start();
});之後在命令行鍵入
gulp test或
gulp tdd執行測試即可.