Diferencia entre revisiones de «JasmineJs»
(→Fixtures) |
|||
| Línea 143: | Línea 143: | ||
}); | }); | ||
</code> | </code> | ||
| − | |||
| − | |||
---- | ---- | ||
| Línea 203: | Línea 201: | ||
[http://pivotal.github.com/jasmine/ Jasmine] | [http://pivotal.github.com/jasmine/ Jasmine] | ||
| − | [https://github.com/velesin/jasmine-jquery | + | [https://github.com/velesin/jasmine-jquery Repositorio de jasmine-jquery] |
| + | |||
| + | [https://github.com/mileskin/jasmine-fake-ajax Repositorio de jasmine-fake-ajax] | ||
Revisión del 17:59 14 mar 2013
Introducción
Objetivo:
- Testear el código Javascript de nuestra aplicación web.
Herramientas a usar
- jasmine
- jasmine-fakeAjax
- jasmine-jQuery
Jasmine
Es un framework de desarrollo para testear código Javascript. La configuración mínima necesaria es:
- Dependencias de Jasmine
- Un archivo html donde correrán los test
- Archivos JS productivos
- Archivos JS con nuestros tests
Dentro de las dependencias de jasmine, encontramos los archivos:
- jasmine.css
- jasmine.js
- jasmine-html.js
Descargar las dependencias de jasmine
En el html se visualizarán los resultados de los test desarrollados. A continuación, la estructura de dicho html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="lib/jasmine/jasmine.css"/>
<script type="text/javascript" src="lib/jasmine/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="lib/underscore-1.1.7-min.js"></script>
<script type="text/javascript" src="lib/jasmine-jquery.js"></script>
<script type="text/javascript" src="view/preLoadFixtures.js"></script>
<script type="text/javascript" src="lib/jasmine-fake-ajax.js"></script>
<script type="text/javascript" src="bienvenido.js"></script>
<script type="text/javascript" src="bienvenidoTest.js"></script>
</head>
<body>
<script type="text/javascript">
// agregamos el reporte de tests y lo ejecutamos
jasmine.getEnv().addReporter( new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>
Podemos visualizar que el html además de contener las configuración básica para correr test con jasmine, contiene librerias que nos ayudan a desarrollar test de mayor calidad. Estas las podemos visualizar dentro del bloque "dependencias de nuestros tests" y se explicarán luego.
En Jasmine los tests tienen la siguiente estructura:
- Describe: es una función que recibe como parámetros un string con un nombre que identifica a un conjunto de casos de test, y una función, que contiene 1 o más sentencias “it”
- it: es cada caso posible para nuestro test. También conserva la misma forma de un describe: una función que recibe dos parámetros: un string con su descripción, y una función con nuestro caso de test, que contiene 1 o más “expect”
- expect: es una función que recibe como parámetro un valor “real”; y se encadena a una función “matcher”, la cual lleva como parámetro el valor esperado. Para ser más concretos, quedaría: expect(valorReal).toBe(valorEsperado); donde “toBe” es una de las posibles funciones matcher.
- matcher: es una comparación entre un valor real y uno esperado. Se los puede negar encadenando la función “not” delante de ellos. Tenemos matchers incluidos por Jasmine, y también podemos definir más nosotros.
- expect: es una función que recibe como parámetro un valor “real”; y se encadena a una función “matcher”, la cual lleva como parámetro el valor esperado. Para ser más concretos, quedaría: expect(valorReal).toBe(valorEsperado); donde “toBe” es una de las posibles funciones matcher.
- it: es cada caso posible para nuestro test. También conserva la misma forma de un describe: una función que recibe dos parámetros: un string con su descripción, y una función con nuestro caso de test, que contiene 1 o más “expect”
Vamos a ejemplificar con un test dummy:
describe("este es un test dummy", function() {
it("y este es un caso de test", function() {
expect(true).toBe(true); expect(false).not.toBe(true);
}); });
Observen que en el caso anterior la función expect nos retorna un objeto, del cual utilizamos el atributo not y de él, su matcher toBe, para negar el resultado de este último.
Vamos con un ejemplo en el cual yo quiero tener un objeto "persona", que tenga un atributo "saludar", el cual al invocarlo me retorne "hola". El test nos quedaría así:
describe("persona.saludar",function(){
it("deberia retornar hola", function(){ var saludo = persona.saludar(); expect(saludo).toEqual("hola"); }); });
Les propongo que antes de leer las líneas siguientes, ejecuten los tests e intenten interpretar los errores que nos lanza Jasmine. Pueden descargar este proyecto de prueba donde encontrarán un holaMundo.
¿Qué pasa si quiero hacer algo antes de cada Test? Bueno, para eso usamos beforeEach y afterEach. El código que pongamos dentro de estas funciones, serán llamados antes y después de cada it, respectivamente.
describe('beforeEach', function(){
beforeEach(function(){
// Antes de cada caso de prueba se carga un archivo html.
jasmine.getFixtures().load("persona/prueba.html");
});
it('Caso prueba', function(){
// Test
});
});
Fake Ajax
Jasmine-fakeAjax nos permite crear interceptores de urls, y enviar datos dummy en las mismas cuando son ejecutadas desde JQuery.ajax();
Ejemplo:
describe('Test FakeAjax', function() {
it('La data que devolvio la llamada ajax es igual al del fake', function() {
var mensaje;
// Registramos el fake ajax.
registerFakeAjax({url: '/prueba', successData: 'Prueba exitosa'});
// Hacemos la llamada ajax.
$.get('/prueba', function(data) {
mensaje= data
});
// Comprobamos que nos hay llegado lo que definimos en el fake
expect(mensaje).toEqual('Prueba exitosa')
})
});
Fixtures
Usamos la libreria Jasmine-jQuery para testear los JS que interactúan con nuestro html, la misma nos provee matchers de jquery, y nos permite manejar: CSS, HTML y JSON en nuestros specs. También nos permite armar un "esqueleto" de la página en la que va a ejecutar nuestro código JS. Esto lo logra mediante un elemento que buscaremos mediante el id "sandbox", y al cual le agregaremos nuestro código html, estilos, etc. Ahora bien, cuando hay varios casos de test en los que debemos utilizar el mismo html, se vuelve tedioso tener que copiar este código a lo largo de todos los archivos. Para solucionar este problema, el módulo fixture de esta librería nos permite cargar archivos HTML en nuestros test.
Ejemplo:
Tenemos un archivo llamado pruebaFixture.html que contiene:
<div id="prueba" style="display:none;"/>
Se setea el path en donde estaran los fixtures, por defecto es “spec/javascripts/fixtures”
jasmine.getFixtures().fixturesPath = './fixtures';
Se levanta el HTML con la función load.
jasmine.getFixtures().load("pruebaFixture.html");
El test que comprueba que el div este oculto.
it("El input id debe estar oculto",function(){
var div = $("#prueba");
expect(div).toBeHidden();
});
Este test comprueba que el elemento #prueba sea un div.
it("El elemento es un div",function(){
var div = $("#prueba");
expect(div).toBe('div');
});
Algo para tener en cuenta es que debemos cargar los fixtures en memoria antes de cargar la librería fake ajax por un conflicto entre las librerías. Es decir, deberá existir un archivo que precargue los fixtures antes de cargar la librería fake ajax, como se muestra en el archivo preLoadFixtures.js
jasmine.getFixtures().fixturesPath = './fixtures';
jasmine.getFixtures().preload("fixture1.html","fixture2.html");
Y luego, al cargar el archivo html, se deberá cargar el archivo preLoadFixtures.js antes del archivo de la librería de fake ajax. Una vez cargados los fixtures en memoria, los mismos se cargarán de la misma manera mencionada al comienzo de la sección mediante:
jasmine.getFixtures().load("fixture1.html");
Fuentes / Más info en
