unit-testing - routertestingmodule - test router angular 6

Angular 2 Jasmine No se puede enlazar a ''routerLink'' ya que no es una propiedad conocida de ''a''

Question

Estoy creando una prueba de unidad para mi componente Navbar y recibo un error:

No se puede enlazar a ''routerLink'' ya que no es una propiedad conocida de ''a''

Navbar Component TS

import { Component } from ''@angular/core'';
import { Router } from ''@angular/router'';
import { NavActiveService } from ''../../../services/navactive.service'';
import { GlobalEventsManager } from ''../../../services/GlobalEventsManager'';

@Component({
  moduleId: module.id,
  selector: ''my-navbar'',
  templateUrl: ''navbar.component.html'',
  styleUrls:[''navbar.component.css''],
  providers: [NavActiveService]
})
export class NavComponent {
  showNavBar: boolean = true;

  constructor(private router: Router,
              private navactiveservice:NavActiveService,
              private globalEventsManager: GlobalEventsManager){

    this.globalEventsManager.showNavBar.subscribe((mode:boolean)=>{
      this.showNavBar = mode;
    });

  }

}

Especificación del componente de la barra de navegación

import { ComponentFixture, TestBed, async } from ''@angular/core/testing'';    
import { NavComponent } from ''./navbar.component'';
import { DebugElement }    from ''@angular/core'';
import { By }              from ''@angular/platform-browser'';
import { Router } from ''@angular/router'';

export function main() {
    describe(''Navbar component'', () => {

        let de: DebugElement;
        let comp: NavComponent;
        let fixture: ComponentFixture<NavComponent>;
        let router: Router;

        // preparing module for testing
        beforeEach(async(() => {
            TestBed.configureTestingModule({
                declarations: [NavComponent],
            }).compileComponents().then(() => {

                fixture = TestBed.createComponent(NavComponent);
                comp = fixture.componentInstance;
                de = fixture.debugElement.query(By.css(''p''));

            });
        }));


        it(''should create component'', () => expect(comp).toBeDefined());


/*        it(''should have expected <p> text'', () => {
            fixture.detectChanges();
            const h1 = de.nativeElement;
            expect(h1.innerText).toMatch(" ");
        });*/


    });
}

Me doy cuenta de que necesito agregar un enrutador como espía, pero si lo agrego como SpyObj y lo declaro como proveedor, obtengo el mismo error.

¿Hay alguna manera mejor para que yo pueda agregar arreglar este error?

EDITAR: prueba de unidad de trabajo

Construyó esta prueba de unidad basada en la respuesta:

import { ComponentFixture, TestBed, async  } from ''@angular/core/testing'';
import { NavComponent } from ''./navbar.component'';
import { DebugElement }    from ''@angular/core'';
import { By }              from ''@angular/platform-browser'';
import { RouterLinkStubDirective, RouterOutletStubComponent } from ''../../../../test/router-stubs'';
import { Router } from ''@angular/router'';
import { GlobalEventsManager } from ''../../../services/GlobalEventsManager'';
import { RouterModule } from ''@angular/router'';
import { SharedModule } from ''../shared.module'';


