test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 12:07:54 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

test: update tiiltip

Browse Source
This commit is contained in:
tanjinzhou 2020-08-04 18:13:51 +08:00
parent cf24871d8d
commit 91ae204342
4 changed files with 19 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/tooltip/Tooltip.jsx
View File

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

140
components/tooltip/__tests__/tooltip.test.js
View File

@ -12,17 +12,13 @@ describe('Tooltip', () => {
props: ['title', 'visible'], props: ['title', 'visible'],
render() { render() {
const props = { const props = {
props: { title: this.title || '',
title: this.title || '', mouseEnterDelay: 0,
mouseEnterDelay: 0, mouseLeaveDelay: 0,
mouseLeaveDelay: 0, onVisibleChange,
},
on: {
visibleChange: onVisibleChange,
},
}; };
if (this.visible !== undefined) { if (this.visible !== undefined) {
props.props.visible = this.visible; props.visible = this.visible;
} }
return ( return (
<Tooltip ref="tooltip" {...props}> <Tooltip ref="tooltip" {...props}>
@ -31,22 +27,22 @@ describe('Tooltip', () => {
); );
}, },
}, },
{ sync: false }, { sync: false, attachTo: 'body' },
); );
let div = null; let div = null;
let lastCount = null; let lastCount = null;
await asyncExpect(() => { await asyncExpect(() => {
// `title` is empty. // `title` is empty.
div = wrapper.findAll('#hello').at(0); div = wrapper.findAll('#hello')[0].element;
div.trigger('mouseenter'); div.dispatchEvent(new MouseEvent('mouseenter'));
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(onVisibleChange).not.toHaveBeenCalled(); expect(onVisibleChange).not.toHaveBeenCalled();
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false); expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false);
}); });
await asyncExpect(() => { await asyncExpect(() => {
div.trigger('mouseleave'); div.dispatchEvent(new MouseEvent('mouseleave'));
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(onVisibleChange).not.toHaveBeenCalled(); expect(onVisibleChange).not.toHaveBeenCalled();
@ -57,17 +53,14 @@ describe('Tooltip', () => {
wrapper.setProps({ title: 'Have a nice day!' }); wrapper.setProps({ title: 'Have a nice day!' });
}); });
await asyncExpect(() => { await asyncExpect(() => {
wrapper wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseenter'));
.findAll('#hello')
.at(0)
.trigger('mouseenter');
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(onVisibleChange).toHaveBeenLastCalledWith(true); expect(onVisibleChange).toHaveBeenLastCalledWith(true);
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true); expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true);
}, 0); }, 0);
await asyncExpect(() => { await asyncExpect(() => {
wrapper.find('#hello').trigger('mouseleave'); wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseleave'));
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(onVisibleChange).toHaveBeenLastCalledWith(false); expect(onVisibleChange).toHaveBeenLastCalledWith(false);
@ -78,7 +71,7 @@ describe('Tooltip', () => {
wrapper.setProps({ visible: false }); wrapper.setProps({ visible: false });
}); });
await asyncExpect(() => { await asyncExpect(() => {
wrapper.find('#hello').trigger('mouseenter'); wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseenter'));
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(onVisibleChange).toHaveBeenLastCalledWith(true); expect(onVisibleChange).toHaveBeenLastCalledWith(true);
@ -87,118 +80,11 @@ describe('Tooltip', () => {
}); });
await asyncExpect(() => { await asyncExpect(() => {
// always trigger onVisibleChange // always trigger onVisibleChange
wrapper.trigger('mouseleave'); wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseleave'));
}); });
await asyncExpect(() => { await asyncExpect(() => {
expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount
expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false); 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)
// })
}); });

4
components/tooltip/abstractTooltipProps.js
View File

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

2
examples/App.vue
View File

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