Componentes con RouterLink
Contenido del curso
Componentes con RouterLink
Contenido del curso
podemos ver como realizar este tipo de pruebas desde la página oficial de Angular en angular-testing , para poder realizar esto primero debemos crear un archivo que tenga la forma de hacer mock a las routes en la carpeta testing
router-link-directive-stub.ts
import { Directive, HostListener, Input } from '@angular/core'; @Directive({ selector: '[routerLink]' }) export class RouterLinkDirectiveStub { @Input('routerLink') linkParams: any; navigatedTo: any = null; @HostListener('click') onClick() { this.navigatedTo = this.linkParams; } }
ahora podemos realizar pruebas desde el app.component.ts ya que ahi tenemos la mayor cantidad de routerlink activo
app.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; import { RouterLinkDirectiveStub } from './../testing/router-link-directive-stub'; import { queryAllByDirective } from 'src/testing'; describe('AppComponent', () => { let fixture: ComponentFixture<AppComponent>; let component: AppComponent; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent, RouterLinkDirectiveStub ], }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should there are 7 routerlinks', () => { const links = queryAllByDirective(fixture, RouterLinkDirectiveStub); expect(links.length).toEqual(7); }); it('should there are 7 routerlinks with match routes', () => { const links = queryAllByDirective(fixture, RouterLinkDirectiveStub); const routerLinks = links.map(link => link.injector.get(RouterLinkDirectiveStub)); expect(links.length).toEqual(7); expect(routerLinks[0].linkParams).toEqual('/'); expect(routerLinks[1].linkParams).toEqual('/auth/register'); expect(routerLinks[2].linkParams).toEqual('/people'); }); });