export function main() {
    let comp: NavComponent;
    let fixture: ComponentFixture<NavComponent>;
    let mockRouter:any;
    class MockRouter {
        //noinspection TypeScriptUnresolvedFunction
        navigate = jasmine.createSpy(''navigate'');
    }

    describe(''Navbar Componenet'', () => {

        beforeEach( async(() => {
            mockRouter = new MockRouter();
            TestBed.configureTestingModule({
                imports: [ SharedModule ]
            })

            // Get rid of app''s Router configuration otherwise many failures.
            // Doing so removes Router declarations; add the Router stubs
                .overrideModule(SharedModule, {
                    remove: {
                        imports: [ RouterModule ],

                    },
                    add: {
                        declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ],
                        providers: [ { provide: Router, useValue: mockRouter }, GlobalEventsManager ],
                    }
                })

                .compileComponents()

                .then(() => {
                    fixture = TestBed.createComponent(NavComponent);
                    comp    = fixture.componentInstance;
                });
        }));

        tests();
    });


        function tests() {
            let links: RouterLinkStubDirective[];
            let linkDes: DebugElement[];

            beforeEach(() => {
                // trigger initial data binding
                fixture.detectChanges();

                // find DebugElements with an attached RouterLinkStubDirective
                linkDes = fixture.debugElement
                    .queryAll(By.directive(RouterLinkStubDirective));

                // get the attached link directive instances using the DebugElement injectors
                links = linkDes
                    .map(de => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
            });

            it(''can instantiate it'', () => {
                expect(comp).not.toBeNull();
            });

            it(''can get RouterLinks from template'', () => {
                expect(links.length).toBe(5, ''should have 5 links'');
                expect(links[0].linkParams).toBe( ''/'', ''1st link should go to Home'');
                expect(links[1].linkParams).toBe(''/'', ''2nd link should go to Home'');
expect(links[2].linkParams).toBe(''/upload'', ''3rd link should go to Upload'');
                expect(links[3].linkParams).toBe(''/about'', ''4th link should to to About'');
                expect(links[4].linkParams).toBe(''/login'', ''5th link should go to Logout'');
            });

            it(''can click Home link in template'', () => {
                const uploadLinkDe = linkDes[1];
                const uploadLink = links[1];

                expect(uploadLink.navigatedTo).toBeNull(''link should not have navigated yet'');

                uploadLinkDe.triggerEventHandler(''click'', null);
                fixture.detectChanges();

                expect(uploadLink.navigatedTo).toBe(''/'');
            });


            it(''can click upload link in template'', () => {
                const uploadLinkDe = linkDes[2];
                const uploadLink = links[2];

                expect(uploadLink.navigatedTo).toBeNull(''link should not have navigated yet'');

                uploadLinkDe.triggerEventHandler(''click'', null);
                fixture.detectChanges();

                expect(uploadLink.navigatedTo).toBe(''/upload'');
            });

            it(''can click about link in template'', () => {
                const uploadLinkDe = linkDes[3];
                const uploadLink = links[3];

                expect(uploadLink.navigatedTo).toBeNull(''link should not have navigated yet'');

                uploadLinkDe.triggerEventHandler(''click'', null);
                fixture.detectChanges();

                expect(uploadLink.navigatedTo).toBe(''/about'');
            });

            it(''can click logout link in template'', () => {
                const uploadLinkDe = linkDes[4];
                const uploadLink = links[4];

                expect(uploadLink.navigatedTo).toBeNull(''link should not have navigated yet'');

                uploadLinkDe.triggerEventHandler(''click'', null);
                fixture.detectChanges();

                expect(uploadLink.navigatedTo).toBe(''/login'');
            });
        }
}

Answer 1

Los documentos de prueba ng2 abordan esto utilizando RouterLinkStubDirective y RouterOutletStubComponent de modo que routerLink es una propiedad conocida de <a>. Básicamente, dice que usar RouterOutletStubComponent es una forma segura de probar routerLinks sin todas las complicaciones y errores de usar el RouterOutlet real. Su proyecto necesita saber que existe para que no genere errores, pero no tiene que hacer nada en este caso. El RouterLinkStubDirective le permite hacer clic en <a> enlaces con la directiva routerLink y obtener la información suficiente para probar que se está haciendo clic (navegar) en la ruta correcta (enlace Paquetes). Más funcionalidad que esa y ya no está probando su componente de forma aislada.

Eche un vistazo a su demo en app / app.component.spec.ts. Toma las pruebas / router-stubs.ts y agrégala a tu proyecto. Luego, se inyectarán los 2 elementos aplastados en sus declaraciones de TestBed.

Answer 2

Solo agrega la línea:

imports: [RouterTestingModule],

en TestBed.configureTestingModule del archivo TestBed.configureTestingModule de sus componentes y

import { RouterTestingModule } from ''@angular/router/testing'';

Me gusta:

TestBed.configureTestingModule({
  imports: [RouterTestingModule],
  declarations: [ ComponentHeaderComponent ]
})