Przetestuj funkcję, która zawiera setTimeout()

Question

Mam ścisłą funkcję w moim składniku, który zawiera setTimeout(), aby dać czas na zakończenie animacji.

public close() { 
    this.animate = "inactive" 
    setTimeout(() => { 
     this.show = false 
    }, 250) 
} 

this.show jest związany z ngIf.

this.animate jest związany z animacją.

Mam testu, który trzeba przetestować tę funkcję

it("tests the exit button click",() => { 
    comp.close() 
    fixture.detectChanges() 
    //verifies the element is no longer in the DOM 
    const popUpWindow = fixture.debugElement.query(By.css("#popup-window")) 
    expect(popUpWindow).toEqual(null) 
}) 

Jak prawidłowo przetestować tę funkcję, gdy istnieje setTimeout()?

Użyłem jasmine.clock().tick(251), ale okno nigdy nie zniknie. jakieś przemyślenia na ten temat?

Answer 1

Można zrobić jedną z dwóch rzeczy:

1: Właściwie czekać w teście 250 + 1 ms w setTimeout(), a następnie sprawdzić, czy element rzeczywiście zniknął.

2: użyj fakeAsync() i tick() symulować czas w Test - tick() rozwiąże setTimeout w oryginalnym close() i kontrola może nastąpić zaraz po w fixture.whenStable().then(...).

Na przykład:

it("tests the exit button click", fakeAsync(() => { 
    comp.close() 
    tick(500) 
    fixture.detectChanges() 

    fixture.whenStable().then(() => { 
    const popUpWindow = fixture.debugElement.query(By.css("#popup-window")) 
    expect(popUpWindow).toBe(null) 
    }) 
})) 

Proponuję za pomocą 2 jeden, ponieważ jest znacznie bardziej szybciej niż faktycznie czeka na oryginalnej metodzie. Jeśli nadal używasz pierwszego, spróbuj zmniejszyć czas oczekiwania przed testem, aby przyspieszyć działanie.