Este documento describe diferentes técnicas para probar aplicaciones Angular, incluyendo TDD, BDD, pruebas unitarias, y pruebas E2E. Explica cómo escribir pruebas para cada tipo de test, así como herramientas como Karma, Protractor y Jasmine que pueden usarse para automatizar las pruebas. También cubre temas como componentes, $scope, $compile y $httpBackend para simular backends.

1. Testing Angular Apps
Por Rodrigo Pimentel

2. Sobre mi
GitHub: github.com/rodrigopivi
Twitter: @amaru_rod
LinkedIn: https://pe.linkedin.com/pub/rodrigo-pimentel/b7/430/550

3. Ustedes y el panorama

5. Test driven development
(TDD)
• Escribir las pruebas primero
• Hacer que las pruebas pasen
• Re-factorizar

8. • 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

9. • 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

10. 1
2

11. 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

13. Ejemplo de BDD
Cucumber
Jasmine también es BDD

14. 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

15. 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

16. Ejemplo de Unit test en Jasmine

18. 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

19. Las limitaciones de Unit Tests

20. 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

22. 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

23. E2E Testing con Jasmine & Angular

24. El examen practico

25. http://plnkr.co/edit/prwChY
Practica:

26. Clase 2

27. - 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

28. Overview de las herramientas
AUTOMATIZACION FTW!

29. Gulp
• Automatizar el proceso de build
• Hilos o sorbetes, para conectar nuestro proceso
de build
• Puedes conectar hilos con hilos

32. 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

33. Que necesitamos de un test
runner?
• Debe ser veloz
• Debe poder usar browsers reales
• Debe ser confiable
• Se debe poder integrar con otras herramientas

34. 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

35. Phantom JS
• Simula un browser
• Veloz
• Es una aplicación NodeJs
• Util para Unit testing, limitado para E2E

36. Demo y Code Review

37. Clase 3

38. 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?

39. Código Spaghetti

40. 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”

41. Desarrollo basado en
componentes
• Es el futuro (React, WebComponents, Polymer,
Angular 2)
• Fácil de mantener
• Amigables con metodologias de testing
• DRY

42. Componentes
• Reusables
• Independientes
• Documentados
• Ejemplos de uso
• Extensibles

43. Angular y Jasmine

44. Herramientas Angular
• Directivas
• Servicios
• Fabricas
• Controladores
• Filtros
• Constantes
• Templates

45. Angular digest cycle

46. $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

47. $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

48. $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

49. $timeout
• Función envoltura para setTimeout()
• Retorna una promesa
• $timeout.cancel(promise)
• En tests: $timeout.flush() para sincronizar

50. mock $httpBackend
• Falso $httpBackend para correr tests sin
backend
• Imitar un backend y proporcionar respuestas
para cada ruta
• Util para servicios que usan $http

52. Hay que usar jasmine.Ajax!
“Y si no estamos usando $http?”

53. Agregar a bower.json Agregar a los archivos de karma.conf.js
Usando Jasmine Ajax con Karma

54. Jasmine spyOn()

55. 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

56. E2E Tests con Protractor

57. https://github.com/rodrigopivi/
angularComponentStarter
“Mi start project para angular components”

58. 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

59. Clase 4

60. 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?

61. 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)

62. 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

63. Probando un File Upload

64. Karma para proporcionar fixtures

65. Code review a un
componente complejo

66. 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

67. github.com/rodrigopivi
<3
“Muchas GRACIAS!”