我正在对用于编辑对象的组件进行单元测试。该对象具有唯一id性，用于从服务中托管的对象数组中获取特定对象。具体id是通过通过路由传递的参数获得的，特别是通过ActivatedRoute类。
构造函数如下：
constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) {}
ngOnInit() {
this._curRoute.params.subscribe(params => {
this.userId = params['id'];
this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0];
我想在这个组件上运行基本的单元测试。但是，我不确定如何注入id参数，并且组件需要这个参数。
顺便说一句：我已经有一个模拟Session服务，所以不用担心。
最简单的方法是只使用该useValue属性并提供要模拟的值的 Observable。
RxJS < 6
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
...
{
provide: ActivatedRoute,
useValue: {
params: Observable.of({id: 123})
}
}
RxJS >= 6
import { of } from 'rxjs';
...
{
provide: ActivatedRoute,
useValue: {
params: of({id: 123})
}
}
在 angular 8+ 中有RouterTestingModule，您可以使用它来访问组件的ActivatedRouteor Router。您还可以将路由传递给RouterTestingModule并为请求的路由方法创建间谍。
例如在我的组件中，我有：
ngOnInit() {
if (this.route.snapshot.paramMap.get('id')) this.editMode()
this.titleService.setTitle(`${this.pageTitle} | ${TAB_SUFFIX}`)
}
在我的测试中，我有：
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProductLinePageComponent ],
schemas: [NO_ERRORS_SCHEMA],
imports: [
RouterTestingModule.withRoutes([])
],
})
.compileComponents()
}))
beforeEach(() => {
router = TestBed.get(Router)
route = TestBed.get(ActivatedRoute)
})
稍后在“它”部分：
it('should update', () => {
const spyRoute = spyOn(route.snapshot.paramMap, 'get')
spyRoute.and.returnValue('21')
fixture = TestBed.createComponent(ProductLinePageComponent)
component = fixture.componentInstance
fixture.detectChanges()
expect(component).toBeTruthy()
expect(component.pageTitle).toBe('Edit Product Line')
expect(component.formTitle).toBe('Edit Product Line')
// here you can test the functionality which is triggered by the snapshot
})
以类似的方式，我认为您可以paramMap通过spyOnPropertyjasmine 的方法直接测试，通过返回一个 observable 或使用 rxjs 弹珠。它可能会节省一些时间，也不需要维护额外的模拟类。希望它有用并且有意义。
我已经想出了如何做到这一点！
既然ActivatedRoute是服务，就可以为它建立一个模拟服务。我们称之为模拟服务MockActivatedRoute。我们将ActivatedRoute在 中进行扩展MockActivatedRoute，如下所示：
class MockActivatedRoute extends ActivatedRoute {
constructor() {
super(null, null, null, null, null);
this.params = Observable.of({id: "5"});
}
该行super(null, ....)初始化超类，它有四个强制参数。但是，在这种情况下，我们不需要任何这些参数，因此我们将它们初始化为null值。我们所需要的只是它的值params是一个Observable<>. 因此，使用this.params，我们覆盖 的值params并将其初始化为Observable<>测试对象所依赖的参数的 。
然后，与任何其他模拟服务一样，只需对其进行初始化并覆盖组件的提供程序。
祝你好运！
这是我在最新的 angular 2.0 中测试它的方法...
import { ActivatedRoute, Data } from '@angular/router';
并在提供者部分
{
provide: ActivatedRoute,
useValue: {
data: {
subscribe: (fn: (value: Data) => void) => fn({
yourData: 'yolo'
})
}
}
}
只需添加 ActivatedRoute 的模拟：
providers: [
{ provide: ActivatedRoute, useClass: MockActivatedRoute }
]
...
class MockActivatedRoute {
// here you can add your mock objects, like snapshot or parent or whatever
// example:
parent = {
snapshot: {data: {title: 'myTitle ' } },
routeConfig: { children: { filter: () => {} } }
};
}
在为路由路径创建测试套件时遇到了同样的问题：
{
path: 'edit/:property/:someId',
component: YourComponent,
resolve: {
yourResolvedValue: YourResolver
}
}
在组件中，我将传递的属性初始化为：
ngOnInit(): void {
this.property = this.activatedRoute.snapshot.params.property;
...
}
运行测试时，如果您没有在模拟的 ActivatedRoute“useValue”中传递属性值，那么在使用“fixture.detectChanges()”检测更改时，您将得到未定义。这是因为 ActivatedRoute 的模拟值不包含属性 params.property。然后，模拟 useValue 需要具有这些参数，以便夹具初始化组件中的“this.property”。您可以将其添加为：
let fixture: ComponentFixture<YourComponent>;
let component: YourComponent;
let activatedRoute: ActivatedRoute;
beforeEach(done => {
TestBed.configureTestingModule({
declarations: [YourComponent],
imports: [ YourImportedModules ],
providers: [
YourRequiredServices,
{
provide: ActivatedRoute,
useValue: {
snapshot: {
params: {
property: 'yourProperty',
someId: someId
},
data: {
yourResolvedValue: { data: mockResolvedData() }
}
}
}
}
]
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(YourComponent);
component = fixture.debugElement.componentInstance;
activatedRoute = TestBed.get(ActivatedRoute);
fixture.detectChanges();
done();
});
});
您可以开始测试，例如：
it('should ensure property param is yourProperty', async () => {
expect(activatedRoute.snapshot.params.property).toEqual('yourProperty');
....
});
现在，假设您想测试一个不同的属性值，那么您可以将您的模拟 ActivatedRoute 更新为：
it('should ensure property param is newProperty', async () => {
activatedRoute.snapshot.params.property = 'newProperty';
fixture = TestBed.createComponent(YourComponent);
component = fixture.debugElement.componentInstance;
activatedRoute = TestBed.get(ActivatedRoute);
fixture.detectChanges();
expect(activatedRoute.snapshot.params.property).toEqual('newProperty');
});
希望这可以帮助！
对于一些在 Angular > 5 上工作的人来说，如果 Observable.of(); 不工作那么他们可以通过从'rxjs'导入import { of }来使用of（）；
角度 11：将其添加到您的规范文件中
imports: [
RouterTestingModule.withRoutes([])
],
这仅用一行就可以帮助我，而其他您需要模拟提供者
到目前为止，所有其他答案只提供路由参数的值。如果您想测试路由更改触发器本身怎么办？您可以在测试中为 ActivatedRoute 提供 Subject 及其 Observable，因此您可以使用 source.next() 触发路由更改。
被测代码：
constructor(private readonly route: ActivatedRoute) {}
ngOnInit(): void {
this.routeParamSubscription = this.route.params.subscribe((params) => {
if (params['id']) {
this.loadDetails(params['id']);
}
});
}
测试代码：
let routeChangeSource: BehaviorSubject<Params>;
// In TestBed.configureTestingMethod
...
providers: [
{
provide: ActivatedRoute,
useValue: {
params: routeChangeSource.asObservable()
}
}
]
...
it('loads data on route change', fakeAsync(() => {
const spy = spyOn(component, 'loadDetails').and.callThrough();
routeChangeSource.next({ id: 99 });
tick();
expect(spy).toHaveBeenCalledOnceWith(99);
}));
这将测试路由更改后触发的操作并确保它被激活。
在测试类中添加提供者为：
{
provide: ActivatedRoute,
useValue: {
paramMap: of({ get: v => { return { id: 123 }; } })
}
}