RSS

BDD and test coverage measuring with Jasmine and JSCover tutorial

19 Feb

Jasmine
==================

[Jasmine](http://pivotal.github.com/jasmine/) is a popular BDD framework for Javascript programs. It’s a standalone framework and there are HTML reporter, console reporter, … and more to choose from. To test Javascript in CocoonJS platform we can use the console reporter.

To try Jasmine:

1. Download [Jasmine](https://github.com/pivotal/jasmine/downloads).

2. Unzip the downloaded Jasmine standalone package. You can either open the SpecRunner.html with browsers or place the files in a web server and visit the url.

The default demo uses HTML reporter. Here is an example html of using the console reporter:
Download additional reporters: [https://github.com/larrymyers/jasmine-reporters](https://github.com/larrymyers/jasmine-reporters)

<!DOCTYPE HTML>
<html>
<head>
  <title>Jasmine Spec Runner</title>

  <link rel="shortcut icon" type="image/png" href="test/lib/jasmine-1.3.1/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="test/lib/jasmine-1.3.1/jasmine.css">
  <script type="text/javascript" src="test/lib/jasmine-1.3.1/jasmine.js"></script>
  <script type="text/javascript" src="test/lib/jasmine-1.3.1/jasmine-html.js"></script>
  <script type="text/javascript" src="test/lib/jasmine.console_reporter.js"></script>

  <!-- include source files here... -->

  <!-- include spec files here... -->

  <script type="text/javascript">
    (function() {

      // HTML Reporter
      // var jasmineEnv = jasmine.getEnv();
      // jasmineEnv.updateInterval = 1000;

      // var htmlReporter = new jasmine.HtmlReporter();

      // jasmineEnv.addReporter(htmlReporter);

      // jasmineEnv.specFilter = function(spec) {
      //   return htmlReporter.specFilter(spec);
      // };

      // var currentWindowOnload = window.onload;

      // window.onload = function() {
      //   if (currentWindowOnload) {
      //     currentWindowOnload();
      //   }
      //   execJasmine();
      // };

      // function execJasmine() {
      //   jasmineEnv.execute();
      // }

      // Console Reporter
      jasmine.getEnv().addReporter(new jasmine.ConsoleReporter());
      jasmine.getEnv().execute();

    })();
  </script>

</head>

<body>
</body>
</html>

We can also use both reporters in the same spec runner page.

JSCover
==================

To measure the test coverage for our Javascript program we can use JSCover. Here’s a step by step guide to use JSCover in server mode:

1. Download [JSCover](http://tntim96.github.com/JSCover/).

2. Unzip the downloaded file and run example-server.sh.

Mac: In terminal, type “sh example-server.sh”

Windows: In cmd, type “example-server.sh”

3. Visit [demo page](http://localhost:8080/jscoverage.html?/index.html).

4. In the Browser tab of the page, type in the test code running url in the URL box and then click “Open in frame”. Note that the domain and port of the test url has to be the same as the JSCover page.

The default script in example-server.sh is

    java -jar target/dist/JSCover-all.jar -ws --branch --document-root=doc/example --report-dir=target

We can use –no-instrument to specify the url that not to be instrumented. For example:

    java -jar target/dist/JSCover-all.jar -ws --branch --document-root=doc/example --report-dir=test/report --no-instrument=test

You can find more detailed options at [JSCover manual](http://tntim96.github.com/JSCover/manual/manual.xml#serverMode).

Tutorial
==================

1. [JSCover Guide](http://lucaspaulger.com/code-quality/2013/01/07/JSCover-Guide/)

2. [JSCover manual](http://tntim96.github.com/JSCover/manual/manual.xml)

Advertisements
 
Leave a comment

Posted by on February 19, 2013 in Javascript

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: