With WebStorm, you can also monitor how much of your code is covered with tests. WebStorm displays this statistics in a dedicated tool window and marks covered and uncovered lines visually right in the editor.
The Coverage tool window tool window shows the percentage of covered classes and lines for each folder and the percentage of covered lines in each file.
When a file is opened in the editor, lines executed during simulation are marked green and those that were not involved are marked red.
The results of a coverage measurement are saved in a coverage suite. You can also merge them with any of the existing suites. In this case, a line is considered covered if it is covered by at least one test run.
Run tests with coverage
Configure code coverage behavior
In the Settings/Preferences dialog (Ctrl+Alt+S), click Coverage under Build, Execution, Deployment. The Coverage page opens.
- Define how the collected coverage data will be processed:
To have the Code Coverage dialog box shown every time you launch a new run configuration with code coverage, choose Show options before applying coverage to the editor.
To discard the new code coverage results, choose Do not apply collected coverage.
To discard the active suites and use the new one every time you launch a new run configuration with code coverage, choose Replace active suites with the new one.
To have the new code coverage suite appended to the active suites every time you launch a new run configuration with code coverage, choose Add to active suites.
- Define the behaviour of the Coverage tool window when an application or test is run with coverage:
To have the Coverage tool window opened automatically, select the Activate Coverage View checkbox.
To open the Coverage tool window manually, clear the Activate Coverage View checkbox.
Configure colors to highlight code coverage results
In the Settings/Preferences dialog (Ctrl+Alt+S), click Color Scheme under Editor, and then click General. The Color Scheme page opens.
In the list of textual components, under the Line Coverage node, select the required type of coverage, for example, Full, Partial or Uncovered, and then choose the desired colors for them: