From 63a9922250ed9ee884f625009f4bc9a1cfab1fc8 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Thu, 15 Nov 2018 06:31:52 +1100
Subject: [PATCH 1/7] Add isVisible and isEnabled props

---
 index.d.ts         |   6 ++-
 src/Tippy.js       |  39 ++++++++++++++++--
 test/Tippy.test.js | 100 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 140 insertions(+), 5 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index d6fa046..750eda6 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Instance, Props } from 'tippy.js';
+import React from 'react'
+import { Instance, Props } from 'tippy.js'
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
@@ -7,6 +7,8 @@ export interface TippyProps extends Omit<Props, 'content'> {
   content: React.ReactNode | string
   children: React.ReactNode
   onCreate?: (tip: Instance) => void
+  isVisible?: boolean
+  isEnabled?: boolean
 }
 
 export default class Tippy extends React.Component<TippyProps> {}
diff --git a/src/Tippy.js b/src/Tippy.js
index daf1cb9..e8ce604 100644
--- a/src/Tippy.js
+++ b/src/Tippy.js
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import tippy from 'tippy.js'
 
-// Avoid Babel's large '_objectWithoutProperties' helper function
+// These props are not native to `tippy.js` and are specific to React only.
+const REACT_ONLY_PROPS = ['children', 'onCreate', 'isVisible', 'isEnabled']
+
+// Avoid Babel's large '_objectWithoutProperties' helper function.
 const getNativeTippyProps = props => {
   const nativeProps = {}
   for (const prop in props) {
-    if (prop !== 'children' && prop !== 'onCreate') {
+    if (REACT_ONLY_PROPS.indexOf(prop) === -1) {
       nativeProps[prop] = props[prop]
     }
   }
@@ -37,14 +40,44 @@ class Tippy extends React.Component {
     }
   }
 
+  get isManualTrigger() {
+    return this.props.trigger === 'manual'
+  }
+
   componentDidMount() {
     this.setState({ isMounted: true })
+
     this.tip = tippy.one(ReactDOM.findDOMNode(this), this.options)
-    this.props.onCreate && this.props.onCreate(this.tip)
+
+    if (this.props.onCreate) {
+      this.props.onCreate(this.tip)
+    }
+
+    if (this.props.isEnabled === false) {
+      this.tip.disable()
+    }
+
+    if (this.isManualTrigger && this.props.isVisible === true) {
+      this.tip.show()
+    }
   }
 
   componentDidUpdate() {
     this.tip.set(this.options)
+
+    if (this.props.isEnabled === true) {
+      this.tip.enable()
+    } else if (this.props.isEnabled === false) {
+      this.tip.disable()
+    }
+
+    if (this.isManualTrigger) {
+      if (this.props.isVisible === true) {
+        this.tip.show()
+      } else if (this.props.isVisible === false) {
+        this.tip.hide()
+      }
+    }
   }
 
   componentWillUnmount() {
diff --git a/test/Tippy.test.js b/test/Tippy.test.js
index cf3b70b..aef5384 100644
--- a/test/Tippy.test.js
+++ b/test/Tippy.test.js
@@ -127,4 +127,104 @@ describe('<Tippy />', () => {
       ).includes('<div>Tooltip</div>')
     ).toBe(false)
   })
+
+  function initialIsEnabledAs(bool) {
+    return class extends React.Component {
+      state = {
+        isEnabled: bool
+      }
+      render() {
+        return (
+          <Tippy content="tooltip" isEnabled={this.state.isEnabled}>
+            <button />
+          </Tippy>
+        )
+      }
+    }
+  }
+
+  test('props.isEnabled true initially', done => {
+    const EnabledInit = initialIsEnabledAs(true)
+    const enabledWrapper = mount(<EnabledInit />)
+    const enabledTip = enabledWrapper.getDOMNode()._tippy
+
+    expect(enabledTip.state.isEnabled).toBe(true)
+
+    enabledWrapper.setState({ isEnabled: true }, () => {
+      expect(enabledTip.state.isEnabled).toBe(true)
+      enabledWrapper.setState({ isEnabled: false }, () => {
+        expect(enabledTip.state.isEnabled).toBe(false)
+        enabledWrapper.unmount()
+        done()
+      })
+    })
+  })
+
+  test('props.isEnabled false initially', done => {
+    const DisabledInit = initialIsEnabledAs(false)
+    const disabledWrapper = mount(<DisabledInit />)
+    const disabledTip = disabledWrapper.getDOMNode()._tippy
+
+    expect(disabledTip.state.isEnabled).toBe(false)
+
+    disabledWrapper.setState({ isEnabled: false }, () => {
+      expect(disabledTip.state.isEnabled).toBe(false)
+      disabledWrapper.setState({ isEnabled: true }, () => {
+        expect(disabledTip.state.isEnabled).toBe(true)
+        disabledWrapper.unmount()
+        done()
+      })
+    })
+  })
+
+  function initialIsVisibleAs(bool) {
+    return class extends React.Component {
+      state = {
+        isVisible: bool
+      }
+      render() {
+        return (
+          <Tippy
+            content="tooltip"
+            trigger="manual"
+            isVisible={this.state.isVisible}
+          >
+            <button />
+          </Tippy>
+        )
+      }
+    }
+  }
+
+  test('props.isVisible true initially', done => {
+    const VisibleInit = initialIsVisibleAs(true)
+    const visibleWrapper = mount(<VisibleInit />)
+    const visibleTip = visibleWrapper.getDOMNode()._tippy
+
+    expect(visibleTip.state.isVisible).toBe(true)
+
+    visibleWrapper.setState({ isVisible: true }, () => {
+      expect(visibleTip.state.isVisible).toBe(true)
+      visibleWrapper.setState({ isVisible: false }, () => {
+        expect(visibleTip.state.isVisible).toBe(false)
+        done()
+      })
+    })
+  })
+
+  test('props.isVisible false initially', done => {
+    const HiddenInit = initialIsVisibleAs(false)
+    const hiddenWrapper = mount(<HiddenInit />)
+    const hiddenTip = hiddenWrapper.getDOMNode()._tippy
+
+    expect(hiddenTip.state.isVisible).toBe(false)
+
+    hiddenWrapper.setState({ isVisible: false }, () => {
+      expect(hiddenTip.state.isVisible).toBe(false)
+      hiddenWrapper.setState({ isVisible: true }, () => {
+        expect(hiddenTip.state.isVisible).toBe(true)
+        done()
+      })
+    })
+  })
 })

From 1efe2c0000b4a943c11fd0199e5021baa86bf8d9 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Thu, 15 Nov 2018 06:40:17 +1100
Subject: [PATCH 2/7] Use destructuring

---
 src/Tippy.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/Tippy.js b/src/Tippy.js
index e8ce604..3f88787 100644
--- a/src/Tippy.js
+++ b/src/Tippy.js
@@ -49,15 +49,17 @@ class Tippy extends React.Component {
 
     this.tip = tippy.one(ReactDOM.findDOMNode(this), this.options)
 
-    if (this.props.onCreate) {
-      this.props.onCreate(this.tip)
+    const { onCreate, isEnabled, isVisible } = this.props
+
+    if (onCreate) {
+      onCreate(this.tip)
     }
 
-    if (this.props.isEnabled === false) {
+    if (isEnabled === false) {
       this.tip.disable()
     }
 
-    if (this.isManualTrigger && this.props.isVisible === true) {
+    if (this.isManualTrigger && isVisible === true) {
       this.tip.show()
     }
   }
@@ -65,16 +67,18 @@ class Tippy extends React.Component {
   componentDidUpdate() {
     this.tip.set(this.options)
 
-    if (this.props.isEnabled === true) {
+    const { isEnabled, isVisible } = this.props
+
+    if (isEnabled === true) {
       this.tip.enable()
-    } else if (this.props.isEnabled === false) {
+    } else if (isEnabled === false) {
       this.tip.disable()
     }
 
     if (this.isManualTrigger) {
-      if (this.props.isVisible === true) {
+      if (isVisible === true) {
         this.tip.show()
-      } else if (this.props.isVisible === false) {
+      } else if (isVisible === false) {
         this.tip.hide()
       }
     }

From 4c9c72a5d2414c41b1e85fc44e6b9f97998e786b Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Thu, 15 Nov 2018 08:47:43 +1100
Subject: [PATCH 3/7] Add propTypes

---
 src/Tippy.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Tippy.js b/src/Tippy.js
index 3f88787..0204e46 100644
--- a/src/Tippy.js
+++ b/src/Tippy.js
@@ -26,7 +26,9 @@ class Tippy extends React.Component {
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
       .isRequired,
     children: PropTypes.element.isRequired,
-    onCreate: PropTypes.func
+    onCreate: PropTypes.func,
+    isVisible: PropTypes.bool,
+    isEnabled: PropTypes.bool
   }
 
   get isReactElementContent() {

From cd33a5586edfe64d67ac8fa9809869bfd71e5b87 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Thu, 15 Nov 2018 08:55:19 +1100
Subject: [PATCH 4/7] Refactor variables

---
 test/Tippy.test.js | 70 ++++++++++++++++++++++++----------------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/test/Tippy.test.js b/test/Tippy.test.js
index aef5384..4dd4699 100644
--- a/test/Tippy.test.js
+++ b/test/Tippy.test.js
@@ -144,34 +144,34 @@ describe('<Tippy />', () => {
   }
 
   test('props.isEnabled true initially', done => {
-    const EnabledInit = initialIsEnabledAs(true)
-    const enabledWrapper = mount(<EnabledInit />)
-    const enabledTip = enabledWrapper.getDOMNode()._tippy
+    const Component = initialIsEnabledAs(true)
+    const wrapper = mount(<Component />)
+    const tip = wrapper.getDOMNode()._tippy
 
-    expect(enabledTip.state.isEnabled).toBe(true)
+    expect(tip.state.isEnabled).toBe(true)
 
-    enabledWrapper.setState({ isEnabled: true }, () => {
-      expect(enabledTip.state.isEnabled).toBe(true)
-      enabledWrapper.setState({ isEnabled: false }, () => {
-        expect(enabledTip.state.isEnabled).toBe(false)
-        enabledWrapper.unmount()
+    wrapper.setState({ isEnabled: true }, () => {
+      expect(tip.state.isEnabled).toBe(true)
+      wrapper.setState({ isEnabled: false }, () => {
+        expect(tip.state.isEnabled).toBe(false)
+        wrapper.unmount()
         done()
       })
     })
   })
 
   test('props.isEnabled false initially', done => {
-    const DisabledInit = initialIsEnabledAs(false)
-    const disabledWrapper = mount(<DisabledInit />)
-    const disabledTip = disabledWrapper.getDOMNode()._tippy
+    const Component = initialIsEnabledAs(false)
+    const wrapper = mount(<Component />)
+    const tip = wrapper.getDOMNode()._tippy
 
-    expect(disabledTip.state.isEnabled).toBe(false)
+    expect(tip.state.isEnabled).toBe(false)
 
-    disabledWrapper.setState({ isEnabled: false }, () => {
-      expect(disabledTip.state.isEnabled).toBe(false)
-      disabledWrapper.setState({ isEnabled: true }, () => {
-        expect(disabledTip.state.isEnabled).toBe(true)
-        disabledWrapper.unmount()
+    wrapper.setState({ isEnabled: false }, () => {
+      expect(tip.state.isEnabled).toBe(false)
+      wrapper.setState({ isEnabled: true }, () => {
+        expect(tip.state.isEnabled).toBe(true)
+        wrapper.unmount()
         done()
       })
     })
@@ -197,32 +197,34 @@ describe('<Tippy />', () => {
   }
 
   test('props.isVisible true initially', done => {
-    const VisibleInit = initialIsVisibleAs(true)
-    const visibleWrapper = mount(<VisibleInit />)
-    const visibleTip = visibleWrapper.getDOMNode()._tippy
+    const Component = initialIsVisibleAs(true)
+    const wrapper = mount(<Component />)
+    const tip = wrapper.getDOMNode()._tippy
 
-    expect(visibleTip.state.isVisible).toBe(true)
+    expect(tip.state.isVisible).toBe(true)
 
-    visibleWrapper.setState({ isVisible: true }, () => {
-      expect(visibleTip.state.isVisible).toBe(true)
-      visibleWrapper.setState({ isVisible: false }, () => {
-        expect(visibleTip.state.isVisible).toBe(false)
+    wrapper.setState({ isVisible: true }, () => {
+      expect(tip.state.isVisible).toBe(true)
+      wrapper.setState({ isVisible: false }, () => {
+        expect(tip.state.isVisible).toBe(false)
+        wrapper.unmount()
         done()
       })
     })
   })
 
   test('props.isVisible false initially', done => {
-    const HiddenInit = initialIsVisibleAs(false)
-    const hiddenWrapper = mount(<HiddenInit />)
-    const hiddenTip = hiddenWrapper.getDOMNode()._tippy
+    const Component = initialIsVisibleAs(false)
+    const wrapper = mount(<Component />)
+    const tip = wrapper.getDOMNode()._tippy
 
-    expect(hiddenTip.state.isVisible).toBe(false)
+    expect(tip.state.isVisible).toBe(false)
 
-    hiddenWrapper.setState({ isVisible: false }, () => {
-      expect(hiddenTip.state.isVisible).toBe(false)
-      hiddenWrapper.setState({ isVisible: true }, () => {
-        expect(hiddenTip.state.isVisible).toBe(true)
+    wrapper.setState({ isVisible: false }, () => {
+      expect(tip.state.isVisible).toBe(false)
+      wrapper.setState({ isVisible: true }, () => {
+        expect(tip.state.isVisible).toBe(true)
+        wrapper.unmount()
         done()
       })
     })

From 55f770024af655f803f2b245f5d528c92874aa36 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Thu, 15 Nov 2018 14:18:49 +1100
Subject: [PATCH 5/7] Better getNativeTippyProps() implementation

---
 src/Tippy.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Tippy.js b/src/Tippy.js
index 0204e46..bd801ed 100644
--- a/src/Tippy.js
+++ b/src/Tippy.js
@@ -7,14 +7,13 @@ import tippy from 'tippy.js'
 const REACT_ONLY_PROPS = ['children', 'onCreate', 'isVisible', 'isEnabled']
 
 // Avoid Babel's large '_objectWithoutProperties' helper function.
-const getNativeTippyProps = props => {
-  const nativeProps = {}
-  for (const prop in props) {
-    if (REACT_ONLY_PROPS.indexOf(prop) === -1) {
-      nativeProps[prop] = props[prop]
+function getNativeTippyProps(props) {
+  return Object.keys(props).reduce((acc, key) => {
+    if (REACT_ONLY_PROPS.indexOf(key) === -1) {
+      acc[key] = props[key]
     }
-  }
-  return nativeProps
+    return acc
+  }, {})
 }
 
 class Tippy extends React.Component {

From 9119a9ac19b8dd0dafe6be7c1a8feff126bf5a62 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Fri, 16 Nov 2018 16:05:49 +1100
Subject: [PATCH 6/7] Code coverage fixes

---
 src/Tippy.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Tippy.js b/src/Tippy.js
index bd801ed..4ca6504 100644
--- a/src/Tippy.js
+++ b/src/Tippy.js
@@ -72,24 +72,24 @@ class Tippy extends React.Component {
 
     if (isEnabled === true) {
       this.tip.enable()
-    } else if (isEnabled === false) {
+    }
+    if (isEnabled === false) {
       this.tip.disable()
     }
 
     if (this.isManualTrigger) {
       if (isVisible === true) {
         this.tip.show()
-      } else if (isVisible === false) {
+      }
+      if (isVisible === false) {
         this.tip.hide()
       }
     }
   }
 
   componentWillUnmount() {
-    if (this.tip) {
-      this.tip.destroy()
-      this.tip = null
-    }
+    this.tip.destroy()
+    this.tip = null
   }
 
   render() {

From 4dd8f6ebe6570cd312beec5837acbc6a90ac57db Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Fri, 16 Nov 2018 16:06:14 +1100
Subject: [PATCH 7/7] Add react-testing-library test versions

---
 test/Tippy.test.js | 263 ++++++++++++++++++++-------------------------
 1 file changed, 118 insertions(+), 145 deletions(-)

diff --git a/test/Tippy.test.js b/test/Tippy.test.js
index 4dd4699..9ba50d8 100644
--- a/test/Tippy.test.js
+++ b/test/Tippy.test.js
@@ -1,121 +1,104 @@
 import React from 'react'
 import Tippy from '../src/Tippy'
-import { mount } from 'enzyme'
 import ReactDOMServer from 'react-dom/server'
+import { render, fireEvent, cleanup } from 'react-testing-library'
+
+afterEach(cleanup)
 
 describe('<Tippy />', () => {
   test('renders only the child element', () => {
-    const wrapper = mount(
+    const stringContent = render(
       <Tippy content="tooltip">
         <button />
       </Tippy>
     )
-    expect(
-      wrapper
-        .children()
-        .first()
-        .equals(<button />)
-    ).toBe(true)
-    wrapper.unmount()
+    expect(stringContent.container.innerHTML).toBe('<button></button>')
+    const reactElementContent = render(
+      <Tippy content={<div>tooltip</div>}>
+        <button />
+      </Tippy>
+    )
+    expect(reactElementContent.container.innerHTML).toBe('<button></button>')
   })
 
   test('adds a tippy instance to the child node', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Tippy content="tooltip">
         <button />
       </Tippy>
     )
-    expect(wrapper.getDOMNode()._tippy).toBeDefined()
-    wrapper.unmount()
+    expect(container.querySelector('button')._tippy).toBeDefined()
   })
 
   test('calls onCreate() on mount, passing the instance back', () => {
     const spy = jest.fn()
-    const wrapper = mount(
-      <div>
-        <Tippy onCreate={spy} content="tooltip">
-          <button>Hello</button>
-        </Tippy>
-      </div>
+    render(
+      <Tippy content="tooltip" onCreate={spy}>
+        <button />
+      </Tippy>
     )
-    expect(spy.mock.calls.length).toBe(1)
+    expect(spy).toHaveBeenCalledTimes(1)
     const arg = spy.mock.calls[0][0]
-    expect(arg.popper).toBeDefined()
     expect(arg.reference).toBeDefined()
-    wrapper.unmount()
+    expect(arg.popper).toBeDefined()
   })
 
-  test('renders JSX inside content prop', () => {
-    const wrapper = mount(
-      <div>
-        <Tippy content={<strong />}>
-          <button />
-        </Tippy>
-      </div>
+  test('renders react element content inside the content prop', () => {
+    const { container } = render(
+      <Tippy content={<strong>tooltip</strong>}>
+        <button />
+      </Tippy>
     )
-    expect(
-      wrapper
-        .find('button')
-        .getDOMNode()
-        ._tippy.popperChildren.content.querySelector('strong')
-    ).not.toBe(null)
-    wrapper.unmount()
+    const tip = container.querySelector('button')._tippy
+    expect(tip.popper.querySelector('strong')).not.toBeNull()
   })
 
   test('unmount destroys the tippy instance and allows garbage collection', () => {
-    const wrapper = mount(
-      <div>
-        <Tippy content="tooltip">
-          <button />
-        </Tippy>
-      </div>
+    const { container, unmount } = render(
+      <Tippy content="tooltip">
+        <button />
+      </Tippy>
     )
-    const tip = wrapper.find('button').getDOMNode()._tippy
-    expect(tip.state.isDestroyed).toBe(false)
-    wrapper
-      .find(Tippy)
-      .instance()
-      .componentWillUnmount()
-    expect(tip.state.isDestroyed).toBe(true)
-    wrapper.unmount()
+    const button = container.querySelector('button')
+    unmount()
+    expect(button._tippy).toBeUndefined()
   })
 
   test('updating state updates the tippy instance', done => {
     class App extends React.Component {
-      state = { arrow: false }
+      state = { arrow: false, interactive: false }
+      componentDidUpdate() {
+        expect(tip.props.arrow).toBe(true)
+        expect(tip.props.interactive).toBe(true)
+        done()
+      }
       render() {
+        const { arrow, interactive } = this.state
         return (
-          <Tippy content="tooltip" arrow={this.state.arrow}>
-            <button onClick={() => this.setState({ arrow: true })} />
+          <Tippy content="tooltip" arrow={arrow} interactive={interactive}>
+            <button
+              onClick={() => this.setState({ arrow: true, interactive: true })}
+            />
           </Tippy>
         )
       }
     }
-    const wrapper = mount(<App />)
-    const instance = wrapper.getDOMNode()._tippy
-    expect(instance.props.arrow).toBe(false)
-    wrapper.setState({ arrow: true }, () => {
-      expect(instance.props.arrow).toBe(true)
-      wrapper.unmount()
-      done()
-    })
+    const { container } = render(<App />)
+    const button = container.querySelector('button')
+    const tip = button._tippy
+    expect(tip.props.arrow).toBe(false)
+    expect(tip.props.interactive).toBe(false)
+    fireEvent.click(button)
   })
 
   test('component as a child', () => {
-    class Button extends React.Component {
-      render() {
-        return <button>My button</button>
-      }
-    }
-    const wrapper = mount(
-      <div>
-        <Tippy content="tooltip">
-          <Button />
-        </Tippy>
-      </div>
+    const Child = () => <button />
+    const { container } = render(
+      <Tippy content="tooltip">
+        <Child />
+      </Tippy>
     )
-    expect(wrapper.find(Tippy).getDOMNode()._tippy).toBeDefined()
-    wrapper.unmount()
+    expect(container.querySelector('button')._tippy).toBeDefined()
   })
 
   test('tooltip content is not rendered to the DOM', () => {
@@ -128,59 +111,54 @@ describe('<Tippy />', () => {
     ).toBe(false)
   })
 
-  function initialIsEnabledAs(bool) {
-    return class extends React.Component {
-      state = {
-        isEnabled: bool
+  test('props.isEnabled initially `true`', done => {
+    class App extends React.Component {
+      state = { isEnabled: true }
+      componentDidUpdate() {
+        expect(button._tippy.state.isEnabled).toBe(false)
+        done()
       }
       render() {
         return (
           <Tippy content="tooltip" isEnabled={this.state.isEnabled}>
-            <button />
+            <button onClick={() => this.setState({ isEnabled: false })} />
           </Tippy>
         )
       }
     }
-  }
-
-  test('props.isEnabled true initially', done => {
-    const Component = initialIsEnabledAs(true)
-    const wrapper = mount(<Component />)
-    const tip = wrapper.getDOMNode()._tippy
-
-    expect(tip.state.isEnabled).toBe(true)
-
-    wrapper.setState({ isEnabled: true }, () => {
-      expect(tip.state.isEnabled).toBe(true)
-      wrapper.setState({ isEnabled: false }, () => {
-        expect(tip.state.isEnabled).toBe(false)
-        wrapper.unmount()
-        done()
-      })
-    })
+    const { container } = render(<App />)
+    const button = container.querySelector('button')
+    expect(button._tippy.state.isEnabled).toBe(true)
+    fireEvent.click(button)
   })
 
-  test('props.isEnabled false initially', done => {
-    const Component = initialIsEnabledAs(false)
-    const wrapper = mount(<Component />)
-    const tip = wrapper.getDOMNode()._tippy
-
-    expect(tip.state.isEnabled).toBe(false)
-
-    wrapper.setState({ isEnabled: false }, () => {
-      expect(tip.state.isEnabled).toBe(false)
-      wrapper.setState({ isEnabled: true }, () => {
-        expect(tip.state.isEnabled).toBe(true)
-        wrapper.unmount()
+  test('props.isEnabled initially `false`', done => {
+    class App extends React.Component {
+      state = { isEnabled: false }
+      componentDidUpdate() {
+        expect(button._tippy.state.isEnabled).toBe(true)
         done()
-      })
-    })
+      }
+      render() {
+        return (
+          <Tippy content="tooltip" isEnabled={this.state.isEnabled}>
+            <button onClick={() => this.setState({ isEnabled: true })} />
+          </Tippy>
+        )
+      }
+    }
+    const { container } = render(<App />)
+    const button = container.querySelector('button')
+    expect(button._tippy.state.isEnabled).toBe(false)
+    fireEvent.click(button)
   })
 
-  function initialIsVisibleAs(bool) {
-    return class extends React.Component {
-      state = {
-        isVisible: bool
+  test('props.isVisible initially `true`', done => {
+    class App extends React.Component {
+      state = { isVisible: true }
+      componentDidUpdate() {
+        expect(button._tippy.state.isVisible).toBe(false)
+        done()
       }
       render() {
         return (
@@ -189,44 +167,39 @@ describe('<Tippy />', () => {
             trigger="manual"
             isVisible={this.state.isVisible}
           >
-            <button />
+            <button onClick={() => this.setState({ isVisible: false })} />
           </Tippy>
         )
       }
     }
-  }
-
-  test('props.isVisible true initially', done => {
-    const Component = initialIsVisibleAs(true)
-    const wrapper = mount(<Component />)
-    const tip = wrapper.getDOMNode()._tippy
-
-    expect(tip.state.isVisible).toBe(true)
-
-    wrapper.setState({ isVisible: true }, () => {
-      expect(tip.state.isVisible).toBe(true)
-      wrapper.setState({ isVisible: false }, () => {
-        expect(tip.state.isVisible).toBe(false)
-        wrapper.unmount()
-        done()
-      })
-    })
+    const { container } = render(<App />)
+    const button = container.querySelector('button')
+    expect(button._tippy.state.isVisible).toBe(true)
+    fireEvent.click(button)
   })
 
-  test('props.isVisible false initially', done => {
-    const Component = initialIsVisibleAs(false)
-    const wrapper = mount(<Component />)
-    const tip = wrapper.getDOMNode()._tippy
-
-    expect(tip.state.isVisible).toBe(false)
-
-    wrapper.setState({ isVisible: false }, () => {
-      expect(tip.state.isVisible).toBe(false)
-      wrapper.setState({ isVisible: true }, () => {
-        expect(tip.state.isVisible).toBe(true)
-        wrapper.unmount()
+  test('props.isVisible initially `false`', done => {
+    class App extends React.Component {
+      state = { isVisible: false }
+      componentDidUpdate() {
+        expect(button._tippy.state.isVisible).toBe(true)
         done()
-      })
-    })
+      }
+      render() {
+        return (
+          <Tippy
+            content="tooltip"
+            trigger="manual"
+            isVisible={this.state.isVisible}
+          >
+            <button onClick={() => this.setState({ isVisible: true })} />
+          </Tippy>
+        )
+      }
+    }
+    const { container } = render(<App />)
+    const button = container.querySelector('button')
+    expect(button._tippy.state.isVisible).toBe(false)
+    fireEvent.click(button)
   })
 })