Componentes con RouterLink
Contenido del curso
Parámetros
Routing components
Integration tests
Cierre
Componentes con RouterLink
Contenido del curso
Componentes con RouterLink
Cesar Elías Armendariz Ruano
Estudiantepodemos 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'); }); });