webpack+angular的項目SEED(下)
webpack+angular的項目SEED(上) 介紹了項目的構建生產和熱編譯顯示。
介紹
這里就主要來講測試，敏捷開發好多公司都在做，敏捷開發有許多種方法，但不管采用那一種方法，測試都是必須的，驗證代碼，驗證功能，及時的反饋，及時的修復是保證敏捷開發的基礎。所以自動化測試，才能保證開發在快速中仍然可以維護的很好，不會帶來新的問題和代碼質量問題。
單元測試
karma 可以同時對多個瀏覽器做單元測試，測試兼顧代碼的兼容性。但是karma不包含斷言庫，所以還需要斷言庫，在這里我用了mocha+chai而不是Jasmine的。至于為什么說實話我也是剛剛接觸自動化測試。沒有依賴性，所以就晚上大概了解了下，選mocha主要因為他可擴展性和異步測試的能力。對比可以查看 這篇文章 ，然后由于用到了ES6所以在測試前需要吧代碼編譯，所以用到了karma-webpack和karma-sourcemap-loader這兩個幫助定位代碼位置。最后就是karma-mocha-reporter這個幫助我更加清晰的查看測試報告。
Karma.conf.js
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: ['mocha', 'chai'],
// list of files / patterns to load in the browser
files: ['app/**/*Spec.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
preprocessors: {'app/**/*Spec.js': ['webpack', 'sourcemap']},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha'],
// 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,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel'},
{test: /\.html/, loader: 'raw'},
{test: /\.styl$/, loader: 'style!css!stylus'},
{test: /\.css$/, loader: 'style!css'}
]
}
},
webpackServer: {
noInfo: true // prevent console spamming when running in Karma!
},
plugins: [
'karma-chrome-launcher',
'karma-chai',
'karma-mocha',
'karma-webpack',
'karma-sourcemap-loader',
'karma-mocha-reporter'
]
})
}; KARMA的主要測試配置就在這里了。KARMA最大的好處就是能監視代碼修改，實時的幫你測試代碼問題。在開發的同時就能知道會不會有太大的問題。很好的管控了代碼。
對了還有一個問題就是對angularJS的測試需要'angular-mocks'的搭配，可以幫你測試module，controller里面的內容。
navbar.js
let navbar = angular.module('navbar', []);
navbar.controller('navbarCtrl', ['$scope', function ($scope) {
$scope.links = ['home', 'about'];
}]);
navbar.directive('navbar', function () {
return {
restrict: 'AE',
templateUrl: '/widgets/navbar/navbar.html'
};
});
export default navbar; navbar.Spec.js
import angular from 'angular';
import mocks from 'angular-mocks';
import navbar from './navbar';
describe('navbar', function () {
let scope;
beforeEach(angular.mock.module('navbar'));
beforeEach(angular.mock.inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
$controller('navbarCtrl', {$scope: scope});
}));
it('Controller測試', function () {
expect(scope).to.have.property('links').with.length(2);
});
}); 以上是一個簡單的angular寫的空間NAVBAR的測試。
至于斷言庫 CHAI 可以查看官方文檔來了解具體的可以斷言的內容。
E2E測試
E2E也就是End To End，就是所謂的“用戶真實場景”。這個測試比較系統，基于E2E測試的開發也是敏捷開發的一種。angularJS官方實例中已經給了一個E2E的測試例子。使用的工具是protractor。也是angularJS給的測試工具。大致看了 API 感覺到功能還是很強的。不過說實話沒有具體細看每個API，這個文檔先留著以后具體問題在看吧。
protractor-conf.js
exports.config = {
allScriptsTimeout: 10000,
specs: [
'*.js'
],
capabilities: {
'browserName': 'chrome'
},
chromeOnly: true,
baseUrl: 'http://localhost:3000/',
framework: 'mocha',
mochaOpts: {
timeout: 10000
}
}; 記得設置下TIMEOUT時間，以防測試任務功能時間太長timeout了
HomeE2E.js
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;
describe('HomeE2E', function() {
beforeEach(function() {
browser.get('/');
});
it('測試LINKS', function() {
var todoList = element.all(by.repeater('x in links'));
expect(todoList.get(1).getText()).to.eventually.equal('about');
expect(todoList.get(0).getText()).to.eventually.equal('home');
});
it('測試輸入框', function() {
var HomeInput = element(by.model('HomeInput'));
var Hometext = element(by.id('Hometext'));
HomeInput.sendKeys('nexus');
expect(Hometext.getText()).to.eventually.equal('nexus');
HomeInput.clear();
});
}); 以上是一個簡單的測試代碼。
測試覆蓋率
karma-coverage這個是一個KARMA判斷測試代碼覆蓋率的一個工具，但是由于我們用的ES6編寫的源代碼，所以這個覆蓋率測試結果是編譯后的代碼，測試的覆蓋率沒有實際意義。所以這個工具沒有出現在我的項目中。不過代碼覆蓋率測試還是很重要的。在不使用ES6的情況下還是可以使用karma-coverage來統計下單元測試的代碼覆蓋率的。（我還在找ES6的代碼覆蓋率的解決方法，畢竟ES6是未來的一個方向。所以提前問道也是有好處的。）
有興趣的可以去 zchq88_seed 這個項目看看。