Probando aplicaciones AngularJS

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

http://plnkr.co/edit/prwChY

Practica:

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!”