Post on 16-Apr-2017
Testing Angular AppsPor Rodrigo Pimentel
Sobre mi
GitHub: github.com/rodrigopivi Twitter: @amaru_rod LinkedIn: https://pe.linkedin.com/pub/rodrigo-pimentel/b7/430/550
Ustedes y el panorama
Test driven development (TDD)
• Escribir las pruebas primero
• Hacer que las pruebas pasen
• Re-factorizar
• Entender el requisito es FUNDAMENTAL
• Escribir la prueba y comprobar que falla - Traducir el requisito - Imagina nombres de funciones y modelos que necesitas y escribe la prueba como si existieran- Declarar los métodos previamente imaginados sin código - Verificar que la prueba falla
• Hacer que la prueba pase - Escribir el código de producción - Mantener simplicidad- Modular es mejor- El test pasa, el requisito se cumple
• Refactorizar- Don’t Repeat Yourself (DRY) - Buscar reusabilidad - Correr todos los tests
1
2
Behavior Driven Development (BDD)
• Es una rama del TDD, que se centra en escribir especificaciones conductivas
• Proporciona herramientas verbales para definir los requerimientos y expectativas
• Facilita la comunicación entre Product Owners y Developers
• Detalles del comportamiento y flujo funcional, no detalles de la UI y sus componentes
Ejemplo de BDD
Cucumber
Jasmine también es BDD
Unit Tests
• Una prueba unitaria es una forma de comprobar el correcto funcionamiento de un módulo de código
• Sirve para asegurar que cada uno de los módulos funcione correctamente por separado
En que consiste escribir tests unitarios?
• MODULARIZAR!
• Probar bloques de funcionalidad isolada
• Escribir código que sea predecible y fácil de mantener
• Pensar en el código y los datos que necesita
• Predecir la salida de datos en base a la entrada
Ejemplo de Unit test en Jasmine
Como debuggear Unit Tests con Karma
• En produccion, se usa Protractor para correr tests, pero no para debutar
• Es necesario instalar un Chrome/Firefox launcher
• Para debuggear, se usa manualmente el comando> karma start —browsers Chrome
Las limitaciones de Unit Tests
End to end tests (E2E)
• Verificar que los componentes integrados de la aplicación funcionan como es esperado
• Se prueba a la aplicación entera en un escenario real
• Puede incluir escenarios que incluyen la comunicación con la base de datos, red, hardware y otras aplicaciones
En que consiste escribir tests E2E?
• Probar la aplicación en un escenario real
• Comprobar la integración correcta de los componentes
• Predecir el "Flujo" desde el comienzo hasta el final
• Simular la interacción del usuario final
• Cada "test case" a un bloque necesita: - Establecer el “estado" (flujo de pasos previos) - Declarar el flujo de pasos a probar- Declarar el estado final esperado
E2E Testing con Jasmine & Angular
El examen practico
Clase 2
- En que se diferencia Unit testing de E2E testing?
- Cual es la diferencia entre BDD y TDD?
- Que tests se escriben primero, empezando un proyecto?
- Quien se debe encargar de escribir unit tests y quien se debe encargar de escribir BDD tests?
Repaso
Overview de las herramientasAUTOMATIZACION FTW!
Gulp
• Automatizar el proceso de build
• Hilos o sorbetes, para conectar nuestro proceso de build
• Puedes conectar hilos con hilos
Karma
• Es un JS Test runner, no un testing framework
• Corre en NodeJS
• Necesita una configuración para establecer el entorno donde ejecutar los tests
• Compatible con browsers
Que necesitamos de un test runner?
• Debe ser veloz
• Debe poder usar browsers reales
• Debe ser confiable
• Se debe poder integrar con otras herramientas
Protractor• Herramienta para E2E testing
• Necesita una la aplicación corriendo en un servidor (puede ser nuestro dev server)
• Necesita un servidor webdriver corriendo (para controlar el browser)
• Ejecutar nuestros Jasmine tests
Phantom JS
• Simula un browser
• Veloz
• Es una aplicación NodeJs
• Util para Unit testing, limitado para E2E
Demo y Code Review
Clase 3
Repaso• Que herramientas se utiliza para automatizar el
build?
• Para que sirve Karma?
• En que se diferencia Protractor de PhantomJS?
• Como hacer “break point” en un test usando Karma?
Código Spaghetti
Component Based Development (CBD)
“Component based development, is a branch of software engineering that emphasizes the
separation of concerns in respect of the wide-ranging functionality available. It is a reuse-based approach to defining, implementing and composing independent components”
Desarrollo basado en componentes
• Es el futuro (React, WebComponents, Polymer, Angular 2)
• Fácil de mantener
• Amigables con metodologias de testing
• DRY
Componentes
• Reusables
• Independientes
• Documentados
• Ejemplos de uso
• Extensibles
Angular y Jasmine
Herramientas Angular• Directivas
• Servicios
• Fabricas
• Controladores
• Filtros
• Constantes
• Templates
Angular digest cycle
$scope• Es un objeto que referencia al modelo de la aplicación
• Es un contexto para ejecutar expresiones
• Representan una estructura jerárquica hasta el $rootScope
• Pueden observar cambios con $watch
• Pueden propagar y escuchar eventos - $emit, $broadcast, $on
$apply• Método que prove cada $scope
• Se usa para propagar cambios en el modelo a la vista
• Se usa cuando actualizamos el modelo fuera del control de Angular (eventos del browser, timeouts, XHR, etc)
• Fuerza un digest cycle
$compile• Compila un string o un elemento DOM
• Produce una función template
• La función generada se usa para enlazar un $scope y el template
• Camina por el árbol DOM y compila directivas conocidas
$timeout
• Función envoltura para setTimeout()
• Retorna una promesa
• $timeout.cancel(promise)
• En tests: $timeout.flush() para sincronizar
mock $httpBackend
• Falso $httpBackend para correr tests sin backend
• Imitar un backend y proporcionar respuestas para cada ruta
• Util para servicios que usan $http
Hay que usar jasmine.Ajax!
“Y si no estamos usando $http?”
Agregar a bower.json Agregar a los archivos de karma.conf.js
Usando Jasmine Ajax con Karma
Jasmine spyOn()
Como debuggear con Protractor?
• Se usa browser.pause(); en test.
• La terminal de Protractor se detiene.
• Usar ‘c’ para continuar
• Usar ‘repl’ para entrar en el modo interactivo
• En el modo interactivo se pueden usar los comandos Webdriver para dirigir el browser
E2E Tests con Protractor
https://github.com/rodrigopivi/angularComponentStarter
“Mi start project para angular components”
Practica• Descargar y correr el proyecto ejemplo
https://github.com/rodrigopivi/angularComponentStarter
• Escribir pruebas e2e para verificar la directiva show-more-or-less - Click para expandir y verificar - Click para contraer y verificar
• Extender la app y hacer un controller o servicio que solicita data de una api. - Debe usar algo como $http.get(‘/hola’) …
• Escribir un test unitario que use $httpBackend para simular el backend y probar el servicio/controller creado
Clase 4
Repaso• Que herramientas se usan para correr los tests
E2E?
• Que es el desarrollo basado en componentes?
• Que es y para que sirve el uso de $scope, $compile y $apply?
• Como debuggear un test con Protractor?
Comunicación entre componentes angular
• Usar $broadcast y $emit evitando usar $watch en lo posible
• Usar un namespace adecuado para los eventos
• Usar un ID del componente para los eventos (para evitar conflictos con otros componentes redundantes)
Probando un File Upload• Usar <input type=“file”> y enlazar el input con un
modelo en el $scope
• El input retorna un objeto FileList que es una lista de objetos File
• Hay limitaciones de seguridad para manejar objetos File y FileList
• Usar una directiva que convierta FileList en un arreglo de Files
Probando un File Upload
Karma para proporcionar fixtures
Code review a un componente complejo
EXAMEN FINAL• Actualizar a la ultima version del starter kit
- Hacer un fork del proyecto de Github: github.com/rodrigopivi/angularComponentStarter - Clonar el fork- Mover node_modules y vendor del antiguo proyecto (evitar descargar)
• Escribir “pruebas unitarias” para ExamComponent - Simular el backend usando $httpBackend - Brindar el método GET para la ruta ‘demo/getStoredCount.json’ que provea 2 valores diferentes para 2 tests unitarios - Escribir pruebas para el Servicio y Directiva
• Escribir “pruebas E2E” - probar clicks en diferentes botones - verificar que todos comparten el mismo valor
github.com/rodrigopivi<3
“Muchas GRACIAS!”