Hace poco escribí un post sobre como iniciar con jQuery. En esta ocasión quiero mostrar como hacer el mismo ejemplo; pero escribiendo las pruebas unitarias primero (a la TDD) utilizando QUnit.
Lo primero que debo hacer es crear un archivo HTML con la plantilla que esta en el sitio de QUnit con unos cuantos cambios…. cambié la ubicación de la hoja de estilos, agregue las ubicaciones de los scripts de jQuery, QUnit y agregué un div con id “main” que es donde escribiré el HTML necesario para las pruebas. El archivo me quedo así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit Tests</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Hello World</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
<div id="main"></div>
<script>
test("hello", function() {
ok(true, "world");
});
</script>
</body>
</html>
En esta plantilla viene escrito una prueba de ejemplo llamada “hello”. Voy a modificar esa función para especificar lo que quiero probar. Para escribir la prueba voy a aplicar el estilo AAA (Arrange, Act, Assert). Primero (Arrange) especifico las precondiciones para que pueda correr la prueba, en este caso sería escribir el HTML necesario y ligar el evento clic del botón a mi función. En la segunda parte (Act) escribo el nuevo comentario en la caja de texto y disparo el evento en el botón. En la tercera parte (Assert) verifico que se haya agregado un comentario, es decir que la lista tenga un elemento con el contenido esperado. La prueba queda de la siguiente manera:
test("when click 'add' then a comment should be added to the list", function(){
//Arrange - Agrego el HTML necesario y ligo el evento click del botón
$("#main").append('<ul id="comments"></ul>'
+ '<input id="comment" type="text" />'
+ '<button id="add">Add</button>');
$("#add").click(addComment);
//Act – Escribo el nuevo comentario y hago clic en el botón
$("#comment").val("comment");
$("#add").click();
//Assert – Verifico que el nuevo comentario este en la lista
equals($("#comments").html(), "<li>comment</li>");
});
Una vez que tenemos la prueba, lo que sigue es correrla y verificar que falle para después escribir el código necesario para hacerla pasar. Para correr la prueba lo único que necesito es guardar el archivo (en este caso lo llamé test.html) y abrirlo con un navegador. Al abrir el archivo en el navegador este me muestra el error.
El error dice que no se encontró la función “addComment” que es la función que se va a ejecutar cuando se haga clic en el botón. Para definir mi función voy a crear un nuevo archivo al cual llamaré comments.js y agregar la referencia a el desde el archivo test.html. En este archivo (comments.js) es donde definiré la función addComment (por ahora haré la función global espero después escribir sobre como simular namespaces y definir funciones “privadas” en JavaScript). A continuación muestro el contenido de mi archivo comments.js
function addComment(){
var newCommentTextBox = $("#comment");
var commentText = newCommentTextBox.val();
$("#comments").append("<li>" + commentText + "</li>");
newCommentTextBox.val('');
}
Como puede verse es lo mismo que en el post anterior solo que ahora esta en su propio archivo js. Agrego la referencia en el archivo test.html
<script src="comments.js"></script>
y vuelvo a correr las pruebas (actualizando la página en el navegador). Veo que la prueba pasa.
Ahora puedo tener confianza para hacer modificaciones sin preocuparme de que eche a perder funcionalidad. Además de que el código JavaScript quedó en su propio archivo (comments.js) separado del HTML.
ignoraba que existiran este tipo de pruebas en JQuery, me recuendan mucho a las de Rails.
ResponderBorrarContinuare la serie que has hecho :)
Gracias por compartir esto!