Curso de Testing con Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
by @nicobytes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Desarrollar aplicaciones que incluyan métodos de pruebas como parte del proceso de desarrollo nos permite tener un producto maduro, escalable y estable.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963476/Screen_Shot_2017-07-04_at_1.05.52_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
http://www.duety.co/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963484/Screen_Shot_2017-07-04_at_1.08.15_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963488/Screen_Shot_2017-07-04_at_1.10.13_PM.png)
http://www.nicobytes.com/talks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
https://www.ion-book.com/blog/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963487/Screen_Shot_2017-07-04_at_1.09.19_PM.png)
Aplicar las técnicas de unit testing y e2e, para asegurar la funcionalidad y calidad del producto y llevar tus desarrollos a un nuevo nivel de calidad.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
Objetivo General
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
1. Aplicar TDD y Mocks.
3. Correr pruebas con karma y usando jasmine para escribir las pruebas.
4. Escribir y correr pruebas unitarias y e2e.
6. Testing en todos los artefactos de Angular: pipes, components, services, routers y directives.
7. Proceso de pruebas con integración continua.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
Objetivos Específicos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Para sacar el máximo partido a esta iniciativa necesitas tener conocimientos de desarrollo en Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
pre requisitos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Clase 1: ¿Qué es TDD?
Clase 2: Escribiendo pruebas en Angular.
Clase 3: Pruebas unitarias en Servicios y Providers.
Clase 4: Pruebas unitarias en components, pipes y directives.
Clase 5: Pruebas unitarias para router y CLI.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
Contenido
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Las pruebas unitarias reducen el riesgo en el software y una de las estrategias es: Desarrollo guiado por pruebas, más conocido por sus siglas en inglés TDD (Test Driven Development).
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
¿cÓMO LO HACEMOS?
Crear productos que agreguen valor y mantener la calidad del mismo es un gran reto.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
Crear productos que agreguen valor y mantener la calidad del mismo es un gran reto.
los problemas siempre van a existir
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963557/problemas.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
Crear productos que agreguen valor y mantener la calidad del mismo es un gran reto.
gestionar el riesgo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963566/spectrum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
Crear productos que agreguen valor y mantener la calidad del mismo es un gran reto.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963569/agile.png)
Acceptance Testing ¿Estamos construyendo el producto correcto?
Usability Testing ¿Construimos el producto correcto?
Unit Testing ¿Lo estamos construyendo correctamente?
Performance Testing ¿Lo construimos de manera correcta?
Aprenderás a desarrollar aplicaciones guiadas por pruebas y testing para Angular y da un salto como profesional del desarrollo de aplicaciones con una de las tecnología más relevante en el panorama frontend.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
¿qué Lograras?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
i know TDD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
CLASE 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
¿Qué es TDD?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Es una metodología donde se basa en tres pasos
Escribir pruebas
Escribir código
Refactorización
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965560/tddSteps.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965565/redGreenRefactor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963566/spectrum.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965591/CZX0O-tWQAAeaLi.jpg)
2 = Pruebas Unitarias
0 = Pruebas de INTEGRACIÓN
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965605/pyramid.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Herramientas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965630/karma.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965632/protractor-logo-large.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965652/Screenshot_from_2016-01-27_11-39-16.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Primeras pruebas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
let calculator = new Calculator();
let result = calculator.multiply(3,3);
console.log(result === 9);//'Test passed'
console.log(result !== 12);//'Test passed'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
export class Calculator {
multiply(numberA: number, numberB: number): number{
return numberA * numberB;
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
let result2 = calculator.divide(6,2);
console.log(result2 === 3);//'Test passed'
console.log(result2 !== 34);//'Test passed'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
divide(numberA: number, numberB: number): number{
return numberA / numberB;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
divide(numberA: number, numberB: number): number{
if(numberB === 0){
return null;
}
return numberA / numberB;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Refactorizar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
let calculator = new Calculator();
let result1 = calculator.multiply(3,3);
console.log(result1 === 9);//'Test passed'
console.log(result1 !== 12);//'Test passed'
let result2 = calculator.divide(6,2);
console.log(result2 === 3);//'Test passed'
console.log(result2 !== 34);//'Test passed'
let result3 = calculator.divide(6,0);
console.log(result3 === null);//'Test passed'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
KARMA + JASMINE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Correr pruebas
npm test
ng test
ng test --single-run
ng test --code-coverage
ng test --single-run --code-coverage
http-server coverage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
jasmine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
The A's Mantra
(Arrange, Act, Assert)
(Preparar, Actuar, Verificar)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
import { Calculator } from './calculator';
describe('Test for Calculator', () => {
describe('Test for multiply', () => {
it("multiply for 3", ()=>{
//Arrange
let calculator = new Calculator();
//Act
let number = calculator.multiply(3,3);
//Assert
expect(number).toEqual(9);
})
});
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
calculator.spec.ts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
coverage report
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3966000/Screen_Shot_2017-07-05_at_11.02.08_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
describe('Test for divide', () => {
it("divide for a number", ()=>{
//Arrange
let calculator = new Calculator();
//Act && Assert
expect(calculator.divide(6,3)).toEqual(2);
expect(calculator.divide(5,2)).toEqual(2.5);
})
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
calculator.spec.ts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
coverage report
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3966009/Screen_Shot_2017-07-05_at_11.06.01_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
it("divide for zero", ()=>{
//Arrange
let calculator = new Calculator();
//Act && Assert
expect(calculator.divide(6,0)).toBeNull();
expect(calculator.divide(5,0)).toBeNull();
expect(calculator.divide(1212,0)).toBeNull();
expect(calculator.divide(-23,0)).toBeNull();
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
calculator.spec.ts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
coverage report
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3966021/Screen_Shot_2017-07-05_at_11.09.05_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
it("test of matchers", ()=>{
let name = 'nicolas'
let name2;
expect(name).toBeDefined();
expect(name2).toBeUndefined();
expect(1+2 == 3).toBeTruthy();
expect(1+1 == 3).toBeFalsy();
expect(5).toBeLessThan(10);
expect(20).toBeGreaterThan(10);
expect('1234567').toMatch(/123/);
expect(["apples", "oranges", "pears"]).toContain("oranges")
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
jasmime api
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
let calculator;
//Arrange
beforeEach(()=>{
calculator = new Calculator();
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
beforeEach
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
fdescribe('Test for Calculator', () => {...});
fit("multiply for 3", ()=>{...});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
focus tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
https://jasmine.github.io/api/2.6/global
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
CLase 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
en el capítulo anterior...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
- TDD
- Herramientas: Karma + Jasmine
- Coverage report
- Arrange, Act and Assert
- Escribir pruebas en Jasmine
- Correr pruebas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965565/redGreenRefactor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
requerimientos
Diseñar una clase persona, que tenga los siguientes atributos:
- nombre, apellido, talla, peso, altura, edad
Debe calcular lo siguiente:
- calcular IMC: (Indice de masa corporal)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3968779/Screen_Shot_2017-07-06_at_9.42.07_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Peso (kg) | Altura (m) | IMC | Result |
---|---|---|---|
40 | 1.65 | 14 | 'down' |
58 | 1.65 | 21 | 'normal' |
68 | 1.65 | 25 | 'overweight' |
75 | 1.65 | 27 | 'overweight level 1' |
90 | 1.65 | 33 | 'overweight level 2' |
120 | 1.65 | 44 | 'overweight level 2' |
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Peso (kg) | Altura (m) | IMC | Result |
---|---|---|---|
-78 | 1.65 | -28 | 'no found' |
-45 | -1.65 | -16 | 'no found' |
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
let person;
//Arrange
beforeEach(()=>{
person = new Person(
'nicolas',
'molina',
23,
40,
1.65
);
});
describe('test for data', ()=>{
it('attributes', ()=>{
expect(person.name).toEqual('nicolas');
expect(person.lastname).toEqual('molina');
expect(person.age).toEqual(23);
expect(person.weight).toEqual(40);
expect(person.height).toEqual(1.65);
})
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
describe('test for calcIMC', ()=>{
it('should return a string: down', ()=>{
person.weight = 40
expect(person.calcIMC()).toEqual('down');
});
it('should return a string: normal', ()=>{
person.weight = 58;
expect(person.calcIMC()).toEqual('normal');
});
it('should return a string: overweight', ()=>{
person.weight = 68;
expect(person.calcIMC()).toEqual('overweight');
});
it('should return a string: overweight level 1', ()=>{
person.weight = 75;
expect(person.calcIMC()).toEqual('overweight level 1');
});
it('should return a string: overweight level 2', ()=>{
person.weight = 90;
expect(person.calcIMC()).toEqual('overweight level 2');
});
it('should return a string: overweight level 3', ()=>{
person.weight = 120;
expect(person.calcIMC()).toEqual('overweight level 3');
});
it('should return a string: no found', ()=>{
person.weight = -48;
expect(person.calcIMC()).toEqual('no found');
person.weight = -48;
person.height = -1.70;
expect(person.calcIMC()).toEqual('no found');
})
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
ng test --code-coverage
http-server coverage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
export class Person {
constructor(
public name: string,
public lastname: string,
public age: number,
public weight: number,
public height: number
){}
calcIMG(){
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
calcIMC(): string{
let result = this.weight / ((this.height) * (this.height));
if(result < 18){
return 'down';
}else if(result >= 18 && result <= 24){
return 'normal';
}else if(result >= 25 && result <= 26){
return 'overweight';
}else if(result >= 27 && result <= 29){
return 'overweight level 1';
}else if(result >= 30 && result <= 39){
return 'overweight level 2';
}else if(result >= 40){
return 'overweight level 3';
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
calcIMC(): string{
let result = Math.round(this.weight / ((this.height) * (this.height)));
if(result < 18){
return 'down';
}else if(result >= 18 && result <= 24){
return 'normal';
}else if(result >= 25 && result <= 26){
return 'overweight';
}else if(result >= 27 && result <= 29){
return 'overweight level 1';
}else if(result >= 30 && result <= 39){
return 'overweight level 2';
}else if(result >= 40){
return 'overweight level 3';
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
calcIMC(): string{
let result = Math.round(this.weight / ((this.height) * (this.height)));
if(result < 0){
return 'no found';
}else if(result >=0 && result < 18){
return 'down';
}else if(result >= 18 && result <= 24){
return 'normal';
}else if(result >= 25 && result <= 26){
return 'overweight';
}else if(result >= 27 && result <= 29){
return 'overweight level 1';
}else if(result >= 30 && result <= 39){
return 'overweight level 2';
}else if(result >= 40){
return 'overweight level 3';
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://raw.githubusercontent.com/litixsoft/karma-mocha-reporter/master/demo/screen.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
ANGULAR UNIT TESTING FRAMEWORK
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR SERVICES
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
ng g s users
ng generate service users
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
import { TestBed, inject } from '@angular/core/testing';
import { UsersService } from './users.service';
describe('UsersService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [UsersService]
});
});
it('should be created',
inject([UsersService], (service: UsersService) => {
expect(service).toBeTruthy();
}));
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
import { inject,
fakeAsync,
tick,
TestBed
} from '@angular/core/testing';
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
import {MockBackend} from '@angular/http/testing';
import {
Http,
ConnectionBackend,
BaseRequestOptions,
Response,
ResponseOptions
} from '@angular/http';
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
consideraciones
1. Hacer solicitudes reales haría que nuestros test sean muy tardados
2. Ciertas API tiene limite de solitudes que si las corremos en test las vamos a sobrepasar innecesariamente.
3. Necesitamos correr pruebas de forma offline
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
¿Qué es Mocking?
Son objetos simulados (pseudoobjetos, mock object, objetos de pega) a los objetos que imitan el comportamiento de objetos reales de una forma controlada.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
arrange
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
BaseRequestOptions,
MockBackend,
UsersService,
{
provide: Http,
deps: [MockBackend, BaseRequestOptions],
useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
return new Http(backend, defaultOptions);
}
},
]
});
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
describe('test for getUser', ()=>{
it("should return the user's data with an id", ()=>{
})
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
it('.....', inject([.....], fakeAsync( (....)=>{} ));
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
it("should return the user's data with an id",
inject([UsersService, MockBackend], fakeAsync((userService, mockBackend)=>{
}))
)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
it("should return the user's data with an id",
inject([UsersService, MockBackend], fakeAsync((userService, mockBackend)=>{
}))
)
Cada vez que escribimos pruebas a clases con dependencias debemos usar con inject para que Angular nos proporcione las instancias de estas clases.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
it("should return the user's data with an id",
inject([UsersService, MockBackend], fakeAsync((userService, mockBackend)=>{
}))
)
Cuando probamos código que devuelve una Promise o un Observable podemos usar fakeAsync para probar código como si fuera de forma sincrona.
Para que las Promises y Observables se cumplan/notifiquen se debe llamar la función tick()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
let dataResponse;
mockBackend.connections
.subscribe(connection => {
expect(connection.request.url)
.toBe('http://jsonplaceholder.typicode.com/users/1');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3969230/Screen_Shot_2017-07-06_at_11.25.40_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
let userMock = {
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
let mockResponse = new ResponseOptions({body: JSON.stringify(userMock)});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
mockBackend.connections.subscribe(connection => {
expect(connection.request.url).toBe('http://jsonplaceholder.typicode.com/users/1');
connection.mockRespond(new Response(mockResponse));
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
userService.getUser(1)
.subscribe(response => {
dataResponse = response;
});
tick();
expect(dataResponse.id).toBeDefined();
expect(dataResponse.name).toBeDefined();
expect(dataResponse.address).toBeDefined();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
let dataResponse, dataError;
let mockResponse = new ResponseOptions({body: JSON.stringify(userMock)});
mockBackend.connections.subscribe((connection: MockConnection) => {
expect(connection.request.url).toBe('http://jsonplaceholder.typicode.com/users/1');
connection.mockError(new Error('error'));
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for HTTP
userService.getUser(1)
.subscribe(
response => { // success
dataResponse = response;
},
error => { //error
dataError = error;
}
);
tick();
expect(dataResponse).toBeUndefined();
expect(dataError).toBeDefined();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
CLase 3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
en el capítulo anterior...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
- Karma mocha reporter (terminal)
- Angular Unit Test Framework
- Mocks
- Test for HTTP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for http
- Mocks: Objetos simulados
- Http: se hace una intercepción de la petición con un mock de respuesta.
- inject, fakeAsync y tick
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
arrange for angular
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
BaseRequestOptions,
MockBackend,
UsersService,
{
provide: Http,
deps: [MockBackend, BaseRequestOptions],
useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
return new Http(backend, defaultOptions);
}
},
]
});
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
arrange for it
it("should return the user's data with an id",
inject([UsersService, MockBackend], fakeAsync((usersService, mockBackend)=>{
// Your TEST
}))
);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
arrange for it
//Arrange
let dataResponse;
let userMock ={...}
let mockResponse = new ResponseOptions({body: JSON.stringify(userMock)});
mockBackend.connections.subscribe(connection =>{
expect(connection.request.url).toBe('http://jsonplaceholder.typicode.com/users/3');
connection.mockRespond(new Response(mockResponse));
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
act for it
//Act
usersService.getUser(3)
.subscribe(response =>{
dataResponse = response;
});
tick();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
assert for it
//Assert
expect(dataResponse.id).toBeDefined();
expect(dataResponse.name).toBeDefined();
expect(dataResponse.address).toBeDefined();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for http
- Test for GET
- Test for POST
- Test for PUT
- Test for DELETE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
red: write a test
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965565/redGreenRefactor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for post
it("should return the user's data",
inject([UsersService, MockBackend], fakeAsync((userService, mockBackend)=>{
//YOUR TEST
}))
);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for post
//Arrange
let dataResponse, dataError;
let userMock = {
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz"
}
let mockResponse = new ResponseOptions({body: JSON.stringify(userMock)});
mockBackend.connections.subscribe((connection: MockConnection) => {
expect(connection.request.url).toBe('http://jsonplaceholder.typicode.com/users');
connection.mockRespond(new Response(mockResponse));
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for post
//Act
let newUser = {
name: "Leanne Graham",
username: "Bret",
email: "Sincere@april.biz"
}
userService.createUser(newUser)
.subscribe(
response => { // success
dataResponse = response;
},
error => { //error
dataError = error;
}
);
tick();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for post
//Assert
expect(dataError).toBeUndefined();
expect(dataResponse.id).toBeDefined();
expect(dataResponse.name).toEqual('Leanne Graham');
expect(dataResponse.username).toEqual('Bret');
expect(dataResponse.email).toEqual('Sincere@april.biz');
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for post error
mockBackend.connections.subscribe((connection: MockConnection) => {
expect(connection.request.url).toBe('http://jsonplaceholder.typicode.com/users');
connection.mockError(new Error('error'));
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for post error
//Assert
expect(dataError).toBeDefined();
expect(dataResponse).toBeUndefined();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
CHECK: JASMINE report
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3971338/Screen_Shot_2017-07-07_at_7.59.06_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
green: make the code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3965565/redGreenRefactor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
code
createUser(newUser: any){
let body = JSON.stringify(newUser);
return this.http.post(`${this.path}`, body)
.map(response => response.json());
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
check: jasmine report
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3971353/Screen_Shot_2017-07-07_at_8.09.38_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
write test for put and delete
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
put and delete
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3971389/Screen_Shot_2017-07-07_at_8.20.16_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for type and headers
expect(c.request.method).toBe(RequestMethod.Delete);
expect(c.request.headers.get('X-API-TOKEN')).toEqual('xxxxx');
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
make header
makeRequestOptions(): RequestOptionsArgs{
let headers = new Headers();
headers.append('API-TOKEN', 'xxxyyy');
return {
headers: headers
};
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
code
updateUser(user: any){
let id = user.id;
let body = JSON.stringify(user);
return this.http.put(`${this.path}/${id}`, body)
.map(response => response.json());
}
deleteUser(id: number){
return this.http.delete(`${this.path}/${id}`)
.map(response => response.json());
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
jasmine reporter
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3971404/Screen_Shot_2017-07-07_at_8.24.26_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
ng g c user-row
ng generate component user-row
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { UserRowComponent } from './user-row.component';
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
describe("UserRowComponent", ()=>{
let component: UserRowComponent;
let fixture: ComponentFixture<UserRowComponent>;
let de: DebugElement;
let el: HTMLElement;
//Arrange
beforeEach(()=>{
TestBed.configureTestingModule({
declarations: [ UserRowComponent ], // declare the test component
});
fixture = TestBed.createComponent(UserRowComponent);
component = fixture.componentInstance;
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
it("should the name be 'nicolas'", ()=>{
expect(component.name).toEqual('nicolas');
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
it("should the name be 'nicolas'", ()=>{
expect(component.name).toEqual('nicolas');
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
it('should display original title', () => {
fixture.detectChanges();
expect(el.textContent).toContain(component.name);
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
it('should display original title', () => {
fixture.detectChanges();
expect(el.textContent).toContain(component.name);
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
it('should display a different test name', () => {
component.name = 'Test name';
fixture.detectChanges();
expect(el.textContent).toContain('Test name');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
//Arrange
beforeEach(async(()=>{
TestBed.configureTestingModule({
declarations: [ UserRowComponent ]
})
.compileComponents();
}));
beforeEach(()=>{
fixture = TestBed.createComponent(UserRowComponent);
component = fixture.componentInstance;
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
//Arrange
it('should display original lastname', () => {
let de = fixture.debugElement.query(By.css('.lastname'));
fixture.detectChanges();
expect(de.nativeElement.textContent).toContain('molina');
});
it('should display original lastname', () => {
component.lastname = 'otro apellido';
let de = fixture.debugElement.query(By.css('.lastname'));
fixture.detectChanges();
expect(de.nativeElement.textContent).toContain('otro apellido');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
//Arrange
it('should display original lastname', () => {
let de = fixture.debugElement.query(By.css('.lastname'));
fixture.detectChanges();
expect(de.nativeElement.textContent).toContain('molina');
});
it('should display original lastname', () => {
component.lastname = 'otro apellido';
let de = fixture.debugElement.query(By.css('.lastname'));
fixture.detectChanges();
expect(de.nativeElement.textContent).toContain('otro apellido');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
test for components
beforeEach(()=>{
fixture = TestBed.createComponent(UserRowComponent);
component = fixture.componentInstance;
component.person = new Person(
'nicolas',
'molina',
12,
12,
12
);
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
clase 4
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
en el capítulo anterior...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
- Test for HTTP: Delete, Put, Delete
- Test for components
- Test for components + inputs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { UserRowComponent } from './user-row.component';
import { Person } from './../person';
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS
let component: UserRowComponent;
let fixture: ComponentFixture<UserRowComponent>;
let de: DebugElement;
let el: HTMLElement;
//Arrange
beforeEach(async(()=>{
TestBed.configureTestingModule({
declarations: [ UserRowComponent ]
})
.compileComponents();
}));
beforeEach(()=>{
component.person = new Person(
'nicolas',
'molina',
12,
12,
12
);
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS
it('should display original lastname', () => {
component.person.lastname = 'otro apellido';
let de = fixture.debugElement.query(By.css('.lastname'));
fixture.detectChanges();
expect(de.nativeElement.textContent).toContain('otro apellido');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS: Click
it('should display un text for imc', () => {
let button = fixture.debugElement.query(By.css('.btn-imc')); // find hero element
button.triggerEventHandler('click', null);
fixture.detectChanges();
expect(button.nativeElement.textContent == '').toBeFalsy();
expect(component.imc== '').toBeFalsy();
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS: output
it('should raise selected event when clicked', () => {
let selectedPerson: Person;
component.onSelected.subscribe((person: Person) => {
selectedPerson = person
});
let button = fixture.debugElement.query(By.css('.btn-person')); // find hero element
button.triggerEventHandler('click', null);
fixture.detectChanges();
expect(selectedPerson.name).toEqual('nicolas');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS
ng g c users-list
ng generate component users-list
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS
ng g c users-list
ng generate component users-list
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS
it('should have an user-row', () => {
let de = fixture.debugElement.query(By.css('app-user-row'));
expect(de).toBeTruthy();
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS
it('should raise selected event when clicked', () => {
let button = fixture.debugElement.query(By.css('app-user-row .btn-person')); // find hero element
button.triggerEventHandler('click', null);
fixture.detectChanges();
// selected hero should be the same data bound hero
expect(component.selectedPerson.name).toBe('nicolas');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR COMPONENTS: services
it('should raise selected event when clicked', () => {
let button = fixture.debugElement.query(By.css('app-user-row .btn-person')); // find hero element
button.triggerEventHandler('click', null);
fixture.detectChanges();
// selected hero should be the same data bound hero
expect(component.selectedPerson.name).toBe('nicolas');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
clase 5
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
en el capítulo anterior
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
- Testing components with inside components
- Testing compones with services: MockServices
- Testing for pipes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Spies: services
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Spies: services
let component: UsersListComponent;
let fixture: ComponentFixture<UsersListComponent>;
let userService: UsersService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ UsersListComponent, UserRowComponent ],
imports: [ HttpModule ],
providers: [
{provide: UsersService, useClass: UsersService}
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UsersListComponent);
component = fixture.componentInstance;
userService = fixture.debugElement.injector.get(UsersService);
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Spies: services
it('should be created', ()=>{
let spy = spyOn(userService, 'getAll')
.and.returnValue(Observable.of([
new Person('Nicolas NICO','asas',12,12,12)
]));
fixture.detectChanges();
expect(userService.getAll).toHaveBeenCalled();
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Spies: services
it('should get user', ()=>{
fixture.detectChanges();
spyOn(userService, 'getUser')
.and.returnValue(Observable.of(
new Person('Nicolas NICO','asas',12,12,12)
));
component.getUser();
//fixture.detectChanges();
expect(userService.getUser).toHaveBeenCalled();
expect(userService.getUser).toHaveBeenCalledWith(23);
expect(component.persons[0].name).toEqual('Nicolas NICO');
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR forms
it('validates errors', async(() => {
fixture = TestBed.createComponent(FormSkuComponent);
component = fixture.componentInstance;
component.skuField.setValue('123');
expect(component.skuField.valid).toBeTruthy();
component.skuField.setValue('123234');
expect(component.skuField.valid).toBeTruthy();
component.skuField.setValue('');
expect(component.skuField.invalid).toBeTruthy();
component.skuField.setValue('234');
expect(component.skuField.invalid).toBeTruthy();
}));
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR forms
it('test', ()=>{
let mockControl = new FormControl();
mockControl.setValue('nicolas');
let response = MyValidators.skuValidator(mockControl);
expect(response.invalidSku).toBeDefined();
expect(response.invalidSku).toBeTruthy();
});
it('test 2', ()=>{
let mockControl = new FormControl();
mockControl.setValue('123');
let response = MyValidators.skuValidator(mockControl);
expect(response).toBeNull();
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR forms
it('validates and triggers events', async(() => {
fixture = TestBed.createComponent(FormSkuComponent);
component = fixture.componentInstance;
el = fixture.debugElement.nativeElement;
input = fixture.debugElement.query(By.css('input#skuInput')).nativeElement;
form = fixture.debugElement.query(By.css('form')).nativeElement;
fixture.detectChanges();
fixture.whenStable()
.then(() => { // wait for async getQuote
input.value = 'asas';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
return fixture.whenStable();
})
.then(() =>{
let msgs = el.querySelectorAll('.ui.message');
expect(msgs[0].innerHTML).toContain('SKU is invalid');
})
}));
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
TEST FOR forms
it('validates and triggers events for form', async(() => {
fixture = TestBed.createComponent(FormSkuComponent);
component = fixture.componentInstance;
el = fixture.debugElement.nativeElement;
input = fixture.debugElement.query(By.css('input#skuInput')).nativeElement;
form = fixture.debugElement.query(By.css('form')).nativeElement;
fixture.detectChanges();
fixture.whenStable()
.then(() => {
component.nameField.setValue('nicolas');
component.skuField.setValue('123');
form.dispatchEvent(new Event('submit'));
fixture.detectChanges();
return fixture.whenStable();
})
.then(() =>{
expect(component.skuForm.invalid).toBeTruthy();
})
}));
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963444/angular.png)
GRACIAS...
Copy of Curso de Testing con Angular
By Yhoan Andres Galeano Urrea
Copy of Curso de Testing con Angular
- 743