Angular-cli測試覆蓋所有文件

Question

我正在運行以下命令來進行單元測試並生成代碼覆蓋率報告。

ng test --code-coverage 

它正在覆蓋文件夾中寫入代碼覆蓋率報告。

我需要看到整個項目的覆蓋面，而不僅僅是有測試的文件。

karma.conf.js

module.exports = function (config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['jasmine', 'angular-cli'], 
    plugins: [ 
     require('karma-jasmine'), 
     require('karma-jasmine-html-reporter'), 
     require('karma-chrome-launcher'), 
     require('karma-remap-istanbul'), 
     require('angular-cli/plugins/karma'), 
     require('karma-coverage'), 
     require('karma-sourcemap-loader') 

    ], 
    files: [ 
     { pattern: './src/test.ts', watched: false } 
    ], 
    preprocessors: { 
     './src/test.ts': ['angular-cli'] 
    }, 
    mime: { 
     'text/x-typescript': ['ts','tsx'] 
    }, 
    remapIstanbulReporter: { 
     reports: { 
      html: 'coverage', 
     lcovonly: './coverage/coverage.lcov' 
     } 
    }, 
    angularCli: { 
     config: './angular-cli.json', 
     environment: 'dev' 
    }, 
    reporters: config.angularCli && config.angularCli.codeCoverage 
       ? ['progress', 'karma-remap-istanbul'] 
       : ['progress', 'kjhtml'], 
    coverageReporter: { 
     includeAllSources: true 
    }, 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }); 
}; 

Answer 1

定的命令下面用於檢查代碼覆蓋率：

ng test -cc 

Answer 2

下面是做到這一點的方式：

1. 添加client部分到您的karma.conf.js這樣的：

   plugins: [ 
       ... 
   ], 
   client: { 
       codeCoverage: config.angularCli.codeCoverage 
   }, 
   files: [ 
       ... 
   ], 
   

2. 根據codeCoverage參數更改test.ts需要的文件：

   let context; 
   
   if (__karma__.config.codeCoverage) { 
       context = require.context('./app/', true, /\.ts/); 
   } else { 
       context = require.context('./app/', true, /\.spec\.ts/); 
   } 
   
   context.keys().map(context); 
   

---

UPDATE：

由於角CLI需要1.5.0額外的步驟：

下一步tsconfig.spec.json添加tsconfig-cc.spec.json文件具有以下內容：

{ 
    "extends": "./tsconfig.spec.json", 
    "include": [ 
    "**/*.ts" 
    ] 
} 

在你angular-cli.json添加以下apps數組：

{ 
    "root": "src/", 
    "polyfills": "polyfills.ts", 
    "test": "test.ts", 
    "testTsconfig": "tsconfig-cc.spec.json" 
} 

在您的karma.conf.js中加入以下內容至angularCli部分：

app: config.angularCli.codeCoverage ? '1' : '0' 

最終它應該是這個樣子：

angularCli: { 
    environment: 'dev', 
    app: config.angularCli.codeCoverage ? '1' : '0' 
}, 

---

所以這裏發生了什麼？

顯然他們已經修復了Angular編譯器插件，它現在需要tsconfig.spec.json的文件球體。只要我們在tsconfig.spec.json中僅包含**/*.spec.ts這些是將包括在保險範圍內的唯一文件。

明顯的解決辦法是使tsconfig.spec.json包括所有文件（除了require.context）。然而，即使在沒有覆蓋的情況下運行（這是我們不想要的），這會減慢所有的測試。

其中一個解決方案是使用angular-cli與多個應用程序配合使用的功能。
通過在apps數組中添加另一個條目，我們爲「另一個」（實際上是同一個）應用程序添加另一個配置。
我們去掉了這個配置中的所有不相關的信息，只剩下測試配置，並且放了另一個tsconfig，其中包括所有ts文件。
最後，我們告訴angular-clikarma插件在第二個應用程序（索引1）的配置下運行測試，以防代碼覆蓋範圍內運行並且如果它是第一個應用程序的配置（索引0）運行無代碼覆蓋運行。

重要注意事項：此配置中的我假設您在.angular-cli.json中只有一個應用程序。如果你有更多，你必須相應地調整指標。

Answer 3

karma.conf.js應該是這樣的。沒有其他配置是必需的，因爲cli會處理所有事情。停止前面的運行ng test並運行ng test --code-coverage。

module.exports = function (config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['jasmine', '@angular/cli'], 
    plugins: [ 
     require('karma-jasmine'), 
     require('karma-chrome-launcher'), 
     require('karma-jasmine-html-reporter'), 
     require('karma-coverage-istanbul-reporter'), 
     require('@angular/cli/plugins/karma') 
    ], 
    client:{ 
     clearContext: false // leave Jasmine Spec Runner output visible in browser 
    }, 
    coverageIstanbulReporter: { 
     reports: [ 'html', 'lcovonly' ], 
     fixWebpackSourcePaths: true 
    }, 
    angularCli: { 
     environment: 'dev' 
    }, 
    reporters: ['progress', 'kjhtml'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }); 
};