如何通过 Angular、Karma 和 Webpack 的单独文件拆分代码覆盖率？

Posted 2023-03-16

【中文标题】如何通过 Angular、Karma 和 Webpack 的单独文件拆分代码覆盖率？

【英文标题】：How to split code coverage by separate files for Angular, Karma and Webpack?

【发布时间】：2016-01-21 18:24:20

【问题描述】：

如何通过单独的文件拆分覆盖范围？现在，捆绑文件一切正常。我使用Angular、Webpack 进行捆绑，使用Karma/Mocha/Chai 进行测试。

我有以下 webpack.config：

module.exports = 
    entry: 
        public: "./application/src/public.js",
        office: "./application/src/office.js"
    ,
    output: 
        path: "./client/javascripts/",
        filename: "[name].js",
        sourceMapFilename: "[name].js.map"
    
;

并遵循 karma.conf.js：

module.exports = function(config) 
config.set(
    basePath: "",
    frameworks: ["mocha", "chai"],
    reporters: ["mocha", "coverage"],
    files: [
        "./client/libs/angular/angular.js",
        "./client/libs/angular-route/angular-route.js",
        "./client/libs/angular-animate/angular-animate.js",
        "./client/libs/angular-cookies/angular-cookies.js",
        "./client/libs/angular-mocks/angular-mocks.js",
        "./client/libs/angular-messages/angular-messages.js",
        "./client/javascripts/office.js", /* the bundle */
        "./application/**/*_tests.js"
    ],
    preprocessors: 
        "./client/javascripts/office.js": ["coverage"]
    ,
    coverageReporter: 
        type: "html",
        dir: "coverage/"
    ,
    exclude: [],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["PhantomJS"],
    singleRun: false
);
;

样本测试文件：

describe("AccountLoginCtrl", function() 
        beforeEach(angular.mock.module("stAccount"));

        var $controller;
        var AccountLoginCtrl;
        var $scope;

        beforeEach(angular.mock.inject(function(_$controller_) 
            $controller = _$controller_;
            $scope = ;
            AccountLoginCtrl = $controller("AccountLoginCtrl", 
                $scope: $scope
            );
        ));

        it("should exist", function() 
            expect(AccountLoginCtrl).to.exist;
        );
    );

【参考方案1】：

设置文件夹结构：

karma.conf.js
./application
    ./src
        ./components
        entry.js
    ./tests
        index.js
        ./components
    ./coverage

在tests 文件夹中添加index.js 作为测试的入口点。

// adds all test files to the bundle.
var testsContext = require.context("./components", true, /\.js$/);
testsContext.keys().forEach(testsContext);

// adds the application to the bundle.
var componentsContext = require("../src/entry"); 

karma.conf.js

var path = require("path");
module.exports = function(config) 
    config.set(
        basePath: "",
        frameworks: ["mocha"],
        reporters: ["mocha", "coverage"],
        files: [
            "./client/libs/angular/angular.js",
            "./client/libs/angular-route/angular-route.js",
            "./client/libs/angular-animate/angular-animate.js",
            "./client/libs/angular-cookies/angular-cookies.js",
            "./client/libs/angular-mocks/angular-mocks.js",
            "./client/libs/angular-messages/angular-messages.js",
            "./application/tests/index.js",
        ],
        preprocessors: 
            "./application/tests/index.js": ["webpack"]
        ,
        webpack: 
            module: 
                preLoaders: [
                    
                        test: /\.js$/,
                        include: path.resolve("./application/src/"),
                        loader: "isparta"
                    
                ]
            

        ,
        webpackMiddleware: 
            noInfo: true
        ,
        coverageReporter: 
            type: "html",
            dir: "./application/coverage/"
        ,
        exclude: [],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ["PhantomJS"],
        singleRun: false
    );
;

package.json

"devDependencies": 
    "chai": "^3.4.0", 
    "isparta-loader": "^1.0.0",
    "karma": "^0.13.12",
    "karma-coverage": "^0.5.3",
    "karma-mocha": "^0.2.0",
    "karma-mocha-reporter": "^1.1.1",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.3.3",
    "phantomjs": "^1.9.18",
    "webpack": "^1.12.2"