TDD con Javascript y QUnit

Published on Author lopez1 Comment

Este fin de semana, comencé a escribir un intérprete Lisp usando Javascript, para practicar el lenguaje. El código está quedando en

https://github.com/ajlopez/AjLispJs

Quiero destacar un tema: estoy usando TDD (Test-Driven Development). No podría comenzar un proyecto como eso usando el desarrollo tradicional: no soy “proficient” en Javascript, todavía. Usando TDD es la manera de comenzar a dominar los patrones y giros de Javascript. Mientras tanto, estoy escribiendo un intérprete Javascript en C#, para entender su sintaxis y semántica. El código está ahora en:

https://github.com/ajlopez/AjScript

La semana pasado, comencé a usar el framework de TDD en Javascript QUnit, en un proyecto de un cliente. Pueden bajarlo desde:

https://github.com/jquery/qunit

Despues de expandir el contenido (yo bajé el archivo .zip), pueden lanzar el index.html en el directorio test. El resultado:

¿Cómo empezamos con nuestros propios tests? Copié los archivos qunit.js, qunit.css a un nuevo directorio, y también copié ahí el código  JQuery. Escribí un nuevo index.html con el contenido:

<html>
<head>
<meta charset="UTF-8" />
<title>QUnit First Test</title><link rel="stylesheet" href="qunit.css" type="text/css" media="screen"><script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="qunit.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit First Test</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div><h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol><div id="qunit-fixture">test markup</div></body>
</html>

El archivo referencia a JQuery y a QUnit. El contenido de la página es importante: QUnit llenará esas secciones con los resultados de los tests. Si ven el index.html en el navegador:

No hay tests, todavía. Antes del tag de cierre </body> agregué el test más simple:

<script type="text/javascript">
	
    test("First Test", function() {
	same(3-1,2);
    });</script>

Refrescando la página, el test está en verde:

Noten que uso el $ de JQuery para registrar código que se ejecuta AL FINAL de la carga del documento.

Pueden agregar algún test para el clásico Calculator:

test("Calculator", function() {
    var calculator = new Calculator();
    equal(calculator.add(3,2), 5);});

Ahora, el test da rojo:

Escribí el nuevo archivo calculator.js, con código casi mínimo para pasar el test:

function Calculator() {
	this.add = function(x, y) { return x+y; }
}

Lo agregué referenciado en el index.html:

	<script type="text/javascript" src="calculator.js"></script>

y recargué la página:

Todo Ok! Pueden usar su editor preferido. No hace falta una IDE. 

Y pueden seguir aprendiendo Javascript (funciones como clases, prototipos, namespaces, alcance de variables, closures, etc..) escribiendo código Y USANDO TDD.

Enlaces que consulté:

Script Junkie | jQuery Test-Driven Development http://msdn.microsoft.com/en-us/scriptjunkie/ff452703.aspx

QUnit – jQuery JavaScript Library

http://docs.jquery.com/QUnit

Mis enlaces

http://delicious.com/ajlopez/javascript+tdd

Pueden bajar este ejemplo simple desde mi Skydrive: QUnit01.zip. Próximos pasos: escribir sobre AjLispJs, el intérprete Lisp que estoy escribiendo usando TDD.

Nos leemos!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

Leave a Reply

Your email address will not be published. Required fields are marked *