如何测试routerLink内部按钮标签angular2

如何测试routerLink内部按钮标签angular2,angular,jasmine,angular2-routing,angular2-router,routerlink,Angular,Jasmine,Angular2 Routing,Angular2 Router,Routerlink,按钮看起来像这样 <button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button> 但它并没有给我想要的结果,以下是我得到的: Chrome 56.0.2924 (Windows 7 0.0.0) OtpComponent Back button click on OTP screen should redirect to identif

按钮看起来像这样

<button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button>
但它并没有给我想要的结果,以下是我得到的:

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)
Chrome 56.0.2924(Windows 7 0.0.0)OTP组件返回按钮单击OTP屏幕应重定向到识别屏幕失败
预期“”为['/account/recovery','identification']。
在webpack:///src/app/account/registration/otp/otp.component.spec.ts:775:40 您共享的链接中的也适用于按钮。这里有一个游戏。我希望有一种方法可以静态(不点击)检查按钮上的路由器链接。我想您可以检查它的属性并检查“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');
        });
      }));
    });
    
@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');
    });
  }));
});