Я новичок в Жасмин. Мне нужно проверить следующий угловой компонент:
<form (ngSubmit)="onSubmit()" *ngIf="!(paycheck$ | async)">
<!-- fields -->
<button type="submit">Submit</button>
</form>
<div class="pageloader" [class.is-active]="loading$ | async"></div>
<div class="panel" *ngIf="response$ | async as response">
<!-- fields -->
</div>
Компонент имеет форму с несколькими полями и кнопкой отправки; при отправке компонент запускает http-запрос, скрывает форму, ждет 1000 мс и показывает спиннер загрузки; Когда ответ получен, компонент скрывает счетчик и показывает содержание ответа. Это соответствующий код TypeScript:
export class MyComponent implements OnInit {
loading$: Subject<boolean>;
paycheck$: Subject<any>;
constructor(private service: MyService) {}
ngOnInit() {
this.loading$ = new Subject();
this.response$ = new Subject();
}
onSubmit() {
timer(1000).pipe(
takeUntil(this.response$)
).subscribe(response => {
this.loading$.next(true);
});
this.service.get().pipe(
take(1),
).subscribe(response => {
this.loading$.next(false);
this.response$.next(response);
});
}
}
Я могу проверить, что происходит, когда мой сервис отправляет ответ со следующим тестом Жасмин:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [HttpClientModule],
declarations: [MyComponent]
}).compileComponents();
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
service = TestBed.get(MyService);
backend = TestBed.get(HttpClient);
}));
it('should receive data on click', () => {
spyOn(backend, 'get').and.returnValue(of({"key": "value"}));
component.response$.subscribe(r => expect(r).toEqual({"key": "value"}));
component.onSubmit();
});
AFAIK этот тест работает, потому что Жасмин ждет завершения асинхронных запросов. Однако я не знаю, как проверить, что происходит, прежде чем мой сервис отправит ответ. Я хотел бы написать тест, выдающий запрос, подождать 1000 мс и ожидать, что loading$
получил true
. Как я могу это сделать?