In unserem aktuellen Projekt werden ziemlich viele Selenium Tests erstellt und ausgeführt. Selenium Tests bedürfen einer besonders Intensiven Wartung und Pflege. Der Kunde wünschte sich ein Monitoring über den Zustand der Tests in zeitlicher Hinsicht. Jenkins bietet einige Plugins zur Visualisierung an, aber das reichte uns nicht. Ziel war es eine Gesamtsicht  und Einzelsicht auf alle Test Module zu haben. Bei jeden Test sollte erkennbar sein bei welchen Build Lauf er erfolgreich war oder nicht.

UnitTH ist ein kleines Java Tool das aus den Unit Test Ergebnis Dateien einen Report erzeugen kann.

Das Tool untersucht bestehende Unit Test Report XML Dateien und erzeugt daraus ein einen Report. Die zeitliche Achse wird durch Build Läufe erzeugt. UnitTH erkennt die Build Läufe anhand von Ordnern.

Die Reports muss in dieser Struktur vorliegen:

/build1/junit_log1.xml
/build1/junit_log2.xml
/build2/junit_log1.xml
/build2/junit_log2.xml

In den Ordnern können beliebig viele XML Dateien liegen.

Testsuiten sind für das Tool sogenannte Module. Damit wird der Report gegliedert. Man muss also darauf achten das die Suiten in den Reports eindeutige Namen haben und nicht verschachtelte Suiten haben. Meine Report Dateien haben nicht ganz dem Schema entsprochen. Ich wandel die Dateien mit XSLT um.

Der Aufruf erfolgt so:

java -jar -Dunitth.report.dir=/…/unitth/report unitth.jar /…/unitth/xml/*

Man gibt also nur das Ziel Verzeichnis für die Reports und den Pfad zu den XML Dateien.

In den Report bekommt man eine praktische Übersicht über den aktuellen Stand der Tests und den Trend.

Über die Graphen kann man erkennen, wie sich die Testdauer verhält und ob sich die Anzahl der Tests verändert.

Man bekommt eine Liste der Build Läufe und darin zusammengefasst wie deren Status war. Hier sieht man auch schön die aktuellen Trends.

Die Module (Testsuiten) werden auch zusammengefasst dargestellt und man kann sich auf einer Unterseite den Verlauf auf Testcase Basis anschauen. Dadurch kann man besonders kritische Testfälle erkennen und dann stabilisieren.

Das spannendste Feature ist die Spread Ansicht. Hier sieht man, bei welchen Build die Testfälle fehlgeschlagen sind. Damit kann man sogenannte "Blinker" Test finden. Um diese dann zu Isolieren.

Jawr ist ein Java Servlet zum komprimieren der Javascript und CSS Dateien auf dem Webserver.  Dieses Komprimieren geschieht serverseitig und der Entwickler muss die Dateien nicht per Hand komprimieren.

Bundles

Besonders praktisch ist die Möglichkeit, viele Dateien zu einen Bundle zusammenzufügen. Somit kann man auch die Anzahl der Request reduzieren, aber in der Entwicklung mit vielen einzelnen JS und CSS Dateien arbeiten.  Optimalerweise, sollte man für jede Javascript Klasse eine eigene Datei verwenden.

Installation mit Maven 2

Die Installation in einen Maven Projekt ist genial einfach. Man fügt in die Pom Datei nur folgende Zeile ein:

<dependency>
      <groupId>net.jawr</groupId>
      <artifactId>jawr</artifactId>
      <version>[2,]</version>
</dependency>

Ein Repository muss man auch noch einfügen:

<repository>
          <id>maven2-repository.dev.java.net</id>
          <name>Java.net Repository for Maven</name>
          <url>http://download.java.net/maven/2/</url>
          <layout>default</layout>
</repository>

Log4J

Jawr benötigt zusätzlich Log4J. Deshalb muss noch folgende Abhängigkeit eingefügt werden:

<dependency>
        <groupId>log4j</groupId>
        <artifactId>log4j</artifactId>
        <version>1.2.15</version>
        <type>jar</type>
        <scope>compile</scope>
        <exclusions>
            <exclusion>
                <groupId>com.sun.jmx</groupId>
                <artifactId>jmxri</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.sun.jdmk</groupId>
                <artifactId>jmxtools</artifactId>
            </exclusion>
            <exclusion>
                <groupId>javax.jms</groupId>
                <artifactId>jms</artifactId>
            </exclusion>
        </exclusions>
 </dependency>

Hierbei ist es wichtig dass die JMX Abhängigkeit ausgeklammert wird, da Maven sonst eventuell nicht startet.

In die web.xml müssen nun noch die Servlets und das Mapping eingetragen werden:

<servlet>
        <servlet-name>JavascriptServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
            <param-name>configLocation</param-name>
            <param-value>jawr.properties</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet>
        <servlet-name>CSSServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
                <param-name>configLocation</param-name>
                <param-value>jawr.properties</param-value>
        </init-param>
        <init-param>
                <param-name>type</param-name>
                <param-value>css</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>JavascriptServlet</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>CSSServlet</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>

Konfiguration

Die Konfiguration geschieht in der jawr.properties

jawr.debug.on=false
jawr.gzip.on=true
jawr.gzip.ie6.on=false
jawr.charset.name=UTF-8

Jawr erkennt automatisch ob der Browser gzip unterstützt. Wenn die Einstellung jawr.debug.on auf true steht, werden Dateien nicht komprimiert und die Bundles werden einzeln geladen. Das ist in der Entwicklung sehr wichtig.

jawr.js.bundle.basedir=/js
jawr.js.bundle.names=lib,core,model

jawr.js.bundle.lib.id=/bundles/lib.js
jawr.js.bundle.lib.mappings=/js/lib/**

jawr.js.bundle.core.id=/bundles/core.js
jawr.js.bundle.core.mappings=/js/helper/**,/js/.../version.js,/js/.../all/**

jawr.js.bundle.model.id=/bundles/model.js
jawr.js.bundle.model.mappings=/js/kosmos/cockpit/**,/js/.../../DragAndDrop.js,/js/.../reportone/**

Hier definiere ich 3 verschiedene Bundles. Die Bundles können aus ganzen Ordnern oder einzeln Dateien bestehen. Doppelte Dateien überspringt Jawr automatisch.

jawr.css.bundle.basedir=/css
jawr.css.bundle.names=style
jawr.css.bundle.style.id=/style.css
jawr.css.bundle.style.mappings=/css/**
jawr.csslinks.flavor = xhtml

Hier wird ein CSS Bundle definiert. Wichtig ist die Einstellung jawr.csslinks.flavor = xhtml , da der Link Tag sonst nicht geschlossen wird.

In der JSP muss nur noch die Taglib angegeben werden.

<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>

Und dieTags für die Bundles eingefügt werden.

<jwr:style src="/style.css" media="all" />
<jwr:script src="/bundles/lib.js"/>
...

Den Unterschied merkt man bei umfangreichen Javascript Anwenungen deutlich.

Jetty ist ein schlanker Java Webserver der oft für die Entwicklungs Phase eingesetzt wird. Unter Windows hat Jetty leider die Angewohnheit statische Dateien, also Javascript, Stylesheets und HTML in den Speicher zu legen und somit sind sie dann nicht mehr editierbar. Erst nach einen Neustart gibt dieser die Dateien wieder frei.

Zur Zeit arbeite ich gerade mit den Jetty Plugin für Maven. Dort muss man erst mal in der .pom Datei für Maven die Plugin Konfiguration anpassen und eine eigene webDefaultXml angeben.

<configuration>
   <webDefaultXml>src/main/recources/webdefault.xml</webDefaultXml>
   ....

Mit dieser Datei kann man Jetty feiner einstellen als mit der Plugin Konfiguration. Diese Date kann man sich auch den Jar Archiv von Jetty kopieren.

Hier muss man dann den Parameter useFileMappedBuffer auf false stellen.

<init-param>
  <param-name>useFileMappedBuffer</param-name>
  <param-value>false</param-value>
</init-param>

Mit dieser Einstellung kann man dann die Dateien auch unter Windows zur Laufzeit ändern.

Flot ist eine JavaScript Bibliothek auf Basis von Jquery. Ich verwende diese gerade im Zusammenspiel mit ExtJS. So lassen sich schicke Grids mit den passenden Charts dazu erzeugen.

Ein Flot Chart wird immer in ein Jquery Element generiert. Dieses muss ein HTML Element mit einer festen Höhe und Breite haben. Wie bei Jquery üblich, ist der Aufruf mit ein paar Zeilen möglich.

$().ready(function() {
	var data = {
			label:"Dummy Daten",
			data:[[1,1.5],[2,5],[3,2.3],[4,3.3]]
	};
	var options = {
		lines:{show:true},
		points:{show:true}
	}
	var plot = $.plot($('#placeholder'), [data], options)
});

Dieser Simple Code erzeugt folgenden Chart:

Das schöne an einem Javscript generierten Chart ist die Möglichkeit diesen zur Laufzeit anzupassen. Man kann auf Kopfdruck weitere Daten im vorhandenen Chart anzeigen. Flot Charts sind auch an klickbar. So kann man Punkte auf dem Chart anklicken und dem User dann weiterer Daten zu den bestimmten Punkt anzeigen.

Zoom Funktion

Spannend ist auch die Zoom Funktion um bestimmte Bereiche auf den Chart genauer anzusehen. Dazu muss man nur in den Optionen die Selection aktivieren:

selection: { mode: "x"  oder "y" oder "xy"}

Dann kann man sich an den Event plotselected anhängen und den Chart anzoomen:

$("#placeholder").bind("plotselected", function (event, ranges) {
        plot = $.plot($("#placeholder"), [data],
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
          }));
});