QUnit - Guía rápida

La prueba es el proceso de verificar la funcionalidad de la aplicación si está funcionando según los requisitos y para asegurarse de que, a nivel de desarrollador, las pruebas unitarias entren en escena. La prueba unitaria es la prueba de una sola entidad (clase o método). Las pruebas unitarias son muy esenciales para que toda organización de software ofrezca productos de calidad a sus clientes.

Las pruebas unitarias se pueden realizar de dos formas, como se menciona en la siguiente tabla.

Prueba manual Prueba automatizada
La ejecución de los casos de prueba manualmente sin ningún soporte de herramientas se conoce como prueba manual. Tomar el soporte de la herramienta y ejecutar los casos de prueba utilizando la herramienta de automatización se conoce como prueba de automatización.
Consume mucho tiempo y es tedioso. Dado que los casos de prueba son ejecutados por recursos humanos, es muy lento y tedioso. Automatización rápida. Ejecuta casos de prueba significativamente más rápido que los recursos humanos.
Gran inversión en recursos humanos. Dado que los casos de prueba deben ejecutarse manualmente, se requieren más probadores. Menor inversión en recursos humanos. Los casos de prueba se ejecutan utilizando una herramienta de automatización, por lo que se requiere menos cantidad de probadores.
Menos confiable, ya que es posible que las pruebas no se realicen con precisión cada vez debido a errores humanos. Más confiable. Las pruebas de automatización realizan exactamente la misma operación cada vez que se ejecutan.
No programable. No se puede realizar ninguna programación para escribir pruebas sofisticadas, que obtienen información oculta. Programable. Los evaluadores pueden programar pruebas sofisticadas para revelar información oculta.

¿Qué es QUnit?

QUnit es un marco de pruebas unitarias para el lenguaje de programación JavaScript. Es importante en el desarrollo basado en pruebas y lo utilizan los proyectos jQuery, jQuery UI y jQuery Mobile. QUnit es capaz de probar cualquier base de código JavaScript genérica.

QUnit promueve la idea de "primero probar y luego codificar", que enfatiza la configuración de los datos de prueba para un fragmento de código, que se puede probar primero y luego implementar. Este enfoque es como "probar un poco, codificar un poco, probar un poco, codificar un poco ...", lo que aumenta la productividad del programador y la estabilidad del código del programa, reduciendo el estrés del programador y el tiempo dedicado a depurar.

Características de QUnit

QUnit es un marco de código abierto que se utiliza para escribir y ejecutar pruebas. Las siguientes son sus características más destacadas:

  • QUnit proporciona afirmaciones para probar los resultados esperados.

  • QUnit proporciona accesorios de prueba para ejecutar pruebas.

  • Las pruebas QUnit permiten escribir código más rápido, lo que aumenta la calidad.

  • QUnit es elegantemente simple. Es menos complejo y lleva menos tiempo.

  • Las pruebas QUnit se pueden ejecutar automáticamente y verifican sus propios resultados y brindan retroalimentación inmediata. No es necesario revisar manualmente un informe de resultados de prueba.

  • Las pruebas QUnit se pueden organizar en conjuntos de pruebas que contienen casos de prueba e incluso otros conjuntos de pruebas.

  • QUnit muestra el progreso de la prueba en una barra que es verde si la prueba va bien y se vuelve roja cuando falla una prueba.

¿Qué es un caso de prueba unitario?

Un caso de prueba unitario es una parte del código que garantiza que otra parte del código (método) funcione como se espera. Para lograr los resultados deseados rápidamente, se requiere un marco de prueba. QUnit es un marco de prueba unitario perfecto para el lenguaje de programación JavaScript.

Un caso de prueba unitario escrito formal se caracteriza por una entrada conocida y por una salida esperada, que se resuelve antes de ejecutar la prueba. La entrada conocida debe probar una condición previa y la salida esperada debe probar una condición posterior.

Debe haber al menos dos casos de prueba unitarios para cada requisito: una prueba positiva y una prueba negativa. Si un requisito tiene sub-requisitos, cada sub-requisito debe tener al menos dos casos de prueba como positivos y negativos.

Hay dos formas de utilizar QUnit.

  • Local Installation - Puede descargar la biblioteca QUnit en su máquina local e incluirla en su código HTML.

  • CDN Based Version - Puede incluir la biblioteca QUnit en su código HTML directamente desde Content Delivery Network (CDN).

Instalación local

  • Ve a la https://code.jquery.com/qunit/ para descargar la última versión disponible.

  • Coloque el descargado qunit-git.js y qunit-git.css archivo en un directorio de su sitio web, por ejemplo, / jquery.

Ejemplo

Puedes incluir qunit-git.js y qunit-git.css archivos en su archivo HTML de la siguiente manera:

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

Esto producirá el siguiente resultado:

Versión basada en CDN

Puede incluir la biblioteca QUnit en su código HTML directamente desde Content Delivery Network (CDN).

Estamos utilizando la versión jQuery CDN de la biblioteca a lo largo de este tutorial.

Ejemplo

Reescribamos el ejemplo anterior usando la biblioteca QUnit de jQuery CDN.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

Esto producirá el siguiente resultado:

Ahora le mostraremos un proceso paso a paso para comenzar con QUnit usando un ejemplo básico.

Importar qunit.js

qunit.js de la biblioteca Qunit representa el corredor de pruebas y el marco de pruebas.

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

Importar qunit.css

qunit.css de la biblioteca Qunit diseña la página del conjunto de pruebas para mostrar los resultados de la prueba.

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

Agregar accesorio

Agregue dos elementos div con id = "qunit" y "qunit-fixture". Estos elementos div son necesarios y proporcionan el accesorio para las pruebas.

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

Crear una función para probar

function square(x) {
   return x * x;
}

Crear un caso de prueba

Realice una llamada a la función QUnit.test, con dos argumentos.

  • Name - El nombre de la prueba para mostrar los resultados de la prueba.

  • Function - Código de prueba de función, que tiene una o más afirmaciones.

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

Ejecutar la prueba

Ahora veamos el código completo en acción.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

Cargue la página en el navegador. El corredor de pruebas llamaQUnit.test()cuando la página se carga y agrega la prueba a una cola. La ejecución del caso de prueba es aplazada y controlada por el ejecutor de la prueba.

Verificar la salida

Debería ver el siguiente resultado:

  • Header- El encabezado del conjunto de pruebas muestra el título de la página, una barra verde cuando se pasan todas las pruebas. De lo contrario, una barra roja cuando al menos una prueba ha fallado, una barra con tres casillas de verificación para filtrar los resultados de la prueba y una barra azul con el texto navigator.userAgent para mostrar los detalles del navegador.

  • Hide passed tests checkbox - Ocultar los casos de prueba aprobados y mostrar solo los casos de prueba fallidos.

  • Check for globals checkbox- Para mostrar la lista de todas las propiedades en el objeto de ventana, antes y después de cada prueba, luego verifique las diferencias. La modificación de las propiedades no pasará la prueba.

  • No try-catch checkbox - Para ejecutar casos de prueba fuera de un bloque try-catch para que, en caso de que una prueba arroje una excepción, el testrunner muera y muestre la excepción nativa.

  • Summary- Muestra el tiempo total necesario para ejecutar los casos de prueba. Total de casos de prueba ejecutados y afirmaciones fallidas.

  • Contents- Muestra los resultados de la prueba. Cada resultado de la prueba tiene el nombre de la prueba seguido de afirmaciones fallidas, aprobadas y totales. Se puede hacer clic en cada entrada para obtener más detalles.

API importantes de QUnit

Algunas de las categorías importantes de QUnit son:

No Señor. Categoría Funcionalidad
1 Afirmar Un conjunto de métodos de aserción.
2 Control asincrónico Para operaciones asincrónicas.
3 Devoluciones de llamada Al integrar QUnit en otras herramientas, como servidores de CI, estas devoluciones de llamada se pueden utilizar como API para leer los resultados de la prueba.
4 Configuración y utilidades Estos métodos y propiedades se utilizan como ayudantes de utilidad y para configurar QUnit. Por ejemplo, para ajustar el comportamiento del tiempo de ejecución directamente, amplíe la API de QUnit a través de aserciones personalizadas, etc.
5 Prueba Para probar operaciones.

Categoría: Afirmar

Proporciona un conjunto de métodos de aserción.

No Señor. Métodos y descripción
1

async()

Indique a QUnit que espere una operación asincrónica.
2

deepEqual()

Una comparación recursiva profunda, trabajando en tipos primitivos, matrices, objetos, expresiones regulares, fechas y funciones.
3

equal()

Una comparación no estricta, aproximadamente equivalente a assertEquals de JUnit.
4

expect()

Especifique cuántas afirmaciones se espera que se ejecuten dentro de una prueba.
5

notDeepEqual()

Una comparación recursiva profunda invertida, que trabaja en tipos primitivos, matrices, objetos, expresiones regulares, fechas y funciones.
6

notEqual()

Una comparación no estricta, comprobando la desigualdad.
7

notOk()

Una verificación booleana, inversa a ok () y assert.ok () de CommonJS, y equivalente a assertFalse () de JUnit. Pasa si el primer argumento es falso.
8

notPropEqual()

Una comparación estricta de las propiedades propias de un objeto, comprobando la desigualdad.
9

notStrictEqual()

Una comparación estricta, comprobando la desigualdad.
10

ok()

Una verificación booleana, equivalente a assert.ok () de CommonJS y assertTrue () de JUnit. Pasa si el primer argumento es verdadero.
11

propEqual()

Una comparación estricta de tipos y valores de las propiedades propias de un objeto.
12

push()

Informar el resultado de una aserción personalizada.
13

strictEqual()

Una estricta comparación de tipos y valores.
14

throws()

Pruebe si una devolución de llamada arroja una excepción y, opcionalmente, compare el error arrojado.

Categoría: Control asíncrono

Proporciona un conjunto de operaciones asincrónicas.

No Señor. Métodos y descripción
1

async()

Indique a QUnit que espere una operación asincrónica.
2

QUnit.asyncTest()

ANULADO: agregue una prueba asincrónica para ejecutar. La prueba debe incluir una llamada a QUnit.start ().
3

QUnit.start()

PARCIALMENTE DESPRECADO: Comience a ejecutar las pruebas nuevamente después de que se detuvo el testrunner. Consulte QUnit.stop () y QUnit.config.autostart.
4

QUnit.stop()

ANULADO: Aumente el número de llamadas a QUnit.start () que el testrunner debe esperar antes de continuar.
5

QUnit.test()

Agregue una prueba para ejecutar.

Categoría: devoluciones de llamada

Al integrar QUnit en otras herramientas como los servidores de CI, estas devoluciones de llamada se pueden utilizar como una API para leer los resultados de la prueba.

No Señor. Métodos y descripción
1

QUnit.begin()

Registre una devolución de llamada para que se active cuando comience la suite de pruebas.
2

QUnit.done()

Registre una devolución de llamada para que se active cuando finalice la suite de pruebas.
3

QUnit.log()

Registre una devolución de llamada para que se active siempre que se complete una afirmación.
4

QUnit.moduleDone()

Registre una devolución de llamada para que se active cada vez que finalice un módulo.
5

QUnit.moduleStart()

Registre una devolución de llamada para que se active cada vez que comience un módulo.
6

QUnit.testDone()

Registre una devolución de llamada para que se active cuando finalice una prueba.
7

QUnit.testStart()

Registre una devolución de llamada para que se active cada vez que comience una prueba.

Categoría: Configuración y utilidades

Estos métodos y propiedades se utilizan como ayudantes de utilidad y para configurar QUnit. Por ejemplo, para ajustar el comportamiento del tiempo de ejecución directamente, amplíe la API de QUnit a través de aserciones personalizadas, etc.

No Señor. Métodos y descripción
1

QUnit.assert

Espacio de nombres para las aserciones de QUnit.
2

QUnit.config

Configuración para QUnit.
3

QUnit.dump.parse()

Volcado de datos avanzado y extensible para JavaScript.
4

QUnit.extend()

Copie las propiedades definidas por el objeto de mezcla en el objeto de destino.
5

QUnit.init()

ANULADO: reinicialice el corredor de prueba.
6

QUnit.push()

ANULADO: informe el resultado de una aserción personalizada.
7

QUnit.reset()

DEPRECATED: reinicia el dispositivo de prueba en el DOM.
8

QUnit.stack()

Devuelve una cadena de una sola línea que representa el seguimiento de la pila (pila de llamadas).

Categoría: Prueba

Proporciona un conjunto de operaciones de prueba.

No Señor. Métodos y descripción
1

QUnit.assert

Espacio de nombres para las aserciones de QUnit.
2

QUnit.asyncTest()

ANULADO: agregue una prueba asincrónica para ejecutar. La prueba debe incluir una llamada a QUnit.start ().
3

QUnit.module()

Agrupe las pruebas relacionadas bajo una sola etiqueta.
4

QUnit.only()

Agrega una prueba para ejecutar exclusivamente, evitando que se ejecuten todas las demás pruebas.
5

QUnit.skip()

Agrega un objeto similar a una prueba para ser omitido.
6

QUnit.test()

Agrega una prueba para ejecutar.

Todas las afirmaciones están en la categoría de afirmación.

Esta categoría proporciona un conjunto de métodos de afirmación útiles para escribir pruebas. Solo se registran las afirmaciones fallidas.

No Señor. Métodos y descripción
1

async()

Indique a QUnit que espere una operación asincrónica.
2

deepEqual()

Una comparación recursiva profunda, trabajando en tipos primitivos, matrices, objetos, expresiones regulares, fechas y funciones.
3

equal()

Una comparación no estricta, aproximadamente equivalente a assertEquals de JUnit.
4

expect()

Especifique cuántas afirmaciones se espera que se ejecuten dentro de una prueba.
5

notDeepEqual()

Una comparación recursiva profunda invertida, que trabaja en tipos primitivos, matrices, objetos, expresiones regulares, fechas y funciones.
6

notEqual()

Una comparación no estricta, comprobando la desigualdad.
7

notOk()

Una verificación booleana, inversa a ok () y assert.ok () de CommonJS, y equivalente a assertFalse () de JUnit. Pasa si el primer argumento es falso.
8

notPropEqual()

Una comparación estricta de las propiedades propias de un objeto, comprobando la desigualdad.
9

notStrictEqual()

Una comparación estricta, comprobando la desigualdad.
10

ok()

Una verificación booleana, equivalente a assert.ok () de CommonJS y assertTrue () de JUnit. Pasa si el primer argumento es verdadero.
11

propEqual()

Una comparación estricta de tipos y valores de las propiedades propias de un objeto.
12

push()

Informar el resultado de una aserción personalizada.
13

strictEqual()

Una estricta comparación de tipos y valores.
14

throws()

Pruebe si una devolución de llamada arroja una excepción y, opcionalmente, compare el error arrojado.

Intentemos cubrir la mayoría de los métodos mencionados anteriormente en un ejemplo.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "TestSuite", function( assert ) {
            //test data
            var str1 = "abc";
            var str2 = "abc";
            var str3 = null;
            var val1 = 5;
            var val2 = 6;
            var expectedArray = ["one", "two", "three"];
            var resultArray =  ["one", "two", "three"];

            //Check that two objects are equal
            assert.equal(str1, str2, "Strings passed are equal.");
			
            //Check that two objects are not equal
            assert.notEqual(str1,str3, "Strings passed are not equal.");

            //Check that a condition is true
            assert.ok(val1 < val2, val1 + " is less than " + val2);
			
            //Check that a condition is false
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

            //Check whether two arrays are equal to each other.
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
			
            //Check whether two arrays are equal to each other.
            assert.notDeepEqual(expectedArray, ["one", "two"],
               "Arrays passed are not equal.");			
         });
      </script>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

Este capítulo explica el procedimiento de ejecución de métodos en QUnit, que establece qué método se llama primero y cuál después. A continuación se muestra el procedimiento de ejecución de los métodos de la API de prueba QUnit con un ejemplo.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

Así es el procedimiento de ejecución de QUnit.

  • El módulo se utiliza para agrupar casos de prueba.

  • beforeEach() El método se ejecuta para cada caso de prueba, sin embargo, antes de ejecutar el caso de prueba.

  • afterEach() El método se ejecuta para cada caso de prueba, sin embargo, después de la ejecución del caso de prueba.

  • Entre beforeEach() y afterEach() cada caso de prueba se ejecuta.

  • Vocación QUnit.module() nuevamente, simplemente restablezca cualquier función beforeEach / afterEach definida por otro módulo previamente.

A veces sucede que nuestro código no está listo y el caso de prueba escrito para probar ese método / código falla si se ejecuta. QUnit.skipayuda en este sentido. No se ejecutará un método de prueba escrito con el método Skip. Veamos el método Skip en acción.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

A veces sucede que nuestro código no está listo y el caso de prueba escrito para probar ese método / código falla, si se ejecuta. QUnit.onlyayuda en este sentido. Se ejecutará un método de prueba escrito usando solo el método mientras que otras pruebas no se ejecutarán. Si se especifica más de un solo método, solo se ejecutará el primero. Veamos solo el método en acción.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.only( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		      
         QUnit.test( "test case 3", function( assert ) {
            assert.ok( true, "Module A: in test case 3" );
         });
		 
         QUnit.test( "test case 4", function( assert ) {
            assert.ok( true, "Module A: in test case 4" );
         });	 
      </script>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

Para cada operación asincrónica en QUnit.test() devolución de llamada, uso assert.async(), que devuelve una función "realizada" que debería llamarse cuando la operación se haya completado. assert.async () acepta recuentos de llamadas como parámetro. La devolución de llamada devuelta por assert.async () arrojará un Error, si se invoca más que el recuento de llamadas aceptadas, si se proporciona. Cadadone()llamada se suma al recuento de llamadas. Después de que se completa cada llamada, se realiza la prueba.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "multiple call test()", function( assert ) {
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

Nosotros podemos usar assert.expect()función para comprobar el número de afirmaciones realizadas en la prueba. En el siguiente ejemplo, esperamos que se realicen tres afirmaciones en la prueba.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "multiple call test()", function( assert ) {
            assert.expect( 3 );
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

Al integrar QUnit en otras herramientas como los servidores de CI, estas devoluciones de llamada se pueden utilizar como API para leer los resultados de las pruebas. A continuación se muestra el procedimiento de ejecución del método API de devolución de llamada QUnit con un ejemplo.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         //Register a callback to fire whenever a testsuite starts.
         QUnit.begin(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = "<br/>" + 
               "QUnit.begin- Test Suite Begins " + "<br/>" + 
               "Total Test: " + details.totalTests;
         });

         //Register a callback to fire whenever a test suite ends.		 
         QUnit.done(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.done - Test Suite Finised" +  "<br/>" + "Total: " +  
               details.total + " Failed: " + details.failed + " Passed: 
               " + details.passed;
         });
		 
         //Register a callback to fire whenever a module starts.
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" + 
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });
		 
         //Register a callback to fire whenever a module ends.	  
         QUnit.moduleDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.moduleDone - Module Finished " +  "<br/>" + details.name + 
               " Failed/total: " + details.failed +"/" + details.total ;
         });
		 
         //Register a callback to fire whenever a test starts.
         QUnit.testStart(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testStart - Test Begins " +  "<br/>" + details.module +" 
               " + details.name;
         });
		 
         //Register a callback to fire whenever a test ends.
         QUnit.testDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testDone - Test Finished " +  "<br/>" + details.module +" " 
               + details.name + "Failed/total: " + details.failed +" " + details.total+ 
               " "+ details.duration;
         });
		 
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });	 
      </script>

      <div id = "console" ></div>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

Los módulos con funciones de prueba agrupadas se utilizan para definir módulos anidados. QUnit ejecute pruebas en el módulo principal antes de profundizar en los anidados, incluso si se declaran primero. losbeforeEach y afterEachlas devoluciones de llamada en una llamada de módulo anidado se apilarán en el modo LIFO (último en entrar, primero en salir) a los ganchos principales. Puede especificar el código que se ejecutará antes y después de cada prueba utilizando el argumento y los ganchos.

Los ganchos también se pueden utilizar para crear propiedades que se compartirán en el contexto de cada prueba. Cualquier propiedad adicional en el objeto hooks se agregará a ese contexto. El argumento hooks es opcional si llama a QUnit.module con un argumento de devolución de llamada.

La devolución de llamada del módulo se invoca teniendo el contexto como entorno de prueba, con las propiedades del entorno copiadas en las pruebas, los ganchos y los módulos anidados del módulo.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "parent module", function( hooks ) {
            hooks.beforeEach( function( assert ) {
               assert.ok( true, "beforeEach called" );
            });

            hooks.afterEach( function( assert ) {
               assert.ok( true, "afterEach called" );
            });

            QUnit.test( "hook test 1", function( assert ) {
               assert.expect( 2 );
            });

            QUnit.module( "nested hook module", function( hooks ) {
               // This will run after the parent module's beforeEach hook
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

               // This will run before the parent module's afterEach
               hooks.afterEach( function( assert ) {
                  assert.ok( true, "nested afterEach called" );
               });

               QUnit.test( "hook test 2", function( assert ) {
                  assert.expect( 4 );
               });
            });
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

Verificar la salida

Debería ver el siguiente resultado:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved