JSPM

  • Created
  • Published
  • Downloads 80284
  • Score
    100M100P100Q148575F
  • License MIT

Simplifying running unit tests with coverage for Typescript projects.

Package Exports

  • karma-typescript

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (karma-typescript) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

karma-typescript

What the plugin does

The plugin seamlessly runs your unit tests written in Typescript and creates coverage reports, eliminating the need for additional build steps or scripts.

Here's a screenshot of coverage created with karma-typescript:

Installation and configuration

First, install the plugin:

npm install karma-typescript --save-dev

Then put this in your Karma config:

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

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

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

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

browsers: ["Chrome"]

Now run Karma and two things will happen:

  • Your tests written in Typescript will be executed on-the-fly.
  • You'll have html test coverage, remapped with remap-istanbul in the folder ./coverage in the root of your project.

Runnable example

Under the hood

Under the hood, karma-typescript chains several other useful plugins and configures them with sensible defaults, in the following order:

Module Step Note
typescript Transpile to in-memory with inline sourcemaps { target: "es5", module: "commonjs", sourceMap: true}
karma-commonjs Add module loading for browsers
karma-coverage Instrument the code with Istanbul coverageReporter: { instrumenterOptions: istanbul: { noCompact: true }}, *.spec.ts and *.test.ts are excluded
remap-istanbul Create remapped coverage karmaTypescriptConfig.reports :{{ html: "coverage" }}

Importing stylesheets and bundling

Style files (.css|.less|.sass|.scss) are served as dummy modules to the browser running the tests, allowing you to load styles using the Typescript import statement, ie import "./style/app";.

This means you can import styles in order to let, for instance, webpack load the styles with sass-loader or less-loader etc for bundling later on, without breaking the unit test runner.

Advanced configuration

If the defaults aren't enough, karma-typescript is both configurable and steps aside if it detects that you've added karma-commonjs or karma-coverage to the Karma config yourself.

Here are the report and remapping options for karma-typescript:

karmaTypescriptConfig: {
    /*
        Report type options passed to remap-istanbul.
        The key is the report type, the value is the destination path.
    */
    reports:
    {
        "clover": "coverage",
        "cobertura": "coverage",
        "html": "coverage",
        "json-summary": "coverage",
        "json": "coverage",
        "lcovonly": "coverage",

        /*
            The following reporters can have the output written directly to the
            console by setting the destination to "" or null, ie "text-summary": "".
        */
        "teamcity": "coverage", // "destination/path" or null or ""
        "text-lcov": "coverage", // ...
        "text-summary": "coverage",
        "text": "coverage"
    },
    /* Options passed to remap-istanbul */
    remapOptions:
    {
        // Regex or string for excluding files
        exclude: /\.(spec|test)\.ts/,
        // Function for handling warning messages
        warn: function(message){}
    }
}

It is also possible to add options for karma-coverage in the coverageReporter section. In the next example, a TeamCity report is created with karma-coverage and karma-typescript is used as an on-the-fly transpiler and reporter. The plugin doesn't run the karma-commonjs and karma-coverage plugins since they're specified in the configuration and will be run by Karma:

frameworks: ["jasmine", "commonjs"],

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

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

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

// For more options, see https://github.com/karma-runner/karma-coverage
coverageReporter: {
    type: "teamcity", file: "teamcity.txt"
},

browsers: ["PhantomJS"]

Requirements

Typescript >=1.6 is required.

Note: Typescript >= 1.8.10 produces more accurate test coverage remapping.

Licensing

This software is licensed with the MIT license.

© 2016 Monounity