Repository: Tencent/tdesign-mobile-vue
Pull request #334 (2022-09-01 02:03:16)

test: add test for toast
#271 
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [x] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(组件名称): 处理问题或特性描述 ...

- [x] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供



Patch:
diff --git a/src/toast/toast.vue b/src/toast/toast.vue
index d2b69949..e750c7fd 100644
--- a/src/toast/toast.vue
+++ b/src/toast/toast.vue
@@ -53,15 +53,17 @@ export default defineComponent({
       },
     ]);
 
-    const toastOverlayProps = {
-      preventScrollThrough: props.preventScrollThrough,
-      visible: props.showOverlay,
-    };
+    const customOverlayProps = computed(() => {
+      const toastOverlayProps = {
+        preventScrollThrough: props.preventScrollThrough,
+        visible: props.showOverlay,
+      };
 
-    const customOverlayProps = computed(() => ({
-      ...props.overlayProps,
-      ...toastOverlayProps,
-    }));
+      return {
+        ...props.overlayProps,
+        ...toastOverlayProps,
+      };
+    });
 
     return {
       name: ref(name),


Test patch:
diff --git a/site/web/test-coverage.js b/site/web/test-coverage.js
index 1f662e7e..d35a1fbb 100644
--- a/site/web/test-coverage.js
+++ b/site/web/test-coverage.js
@@ -1,1 +1,1 @@
-module.exports = {"button":{"statements":"98.57%","branches":"58.82%","functions":"100%","lines":"98.57%"},"checkbox":{"statements":"93.47%","branches":"75.8%","functions":"80%","lines":"93.47%"},"drawer":{"statements":"100%","branches":"93.75%","functions":"100%","lines":"100%"},"fab":{"statements":"100%","branches":"100%","functions":"100%","lines":"100%"},"overlay":{"statements":"92.55%","branches":"100%","functions":"20%","lines":"92.55%"},"popup":{"statements":"95%","branches":"64.7%","functions":"55.55%","lines":"95%"},"shared":{"statements":"70.58%","branches":"61.11%","functions":"25%","lines":"70.58%"},"stepper":{"statements":"100%","branches":"93.18%","functions":"100%","lines":"100%"},"switch":{"statements":"98.05%","branches":"92.85%","functions":"100%","lines":"98.05%"}}
\ No newline at end of file
+module.exports = {"button":{"statements":"98.57%","branches":"58.82%","functions":"100%","lines":"98.57%"},"checkbox":{"statements":"93.47%","branches":"75.8%","functions":"80%","lines":"93.47%"},"drawer":{"statements":"100%","branches":"93.75%","functions":"100%","lines":"100%"},"fab":{"statements":"100%","branches":"100%","functions":"100%","lines":"100%"},"overlay":{"statements":"92.55%","branches":"100%","functions":"20%","lines":"92.55%"},"popup":{"statements":"95%","branches":"64.7%","functions":"55.55%","lines":"95%"},"shared":{"statements":"70.58%","branches":"63.15%","functions":"25%","lines":"70.58%"},"switch":{"statements":"98.05%","branches":"92.85%","functions":"100%","lines":"98.05%"},"toast":{"statements":"100%","branches":"80%","functions":"100%","lines":"100%"}}
diff --git a/src/toast/__test__/index.test.jsx b/src/toast/__test__/index.test.jsx
new file mode 100644
index 00000000..51b05ad7
--- /dev/null
+++ b/src/toast/__test__/index.test.jsx
@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from 'vitest';
+import Toast from '../toast.vue'
+import Overlay from '../../overlay'
+import { mount } from '@vue/test-utils';
+import { LoadingIcon } from 'tdesign-icons-vue-next';
+
+describe('Toast', () => {
+  describe('props', () => {
+    it(': direction', async () => {
+      const wrapper = mount(Toast, {
+        direction: 'row'
+      })
+      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--row')
+      await wrapper.setProps({
+        direction: 'column'
+      })
+      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--column')
+    })
+
+    it(': icon', async () => {
+      const icon = () => <LoadingIcon />
+
+      const wrapper = mount(Toast, {
+        props: {
+          icon
+        }
+      })
+      expect(wrapper.find('.t-toast > svg').classes()).toContain('t-icon')
+    })
+
+    it(': message', async () => {
+      const wrapper = mount(Toast, {
+        props: {
+          message: 'Loading'
+        }
+      })
+      expect(wrapper.find('.t-toast').text()).toEqual('Loading')
+    })
+
+    it(': overlayProps', async () => {
+      const wrapper = mount(Toast)
+      await wrapper.setProps({
+        overlayProps: {
+          duration: 1000
+        }
+      })
+      expect(wrapper.findComponent(Overlay).vm.duration).toEqual(1000)
+    })
+
+    it (': placement', async () => {
+      const wrapper = mount(Toast, {
+        props: {
+          placement: 'top'
+        }
+      })
+      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--top')
+      await wrapper.setProps({
+        placement: 'bottom'
+      })
+      expect(wrapper.find('.t-toast').classes()).not.toContain('t-toast--top')
+      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--bottom')
+    })
+
+    it(': showOverlay', async () => {
+      const wrapper = mount(Toast, {
+        props: {
+          showOverlay: true
+        }
+      })
+      expect(wrapper.findComponent(Overlay).vm.visible).toEqual(true)
+      await wrapper.setProps({
+        showOverlay: false
+      })
+      expect(wrapper.findComponent(Overlay).vm.visible).toEqual(false)
+    })
+
+    it(': theme', async () => {
+      const wrapper = mount(Toast, {
+        props: {
+          theme: 'loading'
+        }
+      })
+
+      expect(wrapper.findComponent(LoadingIcon).exists()).toEqual(true)
+    })
+  })
+})