Eğik 2 Yasemin 'routerLink' bağlanmayan Can 'a' Ben Navbar'ın Bileşeni için bir birim testi oluşturmadan ediyorum ve bir hata alıyorum

Question

:

Can't bind to 'routerLink' since it isn't a known property of 'a'

Navbar'ın bileşen TH

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; 
    }); 

    } 

} 

Navbar'ın Bileşen Spektroskopisi

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(" "); 
     });*/ 


    }); 
} 

Yönlendiriciyi casus olarak eklemem gerektiğini anlıyorum ama eğer SpyObj olarak ekler ve sağlayıcı olarak bildirirseniz aynı hatayı alırım.

Bu hatayı düzeltmem için daha iyi bir yol var mı? routerLink bilinen bir özelliği böylece RouterLinkStubDirective ve RouterOutletStubComponent kullanarak

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

ng2 Testing docs adresi bu:

DÜZENLEME: Çalışma Birim Test

Yanıta göre bu birim testi Dahili < a>. Temel olarak RouterOutletStubComponent'in kullanılması, RouterOutlet'in kullanılmasının tüm komplikasyonları ve hataları olmadan routerLinkleri test etmenin güvenli bir yoludur. Projenizin var olduğunu bilmesi gerekiyor, bu yüzden hata atmıyor ama aslında bu durumda bir şey yapması gerekmiyor. RouterLinkStubDirective, yönlendiriciLink yönergesine sahip bir bağlantıya < a> tıklatmanıza ve tıklatıldığını (gezinmek için) ve doğru yola (linkParams) gidip gelmediğini sınamak için yeterli bilgiyi almanızı sağlar. Bundan daha fazla işlevsellik ve gerçekten bileşeninizi artık yalıtım içinde test etmiyorsunuz.

App/app.component.spec.ts dosyasında bulunan demo'a bakın. Test/yönlendirici-stubs.ts tut ve projenize ekleyin. Daha sonra 2 adet stubbed ürünü TestBed beyanlarınıza enjekte edersiniz.