Introducción a las pruebas de frontend

Cómo comenzar a probar aplicaciones frontend usando Mocha y Chai

Advertencia: esta publicación es antigua y es posible que no refleje el estado actual de la técnica.

Mocha es una herramienta de prueba increíble y versátil. Hay muchos marcos de prueba por ahí, y elijo Mocha por su popularidad y facilidad de uso.

Primero veamos cómo ejecutar las pruebas en un navegador. Descargar


Coloque los archivos mocha.js, chai.js, chai-jquery.js respectivos en una prueba / subcarpeta en su sitio.

Elija su archivo index.html y cárguelos, luego configuraremos Mocha para usar el estilo de prueba BDD y lo cargaremos en un archivo llamado test.web.js, que albergará nuestras reglas de prueba.

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

Dentro de tu cuerpo, pon un div # mocha:

<div id="mocha"></div>

el archivo test / test.web.js es la pieza principal del juego y albergará las reglas de prueba.

describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      [1,2,3].indexOf(5).should.equal(-1);
      [1,2,3].indexOf(0).should.equal(-1);
    })
  })
})

describe(‘After this’, function() { it(‘should be logged in’, function(done) { expect($(’#the-main-div’)).to.exist; done(); }); });

Esas pruebas ahora se pueden ejecutar dentro del navegador, abriendo la consola del navegador y escribiendomocha.run().

Esto es genial, ya que mientras se ejecutan las pruebas, puede ver cómo cambia la pantalla y leer los mensajes de la consola.

UsandoPhantomJS- una implementación de WebKit sin cabeza - puede ejecutar las pruebas en la terminal. La desventaja es que PhantomJS no es el entorno real donde se ejecutará su código, pero es mejor para la detección automática de problemas.

¿Cómo hacerlo? Descargue e instale PhantomJS. Instale Mocha usando el globalnpminstalación:npm install -g mocha. Descarga este paquetehttps://github.com/Backbonist/front-testsy colóquelo en el directorio de su proyecto, bajo prueba / por ejemplo.

Luego puede ejecutar sus pruebas llamandophantomjs run-mocha.js http://test-site.com

El problema con este enfoque es que no puede ejecutar mediante programación las pruebas que se ejecutan en el entorno real donde se ejecutarán. Eso no es realmente un problema cuando todavía se están construyendo prototipos y desarrollando antes de abrirlos al público, pero cuando está en producción, no desea ejecutar el conjunto de pruebas desde el navegador cada vez que desea probar. En todos los navegadores, ¿verdad?Testemestá hecho para esto. Es solo un corredor de pruebas, independiente del marco de prueba, por lo que puede ejecutar Mocha, Jasmine, QUnit o lo que usted use.

  1. $ npm install testem -g

  2. vaya al directorio de prueba de su aplicación, escriba$ testem

  3. abra el navegador en la ubicación especificada para ejecutar las pruebas.

Puede ejecutar las pruebas en cualquier navegador que desee lanzándolas, o decirle a testem que las ejecute por usted lanzando

$ testem -l Chrome,Safari

También puede utilizar testem en modo CI (Integración continua).

$ testem ci

esto lanza automáticamente las pruebas que el navegador especificó y genera en un formato llamado TAP, que es legible por nosotros los humanos, y se puede ingresar en un servidor de integración continua para automatizar el proceso.

Prueba del navegador

Probablemente desarrollará su sitio en Chrome o Firefox: sus herramientas de desarrollo son increíbles y lo ayudan a acelerar el proceso.

Google Chrome tiene versiones independientes que puede utilizar para probar su sitio web. La versión estable y normal, y Chrome Canary.

Canary es un navegador que puede ejecutar junto con el Google Chrome normal. Su ventaja es que obtiene actualizaciones diarias de lo que está comprometido con las fuentes de Chromium, y puede obtener acceso a las nuevas funciones 11 semanas antes de que se envíen al canal principal estable de Chrome, yerrores de archivosi necesitas. Incluso puede configurarlo como su navegador predeterminado.

Mozilla tiene su propioFirefox todas las nochesque hace lo mismo que Chrome Canary: las actualizaciones diarias llegarán a su navegador.

Es posible que desee utilizar elCanal de desarrollo de Chrome, yFirefox Auroraque representan una versión "menos avanzada" que Canary / Nightly.

Para probar Safari, puede utilizar elCompilaciones nocturnas de WebKit. Cuando usa WebKit, básicamente está ejecutando Safari con una versión actualizada del motor subyacente.


Más tutoriales de devtools: