Realización de tests unitarios

Diapositivas utilizadas en la presentación "Realización de tests unitarios" del grupo meetup de AngularJS Madrid

Transcript

1. Realización de tests unitarios @felixzapata @adesis
2. Sobre mí Coorganizador del grupo meetup . Organizador del grupo meetup . Organizador del grupo meetup . Aerotranstornado: piloto online P1 y controlador S1 en la red . Desarrollador Senior Front End y Consultor de Accesibilidad Web. Accesibilidad Spain WordPress Madrid Madrid Sass & Compass VATSIM
3. Antes de comenzar... En Adesis buscamos gente con ganas de trabajar con AngularJS. Aquellos que estéis interesados enviad vuestro cv a rrhh1@adesis.com
4. ¿Por qué los tests? Because you're not Chuck Norris. Chuck Norris' code tests itself, and it always passes, with 0ms execution time.
5. ¿Qué querríamos testar en nuestra aplicación? Que nuestra directiva genera la plantilla correctamente. Que nuestro controlador realiza las acciones deseadas. Las funcionalidades de nuestro . Que el filtro que hemos hecho es correcto. Etc. servicio
6. ¿Qué problemas he tenido (y sigo teniendo) en ocasiones? Hacer un test de algo que no es necesario. Como por ejemplo, intentar probar alguna capacidad de AngularJS. Problemas con las dependencias. ¿Añado todas? ¿Sólo las que necesito? Problemas con las plantillas de las directivas (casi todos los ejemplos que hay usan template en vez de templateUrl). No sabemos cómo trucar ciertos servicios. Problemas con las promesas.
7. ¿Qué necesitamos? Un framework para la realización de tests unitarios en JavaScript. Karma, creado por el equipo de Angular JS.
8. Configuración de Karma https://github.com/felixzapata/unit­tests­charla­angularjs
9. Un "truquito" antes de seguir Cómo podemos saltar tests o ejecutar algunos en concreto usando Jasmine (que trae Karma): un único test: cambiar it por iit. saltar un test: cambiar it por xit. un único bloque de tests: cambiar describe por ddescribe. saltarnos un bloque de tests: cambiar describe por xdescribe.
10. Esqueleto básico (function() { 'use strict'; describe('myDir awesome test', function () { var element, scope; // inyecciones de modulos beforeEach(module('myDirModule')); // configuraciones beforeEach(inject(function ($injector) { // preparamos variables comunes para usar en el test })); it('has some properties', function() { }); it('does something to the scope', function() { }); }); }());
11. Esqueleto para una directiva describe('myDir awesome test', function () { var element, scope; // inyecciones de modulos beforeEach(module('myDirModule')); beforeEach(inject(function ($injector) { scope = $injector.get('$rootScope'); element = $compile('<my‐dir></my‐dir>')(scope); })); it('has some properties', function() { }); it('does something to the scope', function() { }); });
12. Test para un controlador https://github.com/felixzapata/unit­tests­charla­ angularjs/blob/master/test/spec/controllers/main.js
13. Test para un servicio https://github.com/felixzapata/unit­tests­charla­angularjs/blob/master/test/spec/services/main.js
14. Test para un provider https://github.com/felixzapata/unit­tests­charla­ angularjs/blob/master/test/spec/services/provider.js
15. Uso de Mocks/Stubs
16. Funciones propias function myConfigSrvMock() { // devuelvo los datos que necesite el servicio que voy a testear } beforeEach(function() { var myAppConfig; module(function ($provide) { myAppConfig = myConfigSrvMock(); $provide.value('myAppConfig', myAppConfig); }); inject(function ($injector, $compile) { }); }); Puedes incluir todas las llamadas que quieras a module() e inject() pero tan pronto como se ha usado un inject() no se puede hacer uso de module() de nuevo.
17. Mocking HTTP Requests con $httpBackend it('should get login success', inject(function(LoginService, $httpBackend) { $httpBackend.expect('POST', 'https://api.mydomain.com/login').respond(200, "[{ success : 'true', id : 123 }]"); LoginService.login('test@test.com', 'password').then(function(data) { expect(data.success).toBeTruthy(); }); $httpBackend.flush(); });
18. Una vuelta de tuerca más https://github.com/felixzapata/unit­tests­charla­ angularjs/blob/master/test/spec/services/device.js
19. Uso de espías https://github.com/felixzapata/unit­tests­charla­ angularjs/blob/master/test/spec/controllers/user.js
20. Enlaces de interés How to Unit Test Controllers In AngularJS Without Setting Your Hair On Fire Advanced Testing and Debugging in AngularJS How can I simulate a click event in my AngularJS directive test? Chai Assertion Library
21. Enlaces de interés TDD Terminology Simplified Mocks Aren't Stubs
22. Libro recomendado Mastering Web Application Development with AngularJS