如何測試routerLink按鈕標籤angular2

Question

按鈕看起來像這樣

<button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button> 

我要檢查，如果點擊按鈕

後，如果它是一個錨標記solution is provided here URL已重定向到/account/recovery/identification內。我的問題是按鈕標籤。

我的測試規格看起來像這樣。

beforeEach(async(() => { 
     let ne = new NavigationEnd(0, "/account/recovery/otp", null);  // Create a mock instance for navigation end, utilized within OnInit() 
     router = { 
      navigate: jasmine.createSpy('navigate'), // to spy on the url that has been routed 
      events: new Observable(observer => {  // last router event that occurred 
       observer.next(ne); 
      }), 

     }; 
     TestBed 
      .configureTestingModule({ 
       imports: [CoreModule], 
       declarations: [OtpComponent], 
       providers: [ 
        {provide: Router, useValue: router}, 
        {provide: ActivatedRoute, useValue: router}, 
        {provide: Location, useClass: SpyLocation}, FormBuilder 
       ], 
       schemas: [NO_ERRORS_SCHEMA] 
      }) 
      .overrideComponent(OtpComponent, { 
       set: { 
        providers: [ 
         {provide: MyModel, useClass: MockModel} 
        ], 
       } 
      }) 
      .compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(OtpComponent); 
     component = fixture.componentInstance; 
    }); 

it('Back button click on OTP screen should redirect to identification screen', async(inject([Location], (location: Location) => { 

     fixture.detectChanges(); 

     let buttonElements = fixture.debugElement.queryAll(By.css('button')); // fetch all the elements with button tag. 

     buttonElements[0].nativeElement.click(); 

     fixture.detectChanges(); 
     fixture.whenStable().then(
      () => { 
       expect(location.path()).toBe(['/account/recovery', 'identification']);  // check if url is routed to identification page after back button is clicked 
      } 
     ); 
    }))); 

但它不給我我想要的結果，這裏是我的了：

Chrome 56.0.2924 (Windows 7 0.0.0) OtpComponent Back button click on OTP screen should redirect to identification screen FAILED 
     Expected '' to be [ '/account/recovery', 'identification' ]. 
      at webpack:///src/app/account/registration/otp/otp.component.spec.ts:775:40 <- src/test.ts:124883:37 [ProxyZone] 
      at AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:98588:39) [ProxyZone] 
      at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:76:0 <- src/test.ts:99280:39) [ProxyZone] 
      at Zone.run (webpack:///~/zone.js/dist/zone.js:113:0 <- src/test.ts:148355:43) [ProxyZone => ProxyZone] 
      at webpack:///~/zone.js/dist/zone.js:535:0 <- src/test.ts:148777:57 [ProxyZone] 
Chrome 56.0.2924 (Windows 7 0.0.0): Executed 1 of 147 (1 FAILED) (skipped 146) ERROR (0.96 secs/0.594 secs) 

即使buttonElements[0].nativeElement.click();似乎並沒有工作，因爲沒有註冊任何點擊事件。

Answer 1

您分享的鏈接中的answer也適用於按鈕。這裏有一個plnkr玩。我希望有一種方法可以靜態（不點擊）檢查按鈕上的路由器鏈接。我想你可以檢查它的屬性並檢查'ng-reflect-router-link'，但那感覺很髒。

• 爲測試路線創建一個輕量級組件（DummyComponent）。 （如果測試多條路線，您可以多次使用它。）
• 將RouterTestingModule.withRoutes([...])包含在測試模塊導入中用於測試路徑的虛擬組件。

• 導入Location並注入測試。 RouterTestingModule使用模擬位置策略，因此您可以檢查更改。

  @Component({ template: '' }) 
  class DummyComponent {} 
  
  beforeEach(() => { 
      TestBed.configureTestingModule({ 
      declarations: [AppComponent, DummyComponent], 
      imports: [ 
       RouterTestingModule.withRoutes([ 
       { path: 'test', component: DummyComponent } 
       ]) 
      ] 
      }); 
  }); 
  
  describe('app',() => { 
      it('should have a test button', inject([Location], (location) => { 
      const fixture = TestBed.createComponent(AppComponent); 
      const elem = fixture.debugElement; 
  
      const button = elem.query(e => e.name === 'button'); 
      expect(!!button).toBe(true); 
      expect(button.nativeElement.textContent.trim()).toBe('CLICK FOR BUBBLES'); 
  
      button.nativeElement.click(); 
      fixture.detectChanges(); 
      fixture.whenStable().then(() => { 
       expect(location.path()).toBe('/test'); 
      }); 
      })); 
  });