RubyMine 2017.1 Help

Testing JavaScript with Karma

On this page:

Introduction

JavaScript unit tests are run in a browser against a test server which actually handles the testing process.

This server allows you to capture a browser to run tests in, loads the test targets to the captured browser, controls the testing process, and exchanges data between the browser and RubyMine, so you can view test results without leaving the IDE.

The test server does not necessarily have to be on your machine, it can be launched right from RubyMine through the Karma test runner.

Karma executes unit tests according to a karma.conf.js configuration file which is generated semi-automatically in the interactive mode.

Before you start

  1. Download and install Node.js. The runtime environment is required for two reasons:
    • The Karma test runner is started through Node.js.
    • NPM, which is a part of the runtime environment, is also the easiest way to download the Karma test runner.

    If you are going to use the command line mode, make sure the path to the parent folder of the Node.js executable file and the path to the npm folder are added to the PATH variable. This enables you to launch the Karma test runner and npm from any folder.

  2. Install and enable the Karma repository plugin. The plugin is not bundled with RubyMine, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Installing Karma

You can install Karma in the current project (locally), or globally, or as a development dependency.

  • Local installation in a specific project restricts the use of the test runner to this project.
  • Global installation makes the test runner available at the RubyMine level so it can be used in any RubyMine project. Moreover, during installation the parent folder of the test runner is automatically added to the PATH variable, which enables you to launch the test runner from any folder.
  • Because Karma is a test framework, which is of no need for those who are going to re-use your application, it is helpful to have it excluded from download for the future. This is done by marking the tool as a development dependency, which actually means adding the tool in the devDependencies section of the package.json file.

See NPM documentation for more details about installing the Karma test runner and npm operation modes.

You can also install the karma package on the Node.js and NPM page of the Settings dialog box as described in Installing and Removing External Software Using Node Package Manager.

Generating a Karma configuration file

Karma executes unit tests according to a karma.conf.js configuration file which is generated semi-automatically in the interactive mode. The instruction below ensures successful creation of a consistent configuration file karma.conf.js which in its turn ensures successful execution of the tests in your project. For more details, see http://karma-runner.github.io/0.10/config/configuration-file.html.

To create a Karma configuration file:

  1. In the command line mode, switch to your project directory.
  2. Type the following command at the command line prompt:
    karma init

    If Karma does not start, check the installation: the parent folder or the Karma executable file should be specified in the PATH variable.

  3. Answer the questions to specify the following basic settings:
    • The testing framework to use.
    • The browsers to be captured automatically.
    • The patterns that define the location of test files to be involved in testing or excluded from it, for example, src/*.js and test/*.js. For more details, see http://karma-runner.github.io/0.10/config/files.html.

Creating a Karma run configuration

  1. Open the Run/Debug Configuration dialog box by doing one of the following:
    • On the main menu, choose Run | Edit Configurations.
    • Open the test file in the editor, and then choose Create <file name> on the context menu.
    • Select the test file in the Project tool window, and then choose Create <file name> on the context menu of the selection.
  2. Click /help/img/idea/2017.1/new.png on the toolbar and select the Karma configuration type.
  3. In the dialog box that opens, specify the location of the Node.js and Karma executable files and the path to the karma.conf.js configuration file.
  4. Apply the changes and close the dialog box.

Launching unit tests

  1. To launch the tests according to a run configuration, select the Karma run/debug configuration from the list on the main toolbar and click the Run button /help/img/idea/2017.1/run.png to the right of the list.
  2. The Karma test server starts automatically without any steps from your side. View and analyze messages from the test server in the Karma Server tab of the Run tool window.
  3. Monitor test execution in the Test Runner tab of the Run tool window as described in Monitoring and Managing Tests.

Monitoring code coverage

With Karma, you can also monitor how much of your code is covered with tests. RubyMine displays this statistics in a dedicated tool window and marks covered and uncovered lines visually right in the editor.

Coverage for tests run in Karma is calculated by the istanbul coverage tool which is shipped within the karma-coverage package. Therefore to monitor coverage with Karma you need to install the karma-coverage package in the same folder with Karma and then update the karma.conf.js configuration file manually.

  1. Install the karma-coverage package: open the Terminal tool window (View | Tool Windows | Terminal) and at the command line prompt type npm install karma karma-coverage --save-dev. Alternatively, you can install the karma-coverage package on the Node.js and NPM page as described in Installing and Removing External Software Using Node Package Manager.

    The karma-coverage package should be installed in the same folder with Karma (karma (library home) package), no matter whether Karma is installed globally or in your project. Keep this restriction in mind when installing karma-coverage manually in the command line mode. If you are installing karma-coverage through the Node Package Manager interface, the proper installation folder will be chosen automatically.

  2. Open the karma.conf.js configuration file and add the following information to it manually:
    1. Locate the reporters definition and add coverage to the list of values in the following format:
      reporters: ['progress', 'coverage'],
    2. Add a preprocessors definition and specify the coverage scope according to the following format:
      preprocessors: { '**/*.js': ['coverage'] }
  3. Create a Karma run/debug configuration as described above.
  4. On the main toolbar, select the Karma run configuration in the Run/Debug Configurations drop-down list and click the Run with Coverage button /help/img/idea/2017.1/runWithCoverage.png.
  5. Monitor the code coverage in the Coverage tool window. Note that when the tests are executed on Karma the Coverage tool window does not contain the Generate Coverage Report toolbar button /help/img/idea/2017.1/exportToTextFile.png because a coverage report is actually generated on the disk every time Karma tests are run. The format of a coverage report can be configured in the configuration file, for example:
    // karma.conf.js module.exports = function(config) { config.set({ ... // optionally, configure the reporter coverageReporter: { type : 'html', dir : 'coverage/' } ... });};
    The following type values are acceptable:
    • html produces a bunch of HTML files with annotated source code
    • lcovonly produces an lcov.info file
    • lcov produces HTML + .lcov files. This format is applied by default.
    • cobertura produces a cobertura-coverage.xml file for easy Hudson integration
    • text-summary produces a compact text summary of coverage, typically to the console
    • text produces a detailed text table with coverage for all files

See Also

Last modified: 18 July 2017