fix: bubble up mouseover and mouseout events

Author: chrisbreiding

lib/test-setup.js

@@ -8,6 +8,11 @@ var exposedProperties = ['window', 'navigator', 'document']
 
 // http://airbnb.io/enzyme/docs/guides/jsdom.html
 global.document = jsdom('')
+global.document.createRange = () => ({
+  commonAncestorContainer: global.document.body,
+  setStart () {},
+  setEnd () {},
+})
 global.window = document.defaultView
 Object.keys(document.defaultView).forEach((property) => {
   if (typeof global[property] === 'undefined') {
@@ -16,8 +21,11 @@ Object.keys(document.defaultView).forEach((property) => {
   }
 })
 global.navigator = {
-  userAgent: 'node.js'
+  userAgent: 'node.js',
+  appVersion: { indexOf () {} },
 }
+global.Node = {}
+global.requestAnimationFrame = (fn) => fn()
 
 // enzyme, and therefore chai-enzyme, needs to be required after
 // global.navigator is set up (https://github.com/airbnb/enzyme/issues/395)

src/tooltip.jsx

@@ -28,9 +28,17 @@ class Tooltip extends Component {
   }
 
   render () {
+    const child = Children.only(this.props.children)
+
     const actionProps = this.props.visible == null ? {
-      onMouseOver: () => this.setState({ shouldShow: true }),
-      onMouseOut: () => this.setState({ shouldShow: false }),
+      onMouseOver: (...args) => {
+        child.props.onMouseOver && child.props.onMouseOver(...args)
+        this.setState({ shouldShow: true })
+      },
+      onMouseOut: (...args) => {
+        child.props.onMouseOut && child.props.onMouseOut(...args)
+        this.setState({ shouldShow: false })
+      },
     } : {}
 
     return (

src/tooltip.spec.jsx

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import React from 'react'
-import { shallow } from 'enzyme'
+import { mount, shallow } from 'enzyme'
+import sinon from 'sinon'
 
 import PortalPopper from './portal-popper'
 
@@ -11,9 +12,9 @@ const defaultProps = {
   title: 'Do foo',
 }
 
-const createComponent = (props) => (
+const createComponent = (props, child) => (
   <Tooltip {..._.extend({}, defaultProps, props)}>
-    <div className='target' />
+    {child || <div className='target' />}
   </Tooltip>
 )
 
@@ -48,6 +49,22 @@ describe('<Tooltip />', () => {
     expect(component.find('span')).to.have.className('custom-wrap-class')
   })
 
+  it('calls onMouseOver if specified', () => {
+    const onMouseOver = sinon.spy()
+    const component = mount(createComponent({}, <div onMouseOver={onMouseOver} />))
+    const args = [1, 2, 3]
+    component.find('div').prop('onMouseOver')(...args)
+    expect(onMouseOver).to.be.calledWith(...args)
+  })
+
+  it('calls onMouseOut if specified', () => {
+    const onMouseOut = sinon.spy()
+    const component = mount(createComponent({}, <div onMouseOut={onMouseOut} />))
+    const args = [1, 2, 3]
+    component.find('div').prop('onMouseOut')(...args)
+    expect(onMouseOut).to.be.calledWith(...args)
+  })
+
   describe('when visible is not explicitly specified', () => {
     let component
     beforeEach(() => {