Test de javascript con QUnit
Contenido
¿Qué es QUnit?
QUnit es una potente herramienta para testear javascript.
Escribir test unitarios con QUnit
Lo primero que se debe hacer es configurar el ambiente de test.
Para utilizar QUnit se deben usar los siguientes archivos: qunit.js y qunit.css. El qunit.js es un script con la libreria, y el qunit.css es una hoja de estilo y es opcional.
<link rel="stylesheet" type="text/css" href="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.css" media="all" />
<script type="text/javascript" src="http://github.com/jquery/QUnit/raw/master/QUnit/QUnit.js"></script>
Además de estos archivos, nuestras aplicaciones tienen que contar con una serie de etiquetas HTML donde se mostrarán los resultados de nuestros tests:
QUnit Test Suite
A continuación se deja un ejemplo completo de un html donde se incluyen los archivos y las etiquetas html que necesita QUnit.
<!DOCTYPE html> <html> <head> <title>Dos Ideas - QUnit</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script> <script type="text/javascript" src="dosIdeas.js"></script>
<script type="text/javascript" src="dosIdeasTest.js"></script>
</head> <body>
QUnit example
</body> </html>
El codigo que se va a testear debe estar en dosIdeas.js y los test en dosIdeasTest.js. Para correr los test simplemente se debe abrir el html en el browser.
El archivo dosIdeasTest.js:
$(document).ready(function(){
module("dosIdeasTest");
test('probando validarImporte()', function() { ok(validarImporte("1112"),'El importe es 1112'); ok(!validarImporte("11A12"),'El importe es 11A12'); ok(!validarImporte("A1112"),'El importe es A1112'); ok(!validarImporte("1112A"),'El importe es 1112A'); })
test('probando extraerSubCadena()', function() { equal(extraerSubCadena("dosIdeas",3,5),'Ideas'); equal(extraerSubCadena("dosIdeas",3,5),'deas'); })
});
El archivo dosIdeas.js:
function validarImporte(importe) {
if (importe.length == 0) {
return false;
} else {
if (!/^[1-9][0-9]*(?:\.)?[0-9]?[0-9]?$/.test(importe.replace(',','.'))) {
return false;
}
}
return true;
}
function extraerSubCadena(cadena, posicionInicial, longitud) { return cadena.substr(posicionInicial, longitud); }
El resultado de los test quedan de la siguiente manera:
Asserts
Qunit nos provee de una serie de asserts para nuestros test. En el ejemplo anterior se hace mención de ok y equal. A continuación vamos a dar más detalle de los mismos y de nuevos.
ok: Es para validar resultado booleanos (es el equivalente a assertTrue de JUnit).
La sintaxis es la siguiente: ok(estado, mensaje).
estado: es una expresión booleana a evaluar.
mensaje: es el mensaje a mostrar cuando finaliza el assert.
Ejemplo:
ok(validarImporte("1112"),'El importe es 1112');
equal: Valida que el resultado obtenido es igual al esperado (es similiar al assertEqual de JUnit).
La sintaxis es la siguiente: equal(actual, esperado, mensaje)
actual: es el objeto a evaluar.
esperado: es el resultado esperado.
mensaje: es el mensaje a mostrar cuando finaliza el assert.
Ejemplo:
equal(extraerSubCadena("dosIdeas",3,5),'Ideas');
Integracion continua con Jenkins
Qunit-test-runner (QTR) es un proyecto que te permite integrar tus test de QUnit mediante una simple tarea ant.
QTR provee un entorno de JavaScript dentro de una JVM para la ejecucion de los test de QUnit y el reporte de los resultados en un formato JUnit XML standard. Por lo tanto, QTR permite una fácil integracion con los sistemas de CI (Integracion Continua) como Jenkins/Hudson, dando visibilidad inmediata de los test de QUnit junto a los test de JUnit.
- Bajar la libreria qunit-test-runner-0.0.1-SNAPSHOT-jar-with-dependencies.jar y agregarla en el classpath de Run Test (en Netbeans) del proyecto.
- Generar un <nombre del Test>Recipe.js con la funcion loadFiles utilizada por QTR.
Ejemplo: pagoConTarjetaTestRecipe.js
loadFiles([ "../../siteApache/home/js/jquery-1.3.2.js", "../../siteApache/home/js/validate.js", "../../siteApache/home/js/pagoConTarjeta.js", "pagoConTarjetaTest.js" ])
- Agregar las siguientes tareas ant al build.xml del proyecto.
<target name="qunit" depends="init">
<path id="qunit-test-runner.path">
<fileset dir="${basedir}">
<include name="${file.reference.qunit-test-runner-0.0.1-SNAPSHOT-jar-with-dependencies.jar}" />
</fileset>
</path>
<taskdef classpathref="qunit-test-runner.path" resource="tasks.properties"/>
</target>
<target name="report-jstest-pnt" depends="qunit">
<mkdir dir="${report.dir}" />
<qunit basedirectory="${basedir}/${test.javascript.dir}"
reportdirectory="${report.dir}">
</qunit>
<mkdir dir="${report.dir}/html" />
<junitreport todir="${report.dir}/html">
<fileset dir="${report.dir}">
<include name="TEST-qunit-*.xml"/>
</fileset>
<report format="frames" todir="${report.dir}/html"/>
</junitreport>
</target>
- Activar en el proyecto de Jenkins, la opcion publish HTML reports y apuntar al directorio donde se generan los reportes HTML a la pagina index.html
