Unit testing and CodeCoverage for Javascript code

In this post I’ll talk about my experience with JS code unit testing, using the js-test-driver test runtime environment, its code coverage capabilities, and hedgehog twisting, namely, js-test-driver code coverage data and the report generator. About PHP_CodeCoverage. I'll tell you and show you how to get such coverage reports ...

So, it was required to implement unit testing for JS code. The js-test-driver was chosen as the environment for execution and the framework for writing tests. The reasons are as follows:

• There is a plugin for the IDE team used - PhpStorm (unfortunately at the moment the plugin does not work on the current PhpStorm platform, which is the corresponding ticket in the Started status)
• can run tests automatically in multiple browsers
• works from the command line, just embed in CI
• can report on code coverage

Despite the fact that the plug-in for IDE is now inoperable, you can “feel” the technology from the console. The server and runtime run separately from the console and can drive tests "in manual mode" by kicking the user.

Let's try in business

Code to be tested

var greeter = function(toSay){ this.whatToSay = toSay; } greeter.prototype.say = function(sayBye){ if(sayBye == true) return "Goodbye " + this.whatToSay; else return "Hello " + this.whatToSay; } 

And test
')

 var testCase = new TestCase("Say"); testCase.prototype.testCase1 = function(){ var i = new greeter('test'); assertEquals("Hello test", i.say(false)); }; 

File structure

  \jstd \plugins coverage.jar code.js test.js conf jstestdriver.jar 

Configuration to run (conf file in YAML format)

 load: - code.js - test.js server: http://localhost:4224 

Run

Let's start the server first

 H:\jstd>java -jar jstestdriver.jar --port 4224 

We launch the browser, go to localhost: 4224, get hold of the browser. Run the test run.
UPD: connect to testing can be an arbitrary number of arbitrary browsers. You can even connect from a remote machine from under a different OS. Connecting a browser to testing == opening a page on a certain server (which in this case is your js-test-driver server)

 H:\jstd>java -jar JsTestDriver.jar --config conf --tests all .. Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (1,00 ms) Chrome 6.0.472.63 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1,00 ms) Safari 525.28.1 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1,00 ms) 

We see that drove only 2 tests. Including in the Chrome browser - 1, and it was successful, in the Safari browser - also 1 and also successfully. Everything is great.

And what was there about code coverage?

CodeCoverage is connected by a separate plugin . Coverage data can either be displayed as static information (such a file is covered by N%) at the end of test execution, or can be uploaded to an LCOV file. The authors propose to generate visual reports using the genhtml tool. A quick search for results ported under Win32 did not give, I don’t want to raise Cygwin or a separate reporting machine ...

Let's run tests with code coverage

Connect the plugin. Edit the configuration file (conf).

 load: - code.js - test.js server: http://localhost:4224 plugin: - name: "coverage" jar: "plugins/coverage.jar" module: "com.google.jstestdriver.coverage.CoverageModule" 

Run tests

 H:\jstd>java -jar JsTestDriver.jar --config conf --tests all Safari: Runner reset. .Safari: Runner reset. Chrome: Runner reset. .Chrome: Runner reset. Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (1,00 ms) Chrome 6.0.472.63 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1,00 ms) Safari 525.28.1 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (0,00 ms) H:/jstd/code.js: 83.33333% covered H:/jstd/test.js: 100.0% covered 

We see that, in addition to the results, information about code coverage has appeared. From this report a little more than any sense. Let's start saving test results to a file.

 H:\jstd>java -jar JsTestDriver.jar --config conf --tests all --testOutput ./out Safari: Runner reset. .Safari: Runner reset. Chrome: Runner reset. .Chrome: Runner reset. Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (1,00 ms) Chrome 6.0.472.63 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1,00 ms) Safari 525.28.1 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1,00 ms) 

Now, coverage information is not visible at all, but a file with LCOV format coverage appeared in the ./out folder.

LCOV format

The format of the lcov file generated by js-test-driver is extremely simple.

 SF:H:/jstd/code.js DA:1,2 DA:2,2 DA:5,2 DA:6,2 DA:7,0 DA:9,2 end_of_record SF:H:/jstd/test.js DA:1,2 DA:3,2 DA:4,2 DA:5,2 end_of_record 

SF is the file for which this information is provided later, DA is the coverage data (DA: String, How Much Executed).

We generate a beautiful report: PHP_CodeCoverage

PHPUnit - a framework for implementing unit testing for PHP, has the ability to generate reports on code coverage. The CodeCoverage module is very easy to separate and very neatly implemented. The structure includes the PHP_CodeCoverage_Driver interface, the classes implementing it can serve as a source of Code coverage data for other components of the project (report builder including).

Xdebug. How does he give coverage?

For file ...

 <?php xdebug_start_code_coverage(); function a() { $x = 10; } $b = 30; var_dump(xdebug_get_code_coverage()); 

We get the result ...

 array( 'Z:\home\test\www\test.php' => array( 4 => 1 8 => 1 10 => 1 ) ); 

It can be seen that the formats are very similar, you can make your own driver
Below is a simple example of a code that generates a coverage report. It is assumed that the coverage data is in the coverage.dat file. The report will be located in the CodeCoverageReport folder.

 <?php include('PHP/CodeCoverage.php'); include('PHP/CodeCoverage/Driver/Lcov.php'); include('PHP/CodeCoverage/Report/HTML.php'); // ./lcov_coverage.dat contains ine coverage report in LCOV format $coverage = new PHP_CodeCoverage(new PHP_CodeCoverage_Driver_Lcov('./coverage.dat')); $coverage->start('mytest'); $coverage->stop(); $writer = new PHP_CodeCoverage_Report_HTML(); $writer->process($coverage, 'CodeCoverageReport'); 

What turns out, you can see here . You can look at the report and see that our complex example is not fully covered with tests, one branch is missing and it should be urgently covered with tests.