Angular2 如何模拟已订阅的激活路由参数 [英] Angular2 how to Mock Activated Route Params subscribed
问题描述
我有一个从 ActivatedRoute 的 params 属性获取值的组件.
I have a components that gets a value from the params property of a ActivatedRoute.
组件看起来像:
......
constructor(public userRegistration: UserRegistrationService, public userLogin: UserLoginService,
public router: Router, public route: ActivatedRoute) {
}
ngOnInit() {
this.verificationCode = new FormControl('', [Validators.required]);
this.confirmationCodeForm = new FormGroup({verificationCode: this.verificationCode});
//******************************
this.sub = this.route.params.subscribe(params => {
this.email = params['userId'];
});
//******************************
this.errorMessage = null;
}
......
该测试提供了一个 ActivatedRoute 作为模拟该类的useValue".测试看起来像:
The test provides an ActivatedRoute as "useValue" that mocks the class. The test looks like:
describe('ConfirmRegistrationComponent', () => {
let component: ConfirmRegistrationComponent;
let fixture: ComponentFixture<ConfirmRegistrationComponent>;
let userRegistrationService: UserRegistrationService;
let userLoginService: UserLoginService;
let router: Router;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule, RouterTestingModule, HttpClientModule],
declarations: [ConfirmRegistrationComponent],
providers: [UserRegistrationService, UserLoginService, {
provide: ActivatedRoute,
useValue: {'params': Observable.from([{userId: 1}])}
}, ImageService, UserService, CognitoUtil,
{
provide: Router, useClass: class {
navigate = jasmine.createSpy('navigate');
}
}]
}).compileComponents();
fixture = TestBed.createComponent(ConfirmRegistrationComponent);
component = fixture.componentInstance;
userRegistrationService = TestBed.get(UserRegistrationService);
userLoginService = TestBed.get(UserLoginService);
spyOn(userLoginService, 'isAuthenticated').and.callFake(function () {
});
router = TestBed.get(Router);
fixture.detectChanges();
component.ngOnInit();
}));
it('should create', () => {
});
});
当我运行测试时,出现下一个错误:
When I run the test, I get the next error:
Failed: Cannot read property 'subscribe' of undefined
TypeError: Cannot read property 'subscribe' of undefined
at new RouterLinkWithHref node_modules/@angular/router/esm5/router.js:6099:1)
你能帮我吗?谢谢!
推荐答案
使用 RouterTestingModule 时,不应将 Router 提供程序放入 providers 集合中(导入 RouterTestingModule 或提供 Router,但不能同时提供).
When using the RouterTestingModule, you should not put a Router provider in the providers collection (either import RouterTestingModule or provide Router, but not both).
此外,我不知道这是否会有所帮助,但我在 Angular 6 中遇到了一个相关问题,我不得不使用这种语法:
Additionally, I don't know if this will help, but I had a related problem in Angular 6 where I had to use this syntax:
providers: [
{ provide: ActivatedRoute, useValue: {
paramMap: of( convertToParamMap( { userId: 1 } ) )
}
}
],
convertToParamMap
在 @angular/Router
这篇关于Angular2 如何模拟已订阅的激活路由参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!