测试依赖于路由参数的组件
Testing a component, which depends on a route param
我有一个关于在 angular2 中测试路由组件的问题。
这是一个简单的组件,它依赖于带有参数 'foo'
的路由。组件中的属性 foo
将被设置为参数的值。
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
@Component({
selector: 'my-component',
templateUrl: './my-component.html'
})
export class MyComponent implements OnInit
{
foo: string;
constructor(
private route: ActivatedRoute
)
{
}
ngOnInit()
{
this.route.params.subscribe((params: Params) => {
this.foo = params['foo'];
});
}
}
现在我想测试一下,如果使用路由创建组件,参数设置是否正确。所以我想在某个地方 expect(component.foo).toBe('3');
.
import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Params, ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {MyComponent} from './MyComponent';
describe('MyComponent', () => {
let mockParams, mockActivatedRoute;
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let debugElement: DebugElement;
let element: HTMLElement;
beforeEach(async(() => {
mockParams = Observable.of<Params>({foo: '3'});
mockActivatedRoute = {params: mockParams};
TestBed.configureTestingModule({
declarations: [
MyComponent
],
providers: [
{provide: ActivatedRoute, useValue: mockActivatedRoute}
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
element = debugElement.nativeElement;
fixture.detectChanges();
});
it('should set foo to "3"', () => {
expect(component.foo).toBe('3');
});
});
我的问题是我不知道如何等待,直到路由解析完成,我可以做一个 expect()
。在此示例中,测试失败并显示 "Expected undefined to be '3'.".
有人可以帮我吗?!
谢谢!
好的,稍微阅读了angular2测试文档,我看到了他们的ActivatedRouteStub
class。我创建了这个存根 class,并用这个新的 class 替换了我原来的模拟。现在它正在工作(识别第二个 beforeEach 中的 mockActivatedRoute.testParams = {foo: '3'};
行)。
import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Params, ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {MyComponent} from './MyComponent';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class ActivatedRouteStub
{
private subject = new BehaviorSubject(this.testParams);
params = this.subject.asObservable();
private _testParams: {};
get testParams() { return this._testParams; }
set testParams(params: {}) {
this._testParams = params;
this.subject.next(params);
}
}
describe('MyComponent', () => {
let mockParams, mockActivatedRoute;
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let debugElement: DebugElement;
let element: HTMLElement;
beforeEach(async(() => {
mockActivatedRoute = new ActivatedRouteStub();
TestBed.configureTestingModule({
declarations: [
MyComponent
],
providers: [
{provide: ActivatedRoute, useValue: mockActivatedRoute}
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
element = debugElement.nativeElement;
mockActivatedRoute.testParams = {foo: '3'};
fixture.detectChanges();
});
it('should set foo to "3"', () => {
expect(component.foo).toBe('3');
});
});
你觉得这样对吗?
我有一个关于在 angular2 中测试路由组件的问题。
这是一个简单的组件,它依赖于带有参数 'foo'
的路由。组件中的属性 foo
将被设置为参数的值。
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
@Component({
selector: 'my-component',
templateUrl: './my-component.html'
})
export class MyComponent implements OnInit
{
foo: string;
constructor(
private route: ActivatedRoute
)
{
}
ngOnInit()
{
this.route.params.subscribe((params: Params) => {
this.foo = params['foo'];
});
}
}
现在我想测试一下,如果使用路由创建组件,参数设置是否正确。所以我想在某个地方 expect(component.foo).toBe('3');
.
import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Params, ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {MyComponent} from './MyComponent';
describe('MyComponent', () => {
let mockParams, mockActivatedRoute;
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let debugElement: DebugElement;
let element: HTMLElement;
beforeEach(async(() => {
mockParams = Observable.of<Params>({foo: '3'});
mockActivatedRoute = {params: mockParams};
TestBed.configureTestingModule({
declarations: [
MyComponent
],
providers: [
{provide: ActivatedRoute, useValue: mockActivatedRoute}
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
element = debugElement.nativeElement;
fixture.detectChanges();
});
it('should set foo to "3"', () => {
expect(component.foo).toBe('3');
});
});
我的问题是我不知道如何等待,直到路由解析完成,我可以做一个 expect()
。在此示例中,测试失败并显示 "Expected undefined to be '3'.".
有人可以帮我吗?!
谢谢!
好的,稍微阅读了angular2测试文档,我看到了他们的ActivatedRouteStub
class。我创建了这个存根 class,并用这个新的 class 替换了我原来的模拟。现在它正在工作(识别第二个 beforeEach 中的 mockActivatedRoute.testParams = {foo: '3'};
行)。
import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Params, ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {MyComponent} from './MyComponent';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class ActivatedRouteStub
{
private subject = new BehaviorSubject(this.testParams);
params = this.subject.asObservable();
private _testParams: {};
get testParams() { return this._testParams; }
set testParams(params: {}) {
this._testParams = params;
this.subject.next(params);
}
}
describe('MyComponent', () => {
let mockParams, mockActivatedRoute;
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let debugElement: DebugElement;
let element: HTMLElement;
beforeEach(async(() => {
mockActivatedRoute = new ActivatedRouteStub();
TestBed.configureTestingModule({
declarations: [
MyComponent
],
providers: [
{provide: ActivatedRoute, useValue: mockActivatedRoute}
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
element = debugElement.nativeElement;
mockActivatedRoute.testParams = {foo: '3'};
fixture.detectChanges();
});
it('should set foo to "3"', () => {
expect(component.foo).toBe('3');
});
});
你觉得这样对吗?