Jasmine 测试属性 observable 订阅答案

【问题标题】：Jasmine test property observable subscribeJasmine 测试属性 observable 订阅
【发布时间】：2019-01-31 12:57:39
【问题描述】：

我有这个代码：

export class ProgramComponent implements OnInit {
   @Input() events: Observable<any>;
   eventsSubscription: any;
   ...
   ngOnInit() {
      this.eventsSubscription = this.events.subscribe((event) => {
          ... <- Some code that I want to test!!!!
          console.log("The test doesn't get past here!!!!");
      });
   }
}

describe('BLA BLA BLA', () => {
   let component: ProgramComponent;
   let fixture: ComponentFixture<ProgramComponent>;

   beforeEach(async(() => {
       TestBed.configureTestingModule({
          imports: [
              ...
          ],
          declarations: [ProgramComponent],
          providers: [
              ...
          ]
       }).compileComponents();
    }));

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

       // HERE I WANT TO SPY ON THAT EVENTS OBSERVABLE AND RETURN SOME VALUE
       // I tried this without success
       spyOn(component, 'events').and.returnValue({type: 'somevalue'}))

       fixture.detectChanges();
    });

    it('should create', () => {
       expect(component).toBeTruthy();
    });
});

问题是fixture.detectChanges();不会触发可观察事件的订阅。我必须使用 spyOnProperty 吗？但它是组件的输入...

我已经检查了this 和this。

谢谢！

【问题讨论】：

标签： angular testing jasmine observable subscribe

【解决方案1】：

是的，您必须使用spyOnProperty，因为它是您试图监视的属性。但即使它不是属性，您的间谍也不会返回预期的类型以使其正常工作。您的间谍的返回值只是一个普通对象{ type: 'somevalue' }，但events 属性需要Observable<any> 类型的值。这很可能会导致错误，因为组件尝试在 events 属性上调用 subscribe，但普通对象没有提供该方法。

对于这个测试用例，我只需提供一个模拟 Observable 并测试它发出的值是否在您的组件中成功接收（我假设您将从 Observable 接收到的任何内容分配给组件中的某个属性） .

这可能看起来像这样：

beforeEach(() => {
  fixture = TestBed.createComponent(DummyComponent);
  component = fixture.componentInstance;
});

it('should test the component', () => {
  // provide an Observable with whatever value you need in your component    
  component.events = of({type: 'somevalue'});

  // nothing happened yet
  expect(component.eventsSubscription).toBeFalsy();
  expect(component.valueReceived).toBeUndefined();

  // this should trigger change detection and your ngOnInit
  fixture.detectChanges();

  // verify whatever you need
  expect(component.eventsSubscription).toBeTruthy();
  expect(component.valueReceived).toEqual({type: 'somevalue'});
});

在你的组件中：

@Input() events: Observable<any>;
eventsSubscription: any;
valueReceived: any;

ngOnInit() {
  this.eventsSubscription = this.events.subscribe((event) => {
    this.valueReceived = event;
    console.log("The test doesn't get past here!!!!");
  });
}

【讨论】：

谢谢，非常感谢！