Montando componentes reales

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

Cesar Elías Armendariz Ruano

student•

ahora que se puede ver la navegacion entre rutas y verificar si despues de dar click en la ruta se crea y renderiza el componente de la ruta seleccionada.

pero estamos usando mock de componentes, ahora veamos como montar componentes reales

app.integration.spec.ts

import { routes  } from './app-routing.module';
import { AppModule  } from './app.module';

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

 it('should render OthersComponent when clicked', fakeAsync(() => {
    clickElement(fixture, 'others-link', true);
    tick(); // wait while nav...
    fixture.detectChanges(); // ngOnInit - OthersComponent

	expect(router.url).toEqual('/others');
    const element = query(fixture, 'app-others');
    expect(element).not.toBeNull();
  }));


  it('should render Pico-PreviewComponent when clicked', fakeAsync(() => {
    clickElement(fixture, 'pico-link', true);
    tick(); // wait while nav...
    fixture.detectChanges(); // ngOnInit - PicoPreviewComponent
    expect(router.url).toEqual('/pico-preview');
    const element = query(fixture, 'app-pico-preview');
    expect(element).not.toBeNull();
  }));

Montando componentes reales

Montando componentes reales

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