Angular测试激活路由：用RouterTestingModule设置查询参数。

Question

我发现测试一个可观察的东西会导致这个Karma'it'测试运行两次。第一次失败，第二次通过。

我正在使用一个获取和设置路由器查询参数的服务。它将应用程序的状态存储在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(). 设置好params后，运行第二轮并通过。

我的肮脏的黑客是在测试前检查是否有任何查询参数。有谁知道更好的方法吗？我想运行一次这个测试 之后 查询参数已经设置好了。

先谢谢你

Answer 1

路由器在执行 router.navigate 或 router.navigateByUrl 并等待这些成功后再做论断，可以帮助你。你也可以潜在地等待 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();
      })
    })();

});