Angular-cli 測試覆蓋所有文件

Question

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

ng test --code-coverage

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

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

業力配置文件

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

我遇到了同樣的問題，我找到了一個簡單的解決方法，無需任何大配置即可為我解決問題。

1. 在您的 app 文件夾中，創建一個文件 app.module.spec.ts
2. 在此文件中，向您的應用模塊添加導入。

import './app.module';

就是這樣 ;）

關鍵是，您的應用程序模塊很可能是您的應用程序的核心部分，它直接或間接地導入任何其他使用過的文件。 現在您已經創建了規范文件，模塊包含的所有內容也應該包含在測試覆蓋率報告中。

我不是 100% 確定這是否適用於延遲加載的模塊。 如果沒有，您也可以簡單地在 app.module.spec.ts 中導入那些延遲加載的模塊，或者為每個模塊創建一個規范文件，在其中導入模塊。

Answer 2

這是執行此操作的方法：

1. 將client部分添加到您的karma.conf.js如下所示：

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

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

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

---

更新：

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

3. 在tsconfig.spec.json添加tsconfig-cc.spec.json文件，內容如下：

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

4. 在您的angular-cli.json將以下內容添加到apps數組：

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

5. 在您的karma.conf.js將以下內容添加到angularCli部分：

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

   最終它應該是這樣的：

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

---

那么這里發生了什么？

顯然他們已經修復了 Angular 編譯器插件，它現在從tsconfig.spec.json獲取文件 globs。 只要我們在tsconfig.spec.json中只包含**/*.spec.ts ，這些是唯一包含在覆蓋范圍內的文件。

顯而易見的解決方案是使tsconfig.spec.json包含所有文件（除了require.context ）。 但是，即使在沒有覆蓋的情況下運行（我們不想這樣做），這也會減慢所有測試的速度。

解決方案之一是使用angular-cli來處理多個應用程序。
通過在apps數組中添加另一個條目，我們為“另一個”（實際上是同一個）應用程序添加了另一個配置。
我們tsconfig這個配置中所有不相關的信息，只留下測試配置，並放置另一個包含所有ts文件的tsconfig 。
最后，我們告訴angular-cli karma插件使用第二個應用程序（索引1 ）的配置運行測試，以防它以代碼覆蓋率運行，並使用第一個應用程序（索引0 ）的配置運行（如果是）在沒有代碼覆蓋的情況下運行。

重要提示：在此配置中，我假設您在.angular-cli.json只有一個應用程序。 如果您有更多，則必須相應地調整索引。

Answer 3

我剛剛創建了 karma 插件，它將項目中的所有文件添加到覆蓋率統計中 - https://github.com/kopach/karma-sabarivka-reporter 。

使用它 → 安裝npm install --save-dev karma-sabarivka-reporter

並像這樣更新karma.conf.js ：

reporters: [
  // ...
  'sabarivka'
  // ...
],
coverageReporter: {
    include: 'src/**/!(*.spec|*.module|environment*).ts', // glob patter which  matchs all the files you want to be included into the coverage result
    exclude: 'src/main.ts',
    // ...
},

這解決了沒有任何其他操作的問題。 易於添加到現有項目以及新項目中。

Answer 4

1）在./src/test.ts中設置/然后我們找到所有的測試。

const context = require.context(‘./app/’, true, /\.ts/);

而不是標准 2) 更新 src/tsconfig.spec.json

“include”: [


 “**/*.ts”

3) 在 angular.json 中設置

“test”: {
     “builder”: “@angular-devkit/build-angular:karma”,
     “options”: {
       “codeCoverage”: true,
       “main”: “src/test.ts”,
       “polyfills”: “src/polyfills.ts”,
       “tsConfig”: “src/tsconfig.spec.json”,
       “karmaConfig”: “src/karma.conf.js”,
       “styles”: [
         “src/styles.scss”
       ],
       “scripts”: [],
       “assets”: [
         “src/favicon.ico”,
         “src/assets”,
         “src/config”,
         “src/manifest.json”
       ]
     }
   }

我的意思是添加這個參數“codeCoverage”：true

對我來說它包括所有文件

我的意思是添加這個參數“codeCoverage”：true

對我來說它包括所有文件

Answer 5

karma.conf.js 應該是這樣的。 不需要其他配置 ng 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
  });
};

Answer 6

使用下面給定的命令來檢查代碼覆蓋率：

ng test -cc