单元测试查询参数订阅 (Angular5).

Question

我在测试ActiveRoute queryParams订阅中的逻辑时遇到问题。

constructor(private router: Router, private route: ActivatedRoute, private auth: AuthService) {}
ngOnInit(): void {
this.route.queryParams.subscribe((params:any) => {
if(params['data']) {
this.handle(params['data']);
} else {
if (this.auth.isAuthenticated()) {
this.router.navigate(['/home']);
}
}
});
}

我想测试：

• 如果在提供模拟params['data']时触发this.handle()
• 如果没有参数并且this.auth.isAuthenticated()返回true
则调用该this.router.navigate

我已经尝试了多种方法，但我的想法已经用完了。

我的测试文件：

describe('TestComponent', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
const mockService = {
navigate: jasmine.createSpy('navigate'),
isAuthenticated: jasmine.createSpy('isAuthenticated'),
queryParams: jasmine.createSpy('queryParams')
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent],
providers: [
{ provide: Router, useValue: mockService },
{ provide: ActivatedRoute, useValue: mockService },
{ provide: AuthService, useValue: mockService }
]
}).compileComponents();
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
mockService.navigate.calls.reset();
}));
it('should create the test component', () => {
expect(component).toBeTruthy();
});
it('should navigate away when authenticated', () => {
mockService.isAuthenticated.and.returnValue(true);
mockService.queryParams.and.callFake((data, params) => new Observable(o => o.next({ params: {} })));
component.ngOnInit();
expect(mockService.navigate).toHaveBeenCalledWith(['/home']);
});
});

但是有了这个，我得到了TypeError: this.route.queryParams.subscribe is not a function.我知道mockService.isAuthenticated.and.returnValue(true);工作正常，因为在订阅参数之前，我ngOnInit()里面只有这个 if 语句。

我试图将模拟服务更改为：

const mockService = {
navigate: jasmine.createSpy('navigate'),
isAuthenticated: jasmine.createSpy('isAuthenticated'),
queryParams: {
subscribe: jasmine.create('subscribe')
}
};

我还尝试过：

const mockService = {
navigate: jasmine.createSpy('navigate'),
isAuthenticated: jasmine.createSpy('isAuthenticated'),
queryParams: {
subscribe: Observable.of({ params: {} })
}
};

但是没有成功，对于最后两个，我得到了Expected spy navigate to have been called with [ [ '/home' ] ] but it was never called.

那么有人知道如何在 querParams 订阅中正确测试逻辑吗？

Answer 1

您可以使用 rxjs observable in useValue 来模拟它。

const router = {
navigate: jasmine.createSpy('navigate')
};
beforeEach(async(() => {    
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes([]),
RouterTestingModule,
PlanPrimengModule
],
declarations: [YourComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
provideMockStore(),
{
provide: ActivatedRoute,
useValue: {
queryParams: of({
param1: "value1",
param1: "value2"
})
}
},
{ provide: Router, useValue: router }
]
}).compileComponents();   }));

Answer 2

我不能说现在回答这个问题是否为时已晚，但也许它会帮助新的谷歌员工......

我设法以这种方式解决这个问题：

class ActivatedRouteMock {
queryParams = new Observable(observer => {
const urlParams = {
param1: 'some',
param2: 'params'
}
observer.next(urlParams);
observer.complete();
});
}
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule
],
providers: [
HttpClient,
HttpHandler,
ControlContainer,
{
provide: ActivatedRoute,
useClass: ActivatedRouteMock
}
]
}).compileComponents();
injector = getTestBed();
httpMock = injector.get(HttpTestingController);
}));

这允许您断言.subscribe(() => {})方法中的逻辑。

希望它