test(components): [carousel] use fake timers instead of real timers (#23712)

test(components): [carousel] use mock timers instead of real timers

packages/components/carousel/__tests__/carousel.test.tsx

@@ -7,9 +7,6 @@ import CarouselItem from '../src/carousel-item.vue'
 import type { VueWrapper } from '@vue/test-utils'
 import type { CarouselInstance } from '../src/instance'
 
-const wait = (ms = 100) =>
-  new Promise((resolve) => setTimeout(() => resolve(0), ms))
-
 const generateCarouselItems = (count = 3, hasLabel = false) => {
   const list = Array.from({ length: count }, (_, index) => index + 1)
   return list.map((i) =>
@@ -40,6 +37,7 @@ describe('Carousel', () => {
 
   afterEach(() => {
     wrapper.unmount()
+    vi.useRealTimers()
   })
 
   it('create', () => {
@@ -54,26 +52,31 @@ describe('Carousel', () => {
   })
 
   it('auto play', async () => {
+    vi.useFakeTimers()
     wrapper = createComponent({
       interval: 50,
     })
 
     await nextTick()
-    await wait(10)
+    vi.advanceTimersByTime(10)
+    await nextTick()
     const items = wrapper.vm.$el.querySelectorAll('.el-carousel__item')
     expect(items[0].classList.contains('is-active')).toBeTruthy()
-    await wait(60)
+    vi.advanceTimersByTime(60)
+    await nextTick()
     expect(items[1].classList.contains('is-active')).toBeTruthy()
   })
 
   it('initial index', async () => {
+    vi.useFakeTimers()
     wrapper = createComponent({
       autoplay: false,
       'initial-index': 1,
     })
 
     await nextTick()
-    await wait(10)
+    vi.advanceTimersByTime(10)
+    await nextTick()
 
     expect(
       wrapper.vm.$el
@@ -83,6 +86,7 @@ describe('Carousel', () => {
   })
 
   it('reset timer', async () => {
+    vi.useFakeTimers()
     wrapper = createComponent({
       interval: 500,
     })
@@ -93,11 +97,13 @@ describe('Carousel', () => {
     expect(items[0].classList.contains('is-active')).toBeTruthy()
     await wrapper.trigger('mouseleave')
     await nextTick()
-    await wait(700)
+    vi.advanceTimersByTime(700)
+    await nextTick()
     expect(items[1].classList.contains('is-active')).toBeTruthy()
   })
 
   it('change', async () => {
+    vi.useFakeTimers()
     const state = reactive({
       val: -1,
       oldVal: -1,
@@ -112,7 +118,8 @@ describe('Carousel', () => {
     })
 
     await nextTick()
-    await wait(50)
+    vi.advanceTimersByTime(50)
+    await nextTick()
     expect(state.val).toBe(1)
     expect(state.oldVal).toBe(0)
   })
@@ -125,15 +132,18 @@ describe('Carousel', () => {
 
   describe('manual control', () => {
     it('hover', async () => {
+      vi.useFakeTimers()
       wrapper = createComponent({
         autoplay: false,
       })
 
       await nextTick()
-      await wait()
+      vi.advanceTimersByTime(100)
+      await nextTick()
       await wrapper.findAll('.el-carousel__indicator')[1].trigger('mouseenter')
       await nextTick()
-      await wait()
+      vi.advanceTimersByTime(100)
+      await nextTick()
       expect(
         wrapper.vm.$el
           .querySelectorAll('.el-carousel__item')[1]
@@ -143,6 +153,7 @@ describe('Carousel', () => {
   })
 
   it('card', async () => {
+    vi.useFakeTimers()
     wrapper = createComponent(
       {
         autoplay: false,
@@ -153,21 +164,25 @@ describe('Carousel', () => {
     )
 
     await nextTick()
-    await wait()
+    vi.advanceTimersByTime(100)
+    await nextTick()
     const items = wrapper.vm.$el.querySelectorAll('.el-carousel__item')
     expect(items[0].classList.contains('is-active')).toBeTruthy()
     expect(items[1].classList.contains('is-in-stage')).toBeTruthy()
     expect(items[6].classList.contains('is-in-stage')).toBeTruthy()
     await items[1].click()
-    await wait()
+    vi.advanceTimersByTime(100)
+    await nextTick()
     expect(items[0].getAttribute('style')).toContain('scale(0.6)')
     expect(items[1].getAttribute('style')).toContain('scale(1)')
     expect(items[1].classList.contains('is-active')).toBeTruthy()
     await wrapper.vm.$el.querySelector('.el-carousel__arrow--left').click()
-    await wait()
+    vi.advanceTimersByTime(100)
+    await nextTick()
     expect(items[0].classList.contains('is-active')).toBeTruthy()
     await items[6].click()
-    await wait()
+    vi.advanceTimersByTime(100)
+    await nextTick()
     expect(items[6].classList.contains('is-active')).toBeTruthy()
   })
 
@@ -186,6 +201,7 @@ describe('Carousel', () => {
   })
 
   it('pause auto play on hover', async () => {
+    vi.useFakeTimers()
     wrapper = createComponent({
       interval: 50,
       'pause-on-hover': false,
@@ -195,7 +211,8 @@ describe('Carousel', () => {
     await wrapper.find('.el-carousel').trigger('mouseenter')
     const items = wrapper.vm.$el.querySelectorAll('.el-carousel__item')
     await nextTick()
-    await wait(60)
+    vi.advanceTimersByTime(60)
+    await nextTick()
     expect(items[1].classList.contains('is-active')).toBeTruthy()
   })
 
@@ -413,6 +430,7 @@ describe('Carousel', () => {
   })
 
   it('should continue auto play after adding new items dynamically', async () => {
+    vi.useFakeTimers()
     const data = reactive([1, 2, 3])
 
     wrapper = mount({
@@ -436,7 +454,8 @@ describe('Carousel', () => {
 
     expect(vm.$refs.carousel.activeIndex).toBe(0)
 
-    await wait(40)
+    vi.advanceTimersByTime(40)
+    await nextTick()
     expect(vm.$refs.carousel.activeIndex).toBe(1)
 
     data.push(4)
@@ -445,7 +464,8 @@ describe('Carousel', () => {
     expect(wrapper.findAll('.el-carousel__item').length).toBe(4)
     expect(vm.$refs.carousel.activeIndex).toBe(0)
 
-    await wait(80)
+    vi.advanceTimersByTime(80)
+    await nextTick()
     expect(vm.$refs.carousel.activeIndex).toBe(2)
   })
 })