Angular -cli проверить охват всех файлов

Я запускаю следующую команду для unit test и генерирую отчет о покрытии кода кода.

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
  });
};

Ответы

Ответ 1

У меня была такая же проблема, и я нашел простую обходную процедуру, которая делает трюк для меня без какой-либо большой конфигурации.

  • В папке вашего приложения создайте файл app.module.spec.ts
  • В этом файле добавьте импорт в свой модуль приложения.

import './app.module';

Что это;)

Дело в том, что ваш модуль приложения, скорее всего, является центральной частью вашего приложения, которое импортирует любые другие используемые файлы прямо или косвенно. Теперь, когда вы создали спецификационный файл, все, что входит в ваш модуль, также должно быть включено в отчет о тестировании.

Я не уверен на 100%, если это работает с ленивыми загруженными модулями. Если нет, вы можете просто импортировать те ленивые загружаемые модули в свой app.module.spec.ts или создать файл спецификации на модуль, где вы импортируете модуль.

Ответ 2

Вот как это сделать:

  • Добавьте client раздел к вашему karma.conf.js следующим образом:

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

  • Измените свой 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 требуются дополнительные шаги:

  1. Рядом с tsconfig.spec.json добавьте файл tsconfig-cc.spec.json со следующим содержимым:

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

  2. В angular-cli.json добавить в массив apps следующее:

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

  3. В karma.conf.js добавить в раздел angularCli следующее:

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

    в конце концов он должен выглядеть примерно так:

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

Итак, что здесь происходит?

По-видимому, они установили плагин компилятора Angular, и теперь он принимает файлы globs от tsconfig.spec.json. Пока мы включаем только **/*.spec.ts в tsconfig.spec.json, это единственные файлы, которые будут включены в зону покрытия.

Очевидным решением является включение tsconfig.spec.json всех файлов (в дополнение к require.context). Однако это замедлит все тесты, даже если они будут работать без покрытия (чего мы не хотим).

Одним из решений является использование возможности angular-cli для работы с несколькими приложениями.
Добавив еще одну запись в массив apps, мы добавляем другую конфигурацию для "другого" (на самом деле одного и того же) приложения.
Мы отбрасываем всю несущественную информацию в этой конфигурации, оставляя только тестовую конфигурацию и добавляем еще один tsconfig, который включает в себя все файлы ts.
Наконец, мы сообщаем плагин angular-cli karma для запуска тестов с конфигурацией второго приложения (index 1), если он работает с охватом кода и запускается с настройкой первого приложения (индекс 0), если он работает без покрытия кода.

Важное примечание: в этой конфигурации я предполагаю, что у вас есть только одно приложение в .angular-cli.json. Если у вас есть больше, вам нужно соответствующим образом скорректировать индексы.

Ответ 3

1) in./src/test.ts set/Тогда мы найдем все тесты.

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

И для меня это включает в себя все файлы

Ответ 4

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
  });
};

Ответ 5

Используйте приведенную ниже команду для проверки покрытия кода:

ng test -cc