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

Question

我发现测试 observable 导致 Karma 'it' 测试运行两次。第一个失败，第二个通过。

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

我发现 this post 对于将 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

路由器 returns 在执行 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();
      })
    })();

});

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

Angular test activated route: setting query parameters with RouterTestingModule

router

karma-runner

angular