Why there is an error when I want to check expected result after some time in Jasmine&Karma in Angular?

Question

I want to test this component

describe('Test for check if window dissapeard', () => {
    let component: DismissMockedComponent;
    let fixture: ComponentFixture<DismissMockedComponent>;
  
    beforeEach(() => {
      fixture = TestBed.createComponent(DismissMockedComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('Check if window dissapeard after dissmiss time', () => {
      let delayTime = 3000;
      spyOn(component, "onAfterDelayTime");
  
      component.dismissible = true;
      component.dismissTimer = delayTime;
      fixture.detectChanges();
  
      setTimeout(() => {
        fixture.detectChanges();
        expect(component.onAfterDelayTime).toHaveBeenCalled();
      }, delayTime); 
    });
  });

and very simple mocked component

  @Component({
    template: '<my-inform-window (afterDelayTime)="onAfterDelayTime()"></my-inform-window>'
  })
  class DismissMockedComponent {
    delayTime: number;

    onAfterDelayTime(){
        console.log('this function was triggered after delay time')
    }
  }

I get an error that

Async function did not complete within 5000ms

I will add that when I set dismissTime to 1000ms or 2000ms all works correct...

Any idea where problem can be?

Answer 1

Use FakeAsync to test time delayed functioanlities

  it('Check if window disappeared after dismiss time', fakeAsync(() => {
    const delayTime = 3000;
    spyOn(component, "onAfterDelayTime");

    component.dismissible = true;
    component.dismissTimer = delayTime;
    fixture.detectChanges();

    tick(delayTime); // Simulate the passage of delayTime milliseconds

    fixture.detectChanges();
    expect(component.onAfterDelayTime).toHaveBeenCalled();

    flush(); // Ensure that no more tasks are left in the queue
  }));