Есть сервис, который содержит состояние:
@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();
Но безрезультатно
Средний