chore: Wait an animation frame before advancing fake timers

Author: rkaraivanov

src/components/carousel/carousel.spec.ts

@@ -792,9 +792,8 @@ describe('Carousel', () => {
       it('should pause when focusing an interactive element - issue #1731', async () => {
         carousel.interval = 200;
         await elementUpdated(carousel);
+        await nextFrame();
 
-        // Flush microtasks to ensure property watcher has completed
-        await vi.advanceTimersByTimeAsync(0);
         await vi.advanceTimersByTimeAsync(199);
 
         expect(carousel.isPlaying).to.be.true;
@@ -804,6 +803,7 @@ describe('Carousel', () => {
         // hover carousel
         carousel.dispatchEvent(new PointerEvent('pointerenter'));
         await elementUpdated(carousel);
+        await nextFrame();
 
         await vi.advanceTimersByTimeAsync(1);
 

src/components/tooltip/tooltip.spec.ts

@@ -147,10 +147,10 @@ describe('Tooltip', () => {
 
   describe('Properties Tests', () => {
     beforeEach(async () => {
-      clock = vi.useFakeTimers({ toFake: ['setTimeout'] });
       const container = await fixture(createTooltipWithTarget());
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
       anchor = container.querySelector('button')!;
+      clock = vi.useFakeTimers({ toFake: ['setTimeout'] });
     });
 
     afterEach(() => {
@@ -415,6 +415,7 @@ describe('Tooltip', () => {
       tooltip.sticky = true;
       tooltip.open = true;
       await elementUpdated(tooltip);
+      await nextFrame();
 
       expect(tooltip.open).to.be.true;
 
@@ -426,8 +427,8 @@ describe('Tooltip', () => {
         })
       );
 
-      // Flush microtasks to ensure async event handler completes
-      await clock.advanceTimersByTimeAsync(0);
+      // Wait for event handler to process
+      await nextFrame();
       await clock.advanceTimersByTimeAsync(endTick(DEFAULT_HIDE_DELAY));
       await hideComplete();
       expect(tooltip.open).to.be.false;
@@ -436,10 +437,10 @@ describe('Tooltip', () => {
 
   describe('Methods` Tests', () => {
     beforeEach(async () => {
-      clock = vi.useFakeTimers({ toFake: ['setTimeout'] });
       const container = await fixture(createTooltipWithTarget());
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
       anchor = container.querySelector('button')!;
+      clock = vi.useFakeTimers({ toFake: ['setTimeout'] });
     });
 
     afterEach(() => {
@@ -559,8 +560,8 @@ describe('Tooltip', () => {
         tooltip.parentElement!.querySelectorAll('button')
       );
 
-      // Flush any pending microtasks before showing
-      await clock.advanceTimersByTimeAsync(0);
+      // Wait for component to be fully initialized
+      await nextFrame();
 
       const result = await tooltip.show(transientAnchor);
       expect(result).to.be.true;
@@ -569,8 +570,7 @@ describe('Tooltip', () => {
 
       simulatePointerEnter(defaultAnchor);
       // Trigger on the initial default anchor. Tooltip must be hidden.
-      // Flush microtasks to ensure async event handler completes
-      await clock.advanceTimersByTimeAsync(0);
+      await nextFrame();
       expect(tooltip.open).to.be.false;
       await clock.advanceTimersByTimeAsync(DEFAULT_SHOW_DELAY);
       await showComplete();
@@ -583,10 +583,10 @@ describe('Tooltip', () => {
 
   describe('Behaviors', () => {
     beforeEach(async () => {
-      clock = vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       const container = await fixture(createTooltipWithTarget());
       anchor = container.querySelector('button')!;
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
+      clock = vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
     });
 
     afterEach(() => {
@@ -749,11 +749,11 @@ describe('Tooltip', () => {
     let spy: MockInstance;
 
     beforeEach(async () => {
-      clock = vi.useFakeTimers({ toFake: ['setTimeout'] });
       const container = await fixture(createTooltipWithTarget());
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
       anchor = container.querySelector('button')!;
       spy = vi.spyOn(tooltip, 'emitEvent');
+      clock = vi.useFakeTimers({ toFake: ['setTimeout'] });
     });
 
     afterEach(() => {
@@ -792,13 +792,16 @@ describe('Tooltip', () => {
     });
 
     it('can cancel -ing events', async () => {
+      // Wait for component to be fully initialized
+      await nextFrame();
+
       tooltip.addEventListener('igcOpening', (e) => e.preventDefault(), {
         once: true,
       });
 
       simulatePointerEnter(anchor);
-      // Flush microtasks to ensure the async event handler completes before advancing timers
-      await clock.advanceTimersByTimeAsync(0);
+      // Wait for event handler to process
+      await nextFrame();
       await clock.advanceTimersByTimeAsync(DEFAULT_SHOW_DELAY);
       await showComplete(tooltip);
 
@@ -817,8 +820,8 @@ describe('Tooltip', () => {
       });
 
       simulatePointerLeave(anchor);
-      // Flush microtasks to ensure the async event handler completes before advancing timers
-      await clock.advanceTimersByTimeAsync(0);
+      // Wait for event handler to process
+      await nextFrame();
       await clock.advanceTimersByTimeAsync(endTick(DEFAULT_HIDE_DELAY));
       await hideComplete(tooltip);