Первый пример
У меня есть следующий тест:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
@Component({
template: '<ul><li *ngFor="let state of values | async">{{state}}</li></ul>'
})
export class TestComponent {
values: Promise<string[]>;
}
describe('TestComponent', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
let element: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
element = (<HTMLElement>fixture.nativeElement);
});
it('this test fails', async() => {
// execution
component.values = Promise.resolve(['A', 'B']);
fixture.detectChanges();
await fixture.whenStable();
// evaluation
expect(Array.from(element.querySelectorAll('li')).map(elem => elem.textContent)).toEqual(['A', 'B']);
});
it('this test works', async() => {
// execution
component.values = Promise.resolve(['A', 'B']);
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
await fixture.whenStable();
// evaluation
expect(Array.from(element.querySelectorAll('li')).map(elem => elem.textContent)).toEqual(['A', 'B']);
});
});
Как вы можете видеть, есть супер простой компонент, который просто отображает список элементов, предоставленныхPromise.Есть два теста, один из которых не пройден, а другой пройденЕдинственное различие между этими тестами заключается в том, что тест, который дважды вызывает fixture.detectChanges(); await fixture.whenStable();.
ОБНОВЛЕНИЕ: Второй пример (обновлено снова в 2019/03/21)
В этом примере предпринимается попытка исследоватьвозможные отношения с ngZone:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { Component, NgZone } from '@angular/core';
@Component({
template: '{{value}}'
})
export class TestComponent {
valuePromise: Promise<ReadonlyArray<string>>;
value: string = '-';
set valueIndex(id: number) {
this.valuePromise.then(x => x).then(x => x).then(states => {
this.value = states[id];
console.log(`value set ${this.value}. In angular zone? ${NgZone.isInAngularZone()}`);
});
}
}
describe('TestComponent', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [FormsModule],
declarations: [TestComponent],
providers: [
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
function diagnoseState(msg) {
console.log(`Content: ${(fixture.nativeElement as HTMLElement).textContent}, value: ${component.value}, isStable: ${fixture.isStable()} # ${msg}`);
}
it('using ngZone', async() => {
// setup
diagnoseState('Before test');
fixture.ngZone.run(() => {
component.valuePromise = Promise.resolve(['a', 'b']);
// execution
component.valueIndex = 1;
});
diagnoseState('After ngZone.run()');
await fixture.whenStable();
diagnoseState('After first whenStable()');
fixture.detectChanges();
diagnoseState('After first detectChanges()');
});
it('not using ngZone', async(async() => {
// setup
diagnoseState('Before setup');
component.valuePromise = Promise.resolve(['a', 'b']);
// execution
component.valueIndex = 1;
await fixture.whenStable();
diagnoseState('After first whenStable()');
fixture.detectChanges();
diagnoseState('After first detectChanges()');
await fixture.whenStable();
diagnoseState('After second whenStable()');
fixture.detectChanges();
diagnoseState('After second detectChanges()');
await fixture.whenStable();
diagnoseState('After third whenStable()');
fixture.detectChanges();
diagnoseState('After third detectChanges()');
}));
});
Этот первый из этих тестов (явно использующий ngZone) приводит к:
Content: -, value: -, isStable: true # Before test
Content: -, value: -, isStable: false # After ngZone.run()
value set b. In angular zone? true
Content: -, value: b, isStable: true # After first whenStable()
Content: b, value: b, isStable: true # After first detectChanges()
Журналы второго теста:
Content: -, value: -, isStable: true # Before setup
Content: -, value: -, isStable: true # After first whenStable()
Content: -, value: -, isStable: true # After first detectChanges()
Content: -, value: -, isStable: true # After second whenStable()
Content: -, value: -, isStable: true # After second detectChanges()
value set b. In angular zone? false
Content: -, value: b, isStable: true # After third whenStable()
Content: b, value: b, isStable: true # After third detectChanges()
Я как бы ожидал, что тест проходит в угловой зоне, но это не так.Кажется, проблема в том, что
Во избежание неожиданностей функции, передаваемые в then (), никогда не будут вызываться синхронно, даже с уже разрешенным обещанием.( Source )
Во втором примере я спровоцировал проблему, вызвав .then(x => x) несколько раз, что не более чем снова поместит прогресс в цикл событий браузера итаким образом задерживая результат.Насколько я понимаю, вызов await fixture.whenStable() должен в основном сказать «подождите, пока эта очередь не станет пустой».Как мы видим, это действительно работает, если я выполняю код в ngZone явно.Однако это не значение по умолчанию, и я нигде не могу найти в руководстве, что предполагается, что я пишу свои тесты таким образом, так что это неудобно.
Что на самом деле делает await fixture.whenStable() во втором тесте ?.Исходный код показывает, что в этом случае fixture.whenStable() будет просто return Promise.resolve(false);.Поэтому я попытался заменить await fixture.whenStable() на await Promise.resolve(), и это действительно имеет тот же эффект: это приводит к приостановке теста и его запуску из очереди событий, и, таким образом, обратный вызов, переданный в valuePromise.then(...), фактически выполняется, еслиЯ просто достаточно часто звоню await по любому обещанию.
Почему мне нужно звонить await fixture.whenStable(); несколько раз?Я использую это неправильно?Это намеренное поведение?Есть ли "официальная" документация о том, как она предназначена для работы / как с этим бороться?