From 3309e451d280718e26d2592390d20e92e803e842 Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 19:31:20 +0800 Subject: [PATCH 01/10] fix: carousel clear timer before unmount --- devui/carousel/carousel.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx index d5e5f084..96ec939c 100644 --- a/devui/carousel/carousel.tsx +++ b/devui/carousel/carousel.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, watch, onMounted, Fragment, Comment } from 'vue'; +import { defineComponent, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from 'vue'; import { carouselProps, DotTrigger } from './types'; import Icon from '../icon/src/icon' @@ -25,7 +25,7 @@ export default defineComponent({ const currentIndex = ref(0); const wrapperRef = ref(null); const containerRef = ref(null); - const scheduledId = ref(null); + const scheduledId = ref | null>(null); watch( () => arrowTrigger, @@ -169,6 +169,9 @@ export default defineComponent({ autoScheduleTransition(); }); + onBeforeUnmount(() => { + clearScheduledTransition() + }) return { wrapperRef, -- Gitee From 3fcab1b551706edc7fa61c6f17516822ae12e62d Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 19:50:39 +0800 Subject: [PATCH 02/10] fix: global reg carousel-item component --- devui/vue-devui.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts index 2a0a2d82..8968b788 100644 --- a/devui/vue-devui.ts +++ b/devui/vue-devui.ts @@ -22,9 +22,10 @@ import TextInput from './text-input'; // 数据展示 import Avatar from './avatar'; import Carousel from './carousel'; +import CarouselItem from './carousel/item' function install(app: App): void { - const packages = [ Button, Icon, Panel, Tabs, Alert, DLoading, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, Carousel ]; + const packages = [ Button, Icon, Panel, Tabs, Alert, DLoading, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, Carousel, CarouselItem ]; packages.forEach((item: any) => { if (item.install) { app.use(item); @@ -34,5 +35,5 @@ function install(app: App): void { }); } -export { Button, Icon, Panel, Tabs, Alert, LoadingService, Loading, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, Carousel }; +export { Button, Icon, Panel, Tabs, Alert, LoadingService, Loading, Checkbox, Radio, Switch, TagsInput, TextInput, Avatar, Carousel, CarouselItem }; export default { install, version: '0.0.1' }; -- Gitee From 1e14fac66d2481b0436b537b2be0639a9060c8f4 Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 22:17:32 +0800 Subject: [PATCH 03/10] feat: add carousel unit test --- devui/carousel/__tests__/carousel.spec.ts | 237 ++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 devui/carousel/__tests__/carousel.spec.ts diff --git a/devui/carousel/__tests__/carousel.spec.ts b/devui/carousel/__tests__/carousel.spec.ts new file mode 100644 index 00000000..525d71d7 --- /dev/null +++ b/devui/carousel/__tests__/carousel.spec.ts @@ -0,0 +1,237 @@ +import { ref, nextTick } from 'vue' +import { mount } from '@vue/test-utils'; +import Carousel from '../carousel'; +import CarouselItem from '../item'; +import Button from '../../button' + +const wait = (ms = 100) => + new Promise(resolve => setTimeout(() => resolve(), ms)) + +describe('d-carousel', () => { + it('arrowTrigger-never', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'never', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(false); + }); + + it('arrowTrigger-hover-out', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'hover', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(false); + }); + it('arrowTrigger-hover-in', async () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'hover', + height: '200px', + }, + }); + wrapper.find('.devui-carousel-container').trigger('mouseenter') + await nextTick() + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(true); + }); + + it('arrowTrigger-always', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'always', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(true); + }); + + it('showDots-false', () => { + const wrapper = mount(Carousel, { + props: { + showDots: false, + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-dots').exists()).toBe(false); + }); + + it('showDots-click', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(0) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + + await nextTick() + wrapper.findAll('.dot-item')[1].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(1); + }); + + it('showDots-enter', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(0) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + await nextTick() + wrapper.findAll('.dot-item')[1].trigger('mouseenter') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(1); + }); + + it('operate', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + 'd-button': Button, + }, + template: ` + + {{ item }} + +
+ 上一张 + 下一张 + 第一张 +
+ `, + setup() { + const items = ref(["page 1", 'page 2', 'page 3', 'page 4']) + const activeIndex = ref(0) + + const carousel = ref() + + const onPrev = () => { + carousel.value?.prev?.() + } + const onNext = () => { + carousel.value?.next?.() + } + const onGoFirst = () => { + carousel.value?.goto?.(0) + } + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + items, + + carousel, + onPrev, + onNext, + onGoFirst, + onChange, + } + } + }); + + await nextTick() + wrapper.find('.arrow-left').trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(3) + wrapper.find('.arrow-right').trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(0) + + wrapper.findAll('.devui-btn')[0].trigger('click') + await nextTick() + wrapper.findAll('.devui-btn')[0].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(2) + + wrapper.findAll('.devui-btn')[1].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(3) + + wrapper.findAll('.devui-btn')[2].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(0) + }); + + it('autoplay', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(2) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + + await wait(4500) + expect(wrapper.vm.activeIndex).toBe(1) + await wait(4600) + expect(wrapper.vm.activeIndex).toBe(3) + }, 10000); +}); -- Gitee From bff1b922e480d7cfe4bb5374241b16b7dc61077f Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 19:31:20 +0800 Subject: [PATCH 04/10] fix: carousel clear timer before unmount --- devui/carousel/carousel.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx index d5e5f084..96ec939c 100644 --- a/devui/carousel/carousel.tsx +++ b/devui/carousel/carousel.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, watch, onMounted, Fragment, Comment } from 'vue'; +import { defineComponent, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from 'vue'; import { carouselProps, DotTrigger } from './types'; import Icon from '../icon/src/icon' @@ -25,7 +25,7 @@ export default defineComponent({ const currentIndex = ref(0); const wrapperRef = ref(null); const containerRef = ref(null); - const scheduledId = ref(null); + const scheduledId = ref | null>(null); watch( () => arrowTrigger, @@ -169,6 +169,9 @@ export default defineComponent({ autoScheduleTransition(); }); + onBeforeUnmount(() => { + clearScheduledTransition() + }) return { wrapperRef, -- Gitee From cc9983bd09b461f193b94d97cab8f40486b31031 Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 19:50:39 +0800 Subject: [PATCH 05/10] fix: conflict with mainwarhouse --- devui/vue-devui.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts index 4cc3741e..3a56724c 100644 --- a/devui/vue-devui.ts +++ b/devui/vue-devui.ts @@ -23,6 +23,7 @@ import TextInput from './text-input' // 数据展示 import Avatar from './avatar' import Carousel from './carousel' +import CarouselItem from './carousel/item' function install(app: App): void { const packages = [ @@ -40,7 +41,8 @@ function install(app: App): void { TagsInput, TextInput, Avatar, - Carousel + Carousel, + CarouselItem, ] packages.forEach((item: any) => { if (item.install) { @@ -67,6 +69,7 @@ export { TagsInput, TextInput, Avatar, - Carousel + Carousel, + CarouselItem, } export default { install, version: '0.0.1' } -- Gitee From 871a6cb0f1a65df352c5d5b6c354da1c69d97bf8 Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 22:17:32 +0800 Subject: [PATCH 06/10] feat: add carousel unit test --- devui/carousel/__tests__/carousel.spec.ts | 237 ++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 devui/carousel/__tests__/carousel.spec.ts diff --git a/devui/carousel/__tests__/carousel.spec.ts b/devui/carousel/__tests__/carousel.spec.ts new file mode 100644 index 00000000..525d71d7 --- /dev/null +++ b/devui/carousel/__tests__/carousel.spec.ts @@ -0,0 +1,237 @@ +import { ref, nextTick } from 'vue' +import { mount } from '@vue/test-utils'; +import Carousel from '../carousel'; +import CarouselItem from '../item'; +import Button from '../../button' + +const wait = (ms = 100) => + new Promise(resolve => setTimeout(() => resolve(), ms)) + +describe('d-carousel', () => { + it('arrowTrigger-never', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'never', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(false); + }); + + it('arrowTrigger-hover-out', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'hover', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(false); + }); + it('arrowTrigger-hover-in', async () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'hover', + height: '200px', + }, + }); + wrapper.find('.devui-carousel-container').trigger('mouseenter') + await nextTick() + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(true); + }); + + it('arrowTrigger-always', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'always', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(true); + }); + + it('showDots-false', () => { + const wrapper = mount(Carousel, { + props: { + showDots: false, + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-dots').exists()).toBe(false); + }); + + it('showDots-click', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(0) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + + await nextTick() + wrapper.findAll('.dot-item')[1].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(1); + }); + + it('showDots-enter', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(0) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + await nextTick() + wrapper.findAll('.dot-item')[1].trigger('mouseenter') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(1); + }); + + it('operate', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + 'd-button': Button, + }, + template: ` + + {{ item }} + +
+ 上一张 + 下一张 + 第一张 +
+ `, + setup() { + const items = ref(["page 1", 'page 2', 'page 3', 'page 4']) + const activeIndex = ref(0) + + const carousel = ref() + + const onPrev = () => { + carousel.value?.prev?.() + } + const onNext = () => { + carousel.value?.next?.() + } + const onGoFirst = () => { + carousel.value?.goto?.(0) + } + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + items, + + carousel, + onPrev, + onNext, + onGoFirst, + onChange, + } + } + }); + + await nextTick() + wrapper.find('.arrow-left').trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(3) + wrapper.find('.arrow-right').trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(0) + + wrapper.findAll('.devui-btn')[0].trigger('click') + await nextTick() + wrapper.findAll('.devui-btn')[0].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(2) + + wrapper.findAll('.devui-btn')[1].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(3) + + wrapper.findAll('.devui-btn')[2].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(0) + }); + + it('autoplay', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(2) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + + await wait(4500) + expect(wrapper.vm.activeIndex).toBe(1) + await wait(4600) + expect(wrapper.vm.activeIndex).toBe(3) + }, 10000); +}); -- Gitee From 62594399c02a46e5a2f68b8619f18875fd0e1fd4 Mon Sep 17 00:00:00 2001 From: qqq Date: Tue, 10 Aug 2021 22:41:26 +0800 Subject: [PATCH 07/10] fix: manual remove vue-devui.ts --- devui/vue-devui.ts | 75 ---------------------------------------------- 1 file changed, 75 deletions(-) delete mode 100644 devui/vue-devui.ts diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts deleted file mode 100644 index 3a56724c..00000000 --- a/devui/vue-devui.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { App } from 'vue' - -// 通用 -import Button from './button' -import Icon from './icon' -import Panel from './panel' - -// 导航 -import Tabs from './tabs' - -// 反馈 -import Alert from './alert/alert' -import Toast, { ToastService } from './toast' -import DLoading, { LoadingService, Loading } from './loading' - -// 数据录入 -import Checkbox from './checkbox' -import Radio from './radio' -import Switch from './switch' -import TagsInput from './tags-input' -import TextInput from './text-input' - -// 数据展示 -import Avatar from './avatar' -import Carousel from './carousel' -import CarouselItem from './carousel/item' - -function install(app: App): void { - const packages = [ - Button, - Icon, - Panel, - Tabs, - Alert, - Toast, - ToastService, - DLoading, - Checkbox, - Radio, - Switch, - TagsInput, - TextInput, - Avatar, - Carousel, - CarouselItem, - ] - packages.forEach((item: any) => { - if (item.install) { - app.use(item) - } else if (item.name) { - app.component(item.name, item) - } - }) -} - -export { - Button, - Icon, - Panel, - Tabs, - Alert, - Toast, - ToastService, - LoadingService, - Loading, - Checkbox, - Radio, - Switch, - TagsInput, - TextInput, - Avatar, - Carousel, - CarouselItem, -} -export default { install, version: '0.0.1' } -- Gitee From 2e259d62d6f1bbf545a64e8e605e20e137e2c0ca Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 19:31:20 +0800 Subject: [PATCH 08/10] fix: merge conflict --- devui/carousel/carousel.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx index db977d77..165c5b09 100644 --- a/devui/carousel/carousel.tsx +++ b/devui/carousel/carousel.tsx @@ -26,7 +26,7 @@ export default defineComponent({ const currentIndex = ref(0); const wrapperRef = ref(null); const containerRef = ref(null); - const scheduledId = ref(null); + const scheduledId = ref | null>(null); watch( () => arrowTrigger, @@ -170,6 +170,9 @@ export default defineComponent({ autoScheduleTransition(); }); + onBeforeUnmount(() => { + clearScheduledTransition() + }) return { wrapperRef, -- Gitee From 0f154471f85cb9b792b6987f215048e0b427aa50 Mon Sep 17 00:00:00 2001 From: qqq Date: Mon, 9 Aug 2021 22:17:32 +0800 Subject: [PATCH 09/10] feat: add carousel unit test --- devui/carousel/__tests__/carousel.spec.ts | 237 ++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 devui/carousel/__tests__/carousel.spec.ts diff --git a/devui/carousel/__tests__/carousel.spec.ts b/devui/carousel/__tests__/carousel.spec.ts new file mode 100644 index 00000000..525d71d7 --- /dev/null +++ b/devui/carousel/__tests__/carousel.spec.ts @@ -0,0 +1,237 @@ +import { ref, nextTick } from 'vue' +import { mount } from '@vue/test-utils'; +import Carousel from '../carousel'; +import CarouselItem from '../item'; +import Button from '../../button' + +const wait = (ms = 100) => + new Promise(resolve => setTimeout(() => resolve(), ms)) + +describe('d-carousel', () => { + it('arrowTrigger-never', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'never', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(false); + }); + + it('arrowTrigger-hover-out', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'hover', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(false); + }); + it('arrowTrigger-hover-in', async () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'hover', + height: '200px', + }, + }); + wrapper.find('.devui-carousel-container').trigger('mouseenter') + await nextTick() + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(true); + }); + + it('arrowTrigger-always', () => { + const wrapper = mount(Carousel, { + props: { + arrowTrigger: 'always', + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-arrow').exists()).toBe(true); + }); + + it('showDots-false', () => { + const wrapper = mount(Carousel, { + props: { + showDots: false, + height: '200px', + }, + }); + expect(wrapper.find('.devui-carousel-dots').exists()).toBe(false); + }); + + it('showDots-click', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(0) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + + await nextTick() + wrapper.findAll('.dot-item')[1].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(1); + }); + + it('showDots-enter', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(0) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + await nextTick() + wrapper.findAll('.dot-item')[1].trigger('mouseenter') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(1); + }); + + it('operate', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + 'd-button': Button, + }, + template: ` + + {{ item }} + +
+ 上一张 + 下一张 + 第一张 +
+ `, + setup() { + const items = ref(["page 1", 'page 2', 'page 3', 'page 4']) + const activeIndex = ref(0) + + const carousel = ref() + + const onPrev = () => { + carousel.value?.prev?.() + } + const onNext = () => { + carousel.value?.next?.() + } + const onGoFirst = () => { + carousel.value?.goto?.(0) + } + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + items, + + carousel, + onPrev, + onNext, + onGoFirst, + onChange, + } + } + }); + + await nextTick() + wrapper.find('.arrow-left').trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(3) + wrapper.find('.arrow-right').trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(0) + + wrapper.findAll('.devui-btn')[0].trigger('click') + await nextTick() + wrapper.findAll('.devui-btn')[0].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(2) + + wrapper.findAll('.devui-btn')[1].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(3) + + wrapper.findAll('.devui-btn')[2].trigger('click') + await nextTick() + expect(wrapper.vm.activeIndex).toBe(0) + }); + + it('autoplay', async () => { + const wrapper = mount({ + components: { + 'd-carousel': Carousel, + 'd-carousel-item': CarouselItem, + }, + template: ` + + Page 1 + Page 2 + Page 3 + Page 4 + + `, + setup() { + const activeIndex = ref(2) + + const onChange = (index: number) => { + activeIndex.value = index + } + + return { + activeIndex, + + onChange, + } + } + }); + + await wait(4500) + expect(wrapper.vm.activeIndex).toBe(1) + await wait(4600) + expect(wrapper.vm.activeIndex).toBe(3) + }, 10000); +}); -- Gitee From 7d03eea21133bea6b6463777769d81922dd4b2d5 Mon Sep 17 00:00:00 2001 From: qqq Date: Tue, 10 Aug 2021 22:54:36 +0800 Subject: [PATCH 10/10] fix: recover carousel lifecycle hook --- devui/carousel/carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx index 165c5b09..db21aaeb 100644 --- a/devui/carousel/carousel.tsx +++ b/devui/carousel/carousel.tsx @@ -1,5 +1,5 @@ /* eslint-disable */ -import { defineComponent, ref, watch, onMounted, Fragment, Comment } from 'vue'; +import { defineComponent, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from 'vue'; import { carouselProps, DotTrigger } from './types'; import Icon from '../icon/src/icon' -- Gitee