Introducción a las pruebas unitarias de JavaScript con Qunit
Por lo general, es una buena práctica tener pruebas unitarias automatizadas mientras se desarrolla el código. En las pruebas unitarias, probamos la unidad más pequeña del código para un comportamiento en particular. La prueba unitaria nos ayuda a encontrar errores en el código al principio del ciclo de desarrollo.
Dhananjay Kumar
8min read
Esencialmente, una prueba unitaria es la pieza de código que verifica el comportamiento de una unidad particular del código en la fase de desarrollo. El ejecutor de pruebas puede ejecutar pruebas unitarias varias veces para verificar el comportamiento de una unidad de código determinada para diferentes conjuntos de entrada. Hoy en día, la mayoría de los desarrolladores de aplicaciones se adhieren al enfoque ágil y TDD.
En el enfoque de desarrollo basado en pruebas, primero se escribe una prueba unitaria y, cuando se produce un error, se escribe un código de aplicación para superar la prueba. En JavaScript, las pruebas unitarias no son muy diferentes a otros lenguajes de programación. Para realizar pruebas unitarias o TDD en JavaScript, necesita un marco de pruebas. Hay muchos marcos de prueba de JavaScript populares disponibles, entre ellos:
- Mocha
- Jasmine
- QUnit
- JSUnit
En esta publicación, nos centraremos en QUnit, un marco de pruebas unitarias proporcionado por el equipo de jQuery. Proporciona un amplio conjunto de aserciones de prueba, una interfaz de usuario del conjunto de pruebas altamente informativa, compatibilidad con devolución de llamada sincrónica y asincrónica, compatibilidad con el módulo de prueba y más. En esta publicación, cubriremos lo siguiente:
- Escribir la primera prueba unitaria
- Descripción insuficiente de la interfaz de usuario del conjunto de pruebas
- Un vistazo a las afirmaciones
- Agrupación de las pruebas
Escribir la primera prueba
Comencemos con la configuración de QUnit para las pruebas unitarias de JavaScript. Debe agregar una referencia a los dos archivos QUnit en la página HTML. Puede tener archivos localmente en el proyecto o puede usar la referencia de la CDN de jQuery. Voy a usar la opción CDN como se muestra a continuación:
Source file
<head>
<title>Test Page</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.16.0.css">
<script src="//code.jquery.com/qunit/qunit-1.16.0.js"></script>
</head>
A continuación, necesita dos div en el cuerpo de la página HTML, y uno debe tener el id qunit.
Source file
1 <body> 2 <div id="qunit"></div> 3 <div id="qunit-fixture"></div> 4 </body>
Hemos agregado referencia de qunit.js y qunit.css para configurar el entorno de prueba. Qunit.js es el ejecutor de pruebas y el marco de pruebas, y qunit.css proporciona estilo a la página del conjunto de pruebas.
Ahora sigamos adelante y escribamos una prueba básica. Estoy escribiendo las pruebas en el archivo test.js separado y agregué la referencia del archivo en la página HTML. Se escribe una prueba de saludo básica como se muestra a continuación:
Source file
QUnit.test("hello test", function (assert) {
assert.ok(1 == "1", "Passed!");
});
QUnit.test toma dos parámetros de entrada. El primer parámetro es el nombre de la prueba y el segundo parámetro es una función. La función contiene el código de prueba y puede contener cualquier número de aserciones.
En la prueba anterior, he incluido una simple aserción ok. La aserción ok afirmará que es verdadera, si el argumento se evalúa como verdadera. También toma el parámetro de entrada de cadena para mostrar el mensaje de resultado de la prueba. Cuando sigamos adelante y ejecutemos la prueba, deberíamos obtener el resultado como se muestra a continuación:
En el conjunto de pruebas, QUnit da el mensaje de que una de cada una pruebas ha pasado. Ahora cambiemos la prueba para que falle y examinemos cómo QUnit proporciona información sobre la prueba fallida. He modificado la prueba como se muestra a continuación:
Source file
QUnit.test("hello test", function (assert) {
assert.ok(1 == "2", "Passed!");
});
Una vez más, cuando ejecuto la prueba, QUnit dará información sobre la prueba fallida en el conjunto de pruebas como se muestra a continuación:
Para la prueba fallida, QUnit nos proporciona la siguiente información:
- Resultado esperado
- Actual result
- Diferencia
- Origen de la prueba fallida
Con esta información podemos encontrar fácilmente el origen y el motivo de la prueba fallida.
Understanding the Test Suite UI
En el conjunto de pruebas, QUnit mostrará los resultados de las pruebas. El encabezado del conjunto de pruebas muestra el título de la página de prueba y, debajo del encabezado, encontrará una barra verde o roja. La barra verde indica que se han superado todas las pruebas, mientras que la barra roja indica que al menos una prueba ha fallado. Debajo de la barra hay tres casillas de verificación:
- Hide passed tests
- Comprobar si hay globales
- Sin try-catch
Puede ocultar todas las pruebas aprobadas del conjunto de pruebas marcando la primera casilla. Esto es muy útil cuando tienes muchas pruebas y quieres encontrar pocas pruebas fallidas en el conjunto.
Al activar la casilla Comprobar globales, indica a QUnit que haga una lista de todas las propiedades del objeto de Windows antes y después de la ejecución de la prueba. QUnit comprobará las diferencias y, si encuentra alguna, la prueba fallará.
Al activar la casilla No try-catch, puede indicar a QUnit que inicie una excepción nativa cuando la prueba lance la excepción. En esta opción, QUnit se asegurará de que cuando el ejecutor de pruebas muera debido a una excepción en las pruebas, lance una excepción nativa en el navegador, lo que puede ser útil en la depuración.
Debajo del encabezado de la casilla, una barra azul muestra información sobre navigator.userAgent. Debajo de la barra azul hay un resumen de la prueba, que nos da información sobre el tiempo total que se tarda en ejecutar todas las pruebas. También proporciona información sobre el número de aserciones fallidas y aserciones pasadas.
Debajo del resumen de la prueba se encuentran los resultados de la prueba, que se muestran en forma de número con el nombre de la prueba junto al número. Junto al nombre de la prueba en el número de llaves de la aserción pasada, se muestra el número de aserciones fallidas y el número total de aserciones. En la esquina derecha encontrará el tiempo que tarda la prueba en particular. En el resultado de la prueba para cada aserción fallida, se muestra el resultado esperado, el resultado real, la diferencia y el origen de la prueba fallida.
Assertions
QUnit nos proporciona diferentes tipos de aserciones. Las aserciones son el componente más importante de las pruebas unitarias. En una prueba, afirmamos el resultado esperado con el resultado real, y el marco de pruebas compara estos dos resultados para producir los resultados. QUnit nos proporciona alrededor de 13 afirmaciones, entre ellas:
- ok()
- equal()
- deepEqual()
- async()
- expect()
- notDeepEqual()
- notEqual()
- notPropEqual()
- notStrictEqual()
- propEqual()
- push()
- lanzamientos()
- strictEqual()
En la siguiente sección echaremos un vistazo a dos de ellos y nos centraremos en las afirmaciones de artículos posteriores. La más simple de las aseveraciones es ok(). Se necesitan dos argumentos: el primero es la expresión que se va a evaluar y el segundo argumento opcional es el mensaje de resultado de la prueba.
Si la expresión se pasó porque el primer argumento se evalúa como verdadero, la aserción se pasa o se produce un error. Algunas de las aseveraciones ok se muestran a continuación:
Source file
QUnit.test("Test 1", function (assert) {
assert.ok(1 == "1", "1 is ok with 1 : OK");
assert.ok(true, "true is ok : OK");
assert.ok(false, "false is not ok : fails");
assert.ok(NaN, "NaN is not ok : fails");
assert.ok(null, "null is not ok : fails");
assert.ok(undefined, "undefined is not ok : fails");
});
En el conjunto de pruebas, puede ver que para NaN, se produce un error en la aserción indefinida y nula, etc. ok.
Echemos un vistazo a la misma afirmación. La aserción igual utiliza el operador == para comparar los argumentos reales y esperados. En toma dos argumentos obligatorios y uno opcional. El primer argumento es el valor real, el segundo es el valor esperado y el tercer argumento opcional es el mensaje de resultado de la prueba.
A continuación se muestran algunas de las afirmaciones equivalentes. Aquí paso dos argumentos para probar si son iguales o no:
Source file
QUnit.test("Test 1", function (assert) {
assert.equal(1,1, "1 is equal to 1 : PASS");
assert.equal(null,null, "null is equal to null : PASS");
assert.equal(0,false, "0 is equal to false : PASS");
assert.equal(0, "zero", "0 is not equal to zero : FAILS");
assert.equal("", "","Empty is equal to Empty : PASS");
});
En el conjunto de pruebas, puede ver el comportamiento de la aserción igual.
Agrupación de las pruebas
Las pruebas se pueden agrupar lógicamente usando el QUnit.module(). Un grupo de prueba determinado puede ejecutarse por su cuenta. Es una buena idea agrupar las pruebas para evitar efectos secundarios. Usando el módulo QUnit., las pruebas se pueden agrupar como se muestra a continuación:
Source file
QUnit.module("Test Group 1");
QUnit.test("Test 1 TG1", function (assert) {
assert.equal(1,1, "1 is equal to 1 : PASS");
});
QUnit.test("Test 2 TG1", function (assert) {
assert.ok(true, "this test will return true : PASS");
});
QUnit.module("Test Group 2");
QUnit.test("Test 1 TG2", function (assert) {
assert.equal(null,null, "null is equal to null : PASS");
});
QUnit.test("Test 2 TG2", function (assert) {
assert.ok(false, "this test will return true : FAIL");
});
En la interfaz de usuario del conjunto de pruebas, puede ver los resultados de las pruebas agrupados en el grupo de pruebas.
También puede filtrar para ver los resultados de las pruebas de un grupo de pruebas en particular seleccionando un grupo de pruebas en el menú desplegable debajo de la barra roja/verde.
Conclusión
En este post comenzamos con las pruebas unitarias de JavaScript con QUnit. Aprendimos a escribir nuestra primera prueba unitaria, discutimos la interfaz de usuario del conjunto de pruebas, exploramos los diferentes tipos de aserciones y revisamos la agrupación de pruebas. Estén atentos a futuros artículos en los que discutiremos otros temas de pruebas unitarias y QUnit en detalle.