From fea1ae7a865a14c4957f0fe458dc095b86c183b5 Mon Sep 17 00:00:00 2001 From: rzzf Date: Tue, 3 Mar 2026 11:48:20 +0800 Subject: [PATCH] test(components): [carousel] use fake timers instead of real timers (#23712) test(components): [carousel] use mock timers instead of real timers --- .../carousel/__tests__/carousel.test.tsx | 54 +++++++++++++------ 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/packages/components/carousel/__tests__/carousel.test.tsx b/packages/components/carousel/__tests__/carousel.test.tsx index efc9989386..6c11710966 100644 --- a/packages/components/carousel/__tests__/carousel.test.tsx +++ b/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) }) })