hernandezblasantonio/dsos/documentacion/cliente/www/qunit

QUnit

QUnit es un framework para la realización de pruebas unitarias a código en JavaScript.

Una prueba unitaria establece la correcta o incorrecta ejecución de una unidad de código. En este caso la unidad de código sobre la cual se establecerán pruebas es una función, por lo tanto, una prueba unitaria establecerá la aplicación de una función y un valor esperado como resultado de dicha función, si la función regresa el valor esperado se considerará una prueba exitosa y en caso contrario será una prueba fallida.

Las pruebas unitarias se establecen mediante QUnit, quien las ejecuta y nos muestra mediante un documento HTML los resultados de haber ejecutado dichas pruebas unitarias.

La documentación de Qunit podrás encontrarla en http://api.qunitjs.com/category/all/.

Uso

  1. Crea el directorio $HOME/www/qunit y accede a él:

     alumno@servidor:~ $ mkdir -p $HOME/www/qunit
 alumno@servidor:~ $ cd $HOME/www/qunit

  2. Crea los directorios css/qunit y js/lib/qunit:

     alumno@servidor:~/www/qunit $ mkdir -p css/qunit js/lib/qunit

  3. Descarga los archivos de js y css de QUnit en los directorio anteriormente creados:

     alumno@servidor:~/www/qunit $ wget -c https://code.jquery.com/qunit/qunit-2.4.0.css -O css/qunit/qunit.css
 alumno@servidor:~/www/qunit $ wget -c https://code.jquery.com/qunit/qunit-2.4.0.js  -O js/lib/qunit/qunit.js
 alumno@servidor:~/www/qunit $ pwd && tree
 /home/alumno/www/qunit
 .
 ├── css
 │   └── qunit
 │       └── qunit.css
 ├── index.html
 └── js
     ├── codigo.js
     ├── lib
     │   └── qunit
     │       └── qunit.js
     └── tests
         └── codigo.js
 6 directories, 5 files

    La versión usada de QUnit es la 2.4.0.

  4. Crea el archivo index.html con el siguiente contenido (basado en el ejemplo encontrado en la página oficial de QUnit):

     <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>qunit</title>
   <link rel="stylesheet" href="css/qunit/qunit.css">
 </head>
 <body>
   <div id="qunit"></div>
   <div id="qunit-fixture"></div>
   <script src="js/lib/qunit/qunit.js"></script>
 </body>
 </html>

  5. Inicia a thttpd:

     alumno@servidor:~/www/qunit $ thttpd -D -p 8080 -nor -l -

  6. Accede a http://127.0.0.1:8080 para observar el resultado de ejecutar los test mediante QUnit, ninguno hasta el momento.

Suponiendo que tienes el archivo js/codigo.js con codigo a probar, puedes establecer tus pruebas unitarias en el archivo js/tests/codigo.js, vínculando ambos archivos a index.html mediante la etiqueta script:

<script src="js/codigo.js"></script>
<script src="js/tests/codigo.js"></script>

Tests

  1. En el archivo js/codigo.js se puede definir el siguiente módulo:

     var Codigo = (function() {
   var _sumatoria_hasta_el = function(final) {
     // Falta la implementación de esta función
   };

   return {
     "sumatoria_hasta_el": _sumatoria_hasta_el  
   };
 })();

  2. En el archivo js/tests/codigo.js se puede definir el siguiente conjunto de tests:

     QUnit.test("Tests de sumatoria_hasta_el", function(assert) {
     // 1
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(0),
         0,
         "Sumando hasta el 0: 0 + 0"
     );
     // 2
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(2),
         3,
         "Sumando hasta el 2: 0 + 1 + 2"
     );
     // 3
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(6),
         21,
         "Sumando hasta el 6: 0 + 1 + 2 + 3 + 4 + 5 + 6"
     );
     // 4
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(-4),
         0,
         "Dado un número negativo"
     );
     // 5
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(10.3),
         0,
         "Dado un número flotante"
     );
     // 6
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(true),
         0,
         "Dado un booleano"
     );
     // 7
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(""),
         0,
         "Dada una cadena de caracteres"
     );
     // 8
     assert.strictEqual(
         Codigo.sumatoria_hasta_el({}),
         0,
         "Dado un objeto"
     );
     // 9
     assert.strictEqual(
         Codigo.sumatoria_hasta_el([]),
         0,
         "Dado un arreglo"
     );
     // 10
     assert.strictEqual(
         Codigo.sumatoria_hasta_el(),
         0,
         "Sin parámetro"
     );
 });

  3. Accede a http://127.0.0.1:8080, obtendrás el documento HTML quien te indicará que los 9 tests establecidos en js/tests/codigo.js han fallado. Para hacer que los tests pasen edita el archivo js/codigo.js, implementando la función Codigo.sumatoria_hasta_el. Observa lo establecido por los tests:

    1. Cuando Codigo.sumatoria_hasta_el es aplicado con 0 debe regresar 0.
    2. Cuando Codigo.sumatoria_hasta_el es aplicado con 2 debe regresar 3.
    3. Cuando Codigo.sumatoria_hasta_el es aplicado con 6 debe regresar 21.
    4. Cuando Codigo.sumatoria_hasta_el es aplicado con un número negativo debe regresar 0.
    5. Cuando Codigo.sumatoria_hasta_el es aplicado con un número flotante debe regresar 0.
    6. Cuando Codigo.sumatoria_hasta_el es aplicado con un booleano debe regresar 0.
    7. Cuando Codigo.sumatoria_hasta_el es aplicado con una cadena de caracteres debe regresar 0.
    8. Cuando Codigo.sumatoria_hasta_el es aplicado con un objeto debe regresar 0.
    9. Cuando Codigo.sumatoria_hasta_el es aplicado con un arreglo debe regresar 0.
    10. Cuando Codigo.sumatoria_hasta_el es aplicado sin parámetro alguno debe regresar 0.

Tip: observa que pasa si implementas la función Codigo.sumatoria_hasta_el con lo siguiente y recargas el documento HTML:

var _sumatoria_hasta_el = function(final) {
   return 0;
};

Lecturas