Angular asynchronous tube testing does not cause observable

Question

I want to test a component that uses an asynchronous channel. This is my code:

@Component({ selector: 'test', template: ` <div>{{ number | async }}</div> ` }) class AsyncComponent { number = Observable.interval(1000).take(3) } fdescribe('Async Compnent', () => { let component : AsyncComponent; let fixture : ComponentFixture<AsyncComponent>; beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ AsyncComponent ] }).compileComponents(); }) ); beforeEach(() => { fixture = TestBed.createComponent(AsyncComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should emit values', fakeAsync(() => { tick(1000); fixture.detectChanges(); expect(fixture.debugElement.query(By.css('div')).nativeElement.innerHTML).toBe('0'); }); 

But the test failed. Angular does not seem to execute Observable for some reason. What am I missing?

When I try to register an observable using the do statement, I do not see any output in the browser console.

Answer 1

You can try the following:

 it('should emit values', (done) => { component.number.subscribe((numberElement) => { expect(numberElement).toBe(0); fixture.detectChanges(); expect(fixture.debugElement.query(By.css('.number')).nativeElement.innerHTML).toBe('0'); done(); }); }); 

Whenever new elements are skipped by an observable, you can subscribe to it and see if the value and pattern match your expectations.