From 251f58f763a6240c3b6022c66a423224e5e0621b Mon Sep 17 00:00:00 2001 From: yusuf <47958012+yusuf-yz@users.noreply.github.com> Date: Fri, 14 Apr 2023 19:49:27 +0800 Subject: [PATCH] refactor(message): new message (#586) re #548 --- .../__test__/__snapshots__/demo.test.jsx.snap | 2676 ++++++++++++++--- src/grid/__test__/demo.test.jsx | 8 + .../__test__/__snapshots__/demo.test.jsx.snap | 90 +- src/message/__test__/index.test.jsx | 78 +- src/message/demos/base.vue | 107 +- src/message/demos/mobile.vue | 23 +- src/message/demos/theme.vue | 74 +- src/message/index.ts | 33 +- src/message/message.en-US.md | 45 +- src/message/message.md | 41 +- src/message/message.vue | 74 +- src/message/props.ts | 26 +- src/message/style/index.js | 2 +- src/message/type.ts | 29 +- 14 files changed, 2602 insertions(+), 704 deletions(-) diff --git a/src/grid/__test__/__snapshots__/demo.test.jsx.snap b/src/grid/__test__/__snapshots__/demo.test.jsx.snap index 54682f332..00189f1dc 100644 --- a/src/grid/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/grid/__test__/__snapshots__/demo.test.jsx.snap @@ -1119,20 +1119,20 @@ exports[`Grid > Grid baseVue demo works fine 1`] = ` `; -exports[`Grid > Grid descVue demo works fine 1`] = ` +exports[`Grid > Grid borderedVue demo works fine 1`] = `
Grid descVue demo works fine 1`] = `
Grid descVue demo works fine 1`] = `
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题最多六字 +
+
+ 描述最多六字 +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
Grid descVue demo works fine 1`] = `
Grid descVue demo works fine 1`] = `
Grid descVue demo works fine 1`] = `
`; -exports[`Grid > Grid mobileVue demo works fine 1`] = ` +exports[`Grid > Grid cardVue demo works fine 1`] = `
-

- Grid 宫格 -

-

- 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。 -

+
+
-

- 01 组件类型 -

-

- 基础宫格 -

-
-
- -
-
+
- -
-
-
-
-
- - - -
-
- - - +
+
- -
-
-
- 标题文字 -
-
-
+ + +
+ + + + +
+
+
+ 标题文字 +
+ 描述文字 +
+
+
+
+
+
+
- -
-
-
-
-
- - - -
-
- - - - +
+
+
+ + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
- 标题文字 -
-
- +
+
+
+ + +
+ + + + +
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
- -
+
+
+
+ + + +
+
+ + + + +
+
+
+ 最多五个字 +
+
+ 描述最多六字 +
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+ +
+ +
+`; + +exports[`Grid > Grid descVue demo works fine 1`] = ` +
+ +
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题最多六字 +
+
+ 描述最多六字 +
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+ +
+ +
+`; + +exports[`Grid > Grid iconVue demo works fine 1`] = ` +
+ +
+ +
+ + + +
+ +
+
+ 分享 +
+
+ +
+
+
+
+ +
+ + + +
+ +
+
+ 收藏 +
+
+ +
+
+
+
+ +
+ + + + +
+ +
+
+ 保存 +
+
+ +
+
+
+
+ +
+ + + + + +
+ +
+
+ 编辑 +
+
+ +
+
+
+ +
+`; + +exports[`Grid > Grid mobileVue demo works fine 1`] = ` +
+

+ Grid 宫格 +

+

+ 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。 +

+
+
+

+ 01 组件类型 +

+

+ 基础宫格 +

+
+
+ + +
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
+ +
Grid mobileVue demo works fine 1`] = `
+ +
+ + + + +
+ +
+
+ 保存 +
+
+ +
+
+
+
+ +
+ + + + + +
+ +
+
+ 编辑 +
+
+ +
+
+
+ +
+ +
+
+
+
+ +

+ 卡片宫格 +

+
+
+ + +
+ +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
-
- - - + +
+
+
+
+
+ + + +
+
+ + + - +
-
- 保存 + 标题文字
- + 描述文字
-
- - - - - + +
+
+
+
+
+ + + +
+
+ + + +
-
- 编辑 + 最多五个字
- + 描述最多六字
- -
-
-
-
- -

- 卡片宫格 -

-
-
- -
Grid mobileVue demo works fine 1`] = `
标题文字
描述文字
Grid mobileVue demo works fine 1`] = `
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+ +
+ + +
+
+
+`; + +exports[`Grid > Grid scrollVue demo works fine 1`] = ` +
+ + +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
+ +
- 标题文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + />
- 描述文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;" + /> +
+ + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
-
- -
-
-
-
-
- - - -
-
- - - - + class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
+
- 标题文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + />
- 描述文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;" + /> +
+ + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
-
- -
-
-
-
-
- - - -
-
- - - - + class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
+
- 最多五个字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + />
- 描述最多六字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;" + /> +
+ + +
-
+ + + + +
+
+ 标题文字 +
+
+ +
+
+
+
+
+
-
+
-
- -
-
-
-
-
- - - -
-
- - - - -
-
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + />
- 标题文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;" + />
- 描述文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;" + />
+ + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
-
- -
-
-
-
-
- - - -
-
- - - - + class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + /> +
+
+ + + +
+
+ + + + +
+
+
+ 标题文字 +
+
+ +
+
+
+
+
+
+
+
- 标题文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0s;" + />
- 描述文字 -
+ class="t-loading__dot" + style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;" + /> +
+ + +
-
- - + + + + +
+
+
+ 标题文字 +
+
+ +
+ +
`; diff --git a/src/grid/__test__/demo.test.jsx b/src/grid/__test__/demo.test.jsx index a516f0de7..07e0cf0c5 100644 --- a/src/grid/__test__/demo.test.jsx +++ b/src/grid/__test__/demo.test.jsx @@ -5,14 +5,22 @@ import { mount } from '@vue/test-utils'; import badgeVue from '@/grid/demos/badge.vue'; import baseVue from '@/grid/demos/base.vue'; +import borderedVue from '@/grid/demos/bordered.vue'; +import cardVue from '@/grid/demos/card.vue'; import descVue from '@/grid/demos/desc.vue'; +import iconVue from '@/grid/demos/icon.vue'; import mobileVue from '@/grid/demos/mobile.vue'; +import scrollVue from '@/grid/demos/scroll.vue'; const mapper = { badgeVue, baseVue, + borderedVue, + cardVue, descVue, + iconVue, mobileVue, + scrollVue, }; describe('Grid', () => { diff --git a/src/message/__test__/__snapshots__/demo.test.jsx.snap b/src/message/__test__/__snapshots__/demo.test.jsx.snap index 5bf8808e7..f3b73603b 100644 --- a/src/message/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/message/__test__/__snapshots__/demo.test.jsx.snap @@ -12,7 +12,7 @@ exports[`Message > Message baseVue demo works fine 1`] = ` > @@ -151,8 +151,9 @@ exports[`Message > Message mobileVue demo works fine 1`] = `

- 用于页面消息通知提示，具有成功提示、提醒、警示等功能，通常在顶部出现，可以自动消失或点击关闭 + 用于轻量级反馈或提示，不会打断用户操作。

Message mobileVue demo works fine 1`] = `

- 01 类型 + 01 组件类型

- 弹窗内容为存文本、标题和副标题、带输入框 + 消息通知内容为文本、带操作按钮

-
Message mobileVue demo works fine 1`] = ` > @@ -321,12 +321,12 @@ exports[`Message > Message mobileVue demo works fine 1`] = `

- 02 状态 + 02 组件风格

- 弹窗内容为存文本、标题和副标题、带输入框 + 消息组件风格

Message mobileVue demo works fine 1`] = `
@@ -403,11 +408,13 @@ exports[`Message > Message mobileVue demo works fine 1`] = ` exports[`Message > Message themeVue demo works fine 1`] = `
diff --git a/src/message/__test__/index.test.jsx b/src/message/__test__/index.test.jsx index cb5716dd1..9d8640805 100644 --- a/src/message/__test__/index.test.jsx +++ b/src/message/__test__/index.test.jsx @@ -1,7 +1,7 @@ import { h } from 'vue'; import { mount } from '@vue/test-utils'; import { describe, it, expect } from 'vitest'; -import { ref, nextTick } from 'vue'; +import { nextTick } from 'vue'; import Message from '../message.vue'; import { AppIcon as TIconApp } from 'tdesign-icons-vue-next'; const prefix = 't'; @@ -17,69 +17,69 @@ describe('Message.vue', () => { ).toBeTruthy(); }); - it(': closeBtn is a function', () => { - const closeBtn = () => h(TIconApp); - const wrapper = mount(); - expect(wrapper.findComponent(TIconApp).exists()).toBeTruthy(); - }); - it(': marquee', async () => { - const wrapper0 = mount(); - await nextTick(); - expect(wrapper0.vm.scroll.marquee).toBe(false); + const wrapper = mount(); + expect(wrapper.vm.scroll.marquee).toBe(false); - const wrapper = mount(); - await nextTick(); - expect(wrapper.vm.scroll.marquee).toBe(true); + const wrapper1 = mount(); + expect(wrapper1.vm.scroll.marquee).toBe(false); - const params = { loop: -1 }; - const wrapper2 = mount(); + const wrapper2 = mount(); await nextTick(); expect(wrapper2.vm.scroll.marquee).toBe(true); - params.loop = 0; - const wrapper3 = mount(); + const wrapper3 = mount(); await nextTick(); + expect(wrapper3.vm.scroll.marquee).toBe(true); + wrapper3.vm.handleTransitionend(); + expect(wrapper3.vm.scroll.loop).toBe(0); + wrapper3.vm.handleTransitionend(); expect(wrapper3.vm.scroll.marquee).toBe(false); + + const wrapper4 = mount(); + await nextTick(); + expect(wrapper4.vm.scroll.marquee).toBe(true); + wrapper4.vm.handleTransitionend(); }); - }); - describe('event', () => { - it('open', async () => { + it(': duration', () => { + function timer(callback) { + setTimeout(() => { + callback(); + }, 5000); + } + vi.useFakeTimers(); const fn = vi.fn(); - const visible = ref(false); - const wrapper = mount(() => ); - visible.value = true; - await nextTick(); - expect(fn).toBeCalledTimes(1); - visible.value = false; - await nextTick(); + timer(fn); + const wrapper = mount(); + vi.advanceTimersByTime(5000); expect(fn).toBeCalledTimes(1); }); + it(': closeBtn is a function', () => { + const closeBtn = () => h(TIconApp); + const wrapper = mount(); + expect(wrapper.findComponent(TIconApp).exists()).toBeTruthy(); + }); + }); + + describe('event', () => { it('close', () => { const fn = vi.fn(); const wrapper = mount(() => ( - + )); const closeBtn = wrapper.find('.t-icon-close'); closeBtn.trigger('click'); expect(fn).toBeCalledTimes(1); }); - - it('after-enter-leave', async () => { - const fn = vi.fn(); - const wrapper = mount(() => ); - expect(fn).not.toBeCalled(); - wrapper.findComponent(Message).vm.afterEnter(); - expect(fn).toBeCalledTimes(1); - wrapper.findComponent(Message).vm.afterLeave(); - expect(fn).toBeCalledTimes(2); - }); }); describe('slots', () => { - it('icon:success', () => { + it('icon', () => { + const wrapper0 = mount(() => ); + expect(wrapper0.find('.t-icon').exists()).toBeFalsy(); + const wrapper = mount(() => ); const successIcon = wrapper.find('.t-icon-check-circle-filled'); expect(successIcon).toBeTruthy(); diff --git a/src/message/demos/base.vue b/src/message/demos/base.vue index 11503e221..d5cd9df85 100644 --- a/src/message/demos/base.vue +++ b/src/message/demos/base.vue @@ -1,56 +1,64 @@ + + diff --git a/src/message/demos/mobile.vue b/src/message/demos/mobile.vue index 77d9c3527..fa6ca602e 100644 --- a/src/message/demos/mobile.vue +++ b/src/message/demos/mobile.vue @@ -1,13 +1,12 @@