Code Coverage for JavaScript Unit Testing

Measuring JavaScript code coverage naturally complements unit testing. It provides a clear picture of which parts of your code remain untested, and helps you focus additional tests on the uncovered code.

From now on, users of JsTestDriver can measure code coverage visually, right in the editor.

To illustrate this, we have created a sample project for you. Please download percentage-sample.zip , extract it and open the project in your IDE.

When you open percentage-test.js for the first time, you will see error highlighting on the TestCase method call expression. Position the caret on the error-highlighted code, press Alt+Enter/Option+Enter and choose “Add JsTestDriver assertion framework support” from the list of available intention actions.

A global JavaScript library named “JsTestDriver Assertion Framework” will be created and associated with a project. To view it, open the Settings dialog (File | Settings or IntelliJ IDEA | Preferences) and select JavaScript Libraries.

Before you can run any of your tests, you need to start the test server and capture at least one slave browser. The server does not have to reside on the machine where the test runner is located; similarly, the browsers themselves may be located on different machines.

Starting JsTestDriver server locally

To launch the JsTestDriver server, look for the tool window at the bottom of the screen.

Click the green arrow to the left of the address bar to start a local server. The status bar turns yellow to let you know the server is running, but has no slave browsers.

Click the browser icon you want to capture. Alternatively, you can copy the capture URL and paste it in a browser. The status bar turns green, and the corresponding browser icon lights up. Now you’re ready to run tests.

Running tests with code coverage

To run tests, right-click percentage.jstd and choose Run ‘percentage.jstd’ with Coverage. Tests will be run against the local JsTestDriver server and you will get a tree diagram.

It also shows which lines were exercised by your unittests, and which weren’t, in two places. First, in your source files, it adds a green bar (exercised) or red bar (omitted) to the left of the source lines:

You can also see test coverage statistics by file and by directory in your Project View:

Excluding files from code coverage

If you use a JavaScript library in your code (e.g. jQuery), you don’t need to measure code coverage for library code. To exclude a JavaScript file from the coverage, open JsTestDriver Run Configuration you intend to run, select the Coverage tab, and add the file to the excluded file paths.

Download WebStorm for your platform from this WebStorm EAP page.

We’d appeciate to hear responses from you in our issue tracker ;).

Note: Users of PhpStorm, as well as other JetBrains IDE – IntelliJ IDEA, PyCharm, RubyMine, and AppCode – should install it from the plugin repository by following these instructions.

Test with pleasure!

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, Tutorial, WebStorm and tagged , , , , , . Bookmark the permalink.

5 Responses to Code Coverage for JavaScript Unit Testing

  1. Orillian says:

    I could see not putting this plugin in most of the ide’s by default but it should get installed by default with PhpStorm.

    Not a huge deal to add it, but it would be nice to see these javascript plugins defaulted in PhpStorm since it’s development track is so close to WebStorms. And a lot of us use PhpStorm like a WebStorm Pro.

    O.

  2. Carl Kenne says:

    Nice. I had some problems at first seeing my passed tests until i realized that a button called “hide passed” was pressed. Doh!

  3. Steve Parmer says:

    Have been using trial copy of PHPStorm2.0. Want to purchase an IDE that works easily with jstestdriver for learning javascript and test driven development. Have had way too much trouble getting set up. The latest version of jstestdriver now allows my server to run, but get the following error:

    Testing started at 9:49 PM …
    JSTestDriver crashed!
    Exception in thread “main” mapping values are not allowed here
    org.jvyaml.ScannerException: ScannerException null we had this mapping values are not allowed here
    at org.jvyaml.ScannerImpl.fetchValue(ScannerImpl.java:512)
    at org.jvyaml.ScannerImpl.fetchMoreTokens(ScannerImpl.java:331)
    at org.jvyaml.ScannerImpl.peekToken(ScannerImpl.java:160)
    at org.jvyaml.ParserImpl$20.produce(ParserImpl.java:383)
    at org.jvyaml.ParserImpl.parseStreamNext(ParserImpl.java:796)
    at org.jvyaml.ParserImpl.peekEvent(ParserImpl.java:747)
    at org.jvyaml.ComposerImpl.composeNode(ComposerImpl.java:162)
    at org.jvyaml.ComposerImpl.composeDocument(ComposerImpl.java:95)
    at org.jvyaml.ComposerImpl.getNode(ComposerImpl.java:71)
    at org.jvyaml.BaseConstructorImpl.getData(BaseConstructorImpl.java:88)
    at org.jvyaml.YAML.load(YAML.java:188)
    at org.jvyaml.YAML.load(YAML.java:165)
    at com.google.jstestdriver.config.YamlParser.parse(YamlParser.java:42)
    at com.google.jstestdriver.config.UserConfigurationSource.parse(UserConfigurationSource.java:47)
    at com.google.jstestdriver.idea.TestRunner.resolveConfiguration(TestRunner.java:125)
    at
    com.google.jstestdriver.idea.TestRunner.makeActionBuilder(TestRunner.java:110)
    at com.google.jstestdriver.idea.TestRunner.execute(TestRunner.java:94)
    at com.google.jstestdriver.idea.TestRunner.execute(TestRunner.java:89)
    at com.google.jstestdriver.idea.TestRunner.main(TestRunner.java:164)
    Empty test suite.

    Would buy the IDE if this worked.

    • Sergey Simonchik says:

      Steve, it seems your JsTestDriver configuration file is invalid.
      I’ll improve error reporting.

Comments are closed.