Sonar y Javascript: obteniendo la cobertura de nuestro código

2
16562

Sonar y Javascript: obteniendo la cobertura de nuestro código.

 

0. Índice de contenidos.

1. Introducción

Entre las muchas funcionalidades que ofrece Sonar está la de medir el código cubierto por nuestros tests unitarios (cobertura). Cualquiera que haya trabajado con Sonar, Java y Maven sabe que la forma de medir la cobertura de nuestro código es muy sencilla, de hecho, suele bastar con escribir nuestros test y analizar el proyecto con Sonar.

En el tutorial «JsTestDriver: Testea tu código Javascript» vimos lo fácil que era realizar test unitarios en Javascript. Siendo asi, ¿podemos medir la cobertura de nuestro código Javascript con Sonar?

En este tutorial veremos cómo medir el código Javascript cubierto por nuestros tests con Sonar y su correspondiente plugin.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.2 Ghz Intel Core I7, 8GB DDR3).
  • Sistema Operativo: Mac OS Mountain Lion 10.8
  • Entorno de desarrollo: Intellij Idea 11.1 Ultimate.
  • Sonar 3.4
  • Javascript Sonar plugin v1.2

3. Instalando y configurando el plugin de Javascript.

Lo primero que debemos hacer para medir el código cubierto por nuestros tests es instalar el plugin de Javascript para Sonar. Es muy sencillo, antes de nada accederemos a la aplicación con un usuario administrador. Después System > Update Center > Available Plugins y seleccionamos e instalamos el plugin de Javascript.

Después reiniciamos Sonar.

Nuevamente accedemos con un usuario administrador y, esta vez, configuraremos el plugin para que utilice JsTestDriver como framework de tests. Para ello Configuration > General Settings > Javascript y nos aseguramos de que el framework que utilizaremos para test sea JsTestDriver, tal y como se muestra en la siguiente figura:

Pues ya tendríamos todo listo para empezar a medir la cobertura de nuestros proyectos Javascript con Sonar.

En el tutorial «JsTestDriver: testea tu código Javascript» utilizamos un objeto llamado Validador que comprobaba que los valores de los campos de un formulario fuesen correctos. Utilizaremos ese mismo ejemplo para medir su cobertura.

Podemos medir la cobertura de nuestro proyecto de dos formas: con Maven o con Sonar Runner. A continuación veremos las dos formas.

4. Analizando el proyecto con Maven.

Tenemos nuestro proyecto organizado de la siguiente manera:

Como podemos ver, en el directorio src/main/js/ tenemos el fichero validator.js que contiene el código de producción y que será el testearemos. Del mismo modo, en el directorio src/test/js-test/ tenemos el fichero validator-test.js que contiene los test que aplican sobre validator.js.

Como vimos en el tutorial «JsTestDriver: testea tu código Javascript», para analizar un proyecto con JsTestDriver es necesario un fichero jsTestDriver.conf donde indicaremos donde tenemos nuestro código de producción (código a testear) y nuestros tests. Además debemos hacer uso del plugin de cobertura de JsTestDriver para que nos mida el porcentaje de código cubierto por los tests.

El fichero jsTestDriver.conf quedaría de la siguiente forma:

server: http://localhost:9876

