Как вы используете код Стамбула с переполненным Typescript?

Я все время читал статьи об этом, пытаясь правильно настроить мою среду. Но почему-то я не понимаю. Моя настройка -

/app
    ... source (mixed js and ts)
/scripts
    ... copied source (js)
    typescripts.js // transpiled typescript with inline mapping

Тесты выполняются нормально, и с отображением отладки в хром-отладчике отображается правильно. Но Стамбул видит файл typescripts.js как один файл вместо конкатенации десятков других файлов.

Чтобы сгенерировать источник typescript, я использую gulp-typescript. Источник (исключая тесты) передается в вышеупомянутый typescripts.js, и тесты передаются индивидуально и копируются в /scripts.

  var ts = require('gulp-typescript');
  var sourcemaps = require('gulp-sourcemaps');
  var concat = require('gulp-concat');

  module.exports = function (gulp, config) {
     'use strict';

     // Runs dot ts files found in `www` through the typescript compiler and copies them as js 
     // files to the scripts directory

     gulp.task('typescript', ['typescript:tests'], function () {
        return gulp.src(config.paths.typescript) // [ './www/app/**/*.ts', '!./www/app/**/*.test.ts', '!./www/app/**/*.mock.ts' ]
           .pipe(sourcemaps.init())
           .pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
           .js
           .pipe(concat(config.sourcemaps.dest)) // typescripts.js
           .pipe(sourcemaps.write(config.sourcemaps)) // { includeContent: false, sourceRoot: '/app' } - i've also tried absolute local path
           .pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts


     });

     gulp.task('typescript:tests', [], function() {
        return gulp.src(config.paths.typescriptTests) // [ './www/app/**/*.test.ts', './www/app/**/*.mock.ts' ]
           .pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
           .pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts
     });
  };

Результирующий typescripts.js имеет встроенную исходную карту. С исходной картой, около десятка файлов ts приводит к 106kb.

Итак, отсюда отлично работают тесты и отладка.

Теперь, пытаясь правильно обработать покрытие в Стамбуле, я установил karma-sourcemap-loader и добавил его в препроцессоры.

preprocessors: {
    'www/scripts/typescripts.js': ['sourcemap'],
    'www/scripts/**/*.js': ['coverage']
},

Я бы подумал, что это то, что мне нужно делать. Но он не показывает покрытие кода в исходных файлах. Я пробовал абсолютный путь от C:/, но это тоже не сработало. Я также попробовал различные опции в gulp-sourcemaps, например, добавить источник (который переместил файл на 160kb), но не понравился.

Кто-нибудь получил это на работу? Любые идеи, что я могу делать неправильно?

Ответы

Ответ 1

TL; DR: есть инструмент: https://github.com/SitePen/remap-istanbul, описанный как инструмент для переназначения покрытия в Стамбуле через Source Maps

статья на сайте сайта описывает это более подробно:

Интернэшнл, а также другие рамки тестирования JavaScript используют Стамбул для их анализа покрытия кода. Когда мы начали принимать все больше и больше TypeScript для наших собственных проектов, мы продолжали бороться с получением ясная картина нашего охвата кода, поскольку все отчеты включали только охват нашего испускаемого кода. Нам пришлось попытаться использовать компиляторы в наших умах, чтобы попытаться выяснить, где нам не хватает охвата тестированием. Мы также хотели бы установить показатели вокруг нашего охвата, чтобы мы могли отслеживать, если мы направляются в правильном направлении.

Несколько из нас начали изучать, как мы могли бы выполнить сопоставление отчета о покрытии с его истоками и после работы, мы создали remap-istanbul, пакет, который позволяет Стамбулу информацию о покрытии, которая будет отображаться обратно в ее источник, когда есть Доступны исходные карты. Хотя мы были сосредоточены на TypeScript, это могут использоваться везде, где покрытие производится на испускаемом коде, включая упомянутые выше инструменты!

Как использовать инструмент с gulp: https://github.com/SitePen/remap-istanbul#gulp-plugin

Ответ 2

Если вам нужна поддержка исходной карты со Стамбулом, вы можете использовать 1.0 alpha release, поскольку текущая версия не поддерживает карты источников. Я установил его с помощью ts-node в http://github.com/typings/typings (см. https://github.com/typings/typings/blob/bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json#L19), а исходный код сопоставляется. Он отлично смотрится и хорош, чтобы мои тесты и охват кода выполнялись в процессе с нулевой транспиляцией. Конечно, вы можете использовать Istanbul 1.0 с прерванным JavaScript.

Для используемой вами реализации браузера мне нужно будет увидеть больше кода того, что вы делаете, чтобы увидеть, как это будет работать для вас, но попробуйте 1.0.0-alpha.2 и посмотрите, что произойдет.

Ответ 3

Как упоминал Блейкембри. Istanbul 1.x отлично справляется с этим.

Ниже пример чистого npm script, который делает это с Jasmine.

См. https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate.

package.json(соответствующий материал)

{
  "scripts": {
    "postinstall": "typings install dt~jasmine --save --global",
    "test": "ts-node node_modules/.bin/jasmine JASMINE_CONFIG_PATH=jasmine.json",
    "test:coverage": "ts-node node_modules/istanbul/lib/cli.js cover -e .ts  -x \"*.d.ts\" -x \"*.spec.ts\" node_modules/jasmine/bin/jasmine.js -- JASMINE_CONFIG_PATH=jasmine.json"
  },
  "devDependencies": {
    "istanbul": "^1.1.0-alpha.1",
    "jasmine": "^2.4.1",
    "ts-node": "^0.9.3",
    "typescript": "^1.8.10",
    "typings": "^1.3.1"
  },
}

Выход

image