github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

test: update tiiltip

pull/2682/head
tanjinzhou 4 years ago
parent
cf24871d8d
commit
91ae204342
4 changed files with 19 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      components/tooltip/Tooltip.jsx
  2. 140
      components/tooltip/__tests__/tooltip.test.js
  3. 4
      components/tooltip/abstractTooltipProps.js
  4. 2
      examples/App.vue

4
components/tooltip/Tooltip.jsx
Unescape View File

@ -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 (

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

@ -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)
// })
});

4
components/tooltip/abstractTooltipProps.js
Unescape View File

@ -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,
});

2
examples/App.vue
Unescape View File

@ -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: {

Write Preview
Loading…
Cancel
Save