Repository: Tencent/tdesign-mobile-vue
Pull request #425 (2022-10-24 10:24:19)

test(indexes): 新增`Index` 单元测试用例
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？
- [x] 测试用例


### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- feat(Indexes): 新增单元测试

github-actions[bot]: <a href="https://preview-pr425-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/3311966292) -->
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/src/indexes/indexes.vue b/src/indexes/indexes.vue
index 913801ae..91ee76ae 100644
--- a/src/indexes/indexes.vue
+++ b/src/indexes/indexes.vue
@@ -62,6 +62,7 @@ import { ListItem } from './type';
 import IndexesProps from './props';
 import { useEmitEvent } from '../shared';
 import indexesAnchor from './indexes-anchor.vue';
+import TIndexesCell from './indexes-cell.vue';
 
 const { prefix } = config;
 
@@ -94,7 +95,7 @@ const componentName = `${prefix}-indexes`;
 
 export default defineComponent({
   name: componentName,
-  components: { indexesAnchor },
+  components: { indexesAnchor, TIndexesCell },
   props: IndexesProps,
   emits: ['select'],
   setup(props, context: SetupContext) {
@@ -138,7 +139,7 @@ export default defineComponent({
         const { dataset } = ele;
         return dataset && dataset.index === state.activeSidebar;
       });
-      targets[0]?.scrollIntoView();
+      targets[0]?.scrollIntoView?.();
     };
 
     const calcSticky = (indexesRootTop: number) => {


Test patch:
diff --git a/src/indexes/__test__/index.test.tsx b/src/indexes/__test__/index.test.tsx
new file mode 100644
index 00000000..896af33c
--- /dev/null
+++ b/src/indexes/__test__/index.test.tsx
@@ -0,0 +1,136 @@
+import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
+import { Indexes as TIndexes, IndexesCell as TIndexesCell } from '../index';
+import { number } from '../demos/data';
+import config from '@/config';
+import { trigger } from '@/image-viewer/__test__/touch';
+
+const { prefix } = config;
+
+const componentName = `${prefix}-indexes`;
+describe('Indexes', () => {
+  describe('props', () => {
+    it(': height', async () => {
+      const wrapper = mount(TIndexes, {
+        props: {
+          height: 100,
+          list: number,
+        },
+      });
+      expect(wrapper.vm.height).toBe(100); // 测试 props
+      expect(wrapper.find(`.${componentName}`).attributes('style')).toEqual(expect.stringContaining('height: 100px')); // 测试渲染出来的
+    });
+
+    it(': list', () => {
+      const wrapper = mount(TIndexes, {
+        props: {
+          list: number,
+        },
+      });
+      expect(wrapper.findAll(`.${componentName}__sidebar-item`).length).toBe(number.length); // 侧边栏数量
+      wrapper.find(`.${componentName}__sidebar-item`).trigger('click'); // 覆盖侧边栏点击
+      expect(wrapper.findAllComponents(TIndexesCell).length).toBe(
+        number.reduce((count, item) => count + item.children.length, 0),
+      ); // 渲染出来的单元格数量
+    });
+    it(': sticky be true', async () => {
+      const containerDiv = document.createElement('div');
+      containerDiv.setAttribute('style', 'width: 200px; height:200px; border:1px solid red; overflow: auto');
+      document.body.appendChild(containerDiv);
+      const wrapper = mount(TIndexes, {
+        props: {
+          list: number,
+          sticky: true,
+        },
+        // attachTo: containerDiv,
+      });
+      const getBoundingClientRect = vi.fn();
+      getBoundingClientRect.mockImplementation(() => ({
+        x: 0,
+        y: 0,
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 1000,
+        width: 200,
+      }));
+      wrapper.element.getBoundingClientRect = getBoundingClientRect;
+      expect(wrapper.element).toEqual(wrapper.vm.indexesRoot);
+      await wrapper.findComponent(TIndexes).element.dispatchEvent(new CustomEvent('scroll', { detail: 20 }));
+      expect(wrapper.html().includes('position: fixed;')).toEqual(true);
+    });
+    it(': sticky be false', async () => {
+      const containerDiv = document.createElement('div');
+      containerDiv.setAttribute('style', 'width: 200px; height:200px; border:1px solid red; overflow: auto');
+      document.body.appendChild(containerDiv);
+      const wrapper = mount(TIndexes, {
+        props: {
+          list: number,
+          sticky: false,
+        },
+        attachTo: containerDiv,
+      });
+      const getBoundingClientRect = vi.fn();
+      getBoundingClientRect.mockImplementation(() => ({
+        x: 0,
+        y: 0,
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 1000,
+        width: 200,
+      }));
+      wrapper.element.getBoundingClientRect = getBoundingClientRect;
+      expect(wrapper.element).toEqual(wrapper.vm.indexesRoot);
+      await wrapper.findComponent(TIndexes).element.dispatchEvent(new CustomEvent('scroll', { detail: 20 }));
+      expect(wrapper.html().includes('position: fixed;')).toEqual(false);
+    });
+  });
+  describe('event', () => {
+    it(': select', async () => {
+      const log = vi.fn((info) => {
+        return info.childrenIndex;
+      });
+      const selectFn = vi.fn();
+      const wrapper = mount(TIndexes, {
+        props: {
+          list: number,
+          onSelect: selectFn,
+        },
+      });
+      wrapper.findComponent(TIndexesCell).trigger('click'); // 模拟点击第一个单元格
+      expect(selectFn).toBeCalledWith({
+        groupIndex: '1',
+        childrenIndex: 0,
+      }); // 检查onSelect 是否被按指定参数调用
+    });
+    it(': touch sidebar show tips', async () => {
+      const wrapper = mount(TIndexes, {
+        props: {
+          list: number,
+        },
+      });
+      await wrapper.find('.t-indexes__sidebar-item').trigger('click');
+      expect(wrapper.find('.t-indexes__sidebar-tip')).toBeDefined();
+      wrapper.unmount(); // 销毁触发 onBeforeUnmount
+    });
+    it(': sidebar touchmove', async () => {
+      const wrapper = mount(TIndexes, {
+        props: {
+          list: number,
+          sticky: false,
+        },
+      });
+      const sidebar = wrapper.find(`.${componentName}__sidebar`);
+      document.elementFromPoint = function () {
+        // document.elementFromPoint is not defined
+        return sidebar.findAll(`.${componentName}__sidebar-item`)[0].element;
+      };
+      await trigger(sidebar, 'touchstart', 20, 20);
+      await trigger(sidebar, 'touchmove', 20, 60);
+      await trigger(sidebar, 'touchend', 20, 310);
+    });
+  });
+});