# Beispiel für einfaches Testen von JavaScript + Codeabdeckung.



## Konstantin Denerz (18. Juni 2009)

Hallo,
hier mal ein Beispiel für das Testen von JavaScript mit jQuery (http://jquery.com/) / QUnit (http://docs.jquery.com/QUnit).
Die Tests werden in einzelnen HTML-Dateien geschrieben. 
In meinem Beispiel schreibe ich einen (async) Test für einen Service der einen HTTP Request an Tutorials.de absendet und in HTTP Response Body einen Titelvergleich durchführt.

Mein erster TestCase ist ServiceTest.html:


```
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet"
	href="http://dev.jquery.com/view/trunk/qunit/testsuite.css"
	type="text/css" media="screen" />


<script type="text/javascript" src="service.js"></script>

<script>
this.testName = "ServiceTest";
$(document).ready(function(){

	module("Service Module 1");

	test("service creation",function(){
		ok(new Service(),"service should be defined");
	});

	test("send request to tutorials.de", function() {
		// build
		var service = new Service();
	
		// operate
		service.loadPage(function(data){
			start();

			// check
			ok(data,"text should be defined");
			
			ok(data.match("<title>tutorials.de"), "the text should contains <title>tutorials.de");
		});
		
		stop(5000);	
	});

});
  </script>

</head>
<body>

<script type="text/javascript"
	src="http://jqueryjs.googlecode.com/svn/trunk/qunit/testrunner.js"></script>

<h1><script type="text/javascript"> document.write(this.testName)</script>
</h1>
<h2 id="userAgent"></h2>

<ol id="tests"></ol>

<div id="main"></div>

</body>
</html>
```

So sieht der Service in der service.js aus:

```
this.Service = function() {
	this.loadPage = function(callback) {
		
		$.get("http://www.tutorials.de",function(data){
			callback(data);
		});
		
	}

}
```

Öffnet man nun den TestCase in einem WebBrowser, so wird dieser ausgeführt:


```
ServiceTest 
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.5.20404; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
 Hide passed tests Hide missing tests (untested code is broken code)
1.	Service Module 1 module: service creation (0, 1, 1) 
1.	service should be defined
2.	Service Module 1 module: send request to tutorials.de (0, 2, 2) 
1.	text should be defined
2.	the text should contains <title>tutorials.de
Tests completed in 1360 milliseconds.
3 tests of 3 passed, 0 failed.
```

Nachdem ich den Test erstellt hatte, möchte ich auch Codeabduckung(CodeCoverage) auf meine service.js Datei anwenden.

Zuerst füge ich dem Service eine weitere Methode hinzu:

```
this.Service = function() {
	this.loadPage = function(callback) {

		$.get("http://www.tutorials.de", function(data) {
			callback(data);
		});

	}

	this.showResponseBody = function() {
		this.loadPage( function(data) {
			alert(data);
		});

	}
}
```

Nach dem ich JSCoverage(http://siliconforks.com/jscoverage/) runtergeladen und in PATH-Variable eingebunden hatte, fürte ich das folgende Kommando in der Shell in dem Projektverzeichnis aus:



```
...workspace\com.denerz.training.javascript.qunit>jscoverage-server --port=12345
```

Damit starte ich einen Mini-Webserver mit dem ich Codeabdeckung für meinen TestCase ServiceTest.html anzeigen kann:


```
http://localhost:12345/jscoverage.html?ServiceTest.html
```

Jetzt kann man sich das CodeCoverage für meinen Testfall anschauen in dem man auf Summary klickt. Wählt man die Datei service.js aus so sieht man den Quellcode mit CodeCoverage. Ein weiterer interessanter Tab ist Store wo man den Report auch speichern kann.

Nach dem ich Tests/Coverage mit jQuery und JSCoverage erstellt hatte, würde mich interessieren was ihr so verwendet und wie einfach es war diese Techniken in euer automatisches Build-System einzubauen.


Gruß Konstantin


----------



## Sven Mintel (18. Juni 2009)

Moin Konstantin, 

ich muss gestehen, dass ich solch einen Aufwand zum Testen nicht betreibe :-(

Normalerweise lasse ich mir an heiklen Stellen in der Firebug-Konsole(oder einer selbsterstellten für andere Browser) Meldungen ausgeben über Erfolg/Misserfolg...das wars dann schon.


----------



## kuddeldaddeldu (19. Juni 2009)

Hi Konstantin,

mir geht's ähnlich, wie Sven. Trotzdem sind mir solche Beiträge natürlich sehr willkommen und ich werde bei Gelegenheit mal damit herumspielen. Also vielen Dank für das kleine Beispiel. 

LG


----------



## Konstantin Denerz (28. August 2009)

Hallo,

hier ist noch ein interessanter Artikel zu diesem Thema:
TestSwarm - automatische Javascript-Tests in vielen Browsern [GOLEM]


Gruß Konstantin


----------



## Konstantin Denerz (16. September 2009)

*Testen von JavaScript mit JS Test Driver*

Hallo,

hier habe ich noch ein Beispiel gemacht, wie man JavaScript mit JS Test Driver testet: Testen von JavaScript mit JS Test Driver 
Zu dem Testrunner wird auch ein Eclipse-Plugin angeboten was das TDD in JavaScript vereinfacht.


Gruß Konstantin


----------

