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這個項目看看。