Angular 2/Jasmine，在每个 describe/it 块中更新激活的路由参数订阅答案

【问题标题】：Angular 2/Jasmine, updating an activated route params subscription within each describe/it blockAngular 2/Jasmine，在每个 describe/it 块中更新激活的路由参数订阅
【发布时间】：2017-03-14 02:24:43
【问题描述】：

给定一个订阅ngOnInit中激活的路由查询参数的简单组件：

export class FooComponent implements OnInit {
  private queryParams: any;

  constructor(
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => this.queryParams = params);
  }

  active(foo: number): boolean {
    return this.queryParams['foo'] &&
      foo === +this.queryParams['foo'];
  }
}

当存在foo 查询参数并且其值与提供的参数匹配时，活动函数应返回true。

在此组件的随附单元测试中，我想更改每个 it 块中查询参数的值，以测试查询参数不存在、匹配参数和不匹配参数。

describe('FooComponent', () => {
  let component: FooComponent;
  let fixture: ComponentFixture<FooComponent>;
  let activatedRoute: ActivatedRoute;

  class MockActivatedRoute {
    queryParams = Observable.of({});
  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [FooComponent],
      providers: [
        { provide: ActivatedRoute, useClass: MockActivatedRoute }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FooComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    activatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
  });

  describe('active', () => {
    it('should return false if the foo query param is not present', () => {
      activatedRoute.queryParams = Observable.of({});
      let result = component.active(100);
      expect(result).toBe(false);
    });

    it('should return false if the foo query param does not match the supplied parameter', () => {
      activatedRoute.queryParams = Observable.of({ foo: '500' });
      let result = component.active(100);
      expect(result).toBe(false);
    });

    it('should return true if the foo query param does not match the supplied parameter', () => {
      activatedRoute.queryParams = Observable.of({ foo: '500' });
      let result = component.active(500);
      expect(result).toBe(true);
    });
  });
});

FooComponent 类的私有 queryParams 成员的值不会在每个 it 块内更新。我试过async、fixture.whenStable()、fakeAsync/tick的各种方法。

如何更新每个单元测试的订阅值？

【问题讨论】：

标签： unit-testing angular angular2-testing

【解决方案1】：

这是因为你分配了一个新的 Observable，但是客户端已经订阅了第一个 Observable。这是因为当您第一次调用fixture.detectChanges() 时调用了ngOnInit。如果您在将新的 Observable 分配给 queryParams 之后等待调用 fixture.detectChanges()，那么将使用该 Observable。

另一种选择（可能是首选）是使用 Subject 来代替使用 Observable。有了这个，您可以控制何时发出数据，以及发出什么。

import { Subject } from 'rxjs/Subject'
import { fakeAsync, tick } from

class MockActivatedRoute {
  queryParams = new Subject<any>();
}

let route: MockActivatedRoute;

beforeEach(() => {
  /* configure */ 

  route = <MockActivatedRoute>TestBed.get(ActivatedRoute);
})

it('', fakeAsync(() => {
  route.queryParams.next(newparams);    // emit something
  tick();                               // wait for resolution
  fixture.detectChanges();              // detect changes (for ui)
  expect(...)
}))

我说这个选项可能是首选，因为它允许在同一个测试中发出多个值。

【讨论】：