Как симулировать задержку?

Question

[zlodiak]

Есть сервис, который содержит состояние:

@Injectable({
  providedIn: 'root'
})
export class WordsService {

  words: string[] = [
    'qqq',
    'www',
    'eee',
    'rrr',
    'ttt',
    'yyy',
  ];

  constructor() { }

}

В компоненте есть кнопка, после клика по которой состояние из сервиса отображается в шаблоне компонента:

@Component({
  selector: 'app-page3',
  template: `
    <div *ngFor="let word of serviceWords" class="word-el">
        {{ word }}
    </div>
    <button (click)="getWordsFromService()" id="getWordsBtn">get words from service</button>
  `,
  styleUrls: ['./page3.component.scss']
})
export class Page3Component {
  serviceWords: string[] = [];
  constructor(private wordsService: WordsService) { }
  getWordsFromService() {
    this.serviceWords = this.wordsService.words;
  }
}

Я пытаюсь симулировать клик по кнопке и проверить отобразились ли в шаблоне данные из сервиса.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ Page3Component ]
  })
  .compileComponents();
});

it('should display list after getWords-button', () => {
  fixture.detectChanges();
  const compliedComponent = fixture.debugElement.nativeElement;

  const btn = compliedComponent.querySelector('#getWordsBtn');
  btn.dispatchEvent(new Event('click'));

  setTimeout(() => {
    expect(compliedComponent.querySelector('.word-el')).toBeTruthy();  
  }, 1000);
});

С этим тестом всё ОК, он завешается успешно. Но мне не нравится конструкция setTimeout.

Скажите пожалуйста можно ли её заменить на что-нибудь другое? Дело в том, что в ней я использовал задержку по времени 1000, это плохо потому что я её прописал наугад. Задержка в 100 ms по-прежнему работает, а задержка 1ms уже не работает. Очень нежелательны такие магические числа.

Я пробовал сделать так:

tick();
expect(compliedComponent.querySelector('.word-el')).toBeTruthy();

и так:

waits();
expect(compliedComponent.querySelector('.word-el')).toBeTruthy();

Но безрезультатно

Answer 1

[Антон Швец]

tick должен быть внутри fakeAsync, и он тоже время принимает.
Можно await fixture.whenStable()
тоже внутри fakeAsync