使用" karma-coverage"无法看到代码覆盖率对于角4应用程序中的打字稿文件?

时间:2017-10-06 23:34:55

标签: angular typescript webpack karma-coverage

我使用Microsoft.AspNetCore.SpaTemplates创建了一个角度应用程序 - >带有Angular的MVC ASP.NET核心。

我的单元测试项目的package.json有以下模块:

 "dependencies": {
    "@angular/animations": "4.1.2",
    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@angular/platform-server": "4.1.2",
    "@angular/router": "4.1.2",
    "@types/node": "7.0.18",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^2.0.5",
    "aspnet-webpack": "^1.0.29",
    "awesome-typescript-loader": "3.1.3",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.1",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.0",
    "style-loader": "0.17.0",
    "to-string-loader": "1.1.5",
    "typescript": "2.3.2",
    "url-loader": "0.5.8",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.0",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@types/chai": "3.5.2",
    "@types/jasmine": "2.5.47",
    "chai": "3.5.0",
    "jasmine-core": "2.6.1",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-htmlfile-reporter": "^0.3.5",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.3",
    "puppeteer": "^0.11.0"
  }

karma.config具有以下配置:

const ChromiumRevision = require('puppeteer/package.json').puppeteer.chromium_revision;
const Downloader = require('puppeteer/utils/ChromiumDownloader');
const revisionInfo = Downloader.revisionInfo(Downloader.currentPlatform(), ChromiumRevision);

process.env.CHROME_BIN = revisionInfo.executablePath;

module.exports = function (config) {
    config.set({
        basePath: './',
        frameworks: ['jasmine'],
        files: [
            '../../../../Source/testApp/wwwroot/dist/vendor.js',
            './boot-tests.ts'
        ],
        preprocessors: {
            './boot-tests.ts': ['webpack', 'sourcemap'],
        },
        reporters: ['progress', 'html', 'junit', 'coverage', 'remap-coverage'], //'coverage' --> add plugin
        htmlReporter: {
            outputFile: '../../UnitTestsReport/Client.UnitTest_Status.html',
            pageTitle: ' front-end unit tests',
            subPageTitle: 'Results of unit tests',
            groupSuites: true,
            useCompactStyle: true,
            useLegacyStyle: true
        },
        junitReporter: {
            outputDir: './../../',
            outputFile: 'UnitTestReport.xml', 
        },
        coverageReporter: { type: 'in-memory' },
        remapCoverageReporter: {
            html: './coverage',
            'text-summary': null
        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['ChromeHeadless'],
        mime: { 'application/javascript': ['ts', 'tsx'] },
        singleRun: true,
        webpack: require('../../webpack.config')().filter(config => config.target !== 'node'), // Test against client bundle, because tests run in a browser
        webpackMiddleware: { stats: 'errors-only' }
    });
};

webpack.config.js具有以下配置:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: {
            extensions: ['.js', '.ts'],
            modules: [path.join(__dirname, "node_modules")]
        },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = '../../Source/testApp/wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': '../../Source/testApp/ClientApp/boot-client.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('../../Source/testApp/wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    return [clientBundleConfig]; 
};

测试执行正常,生成代码覆盖率报告但显示100%但未列出测试文件。 enter image description here

任何人都可以让我知道我在配置中缺少什么吗?

提前致谢。

0 个答案:

没有答案