使用karma-jasmine和伊斯坦布爾Typescript的代碼覆蓋

Question

我試圖讓我的腳本代碼在使用伊斯坦布爾的karma框架中使用伊斯坦布爾 的代碼覆蓋typescript文件包括在內，並通過karma typecript-preprocessor我們可以做單位測試和代碼覆蓋的打字稿代碼，但代碼覆蓋率報告來自反向堆積的JavaScript代碼

如何獲得打印報告的打字稿代碼？

這是我的karma.conf文件。

module.exports = function(config) { 
 
    config.set({ 
 

 
    // base path, that will be used to resolve files and exclude 
 
    basePath: '', 
 

 

 
    // frameworks to use 
 
    frameworks: ['jasmine'], 
 

 
    preprocessors: { 
 
     'src/**/*.ts': ['typescript', 'coverage'], 
 
     'test/**/*.ts': ['typescript'] 
 
    }, 
 
    typescriptPreprocessor: { 
 
     options: { 
 
      sourceMap: false, // (optional) Generates corresponding .map file. 
 
      target: 'ES5', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5' 
 
      module: 'amd', // (optional) Specify module code generation: 'commonjs' or 'amd' 
 
      noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type. 
 
      noResolve: false, // (optional) Skip resolution and preprocessing. 
 
      removeComments: true, // (optional) Do not emit comments to output. 
 
      concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false. 
 
     }, 
 
     // extra typing definitions to pass to the compiler (globs allowed) 
 
     // transforming the filenames 
 
     transformPath: function (path) { 
 
      return path.replace(/\.ts$/, '.js'); 
 
     } 
 

 
     //options: { 
 
     // sourceMap: true, 
 
     //} 
 
    }, 
 

 
    // list of files/patterns to load in the browser 
 
    files: [ 
 

 
     'src/**/*.ts', 
 
     'test/**/*.ts' 
 
    ], 
 

 

 
    // list of files to exclude 
 
    exclude: [ 
 
     
 
    ], 
 
    // test results reporter to use 
 
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage' 
 
    reporters: ['progress','coverage'], 
 

 

 
    // web server port 
 
    port: 9876, 
 

 

 
    // enable/disable colors in the output (reporters and logs) 
 
    colors: true, 
 

 

 
    // level of logging 
 
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 
 
    logLevel: config.LOG_INFO, 
 

 

 
    // enable/disable watching file and executing tests whenever any file changes 
 
    autoWatch: true, 
 

 

 
    // Start these browsers, currently available: 
 
    // - Chrome 
 
    // - ChromeCanary 
 
    // - Firefox 
 
    // - Opera (has to be installed with `npm install karma-opera-launcher`) 
 
    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`) 
 
    // - PhantomJS 
 
    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`) 
 
    browsers: ['PhantomJS'], 
 

 

 
    // If browser does not capture in given timeout [ms], kill it 
 
    captureTimeout: 60000, 
 

 

 
    // Continuous Integration mode 
 
    // if true, it capture browsers, run tests and exit 
 
    singleRun: false, 
 
    plugins: [ 
 
    'karma-jasmine', 
 
    'karma-chrome-launcher', 
 
    'karma-phantomjs-launcher', 
 
    'karma-typescript-preprocessor', 
 
    'karma-coverage' 
 
    //require('../../../node_modules/karma-typescript-preprocessor/index.js') 
 
    ] 
 

 
    }); 
 
};

Answer 1

我們使用instanbul重新映射爲我們的項目和它的作品相當不錯。要創建我們的覆蓋報告，我們運行下面的shell腳本：

#!/bin/bash 

PROJECT_PATH="$(dirname $0)/../" 

cd $PROJECT_PATH 
echo Creating coverage reports for `pwd` 

if [ ! -d "target/dist" ]; then 
    echo 
    echo "target/dist directory not found. Must compile source with \`npm install\` before running tests." 
    echo 
    exit 1; 
fi 

COVERAGE_DIR=target/coverage-raw 
REMAP_DIR=target/coverage-ts 

mkdir -p $COVERAGE_DIR 
mkdir -p $REMAP_DIR 

# run coverage on unit tests only 
echo Creating coverage reports for unit tests 
node_modules/.bin/istanbul cover --dir $COVERAGE_DIR nodeunit `find target/dist/test/ -name *.test.js` > /dev/null 

# re-map the coverage report so that typescript sources are shown 
echo Remapping coverage reports for typescript 
node_modules/.bin/remap-istanbul -i $COVERAGE_DIR/coverage.json -o $REMAP_DIR -t html 

echo Coverage report located at $REMAP_DIR/index.html 

我們的項目採用nodeunit的測試工具，因爲它是一個節點應用。但是，我期望類似的方法可以爲業力起作用。

Answer 2

有karma-remap-istanbul它很好地集成了remap-istanbul與業力。文檔是非常明顯的，但一件事 - 在控制檯上的配置文件是text: undefined（否則文本輸出到文件）。

因此，有可能直接從因緣有報道內容然而，當ts源不可在同一目錄karma.config.jskarma-remap-istanbul還需要一些更多的發展有關的配置能夠產生完整的HTML報告。

Answer 3

安裝karma-typescript：

npm install karma-typescript --save-dev 

將這個在您的karma.conf.js：

frameworks: ["jasmine", "karma-typescript"], 

files: [ 
    { pattern: "src/**/*.ts" } 
], 

preprocessors: { 
    "**/*.ts": ["karma-typescript"] 
}, 

reporters: ["progress", "karma-typescript"], 

browsers: ["Chrome"] 

這將在飛行運行打字稿單元測試並生成HTML伊斯坦布爾覆蓋面，看起來像這樣：

要運行上面的例子，你需要安裝一些軟件包：

npm install @types/jasmine jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-typescript typescript

這是單元測試香草打字稿代碼的完整配置，沒有tsconfig.json在這種情況下需要。對於更復雜的Angular，React等設置，您可以在examples folder和integration tests中找到示例。