Visualize JavaScript code quality and code coverage with Sonar – part 2

In my previous post I wrote about the Sonar JavaScript-Plugin, JsTestDriver, jstd-maven-plugin and some problems with the configuration. Meanwhile we’ve got a working setup which I want to explain in this blog.
For the impatient ones among us, there is a sample project available on github:
https://github.com/synyx/JavaJsSonarDemo

Run JavaScript-Tests wit JsTestDriver

The first problem was, that the opened browser-tab by the jstd runner was not closed anymore. In the previous setup jstd was configured to start the test server during the maven test goal. Now we have a jstd server instance running on a remote computer with already captured browsers. Therefore you just have to execute

java -jar JsTestDriver.jar --port 9876

in the terminal, start the browsers of your choice and load the url

http://localhost:9876/capture

Now the browsers will listen to the jstd server to run the tests. No more tabs will be opened which we would have to close manually. This works pretty well, as long as you use the JsTestDriver.jar to run your tests from the terminal. But if you use jstd-maven-plugin you will get following error:

java.lang.RuntimeException: Connection error on : sun.net.www.protocol.http.HttpURLConnection:http://10.0.15.24:9876/fileSet
        at com.google.jstestdriver.HttpServer.post(HttpServer.java:96)
        at com.google.jstestdriver.FileUploader.determineServerFileSet(FileUploader.java:174)
        at com.google.jstestdriver.action.UploadAction.run(UploadAction.java:38)
        at com.google.jstestdriver.ActionRunner.runActions(ActionRunner.java:64)
        at com.google.jstestdriver.JsTestDriver.main(JsTestDriver.java:86)
Caused by: java.io.IOException: Server returned HTTP response code: 405 for URL: http://10.0.15.24:9876/fileSet at sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1403)
        at com.google.jstestdriver.HttpServer.post(HttpServer.java:92)
        ... 4 more
Unexpected Runner Condition: Connection error on: sun.net.www.protocol.http.HttpURLConnection:http://10.0.15.24:9876/fileSet

The problem is that jstd-maven-plugin uses an older version of jstd. With the current version 1.3.5 everything works as expected. But how can we tell jstd-maven-plugin to use the new version of jstd?
Well, you can simply add a property <jstd.jar> to your pom.xml properties and point to the jar file.
Since jstd-maven-plugin has a dependeny to jstd 1.3.2 this old jar will still be in our classpath. So we have to tell jstd-maven-plugin to use jstd 1.3.5 instead of the outdated one.

<dependencies>
  ...
  <dependency>
    <groupId>com.google.jstestdriver</groupId>
    <artifactId>jstestdriver</artifactId>
    <version>1.3.5</version>
    <scope>test</scope>
  </dependency>
  ...
</dependencies>
<build>
  ...
  <pluginManagement>
    <plugins>
      <plugin>
        <groupId>com.googlecode.jstd-maven-plugin</groupId>
        <artifactId>jstd-maven-plugin</artifactId>
        <version>1.3.2.5</version>
        <dependencies>
          <dependency>
            <groupId>com.google.jstestdriver</groupId>
            <artifactId>jstestdriver</artifactId>
            <version>1.3.5</version>
          </dependency>
        </dependencies>
      </plugin>
    </plugins>
  </pluginManagement>
  ...
</build>

If you try to build the maven project now, you will notice that jstd 1.3.5 can’t be found in the maven central repository, unfortunately. So you have to add the jar to your local maven repo or to your nexus. To add it to your local repo execute this command in the terminal:

mvn install:install-file \
        -Dfile=<path.to.jstd.jar> \
        -DgroupId=com.google.jstestdriver \
        -DartifactId=jstestdriver \
        -Dversion=1.3.5 \
        -Dpackaging=jar

Now the JavaScript-Tests are automatically run by JsTestDriver during the maven build.

Analyse Java and JavaScript sources with Sonar

The second problem I mentioned in my previous post was the specification of the sourceDirectory for Sonar to be able to fetch the JavaScript sources. Hereby the java source directory will be overridden, of course, and the maven build will fail. I solved this with a maven profile which sets the source directory, the language that sonar should analyse and a branch name for the JavaScript analysis (otherwise the Java analysis will be overridden). Furthermore you have to tell maven to skip the java tests since the sources cannot be found anymore due the sourceDirectory change.

<properties>
  ...
  <srcDir>src/main/java</srcDir>
  ...
</properties>
<build>
  ...
  <sourceDirectory>${srcDir}</sourceDirectory>
  ...
</build>
<profiles>
  <profile>
    <id>sonarJsEnabled</id>
    <properties>
      <srcDir>src/main/webapp/js</srcDir>
      <maven.test.skip>true</maven.test.skip>
      <sonar.language>js</sonar.language>
      <sonar.branch>js</sonar.branch>
    </properties>
  </profile>
</profiles>

Kommentare

  1. Hi Benjamin,
    I've read your both articles: nice job explaining the setup. However, I cannot get Sonar to show neither the Code Coverage not Unit Tests sections, which are visible in your screenshot. I'm using your sample project as is with Sonar 3.4 & JavaScript plugin 1.2. Pls, let me know if you have any tips

  2. Hi Vadim, sorry, I've used version 1.1 so far. Must be a bug of v1.2 :(

  3. It will not work if you load the <strong>srcDirectory</strong> property in your <strong>build</strong>. You have to load the <strong>srcDir</strong> you defined above in your <strong>pom.xml</strong>

  4. Thank you Aurelien, i've corrected the typo :)