Introducción a RouterTestingModule

Clase 14 de 20 • Curso de Angular: Unit Testing para Rutas

Clase anteriorSiguiente clase

Franklin Gil

student•

Si no veo estos cursos nunca iba a entender esos memes!

Cesar Elías Armendariz Ruano

student•

Esto permite hacer pruebas de integración, por lo que prueba como los componentes interactuan entre ellos.

Estas pruebas deben ser a nivel de cada módulo, para verificar la funcionalidad dentro de cada modulo.

para lo cual en el ejemplo crearemos un archivo al nivel del app.module.ts

app.integration.spec.ts

import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-people'
})
class PeopleComponent {}

@Component({
  selector: 'app-pico-preview'
})
class PicoPreviewComponent {}

@Component({
  selector: 'app-others'
})
class OthersComponent {}

const routes = [
  {
    path: 'pico-preview',
    component: PicoPreviewComponent
  },
  {

    path: 'people',
    component: PeopleComponent
  },
  {
    path: 'others',
    component: OthersComponent
  },
]

describe('App Integration test', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes(routes)
      ],
      declarations: [
        AppComponent,
        PicoPreviewComponent,
        PeopleComponent,
        OthersComponent
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });

  beforeEach(fakeAsync(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    // providers
    router = TestBed.inject(Router);
    router.initialNavigation();
    tick(); // wait for the router to be initialized
    fixture.detectChanges();
  }));

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });
});

Ana Velez Ossa

student•

Pruebas de Integración Verifican cómo interactúan varios componentes o módulos de una aplicación.

Características:

Nivel de Módulo: Se realizan a nivel de módulo específico.
Mocking: Usan mocks para simular dependencias y servicios.
Interacción de Componentes: Evalúan la interacción entre componentes.
Velocidad: Más rápidas que las pruebas E2E.

Pruebas End-to-End (E2E)

Verifican el flujo completo de la aplicación desde el inicio hasta el final.

Características:

Automatización Completa: Simulan la interacción del usuario con la aplicación.
Simulación de Backend: Pueden simular un backend real.
Renderizado Completo: Verifican el comportamiento de la interfaz de usuario.
Cobertura Completa: Cubren el flujo completo del usuario.
Tiempo de Ejecución: Más lentas que las pruebas de integración.

import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-people'
})
class PeopleComponent {}

@Component({
  selector: 'app-pico-preview'
})
class PicoPreviewComponent {}

@Component({
  selector: 'app-others'
})
class OthersComponent {}

const routes = [
  {
    path: 'pico-preview',
    component: PicoPreviewComponent
  },
  {

    path: 'people',
    component: PeopleComponent
  },
  {
    path: 'others',
    component: OthersComponent
  },
]

describe('App Integration test', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes(routes)
      ],
      declarations: [
        AppComponent,
        PicoPreviewComponent,
        PeopleComponent,
        OthersComponent
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });

  beforeEach(fakeAsync(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    // providers
    router = TestBed.inject(Router);
    router.initialNavigation();
    tick(); // wait for the router to be initialized
    fixture.detectChanges();
  }));

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });
});

Introducción a RouterTestingModule

Creación de pruebas a parámetros

Configurando el proyecto

Probando el Router

Parámetros

Product Detail

Pruebas a los parámetros

Pruebas al render

Pruebas inválidas del parámetro

Solución del reto: fakeAsync & tick

Pruebas a QueryParams

Routing components

Componentes con RouterLink

Pruebas con componentes anidados

Pruebas a Guardianes

Pruebas a canActivate

Fake ParamsMap en Guardianes

Integration tests

Introducción a RouterTestingModule

Navegando entre rutas

Montando componentes reales

Componentes con dependencias

Pruebas de integración con Guardianes

Integración continua con GitHub Actions

Cierre

Angular Unit Testing Hero