Integración de Unit Test con Servicios

Testing en Angular

Nos ayuda a probar nuestra app de una manera programática, para evitar que al modificar algo falle otra cosa.

Esto mejora la manera de diseñar un sistema.

Tipos de test
Isolados o unit test
• Son aquellos que no dependen de ningún otro test o estado de nuestra aplicación, estos son de mucha ayuda ya que te dan mejores resultados por que prueban unidades especificas por si solas.
No isolados
• Son un poco mas funcionales donde hay un proceso como un conjunto de test en secuencia.

El archivo de configuración para los test es el archivo app.component.spec.ts

Los unit test tienen la siguiente estructura:

describe(‘AppComponent’, () => {
//Cuerpo del unit test
});

AppComponent se refiere a lo que estamos probando, que en este caso seria ese componente, pero podría cambiarse por otra cosa.

Después dentro de la función anónima que es el segundo parámetro de la prueba se pone el cuerpo de la misma.

Antes de cada uno de los test se puede correr una función que nos sirva para configurar el ambiente con el que iniciara el unit test:

describe(‘AppComponent’, () => {
beforeEach(async(() => {
Aquí deben ir las funciones;
}));
});

Por ejemplo:
Podemos usar TestBed que es un modulo que nos probé de funciones que pueden ayudarnos con los test.

describe(‘AppComponent’, () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
});

En este caso usamos la función configureTestingModule para crear un modulo en el que podamos correr el componente, ya que no se puede usar un componente que no es parte de un modulo, por lo que por parámetro le mandamos la declaración del componente que vamos a utilizar, y luego compilamos los componentes del modulo.

Después tenemos la estructura de los test:

it(‘should create the app’, () => {
});

El test se define de esta manera con 2 parámetros que son la descripción del mismo y su cuerpo.

it(‘should create the app’, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});

En este caso se revisara si el componente es creado. Por lo que usaremos el método de TestBed para crear el componente luego asignamos a la constante app el componente completo y evaluamos si existe dicho componente.

También se podría cambiar el cambiar la evaluación para que el test verifique otra cosa, por ejemplo:

it(should have as title 'platzi-test', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual(‘platzi-test’);
});

Que el componente tenga un titulo igual al del texto que se envía como parámetro.

it(‘should render title in a h1 tag’, () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector(‘h1’).textContent).toContain(‘Welcome to platzi-test!’);
});

Esto evalúa que el h1 en el componente contenga el texto del parámetro, se usa la función detectChanges(); para tomar el html ya que este debe ser renderizado primero, luego se toma el elemento nativo en compiled y ya con el se puede seleccionar un elemento para evaluarlo

El comando que se usa para correr los test es:
ng test

Cuando se complete el proceso se abrirá el navegador con la pagina correspondiente se debe cambiar localhost por 192.127.0.1

Para traer un servicio en un test hacemos lo siguiente:

const nombreServicio = fixture.debugElement.injector.get(NombreServicio);

Y la constante tendrá el servicio que hemos traído.

ng g s place/place