Angular2 单元测试：测试组件的构造函数

一切都在标题中：如何测试组件的构造函数中做了什么？

供您参考，我正在使用一个需要设置的服务，我想看看我在构造函数中调用的 2 个方法是否被正确调用。

我的组件的构造函数：

constructor(
  public router: Router,
  private profilService: ProfileService,
  private dragula: DragulaService,
  private alerter: AlertService
) {
  dragula.drag.subscribe((value) => {
    this.onDrag(value);
  });
  dragula.dragend.subscribe((value) => {
    this.onDragend(value);
  });
}

我会使用 DI 系统注入一个假服务，这意味着编写如下测试：

describe('your component', () => {
  let fixture: ComponentFixture<YourComponent>;
  let fakeService;
  let dragSubject = new ReplaySubject(1);
  ...

  beforeEach(async(() => {
    fakeService = { 
      drag: dragSubject.asObservable(),
      ... 
    };

    TestBed.configureTestingModule({
      declarations: [YourComponent, ...],
      providers: [
        { provide: DragulaService, useValue: fakeService }, 
        ...
      ],
    });
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    fixture.detectChanges();
  });

  it('should do something when a drag event occurs', () => {
    dragSubject.next({ ... });
    fixture.detectChanges();
    ...
  });
});

这允许您随时通过调用触发“拖动事件”.next主题，这会导致虚假服务字段的订阅者接到电话。然后你可以对你期望的结果做出断言。

请注意，您不需要调用constructor你自己;当 DI 系统实例化您的组件时，即当TestBed.createComponent叫做。

我建议你don't监视组件方法（例如this.onDrag）并确保它们被调用，而是测试这些方法应该执行的结果是否发生；这使得测试对于特定实现中的更改更加稳健（我在我的博客上写了一些相关内容：http://blog.jonrshar.pe/2017/Apr/16/async-angular-tests.html http://blog.jonrshar.pe/2017/Apr/16/async-angular-tests.html).