Webpack+angularのプロジェクトSEED(下)

Webpack+angularのプロジェクトSEED(上)はプロジェクトの構築生産とホットコンパイル表示を紹介した.

紹介する

ここでは主にテストについて話します.敏捷開発は多くの会社がやっています.敏捷開発には多くの方法がありますが、その方法を採用しても、テストは必要です.コード、検証機能、タイムリーなフィードバック、タイムリーな修復は敏捷開発を保証する基礎です.そのため、テストを自動化してこそ、開発が迅速に維持され、新しい問題やコード品質の問題をもたらさないことを保証することができます.

ユニットテスト

karmaは同時に複数のブラウザに対してユニットテストを行い、コードの互換性をテストすることができます.しかしkarmaには断言ライブラリが含まれていないので、断言ライブラリが必要です.ここではJasmineではなくmocha+chaiを使いました.なぜかというと、私も自動化テストに接触したばかりです.依存性がないので、夜に大体理解しました.mochaを選ぶのは主に彼の拡張性と非同期テストの能力のためです.この記事を比較すると、ES 6が使用されているため、テスト前にコードコンパイルが必要であるため、karma-webpackとkarma-sourcemap-loaderの2つのヘルプを使用してコードの位置を特定できます.最後に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については、公式ドキュメントを参照して、具体的なアサーション可能な内容を知ることができます.

E 2 Eテスト

E 2 EはEnd To Endであり,いわゆる「ユーザリアルシーン」である.このテスト比較システムは,E 2 Eテストに基づく開発も敏捷に開発されたものである.AngularJSの公式例ではE 2 Eのテスト例が与えられている.使用するツールは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時間を設定してください.

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がテストコードのオーバーライド率を判断するツールですが、ES 6で作成したソースコードのため、このオーバーライド率テスト結果はコンパイル後のコードであり、テストのオーバーライド率は実際の意味がありません.だからこのツールは私のプロジェクトに現れませんでした.しかし、コードオーバーライド率テストは重要です.ES 6を使用しない場合でも、karma-coverageを使用して、セルテストのコードオーバーライド率を統計することができます.△私はまだES 6のコードオーバーライド率の解決方法を探しています.結局、ES 6は未来の方向です.だから、事前に尋ねるのもメリットがあります.
興味があればzchq 88_に行ってもいいです.seedというプロジェクトを見てみましょう.