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