Pruebas de JavaScript rápidas y sencillas con "Assert"

Hace años, aprendí una función engañosamente simple de "afirmar" de John Resig, para probar tu JavaScript. Sorprendentemente, con apenas cinco o seis líneas, este código proporciona un gran nivel de poder y control sobre tu código durante la prueba. Te mostraré cómo usarlo en el video de sugerencia rápida de hoy.

Spanish (Español) translation by Valentino (you can also view the original English article)

Transmisión de pantalla completa

Código de "afirmación"

 
<!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>

¡Eso es todo lo que necesitas para la mayoría de las pruebas básicas! La función de aserción acepta dos parámetros:

resultado: un valor booleano, que hace referencia a si la prueba pasó o no
descripción: una breve descripción de tu prueba.

Luego, la función de aserción simplemente crea un elemento de lista, aplica una clase de "aprobado" o "suspenso", dependiendo de si tu prueba arrojó verdadero o falso, y luego agrega la descripción al elemento de la lista. Finalmente, ese bloque de codificado se agrega a la página. Es increíblemente simple, pero funciona a la perfección.

Prueba 1: tu primer ejemplo

 
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');

Prueba 2: Cierres

 
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); 
}

¡UH oh! ¿Qué sucedió?

Este es un problema común, y la respuesta es implementar un cierre, para que podamos recordar el valor de "i". De lo contrario, como notamos anteriormente, el código solo representará el valor final en la secuencia: 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);

Conclusión

Al principio, puede parecer que solo las bibliotecas de JavaScript enormes requieren algún tipo de prueba; sin embargo, eso está lejos de la verdad. Como hemos demostrado, incluso una función simple, como "assert" de Resig, ¡puede potencialmente salvarnos de horas de depuración! Entonces, ¿qué usas personalmente para probar tu código?