Angular2如何模拟已订阅的激活路由参数
Angular2 how to Mock Activated Route Params subscribed
我有一个组件从 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;
}
......
该测试提供了一个模拟 class 的 ActivatedRoute 作为 "useValue"。测试看起来像:
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', () => {
});
});
当我 运行 测试时,我得到下一个错误:
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 提供程序放入提供程序集合中(导入 RouterTestingModule 或提供 Router,但不能同时提供两者)。
此外,我不知道这是否有帮助,但我在 Angular 6 中遇到了一个相关问题,我不得不使用此语法:
providers: [
{ provide: ActivatedRoute, useValue: {
paramMap: of( convertToParamMap( { userId: 1 } ) )
}
}
],
convertToParamMap
在 @angular/Router
对我有用的解决方案如下 (Angular 7 + Jest):
const mockActivatedRoute = {
snapshot: {
paramMap: {
get() { return '1'; }
}
}
};
并且只需在提供程序中使用它:
providers: [
{ provide: ActivatedRoute, useValue: mockActivatedRoute },
],
我有一个组件从 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;
}
......
该测试提供了一个模拟 class 的 ActivatedRoute 作为 "useValue"。测试看起来像:
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', () => {
});
});
当我 运行 测试时,我得到下一个错误:
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 提供程序放入提供程序集合中(导入 RouterTestingModule 或提供 Router,但不能同时提供两者)。
此外,我不知道这是否有帮助,但我在 Angular 6 中遇到了一个相关问题,我不得不使用此语法:
providers: [
{ provide: ActivatedRoute, useValue: {
paramMap: of( convertToParamMap( { userId: 1 } ) )
}
}
],
convertToParamMap
在 @angular/Router
对我有用的解决方案如下 (Angular 7 + Jest):
const mockActivatedRoute = {
snapshot: {
paramMap: {
get() { return '1'; }
}
}
};
并且只需在提供程序中使用它:
providers: [
{ provide: ActivatedRoute, useValue: mockActivatedRoute },
],