Probando el Router

Creación de pruebas a parámetros

import { Router } from '@angular/router';

describe('RegisterFormComponent', () => {
  let component: RegisterFormComponent;
  let fixture: ComponentFixture<RegisterFormComponent>;
  let userService: jasmine.SpyObj<UsersService>;
  let router: jasmine.SpyObj<Router>;

  beforeEach(async () => {
    const spy = jasmine.createSpyObj('UsersService', ['create', 'isAvailableByEmail']);
    const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);

    await TestBed.configureTestingModule({
      declarations: [ RegisterFormComponent ],
      imports: [ ReactiveFormsModule ],
      providers: [
        { provide:  UsersService, useValue: spy },
        { provide:  Router, useValue: routerSpy },
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(RegisterFormComponent);
    userService = TestBed.inject(UsersService) as jasmine.SpyObj<UsersService>;
    router = TestBed.inject(Router) as jasmine.SpyObj<Router>;
    component = fixture.componentInstance;

    userService.isAvailableByEmail.and.returnValue(mockObservable({isAvailable: true}));
    fixture.detectChanges();
  });
 
   it('should send the form successfully from UI', fakeAsync(() => {
    setInputValue(fixture, 'input#name', 'Nico');
    setInputValue(fixture, 'input#email', 'nico@gmil.com');
    setInputValue(fixture, 'input#password', '12121212');
    setInputValue(fixture, 'input#confirmPassword', '12121212');
    setCheckboxValue(fixture, 'input#terms', true);
    const mockUser = generateOneUser();
    userService.create.and.returnValue(asyncData(mockUser));
    // Act
    // component.register(new Event('submit'));
    clickElement(fixture, 'btn-submit', true);
    // query(fixture, 'form').triggerEventHandler('ngSubmit', new Event('submit'));
    fixture.detectChanges();
    expect(component.status).toEqual('loading');

    tick();  // exec pending tasks
    fixture.detectChanges();
    expect(component.status).toEqual('success');
    expect(component.form.valid).toBeTruthy();
    expect(userService.create).toHaveBeenCalled();
    expect(router.navigateByUrl).toHaveBeenCalledWith('/login');
  }));

import { Router } from '@angular/router';

describe('RegisterFormComponent', () => {
  let component: RegisterFormComponent;
  let fixture: ComponentFixture<RegisterFormComponent>;
  let userService: jasmine.SpyObj<UsersService>;
  let router: jasmine.SpyObj<Router>;

  beforeEach(async () => {
    const spy = jasmine.createSpyObj('UsersService', ['create', 'isAvailableByEmail']);
    const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);

    await TestBed.configureTestingModule({
      declarations: [ RegisterFormComponent ],
      imports: [ ReactiveFormsModule ],
      providers: [
        { provide:  UsersService, useValue: spy },
        { provide:  Router, useValue: routerSpy },
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(RegisterFormComponent);
    userService = TestBed.inject(UsersService) as jasmine.SpyObj<UsersService>;
    router = TestBed.inject(Router) as jasmine.SpyObj<Router>;
    component = fixture.componentInstance;

    userService.isAvailableByEmail.and.returnValue(mockObservable({isAvailable: true}));
    fixture.detectChanges();
  });
 
   it('should send the form successfully from UI', fakeAsync(() => {
    setInputValue(fixture, 'input#name', 'Nico');
    setInputValue(fixture, 'input#email', 'nico@gmil.com');
    setInputValue(fixture, 'input#password', '12121212');
    setInputValue(fixture, 'input#confirmPassword', '12121212');
    setCheckboxValue(fixture, 'input#terms', true);
    const mockUser = generateOneUser();
    userService.create.and.returnValue(asyncData(mockUser));
    // Act
    // component.register(new Event('submit'));
    clickElement(fixture, 'btn-submit', true);
    // query(fixture, 'form').triggerEventHandler('ngSubmit', new Event('submit'));
    fixture.detectChanges();
    expect(component.status).toEqual('loading');

    tick();  // exec pending tasks
    fixture.detectChanges();
    expect(component.status).toEqual('success');
    expect(component.form.valid).toBeTruthy();
    expect(userService.create).toHaveBeenCalled();
    expect(router.navigateByUrl).toHaveBeenCalledWith('/login');
  }));

Probando el Router

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