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

Question

按钮看起来像这样

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

我想检查/account/recovery/identification点击按钮后url 是否已重定向到

如果是锚标签解决方案这里提供。我的问题是按钮标签。

我的测试规范如下所示。

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

您共享的链接中的答案也适用于按钮。这是一个可以玩的plnkr 。我希望有一种方法可以静态（无点击）检查按钮上的路由器链接。我想你可以检查它的属性并检查“ng-reflect-router-link”，但这感觉很脏。\xc2\xaf\\_(\xe3\x83\x84)_/\xc2\xaf

\n\n

\n
• 为测试路由创建一个轻量级组件 ( DummyComponent)。（如果测试多个路由，您可以多次使用它。）
\n
• 包含RouterTestingModule.withRoutes([...])您在测试模块导入中测试的路径的虚拟组件。
\n

• 导入Location并将其注入到测试中。RouterTestingModule使用模拟位置策略，以便您可以检查更改。

  \n\n

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

\n

\n