角度测试激活路由:使用RouterTestingModule设置查询参数

Question

我发现测试一个可观察的结果会导致这个因果报应测试运行两次。第一个失败，第二个通过。

我使用的服务可以获取和设置路由器的查询参数。它将应用程序的状态存储在URL上。我想测试状态是否正确存储。该测试使用RouterTestingModule。除非我错了(可能(，否则我不应该创建自己的模拟路由器对象。

我发现这篇文章对于使用带有服务注入的done()特别有用。

下面是我的测试设置。

import {inject, TestBed  } from '@angular/core/testing';
import { ArQueryService } from './ar-query.service';
import { Router, ActivatedRoute} from '@angular/router'
import { RouterTestingModule } from '@angular/router/testing';
fdescribe('ArQueryService', () => {
let service: ArQueryService;
let router: Router;
let route: ActivatedRoute;
let queryParamsDefault: Object;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ ArQueryService ],
imports: [ RouterTestingModule ]
})
service = TestBed.inject(ArQueryService);
router = TestBed.get(Router)
route = TestBed.get(ActivatedRoute)
queryParamsDefault = {
includeRealtime: true,
onlyBGC: false,
onlyDeep: false,
arHourRange: [-18, 18],
arDate: "2010-01-01T00",
displayGlobally: true
}
});

下面的测试注入服务并输入一个done。位于Observable内部的测试检查查询参数键是否与TestBed配置中设置的键相同。在描述完所有测试之后，我应该包括done()，否则，测试将被跳过。

it('should set url with state', done => {
const queryParamsDefaultKeys = Object.keys(queryParamsDefault)
inject([ArQueryService], (service: ArQueryService) => {
service.setURL()
route.queryParamMap.subscribe( params => {
const equal = params.keys === queryParamsDefaultKeys 
console.log('equal:', equal)
console.log(queryParamsDefaultKeys, params.keys)
if (params.keys.length == 0 ) {
console.log('no parameters set. not testing')
}
else {
console.log('here be parameter keys')
expect(params.keys).toEqual(queryParamsDefaultKeys)
}
done();
})
})();
});

奇怪的是，它竟然跑了两次。由于路由器没有查询参数，第一轮失败。第二个完成并通过。

可能发生的情况是，第一轮发生在调用setURL()之后。设置参数后，第二轮运行并通过。

我的肮脏破解是在测试之前检查是否有任何查询参数。有人知道更好的方法吗？我想在设置好查询参数后运行一次测试。

提前谢谢！

Answer 1

路由器在执行router.navigate或router.navigateByUrl时返回一个promise，并在执行断言之前等待它们成功，这可以帮助您。您也可以等待router.initialNavigation()。

但我认为这样的东西可以帮助你。

import { filter } from 'rxjs/operators';
.....
it('should set url with state', done => {
const queryParamsDefaultKeys = Object.keys(queryParamsDefault)
// you already have a handle on ArQueryService, not sure why you're injecting it again
inject([ArQueryService], (service: ArQueryService) => {
service.setURL()
route.queryParamMap.pipe(
filter(params => !!params.keys.length), // filter out any emissions where keys is an empty array.
).subscribe( params => {
expect(params.keys).toEqual(queryParamsDefaultKeys);
done();
})
})();
});