为什么测试断言进入订阅通过而不在异步区域中?
Why does test asserts into a subscription pass without being in the async zone?
当 运行在 Angular2+ 中使用 Karma 和 Jasmine 进行测试并订阅可观察对象时,该订阅(据我所知)是 运行 异步的,所以测试应该被包装成一个 async
或 fakeAsync
.
但是我们不使用async
而不是fakeAsync
,测试通过了,所以我的问题是:subscribe
中的代码以前不是异步的吗?为什么测试通过?怎么回事?
hello.component.ts
import { Component, Input, OnInit } from '@angular/core';
import {of} from 'rxjs';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
name: string;
ngOnInit() {
// Subscribing to sayName() to get a name
this.sayName().subscribe(name => this.name = name);
}
sayName() {
return of('Foo');
}
}
hello.component.spec.ts
import { CommonModule } from '@angular/common';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {HelloComponent} from './hello.component';
describe('HelloComponent', () => {
let fixture: ComponentFixture<HelloComponent>;
let component: HelloComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CommonModule
],
declarations: [HelloComponent],
providers: [
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HelloComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have foo name', () => {
// Running out of async/fakeAsync
// and asserting we got the name
expect(component.name).toEqual('Foo');
});
});
您也可以签入 Stackblitz 这个例子。
subscribe()
是一个同步调用。在您的情况下,在此调用期间创建订阅,发出值并调用观察者。再一次:所有这些都发生在 subscribe
被执行的时候!
当您创建一个 Observable
时,例如interval()
值将异步发出。之前的一切仍然同步发生。
当您使用 subscribeOn()
运算符时,即使订阅也会异步创建。
与承诺相反,默认情况下反应流不是异步的。并且如前所述,整个过程的不同部分可以独立地异步化。
如果您想更深入地研究该主题,我无耻地推荐我的文章 Concurrency and Asynchronous Behavior with RxJS。很短 ;)
当 运行在 Angular2+ 中使用 Karma 和 Jasmine 进行测试并订阅可观察对象时,该订阅(据我所知)是 运行 异步的,所以测试应该被包装成一个 async
或 fakeAsync
.
但是我们不使用async
而不是fakeAsync
,测试通过了,所以我的问题是:subscribe
中的代码以前不是异步的吗?为什么测试通过?怎么回事?
hello.component.ts
import { Component, Input, OnInit } from '@angular/core';
import {of} from 'rxjs';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
name: string;
ngOnInit() {
// Subscribing to sayName() to get a name
this.sayName().subscribe(name => this.name = name);
}
sayName() {
return of('Foo');
}
}
hello.component.spec.ts
import { CommonModule } from '@angular/common';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {HelloComponent} from './hello.component';
describe('HelloComponent', () => {
let fixture: ComponentFixture<HelloComponent>;
let component: HelloComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CommonModule
],
declarations: [HelloComponent],
providers: [
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HelloComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have foo name', () => {
// Running out of async/fakeAsync
// and asserting we got the name
expect(component.name).toEqual('Foo');
});
});
您也可以签入 Stackblitz 这个例子。
subscribe()
是一个同步调用。在您的情况下,在此调用期间创建订阅,发出值并调用观察者。再一次:所有这些都发生在 subscribe
被执行的时候!
当您创建一个 Observable
时,例如interval()
值将异步发出。之前的一切仍然同步发生。
当您使用 subscribeOn()
运算符时,即使订阅也会异步创建。
与承诺相反,默认情况下反应流不是异步的。并且如前所述,整个过程的不同部分可以独立地异步化。
如果您想更深入地研究该主题,我无耻地推荐我的文章 Concurrency and Asynchronous Behavior with RxJS。很短 ;)