Angular Testing Framework + Como probar las rutas

November 05, 2018

Escribir pruebas unitarias nos ayudará a reducir de forma significativa los errores que puedan llegar a producción, en este articulo vamos a ver como realizarlas en las rutas de nuestra App.

Si recuerdas en uno de mis Posts anteriores empezamos a utilizar el Routing de Angular para cambiar entre vistas en nuestra App.

Creamos un par de rutas

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'view/:id',      component: View1Component },
];

y ahora queremos probar que al navegar hacia dashboard cargue /dashboard en la URL y asi. Es una prueba sencilla pero nos ayudara a entender varios conceptos que nos seran utiles cuando tratemos de hacer pruebas mas avanzadas en el routing

¿ Que es el RouterTestingModule ?

Bueno como todos los Testing Module este prepara el router para ser Testeado. Bueno como todos los Testing Module este prepara el router para ser Testeado. Su sintaxis es algo asi:

beforeEach(() => {
  TestBed.configureTestModule({
    imports: [
      RouterTestingModule.withRoutes(
        [{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]
      )
    ]
  });
});

¿ Que es el fakeAsync ?

fakeAsync es un helper el cual nos permite controlar llamados asincronos como si fueran sincronos cuando usamos tick().

Probando nuestras rutas.

Lo primero es preparar nuestro lugar de pruebas con lo necesario. Para esto importamos lo necesario.

import {Location} from "@angular/common";
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {RouterTestingModule} from "@angular/router/testing";
import {Router, Routes} from "@angular/router";

import {DashboardComponent} from './dashboard/dashboard.component';
import {View1Component} from './view1/view1.component';
import {AppComponent} from './app.component';

Luego preparamos nuestro Testbed con todo lo necesario.

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [    RouterTestingModule.withRoutes(routes)],
      declarations: [
        DashboardComponent,
        View1Component,
        AppComponent
      ]
    });

    router = TestBed.get(Router);
    location = TestBed.get(Location);

    fixture = TestBed.createComponent(AppComponent);
    router.initialNavigation();
  });

y creamos nuestras pruebas.

it('navigate to "dashboard" redirects you to /dashboard', fakeAsync(() => {
    router.navigate(['/dashboard']);
    tick(50);
    expect(location.path()).toBe('/dashboard');
  }));

  it('navigate to "view/1" redirects you to /view/1', fakeAsync(() => {
    router.navigate(['/view/1']);
    tick(50);
    expect(location.path()).toBe('/view/1');
  }));

Nuestro codigo completo se veria asi app.component.spec.ts.

import {Location} from "@angular/common";
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {RouterTestingModule} from "@angular/router/testing";
import {Router, Routes} from "@angular/router";

import {DashboardComponent} from './dashboard/dashboard.component';
import {View1Component} from './view1/view1.component';
import {AppComponent} from './app.component';

describe('Router:app', () => {
  let location: Location;
  let router: Router;
  let fixture;

  const routes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'view/:id',      component: View1Component },
  ];

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [    RouterTestingModule.withRoutes(routes)],
      declarations: [
        DashboardComponent,
        View1Component,
        AppComponent
      ]
    });

    router = TestBed.get(Router);
    location = TestBed.get(Location);

    fixture = TestBed.createComponent(AppComponent);
    router.initialNavigation();
  });

  it('navigate to "dashboard" redirects you to /dashboard', fakeAsync(() => {
    router.navigate(['/dashboard']);
    tick(50);
    expect(location.path()).toBe('/dashboard');
  }));

  it('navigate to "view/1" redirects you to /view/1', fakeAsync(() => {
    router.navigate(['/view/1']);
    tick(50);
    expect(location.path()).toBe('/view/1');
  }));
});

y podemos probarlo en con el Angular CLI. Usando el comando.

$ng test

Esto es todo por ahora espero que sea de utilidad para tus proximas pruebas y hasta un proximo post :)