Tick function in angular seems not working

I have simple test of mat-checkbox wrapper in Angular. I want to check if mat-ripple disappeared after blur event. Looks like fakeAsync in that case doesn’t work

it('test for checkbox', fakeAsync(() => {
  expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
      .toBe(0, 'NO RIPPLE');

  // DISPATCH PART
  dispatchFakeEvent(inputElement, 'keydown');
  dispatchFakeEvent(inputElement, 'focus');

  tick(5000);

  expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
      .toBe(1, 'RIPPLE VISABLE');

  dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur');
  tick(15000); // here in normal after blur mat-ripple-element disappeared, but in test no

  expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
      .toBe(0, 'RIPPLE NOT VISABLE');
}));

To check it I create simple function directly in component to trigger actions:

code from component

testActionMethod(){
  const input = document.querySelector('input');
  if (input) {
      const event1 = new KeyboardEvent('keydown');
      const event2 = new KeyboardEvent('focus');
      input.dispatchEvent(event1);
      input.dispatchEvent(event2);

      const classx = document.querySelectorAll('.mat-ripple-element')
      console.log(classx,'.mat-ripple-element exist?') // shows that exist

      const event3 = new KeyboardEvent('blur');
      input.dispatchEvent(event3);

      const classx12 = document.querySelectorAll('.mat-ripple-element')
      console.log(classx12,'mat-ripple-element exist?') // shows that exist

      setTimeout(() => {
          const classx1 = document.querySelectorAll('.mat-ripple-element')
          console.log(classx1,'mat-ripple-element exist?') //shows that doesn't exist
      },5000)
}

Of course after blur event when I just click element it works <mat-ripple-element does disappeared after blur, in settimeout also, but in test no>

anyone knows why it can behave like that?