如何测试按钮标签内的routerLink angular2
How to test routerLink inside button tag angular2
按钮看起来像这样
<button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button>
我想检查 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();
似乎也不起作用,因为没有注册点击事件。
in the link you shared works for buttons, too. Here's a plnkr一起玩。我希望有一种方法可以静态(无点击)检查按钮上的路由器 link。我想您可以检查它的属性并检查 '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');
});
}));
});
按钮看起来像这样
<button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button>
我想检查 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();
似乎也不起作用,因为没有注册点击事件。
- 为测试路线创建一个轻量级组件 (
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'); }); })); });