Scribd
Upload
45 views

Javascript Unit Testing in Phpstorm: Prerequisites

JavaScript unit tests can be created and run in PhpStorm using either the JsTestDriver or Karma test runners. To set up testing, plugins must be installed and run configurations created to specify tests and browser. Tests are run and results displayed, showing passed/failed tests. Code coverage analysis identifies untested code.

Uploaded by

Mashe1985
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Javascript Unit Testing in Phpstorm: Prerequisites

JavaScript unit tests can be created and run in PhpStorm using either the JsTestDriver or Karma test runners. To set up testing, plugins must be installed and run configurations created to specify tests and browser. Tests are run and results displayed, showing passed/failed tests. Code coverage analysis identifies untested code.

Uploaded by

Mashe1985
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

JavaScript Unit Testing in PhpStorm

Tweet
With unit testing, we can verify parts of our source code are working as expected. Especially when changing code or doing refactoring, unit
tests 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 in
PhpStorm.
Prerequisites
Installing JsTestDriver plugin
Installing Karma plugin
1. Adding a Unit Test to a Project
2. Creating a Run Configuration
Creating a JsTestDriver Run Configuration
Creating a Karma Run Configuration
3. Running Unit Tests
4. Code Coverage
PhpStorm also supports unit testing PHP code using PHPUnit as well as BDD testing with Behat.

Prerequisites
PhpStorm supports tests written using the JsTestDriver Assertion framework, Jasmine and QUnit. Before we can run our JavaScript unit tests in
PhpStorm, we'll have to make sure a test runner is installed, either JsTestDriver or Karma. Note that PhpStorm also supports Cucumber and Moc
ha tests.
Let's see how we can install the required test runners.
Note that only one of both is required. Depending on our preference, we can either install the JSTestDriver test runner or the Karma test
runner.

Installing JsTestDriver plugin


The JsTestDriver plugin must be installed in PhpStorm. This can be done from the IDE Settings | Plugins, then clicking Install JetBrains
plugin... and searching for JsTestDriver.

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

Installing Karma plugin


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

After installing the plugin (using the Install plugin button or the context menu) we will have to restart the IDE in order to enable it. We'll also have
to enable the testing framework we want to use. The easiest way to install either Jasmine, QUnit or Mocha is by using the Node.js Package
Manager.
From the Project Settings | Node.js and NPM, click the green + button to search for either karma-jasmine, _ karma-qunit_ or karma_mocha.
From the search dialog, we can Install Package to download the package and add it to our project.

1. Adding a Unit Test to a Project


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

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 toolbar
or by using the Run | Edit Configurations... menu. From there, we can add a new JsTestDriver configuration or a new Karma configuration.

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 the
JsTestDriver test configuration file to be used. In the other tabs, we can select how we want to run the test server, configure debugging and code
coverage.

The JsTestDriver plugin makes running individual test files easier. Instead of creating the Run/Debug Configuration manually, we can
use the Create '<test name'> configuration context menu to create a run configuration for us, or the Run '<test name>' context menu
to create the run configuration and immediately run tests.

Creating a Karma Run Configuration


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

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 Shift+F10. Both the JsTestDriver and the
Karma 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 get
results 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 Jump to Source context menu or
pressing F4, we can navigate to the test source code as well.
From the test tool window toolbar, we can enable "auto-test". When active, PhpStorm will automatically re-run JavaScript unit tests
whenever we make code changes without having to start them manually.

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 show
us if a statement was executed or not. In our example, we have no test for the wassup function. We can implement this in order to increase code
coverage.
For the Karma test runner, make sure the karma-coverage Node.js (npm) package is installed to be able to run tests with code
coverage enabled.
Tweet

You might also like