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

121

用户名

一切都在标题中：如何测试组件的构造函数中的内容？

供您参考，我正在使用需要设置的服务，并且我想看看在构造函数中调用的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。

我建议您不要监视组件方法（例如this.onDrag），而只是确保它们被调用，而应该测试这些方法应作为结果执行的任何事情；这使测试对于特定实现的更改更加健壮（我在我的博客上写了一些相关内容：http : //blog.jonrshar.pe/2017/Apr/16/async-angular-tests.html）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。