{"id":21850,"date":"2012-04-12T08:24:45","date_gmt":"2012-04-12T08:24:45","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webide\/?p=3639"},"modified":"2021-12-16T17:41:36","modified_gmt":"2021-12-16T16:41:36","slug":"javascript-unit-testing-with-code-coverage","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/fr\/webstorm\/2012\/04\/javascript-unit-testing-with-code-coverage","title":{"rendered":"Code Coverage for JavaScript Unit Testing"},"content":{"rendered":"<p>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.<\/p>\n<p>From now on, users of <a href=\"http:\/\/code.google.com\/p\/js-test-driver\/\" target=\"_blank\" rel=\"noopener\">JsTestDriver<\/a> can measure code coverage visually, right in the editor.<!--more--><\/p>\n<p>To illustrate this, we have created a sample project for you. Please download <a href=\"http:\/\/confluence.jetbrains.net\/download\/attachments\/41490213\/percentage-sample.zip\" target=\"_blank\" rel=\"noopener\">percentage-sample.zip<\/a> , extract it and open the project in your IDE.<\/p>\n<p>When you open <em>percentage-test.js<\/em> for the first time, you will see error highlighting on the <code>TestCase<\/code> method call expression. Position the caret on the error-highlighted code, press <strong>Alt+Enter<\/strong>\/<strong>Option+Enter<\/strong> and choose &#8220;Add JsTestDriver assertion framework support&#8221; from the list of available intention actions.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3678\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-add-jstd-support-4.png\" alt=\"\" width=\"623\" height=\"234\"><\/p>\n<p>A global JavaScript library named \u201cJsTestDriver Assertion Framework\u201d will be created&nbsp;and associated with a project. To view it, open the Settings dialog (<strong>File | Settings<\/strong> or <strong>IntelliJ IDEA | Preferences<\/strong>) and select <strong>JavaScript Libraries<\/strong>.<\/p>\n<p>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.<\/p>\n<h3>Starting JsTestDriver server locally<\/h3>\n<p>To launch the JsTestDriver server, look for the tool window at the bottom of the screen.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3650\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-jstd-local-server-is-not-running.png\" alt=\"\" width=\"471\" height=\"186\"><\/p>\n<p>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.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3670\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-jstd-local-server-no-captured-browsers-3.png\" alt=\"\" width=\"473\" height=\"186\"><\/p>\n<p>Click the browser icon you want to capture. Alternatively, you can copy&nbsp;the capture URL and paste it in a browser. The status bar turns green, and the corresponding browser icon lights up. Now you\u2019re ready to run tests.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3671\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-jstd-local-server-is-ready-2.png\" alt=\"\" width=\"473\" height=\"186\"><\/p>\n<h3>Running tests with code coverage<\/h3>\n<p>To run tests, right-click <em>percentage.jstd<\/em> and choose <strong>Run &#8216;percentage.jstd&#8217; with Coverage<\/strong>. Tests will be run&nbsp;against the local JsTestDriver server and you will get&nbsp;a tree diagram.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3675\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-test-result-tree-3.png\" alt=\"\" width=\"591\" height=\"228\"><\/p>\n<p>It also shows which lines were exercised by your unittests, and which weren&#8217;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:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3674\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-editor-covered-lines-2.png\" alt=\"\" width=\"502\" height=\"289\"><\/p>\n<p>You can also see test coverage statistics by file and by directory in your Project View:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3662\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-project-view-coverage.png\" alt=\"\" width=\"375\" height=\"154\"><\/p>\n<h3>Excluding files from code coverage<\/h3>\n<p>If you use a JavaScript library in your code (e.g. jQuery), you don&#8217;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 <strong>Coverage<\/strong> tab, and add the file to the excluded file paths.<\/p>\n<p><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-exclude-files-from-coverage.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3676\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2012\/04\/webide-exclude-files-from-coverage.png\" alt=\"\" width=\"745\" height=\"539\"><\/a><\/p>\n<p><a href=\"http:\/\/www.jetbrains.net\/confluence\/display\/WI\/Web+IDE+EAP\" target=\"_blank\" rel=\"noopener\">Download WebStorm for your platform from this WebStorm EAP page<\/a>.<\/p>\n<p>We&#8217;d appeciate to hear responses from you in our&nbsp;<a href=\"http:\/\/youtrack.jetbrains.com\/issues\/WI#newissue=yes\" target=\"_blank\" rel=\"noopener\">issue tracker<\/a> ;).<\/p>\n<p>Note: Users of PhpStorm, as well as other JetBrains IDE \u2013 IntelliJ IDEA, PyCharm, RubyMine, and AppCode \u2013 should install it from the plugin repository by following <a href=\"http:\/\/confluence.jetbrains.net\/display\/WI\/Installation+of+JsTestDriver+IntelliJ+plugin\" target=\"_blank\" rel=\"noopener\">these instructions<\/a>.<\/p>\n<p>Test with pleasure!<\/p>\n","protected":false},"author":47,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[601],"tags":[982,197,1125,743,443,183],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm\/21850"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=21850"}],"version-history":[{"count":1,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm\/21850\/revisions"}],"predecessor-version":[{"id":213872,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm\/21850\/revisions\/213872"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=21850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=21850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=21850"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=21850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}