test: update tiiltip

components/tooltip/Tooltip.jsx

@@ -50,7 +50,7 @@ export default {
     },
   },
   methods: {
-    onVisibleChange(visible) {
+    handleVisibleChange(visible) {
       if (!hasProp(this, 'visible')) {
         this.sVisible = this.isNoTitle() ? false : visible;
       }
@@ -200,7 +200,7 @@ export default {
       overlay: this.getOverlay(),
       visible: sVisible,
       ref: 'tooltip',
-      onVisibleChange: this.onVisibleChange,
+      onVisibleChange: this.handleVisibleChange,
       onPopupAlign: this.onPopupAlign,
     };
     return (

components/tooltip/__tests__/tooltip.test.js

@@ -12,17 +12,13 @@ describe('Tooltip', () => {
         props: ['title', 'visible'],
         render() {
           const props = {
-            props: {
-              title: this.title || '',
-              mouseEnterDelay: 0,
-              mouseLeaveDelay: 0,
-            },
-            on: {
-              visibleChange: onVisibleChange,
-            },
+            title: this.title || '',
+            mouseEnterDelay: 0,
+            mouseLeaveDelay: 0,
+            onVisibleChange,
           };
           if (this.visible !== undefined) {
-            props.props.visible = this.visible;
+            props.visible = this.visible;
           }
           return (
             <Tooltip ref="tooltip" {...props}>
@@ -31,22 +27,22 @@ describe('Tooltip', () => {
           );
         },
       },
-      { sync: false },
+      { sync: false, attachTo: 'body' },
     );
 
     let div = null;
     let lastCount = null;
     await asyncExpect(() => {
       // `title` is empty.
-      div = wrapper.findAll('#hello').at(0);
-      div.trigger('mouseenter');
+      div = wrapper.findAll('#hello')[0].element;
+      div.dispatchEvent(new MouseEvent('mouseenter'));
     });
     await asyncExpect(() => {
       expect(onVisibleChange).not.toHaveBeenCalled();
       expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
     });
     await asyncExpect(() => {
-      div.trigger('mouseleave');
+      div.dispatchEvent(new MouseEvent('mouseleave'));
     });
     await asyncExpect(() => {
       expect(onVisibleChange).not.toHaveBeenCalled();
@@ -57,17 +53,14 @@ describe('Tooltip', () => {
       wrapper.setProps({ title: 'Have a nice day!' });
     });
     await asyncExpect(() => {
-      wrapper
-        .findAll('#hello')
-        .at(0)
-        .trigger('mouseenter');
+      wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseenter'));
     });
     await asyncExpect(() => {
       expect(onVisibleChange).toHaveBeenLastCalledWith(true);
       expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true);
     }, 0);
     await asyncExpect(() => {
-      wrapper.find('#hello').trigger('mouseleave');
+      wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseleave'));
     });
     await asyncExpect(() => {
       expect(onVisibleChange).toHaveBeenLastCalledWith(false);
@@ -78,7 +71,7 @@ describe('Tooltip', () => {
       wrapper.setProps({ visible: false });
     });
     await asyncExpect(() => {
-      wrapper.find('#hello').trigger('mouseenter');
+      wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseenter'));
     });
     await asyncExpect(() => {
       expect(onVisibleChange).toHaveBeenLastCalledWith(true);
@@ -87,118 +80,11 @@ describe('Tooltip', () => {
     });
     await asyncExpect(() => {
       // always trigger onVisibleChange
-      wrapper.trigger('mouseleave');
+      wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseleave'));
     });
     await asyncExpect(() => {
       expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount
       expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
     });
-    await asyncExpect(() => {});
   });
-
-  // it('should hide when mouse leave native disabled button', () => {
-  //   const onVisibleChange = jest.fn()
-  //   const wrapper = mount(
-  //     <Tooltip
-  //       title='xxxxx'
-  //       mouseEnterDelay={0}
-  //       mouseLeaveDelay={0}
-  //       onVisibleChange={onVisibleChange}
-  //     >
-  //       <button disabled>Hello world!</button>
-  //     </Tooltip>
-  //   )
-
-  //   expect(wrapper.find('span')).toHaveLength(1)
-  //   const button = wrapper.find('span').at(0)
-  //   button.dispatchEvent(new MouseEvent('mouseenter'))
-  //   expect(onVisibleChange).toBeCalledWith(true)
-  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
-
-  //   button.trigger('mouseleave')
-  //   expect(onVisibleChange).toBeCalledWith(false)
-  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
-  // })
-
-  // it('should hide when mouse leave antd disabled Button', () => {
-  //   const onVisibleChange = jest.fn()
-  //   const wrapper = mount(
-  //     <Tooltip
-  //       title='xxxxx'
-  //       mouseEnterDelay={0}
-  //       mouseLeaveDelay={0}
-  //       onVisibleChange={onVisibleChange}
-  //     >
-  //       <Button disabled>Hello world!</Button>
-  //     </Tooltip>
-  //   )
-
-  //   expect(wrapper.render()).toMatchSnapshot()
-  //   const button = wrapper.find('span').at(0)
-  //   button.dispatchEvent(new MouseEvent('mouseenter'))
-  //   expect(onVisibleChange).toBeCalledWith(true)
-  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true)
-
-  //   button.trigger('mouseleave')
-  //   expect(onVisibleChange).toBeCalledWith(false)
-  //   expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false)
-  // })
-
-  // it('should render disabled Button style properly', () => {
-  //   const wrapper1 = mount(
-  //     <Tooltip title='xxxxx'>
-  //       <Button disabled>Hello world!</Button>
-  //     </Tooltip>
-  //   )
-  //   const wrapper2 = mount(
-  //     <Tooltip title='xxxxx'>
-  //       <Button disabled style={{ display: 'block' }}>Hello world!</Button>
-  //     </Tooltip>
-  //   )
-  //   expect(wrapper1.find('span').at(0).element.style.display).toBe('inline-block')
-  //   expect(wrapper2.find('span').at(0).element.style.display).toBe('block')
-  // })
-
-  // it('should works for arrowPointAtCenter', () => {
-  //   const arrowWidth = 5
-  //   const horizontalArrowShift = 16
-  //   const triggerWidth = 200
-
-  //   const suit = () => {
-  //     const wrapper = mount(
-  //       <Tooltip
-  //         title='xxxxx'
-  //         trigger='click'
-  //         mouseEnterDelay={0}
-  //         mouseLeaveDelay={0}
-  //         placement='bottomLeft'
-  //       >
-  //         <button style={{ width: triggerWidth }}>
-  //           Hello world!
-  //         </button>
-  //       </Tooltip>
-  //     )
-  //     wrapper.find('button').at(0).trigger('click')
-  //     const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10)
-
-  //     const wrapper2 = mount(
-  //       <Tooltip
-  //         title='xxxxx'
-  //         trigger='click'
-  //         mouseEnterDelay={0}
-  //         mouseLeaveDelay={0}
-  //         placement='bottomLeft'
-  //         arrowPointAtCenter
-  //       >
-  //         <button style={{ width: triggerWidth }}>
-  //           Hello world!
-  //         </button>
-  //       </Tooltip>
-  //     )
-  //     wrapper2.find('button').at(0).trigger('click')
-  //     const popupLeftArrowPointAtCenter = parseInt(wrapper2.instance().getPopupDomNode().style.left, 10)
-  //     expect(popupLeftArrowPointAtCenter - popupLeftDefault).toBe((triggerWidth / 2) - horizontalArrowShift - arrowWidth)
-  //   }
-  //   jest.dontMock('rc-trigger', suit)
-  // })
 });

components/tooltip/abstractTooltipProps.js

@@ -19,7 +19,7 @@ export default () => ({
     'rightBottom',
   ]).def('top'),
   transitionName: PropTypes.string.def('zoom-big-fast'),
-  // onVisibleChange: PropTypes.func,
+
   overlayStyle: PropTypes.object.def(() => ({})),
   overlayClassName: PropTypes.string,
   prefixCls: PropTypes.string,
@@ -32,4 +32,6 @@ export default () => ({
   align: PropTypes.object.def(() => ({})),
   builtinPlacements: PropTypes.object,
   children: PropTypes.any,
+  onVisibleChange: PropTypes.func,
+  'onUpdate:visible': PropTypes.func,
 });

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/timeline/demo/index';
+import demo from '../antdv-demo/docs/tooltip/demo/index';
 
 export default {
   components: {