单元测试 – 测试可观察对象角度2业力

如果你想要的只是覆盖,你可以让测试异步.这将导致Angular测试区在完成测试之前等待异步任务得到解决

import { async } from '@angular/core/testing';

it('..',async(() => {
  component.subscribeToEvents();
}))

你不能试图在这里期待任何东西,因为在任务解决时没有回调钩子.所以这真是一个毫无意义的考验.它会给你报道,但你实际上并没有测试任何东西.例如,您可能希望测试在解析订阅时设置变量.

根据提供的代码,我要做的只是模拟服务,并使其同步.你怎么能这样做？我们你可以做模拟的东西

class CzDataSub {
  items: any = [];

  $selectedColorZone = {
    subscribe: (callback: Function) => {
      callback(this.items);
    }
  }
}

然后在测试中配置它

let czData: CzDataStub;

beforeEach(() => {
  czData = new CzDataStub();
  TestBed.configureTestingModule({
    providers: [
      { provide: CzData,useValue: czData }
    ]
  })
})

现在在您的测试中,您不需要将其设置为异步,并且您可以通过在模拟上设置items属性来提供您想要的任何值,并且订阅者将获得它

it('..',() => {
  czData.items = something;
  component.subscribeToEvents();
  expect(component.settings.layout.flypanel.display).toBe(false);
})

UPDATE

当我写这篇文章时,我想我半睡半醒.上述陈述之一是不正确的

You can’t try to expect anything here,as there is no callback hook for when the task is resolved.

这不完全正确.这就是fixture.whenStable()的用途.例如,如果这是您的服务

class CzData {
  _value = new Subject<>();

  $selectedColorZone = this._value.asObservable();

  setValue(value) {
    this._value.next(value);
  }
}

那么这就是你如何使测试工作

let czData: CzData;
let fixture: ComponentFixture<YourComponent>;
let component: YourComponent;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [ CzData ],declarations: [ YourComponent ]
  });
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  czData = TestBed.get(czData);
})

it('..',async(() => {
  component.subscribeToEvents();
  czData.setValue(somevalue);
  fixture.whenStable().then(() => {
    expect(component.settings.layout.flypanel.display).toBe(false);
  })
}))

我们使用fixture.whenStable()来等待异步任务完成.

这并不是说使用模拟是错误的.很多时候,使用模拟将是要走的路.我只想纠正我的陈述,并说明如何做到这一点.