load:
  - src/main/js/*.js

test:
  - src/test/js-test/*.js

plugin:
 - name: "coverage"
   jar: "lib/coverage-1.3.2.jar"
   module: "com.google.jstestdriver.coverage.CoverageModule"

Como vemos, el plugin de cobertura está en una librería coverage-1.3.2.jar que está en el directorio lib/ de nuestro proyecto. Esta librería puede descargarse desde la página de JsTestDriver.

Pues lo siguiente que faltaría es configurar nuestro pom.xml para que haga uso del plugin de JsTestDriver de forma que, se lancen los tests automáticamente y se genere un informe con la cobertura.

El pom.xml tendría el siguiente aspecto:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelversion>4.0.0</modelversion>
 
  <groupid>com.autentia.tutoriales</groupid>
  <artifactid>sonar-javascript-maven</artifactid>
  <version>1.0-SNAPSHOT</version>
 
  <name>Sonar Javascript y Maven</name>
 
  <properties>
    <project.build.sourceencoding>UTF-8</project.build.sourceencoding>
    <sonar.language>js</sonar.language>
    <sonar.dynamicanalysis>reuseReports</sonar.dynamicanalysis>
    <sonar.javascript.jstestdriver.reportsfolder>target/jstestdriver</sonar.javascript.jstestdriver.reportsfolder>
    <path.to.browser>/Applications/Firefox.app/Contents/MacOS/firefox</path.to.browser>
  </properties>
 
  <build>
    <sourcedirectory>src/main/js</sourcedirectory>
    <testsourcedirectory>src/test/js-test</testsourcedirectory>
 
    <plugins>
      <plugin>
        <groupid>com.googlecode.jstd-maven-plugin</groupid>
        <artifactid>jstd-maven-plugin</artifactid>
        <version>1.3.2.5</version>
        <configuration>
          <verbose>true</verbose>
          <browser>${path.to.browser}</browser>
          <port>9876</port>
          <testoutput>target/jstestdriver</testoutput>
        </configuration>
        <executions>
          <execution>
            <id>run-tests</id>
            <goals>
              <goal>test</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
 
  <!-- JsTestDriver Dependencies -->
  <dependencies>
    <dependency>
      <groupid>com.googlecode.jstd-maven-plugin</groupid>
      <artifactid>jstd-maven-plugin</artifactid>
      <version>1.3.2.5</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
 
  <repositories>
    <repository>
      <id>jstd-maven-plugin google code repo</id>
      <url>http://jstd-maven-plugin.googlecode.com/svn/maven2</url>
    </repository>
  </repositories>
  <pluginrepositories>
    <pluginrepository>
      <id>jstd-maven-plugin google code repo</id>
      <url>http://jstd-maven-plugin.googlecode.com/svn/maven2</url>
    </pluginrepository>
  </pluginrepositories>
</project>

De esta forma, cuando lleguemos a la fase de test de Maven (ver ciclo de vida de Maven), JsTestDriver entrará en acción: correrá los tests y generará un informe con la cobertura que dejará en el directorio target/jstestdriver/. Dicho informe será consumido por Sonar cuando analice el proyecto.

Por tanto, lo único que nos falta es ejecutar los siguientes comandos (en el directorio raíz del proyecto):

mvn test
mvn sonar:sonar

5. Analizando el proyecto con Sonar Runner.

Y el que no quiera utilizar Maven puede hacerlo con Sonar Runner. Quien no tenga ni idea de qué es Sonar Runner puede echarle un ojo a este tutorial mi compi Rubén.

Tenemos estructurado el proyecto de la siguiente manera:

Como vemos, ya no tenemos fichero pom.xml. En su lugar tenemos el fichero sonar-project.properties que será usado por Sonar Runner. Este sería su aspecto:

# project metadata (required)
sonar.projectKey=com.autentia.tutoriales.sonarjavascriptsonarrunner
sonar.projectName=Sonar Javascript y Sonar Runner
sonar.projectVersion=1.0
 
# path to source directories (required)
sonar.sources=src
 
# path to test source directories (optional)
sonar.tests=test

# Language
sonar.language=js
 
# Advanced parameters
sonar.javascript.jstestdriver.reportsfolder=jstestdriver
sonar.dynamicAnalysis=reuseReports

# Encoding of the source files
sonar.sourceEncoding=UTF-8

Y nuestro fichero jsTestDriver.conf cambia ligeramente ya que hemos cambiado las rutas de nuestros fuentes y tests, además de la ruta del plugin de cobertura.

server: http://localhost:9876

load:
 - src/*.js
test:
 - test/*.js

plugin:
 - name: "coverage"
   jar: "coverage-1.3.5.jar"
   module: "com.google.jstestdriver.coverage.CoverageModule"

Además, hemos incluido la librería JsTestDriver-1.3.5.jar ya que ahora no se lanza con Maven. Ya explicamos cómo lanzar JsTestDriver de forma manual en este tutorial. Lanzamos el siguiente comando:

java -jar JsTestDriver-1.3.5.jar --port 9876 --tests all --browser "/Applications/Firefox.app/Contents/MacOS/firefox" --testOutput jstestdriver --config jsTestDriver.conf

Esto sería lo equivalente al comando mvn test del punto anterior. Por último lanzamos el análisis con Sonar Runner de la siguiente forma:

sonar-runner

Recordemos que para que este comando nos funcione debemos tener instalado y configurado Sonar Runner.

Y si todo ha ido bien, tendremos un resultado similar al que obtuvimos con Maven 🙂

6. Referencias.

  • Plugin de Javascript para Sonar

7. Conclusiones.

En este tutorial hemos visto lo fácil que es medir el código de nuestro proyecto cubierto por tests, una alternativa muy interesante para no descuidar esta faceta durante el desarrollo de nuestros proyectos.

Espero que este tutorial os haya sido de ayuda. Un saludo.

Miguel Arlandy

marlandy@autentia.com

Twitter: @m_arlandy

2 COMENTARIOS

  1. Muchas gracias Miguel, me alegra ver que cada vez se da más importancia JavaScript, que nos permite mejorar mucho la usabilidad y experiencia gráfica del usuario

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad