Schnelle und einfache JavaScript-Tests mit "Assert"

German (Deutsch) translation by Jean-Étienne (you can also view the original English article)

Vor Jahren lernte ich von John Resig eine täuschend einfache "assert"-Funktion, mit der man sein JavaScript testen kann. Es ist erstaunlich, dass dieser Code mit nur fünf oder sechs Zeilen ein hohes Maß an Leistung und Kontrolle über Ihren Code beim Testen bietet. Ich zeige Ihnen im heutigen Video-Kurztipp, wie Sie ihn verwenden können.

Vollständiger Screencast

“Assert” Code

 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Easy JavaScript Testing </title> 
	<style> 
		.pass:before { 
			content: 'PASS: '; 
			color:  blue; 
			font-weight: bold; 
		} 
 
		.fail:before { 
			content: 'FAIL: '; 
			color: red; 
			font-weight: bold; 
 
		} 
	</style> 
</head> 
<body> 
 
<ul id="output"></ul> 
 
<script> 
var output = document.getElementById('output'); 
 
function assert( outcome, description ) { 
	var li = document.createElement('li'); 
	li.className = outcome ? 'pass' : 'fail'; 
	li.appendChild( document.createTextNode( description ) ); 
 
	output.appendChild(li); 
}; 
</script>

Das ist alles, was Sie für die meisten grundlegenden Tests brauchen! Die assert-Funktion nimmt zwei Parameter entgegen:

Ergebnis: Ein boolescher Wert, der angibt, ob der Test bestanden wurde oder nicht
Beschreibung: Eine kurze Beschreibung Ihres Tests.

Die assert-Funktion erstellt dann einfach ein Listenelement, wendet die Klasse "pass" oder "fail" an, je nachdem, ob der Test wahr oder falsch war, und fügt die Beschreibung an das Listenelement an. Schließlich wird dieser Codeblock der Seite hinzugefügt. Es ist wahnsinnig einfach, funktioniert aber perfekt.

Test 1: Ihr erstes Beispiel

 
function add(num1, num2) { 
	return num1 + num2; 
} 
 
var result = add(5, 20); 
assert( result == 24, 'Checking the add function'); 
 
// OR 
assert( add( 5, 20 ) == 24, 'Checking the add function');

Test 2: Verschlüsse

 
var someArray = [1,2,3,4,5], 
	len = someArray.length, 
	i = 0; 
 
var count = 0; 
 
for ( ; i < len; i++ ) { 
	setTimeout(function() { 
		assert( count++ === i, 'Checking the value of: ' + i ); 
	}, i * 300); 
}

Oje! Was ist passiert?

Dies ist ein häufiges Problem, und die Lösung besteht darin, eine Schließung zu implementieren, so dass wir uns den Wert von "i" merken können. Andernfalls wird der Code, wie wir oben festgestellt haben, nur den letzten Wert in der Sequenz wiedergeben: 5.

 
var someArray = [1,2,3,4,5], 
	len = someArray.length, 
	i = 0; 
 
var count = 0; 
 
for ( ; i < len; i++ ) (function(i) { 
	setTimeout(function() { 
		assert( count++ === i, 'Checking the value of: ' + i ); 
	}, i * 300); 
})(i);

Schlussfolgerung

Auf den ersten Blick mag es so aussehen, als ob nur große JavaScript-Bibliotheken und dergleichen eine Form des Testens erfordern; das ist jedoch weit von der Wahrheit entfernt. Wie wir gezeigt haben, kann uns sogar eine einfache Funktion wie Resigs "assert" stundenlange Fehlersuche ersparen! Was verwenden Sie persönlich, um Ihren Code zu testen?