feat(Tabs): add click-tab event (#9037)

src/tab/README.md

@@ -273,7 +273,8 @@ export default {
 
 | Event | Description | Arguments |
 | --- | --- | --- |
-| click | Emitted when a tab is clicked | _name: string \| number, title: string_ |
+| click-tab `v3.1.4` | Emitted when a tab is clicked | _{ name: string \| number, title: string, event: MouseEvent }_ |
+| click | Emitted when a tab is clicked (Deprecated) | _name: string \| number, title: string_ |
 | change | Emitted when active tab changed | _name: string \| number, title: string_ |
 | disabled | Emitted when a disabled tab is clicked | _name: string \| number, title: string_ |
 | rendered | Emitted when content first rendered in lazy-render mode | _name: string \| number, title: string_ |

src/tab/README.zh-CN.md

@@ -280,7 +280,8 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
-| click | 点击标签时触发 | _name: string \| number, title: string_ |
+| click-tab `v3.1.4` | 点击标签时触发 | _{ name: string \| number, title: string, event: MouseEvent }_ |
+| click | 点击标签时触发（已废弃，请使用 click-tab 事件） | _name: string \| number, title: string_ |
 | change | 当前激活的标签改变时触发 | _name: string \| number, title: string_ |
 | disabled | 点击被禁用的标签时触发 | _name: string \| number, title: string_ |
 | rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | _name: string \| number, title: string_ |

src/tab/test/index.legacy.js

@@ -146,32 +146,6 @@ test('border props', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('click event', async () => {
-  const onClick = jest.fn();
-  const onDisabled = jest.fn();
-
-  const wrapper = mount({
-    template: `
-      <van-tabs @click="onClick" @disabled="onDisabled">
-        <van-tab title="title1">Text</van-tab>
-        <van-tab title="title2" disabled>Text</van-tab>
-      </van-tabs>
-    `,
-    methods: {
-      onClick,
-      onDisabled,
-    },
-  });
-
-  const tabs = wrapper.findAll('.van-tab');
-
-  tabs[0].trigger('click');
-  expect(onClick).toHaveBeenCalledWith(0, 'title1');
-
-  tabs[1].trigger('click');
-  expect(onDisabled).toHaveBeenCalledWith(1, 'title2');
-});
-
 test('name prop', async () => {
   const onClick = jest.fn();
   const onChange = jest.fn();

src/tab/test/index.spec.tsx

@@ -0,0 +1,50 @@
+import { mount, later } from '../../../test';
+import { Tab } from '..';
+import { Tabs } from '../../tabs';
+
+test('should emit click event when tab is clicked', async () => {
+  const onClick = jest.fn();
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Tabs onClick={onClick}>
+          <Tab title="title1">1</Tab>
+          <Tab title="title2">2</Tab>
+        </Tabs>
+      );
+    },
+  });
+
+  await later();
+  const tabs = wrapper.findAll('.van-tab');
+
+  await tabs[0].trigger('click');
+  expect(onClick).toHaveBeenCalledWith(0, 'title1');
+});
+
+test('should emit click-tab event when tab is clicked', async () => {
+  const onClickTab = jest.fn();
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Tabs onClick-tab={onClickTab}>
+          <Tab title="title1">1</Tab>
+          <Tab title="title2">2</Tab>
+        </Tabs>
+      );
+    },
+  });
+
+  await later();
+  const tabs = wrapper.findAll('.van-tab');
+
+  await tabs[0].trigger('click');
+  expect(onClickTab).toHaveBeenCalledWith(
+    expect.objectContaining({
+      name: 0,
+      title: 'title1',
+    })
+  );
+});