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

test: add test for backtop
#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/back-top/back-top.vue b/src/back-top/back-top.vue
index 053c5e4a..1d04b0de 100644
--- a/src/back-top/back-top.vue
+++ b/src/back-top/back-top.vue
@@ -45,7 +45,7 @@ export default defineComponent({
 
     const clickBackBtn = () => {
       window.document.documentElement.scrollTop += top.value;
-      emitEvent('toTop');
+      emitEvent('to-top');
     };
 
     return {


Test patch:
diff --git a/src/back-top/__test__/index.test.jsx b/src/back-top/__test__/index.test.jsx
new file mode 100644
index 00000000..56278bc6
--- /dev/null
+++ b/src/back-top/__test__/index.test.jsx
@@ -0,0 +1,81 @@
+import { describe, it, expect, vi } from 'vitest';
+import BackTop from '../back-top.vue'
+import { mount } from '@vue/test-utils';
+import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
+
+describe('BackTop', () => {
+  describe('props', () => {
+    it (': fixed', async () => {
+      const wrapper = mount(BackTop)
+      expect(wrapper.find('.t-is-fixed').exists()).toEqual(true)
+      await wrapper.setProps({
+        fixed: false
+      })
+      expect(wrapper.find('.t-is-fixed').exists()).toEqual(false)
+    })
+
+    it(': onToTop', () => {
+      const onToTop = vi.fn()
+      const wrapper = mount(BackTop, {
+        props: { onToTop }
+      })
+      wrapper.find('.t-back-top').trigger('click')
+      expect(onToTop).toHaveBeenCalledTimes(1)
+    })
+
+    it(': text', async () => {
+      const wrapper = mount(BackTop)
+      expect(wrapper.find('.t-back-top__text').exists()).toEqual(false)
+      await wrapper.setProps({
+        text: '返回'
+      })
+      expect(wrapper.find('.t-back-top__text').text()).toEqual('返回')
+    })
+
+    it(': theme', async () => {
+      const wrapper = mount(BackTop)
+      expect(wrapper.find('.t-back-top').classes()).toContain('t-back-top--round')
+      await wrapper.setProps({
+        theme: 'half-round'
+      })
+      expect(wrapper.find('.t-back-top').classes()).toContain('t-back-top--half-round')
+    })
+
+    it(': target', async () => {
+      const wrapper = mount(BackTop, {
+        props: {
+          target: () => ({
+            getBoundingClientRect: () => {
+              return {
+                top: 10
+              }
+            }
+          })
+        }
+      })
+      await wrapper.find('.t-back-top').trigger('click')
+      expect(window.document.documentElement.scrollTop).toEqual(10)
+    })
+  })
+
+  describe('slots', () => {
+    it(': icon', () => {
+      const icon = () => <TIconApp />
+
+      const wrapper = mount(BackTop, {
+        slots: {
+          icon
+        }
+      })
+      expect(wrapper.find('.t-back-top > svg').classes()).toContain('t-icon')
+    })
+  })
+
+  describe('events', () => {
+    it(': to-top', async () => {
+      const wrapper = mount(BackTop)
+      wrapper.find('.t-back-top').trigger('click')
+      expect(wrapper.emitted('to-top')).toHaveLength(1)
+    });
+  })
+})