Ir al contenido principal

Iniciando con QUnit

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.



error1



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. pass

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.

Comentarios

  1. ignoraba que existiran este tipo de pruebas en JQuery, me recuendan mucho a las de Rails.

    Continuare la serie que has hecho :)

    Gracias por compartir esto!

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Bloqueos

Una de las preguntas típicas de las juntas matutinas en los equipos de desarrollo de software es ¿Hay algún bloqueo? Si lo hay, se trata de ver qué es lo que está esperando esa persona y encontrar la forma de que se desbloquee; pero ¿Qué son los bloqueos? Los bloqueos son obstáculos que te impiden realizar o avanzar en tu trabajo. Evitan que puedas seguir progresando en el proyecto.

He notado que es común en las personas con menos experiencia decir que tienen un bloqueo cuando están batallando, debido a su poca experiencia, en la forma de resolver un problema. Han intentado varias formas y se empiezan a quedar sin ideas de como puede ser resuelto el problema o como pueden cumplir con el requerimiento especificado. Al quedarse sin opciones de qué intentar dicen que tienen un bloqueo con la tarea y que a menos que alguien les diga como resolverlo, no se puede avanzar en la tarea.

En personas con más experiencia, ese tipo de bloqueos no ocurren, una persona con experiencia ha visto pro…

Firebird 2.1 UPDATE OR INSERT

Another great feature that I like in Firebird 2.1 is the UPDATE OR INSERT statement. It's a really time saver and it makes the SQL cleaner.

For example suppose I have a products table like the one I use in my last post and an inventory table to store the product stock. Before Firebird 2.1 if I want to set the stock for a product I needed to check if a record for that product_id already exists; if the product_id already exists then I write an update. If not then I write an insert statement. So I ended up with something like this:


IF EXISTS(SELECT * FROM inventory WHERE product_id = :product_id ) THEN
UPDATE
inventory
SET
stock = :stock
WHERE
product_id = :product_id;
ELSE
INSERT INTO inventory
(product_id, stock)
VALUES
(:product_id, :stock);

In this example I only update one field but when I have to update a big table I ended up with a big chunk of code and thinking: "there should be another (better) way to do this".

Fortunately now with Firebird 2.1 there…

Database Mail en MS SQL Server 2005

Configuración de Database Mail en MS SQL Server 2005

Primero se debe de habilitar, ya que por omisión el componente esta deshabilitado, Utilizando el SSMS (SQL Server Management Studio)


Si no esta habilitado aparecerá un mensaje preguntado si lo habilita, después aparece esta ventana donde se pregunta al usuario que es lo desea hacer.


Seleccionamos la primera opción para crear un perfil.


Configuramos el perfil y le agregamos por lo menos una cuenta.


Seleccionamos el perfil como public y default.


Para mandar correo se utiliza el procedimiento msdb.sp_send_dbmail por lo tanto el usuario que intente mandar correo debe de tener permiso para la base de datos msdb.

Referencias:
http://www.sqlservercentral.com/columnists/cBunch/introtodatabasemailinsql2005.asp