Introducción a RouterTestingModule

Curso de Angular: Unit Testing para Rutas

Contenido del curso

Creación de pruebas a parámetros

Parámetros

Routing components

Integration tests

Cierre

20
Angular Unit Testing Hero
01:59 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:09

Introducción a RouterTestingModule

Curso de Angular: Unit Testing para Rutas

Clase 14 de 20

Clase 14 / 20

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();
  });
});

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();
  });
});

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

Introducción a RouterTestingModule

Progreso del curso

Creación de pruebas a parámetros

Parámetros

Routing components

Integration tests

Cierre

Recursos

Recursos