Menu

Angular Testing Framework + Como probar las rutas

testingdemos - November 05, 2018 por Carlos Rojas
Angular CLI7.0.3karma1.7.1karma-jasmine1.1.2

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 :)

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!