test(Tabs): add test cases

Tencent · Jun 13, 2023 · cb92ba6 · cb92ba6
1 parent 94f3a08
commit cb92ba6
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 4 deletions.
diff --git a/src/tabs/__test__/index.test.jsx b/src/tabs/__test__/index.test.jsx
@@ -4,6 +4,14 @@ import { ref } from 'vue';
 import { Tabs, TabPanel } from '../index';
 import TTabNav from '../tab-nav-item.vue';
 
+const sleep = (duration) =>
+  new Promise((resolve) =>
+    setTimeout(() => {
+      resolve();
+    }, duration),
+  );
+
+
 const prefix = 't';
 const name = `${prefix}-tabs`;
 const list = [
@@ -265,5 +273,60 @@ describe('Tabs', () => {
         expect(currentLabel.value).toBe(`标签页${currentValue.value}`);
       }
     });
+    it(': touch', async () => {
+      const currentValue = ref('1');
+      const onChange = vi.fn((value) => {
+        currentValue.value = value;
+      });
+      const wrapper = mount({
+        setup() {
+          return () => (
+            <Tabs v-model={currentValue.value} onChange={onChange}>
+              <TabPanel value="1" label="标签页一" panel="标签一内容区" />
+              <TabPanel value="2" label="标签页二" panel="标签二内容区" />
+            </Tabs>
+          );
+        },
+      });
+      const $content = wrapper.find(`.${name}__content`);
+
+      await $content.trigger('touchstart', { touches: [{ clientX: 0, clientY: 0 }] })
+      await $content.trigger('touchmove', { touches: [{ clientX: 101, clientY: 0 }] })
+      await $content.trigger('touchend', { touches: [{ clientX: 200, clientY: 0 }] })
+      await sleep(200)
+
+      expect(onChange).toHaveBeenCalledTimes(0);
+    });
+  });
+});
+describe('Tab-panel', () => {
+  describe('props', () => {
+    it(': destroyOnHide', async () => {
+      const currentValue = ref('1');
+      const currentLabel=ref('')
+      const onClick = vi.fn((value,label) => {
+        currentValue.value = value;
+        currentLabel.value = label;
+      });
+      const wrapper = mount({
+        setup() {
+          return () => (
+            <Tabs v-model={currentValue.value} onClick={onClick}>
+              <TabPanel value="1" label="标签页1" panel="标签一内容区" destroyOnHide={false} />
+              <TabPanel value="2" label="标签页2" panel="标签二内容区" />
+            </Tabs>
+          );
+        },
+      });
+
+      const navWrap = wrapper.find(`.${name}__wrapper`);
+      const $tabNavItems = navWrap.findAllComponents(TTabNav);
+
+      $tabNavItems.map(async (item, index) => {
+        await item.trigger('click');
+        expect(wrapper.findAll('.t-tab-panel')).toHaveLength(1);
+      });
+    });
+
   });
 });
diff --git a/src/tabs/tabs.vue b/src/tabs/tabs.vue
@@ -84,9 +84,8 @@ export default defineComponent({
     const stickyProps = computed(() => ({ ...props.stickyProps, disabled: !props.sticky }));
     const activeClass = `${name}__item--active`;
     const disabledClass = `${name}__item--disabled`;
-    const classes = computed(() => [`${name}`, props.size ? CLASSNAMES.SIZE[props.size] : '']);
+    const classes = computed(() => [`${name}`, props.size && CLASSNAMES.SIZE[props.size]]);
     const navClasses = ref([`${name}__nav`]);
-    const isScroll = ref(false);
     const startX = ref(0);
     const startY = ref(0);
     const endX = ref(0);
@@ -157,8 +156,6 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      isScroll.value = (navWrap.value?.offsetWidth || 0) > (navScroll.value?.offsetWidth || 0);
-      isScroll.value && navClasses.value.push(`${prefix}-is-scrollable`);
       window.addEventListener('resize', moveToActiveTab, false);
       setTimeout(() => {
         moveToActiveTab();