PhpStorm JavaScriptUnitTestinginPhpStorm 200116 0049 2520

7/25/2019 PhpStorm JavaScriptUnitTestinginPhpStorm 200116 0049 2520

1/9

JavaScript Unit Testing in PhpStorm

PrerequisitesInstalling JsTestDriver pluginInstalling Karma plugin

1. Adding a Unit Test to a Project2. Creating a Run Configuration

Creating a JsTestDriver Run ConfigurationCreating a Karma Run Configuration

3. Running Unit Tests4. Code Coverage

Prerequisites

PhpStorm supports tests written using the framework, and . Before we can run our JavaScript unit tests inJsTestDriver Assertion Jasmine QUnitPhpStorm, we'll have to make sure a test runner is installed, either or . Note that PhpStorm andJsTestDriver Karma also supports Cucumber Moc

tests.ha

Let's see how we can install the required test runners.

Installing JsTestDriver plugin

The JsTestDriver plugin must be installed in PhpStorm. This can be done from the , then clickingIDE Settings | Plugins Install JetBrains

and searching for .plugin... JsTestDriver

Tweet

With unit testing, we can verify parts of our source code are working as expected. Especially when changing code or doing refactoring, unittests prove valuable: they can tell us if the changes we did break existing functionality or not. Let's have a look at JavaScript Unit Testing inPhpStorm.

PhpStorm also supports unit testing PHP code using as well as BDD testing with .PHPUnit Behat

Note that only one of both is required. Depending on our preference, we can either install the JSTestDriver test runner or the Karma testrunner.
http://code.google.com/p/js-test-driver/http://pivotal.github.com/jasmine/http://docs.jquery.com/QUnithttp://code.google.com/p/js-test-driver/http://karma-runner.github.io/http://www.jetbrains.com/webstorm/webhelp/running-cucumber-js-unit-tests.htmlhttp://visionmedia.github.io/mocha/http://visionmedia.github.io/mocha/https://twitter.com/sharehttps://confluence.jetbrains.com/display/PhpStorm/PHPUnit+support+in+PhpStormhttps://confluence.jetbrains.com/display/PhpStorm/Using+Behat+in+PhpStormhttps://confluence.jetbrains.com/display/PhpStorm/Using+Behat+in+PhpStormhttps://confluence.jetbrains.com/display/PhpStorm/PHPUnit+support+in+PhpStormhttps://twitter.com/sharehttp://visionmedia.github.io/mocha/http://visionmedia.github.io/mocha/http://www.jetbrains.com/webstorm/webhelp/running-cucumber-js-unit-tests.htmlhttp://karma-runner.github.io/http://code.google.com/p/js-test-driver/http://docs.jquery.com/QUnithttp://pivotal.github.com/jasmine/http://code.google.com/p/js-test-driver/


2/9

After installing the plugin (using the button or the context menu) we will have to restart the IDE in order to enable it. We'll also haveInstall pluginto enable the testing framework we want to use. For JsTestDriver, we can start writing a simple test using the framework of choice and then usethe intention ( ).Add Alt+Enter


3/9

Installing Karma plugin

The Karma plugin must be installed in PhpStorm. This can be done from the , then clicking andIDE Settings | Plugins Install JetBrains plugin...searching for . Note that for this plugin to work, the plugin must be installed as well.Karma Node.js


4/9

After installing the plugin (using the button or the context menu) we will have to restart the IDE in order to enable it. We'll also haveInstall pluginto enable the testing framework we want to use. The easiest way to install either Jasmine, QUnit or Mocha is by using the Node.js PackageManager.

From the , click the green button to search for either , _ karma-qunit_ or .Project Settings | Node.js and NPM + karma-jasmine karma_mocha

From the search dialog, we can to download the package and add it to our project.Install Package


5/9

1. Adding a Unit Test to a Project

JavaScript unit tests can be created in our project, for example under a folder named . In there, we can add files in which we can write ourtests .js tests. Here's an example using the JsTestDriver testing framework:


6/9

And here's one using Jasmine:

2. Creating a Run Configuration

No matter which test runner we use, we'll have to create a Run/Debug Configuration to be able to run our tests. This can be done from the toolbaror by using the menu. From there, we can add a new configuration or a new configuration.Run | Edit Configurations... JsTestDriver Karma

Creating a JsTestDriver Run Configuration

For the JsTestDriver test runner, we have to specify which tests we want to run: individual tests or an entire directory. We also have to specify theJsTestDriver test configuration file to be used. In the other tabs, we can select how we want to run the test server, configure debugging and codecoverage.

The JsTestDriver plugin makes running individual test files easier. Instead of creating the Run/Debug Configuration manually, we can

use the context menu to create a run configuration for us, or the context menuCreate '


7/9

Creating a Karma Run Configuration

The Karma test runner requires the test configuration file (which we can create by running in PhpStorm's terminal window). We can alsokarma initpick which browser to start for running the tests.


8/9

3. Running Unit Tests

Let's run our tests! After creating a Run configuration, we can use the toolbar buttons to start it or press . Both the JsTestDriver and theShift+F10Karma test runners will launch a test server, start our browser, and run our tests in there. We can open multiple browsers to run tests in and getresults from all of them. The results are displayed in the tests tool window.

We can see a log of all test run as well as look at test statistics and drill down to individual tests. Using the context menu orJump to Sourcepressing , we can navigate to the test source code as well.F4

From the test tool window toolbar, we can enable "auto-test". When active, PhpStorm will automatically re-run JavaScript unit testswhenever we make code changes without having to start them manually.


9/9

4. Code Coverage

How can we be sure we've tested all execution paths in our code? We can run unit tests with code coverage (from the context menu or toolbar).Doing this displays a new tool window which provides us with statistics on the percentage of statements executed during the test run.

We can drill down and jump to source and see which statements have been tested or which are untested. The colors on the left in the editor showus if a statement was executed or not. In our example, we have no test for the function. We can implement this in order to increase codewassupcoverage.

For the Karma test runner, make sure the Node.js (npm) package is installed to be able to run tests with codekarma-coveragecoverage enabled.

Tweet
https://twitter.com/sharehttps://twitter.com/share

PhpStorm JavaScriptUnitTestinginPhpStorm 200116 0049 2520

Documents

Transcript of PhpStorm JavaScriptUnitTestinginPhpStorm 200116 0049 2520