K
Konstantin Denerz
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:
So sieht der Service in der service.js aus:
Öffnet man nun den TestCase in einem WebBrowser, so wird dieser ausgeführt:
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:
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:
Damit starte ich einen Mini-Webserver mit dem ich Codeabdeckung für meinen TestCase ServiceTest.html anzeigen kann:
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
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:
Javascript:
<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:
Javascript:
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:
Code:
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:
Javascript:
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:
Code:
...workspace\com.denerz.training.javascript.qunit>jscoverage-server --port=12345Damit starte ich einen Mini-Webserver mit dem ich Codeabdeckung für meinen TestCase ServiceTest.html anzeigen kann:
Code:
http://localhost:12345/jscoverage.html?ServiceTest.htmlJetzt 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
Anhänge
Zuletzt bearbeitet von einem Moderator:
