QUnit - Uso básico

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.