fixed test

src/TooltipContainer/index.js

@@ -19,9 +19,9 @@ class TooltipContainer extends React.Component {
   }
 
   static defaultProps = {
-    offset: 8,
-    padding: 16,
-    caretSize: 5
+    offset: enums.offset,
+    padding: enums.padding,
+    caretSize: enums.caretSize
   }
 
   componentDidMount() {
@@ -56,6 +56,7 @@ class TooltipContainer extends React.Component {
       <div
         className={`react-autotip-${isEmpty(rest) ? 'hidden' : 'active'}`}
         style={{ ...styles.container[type], ...rest, ...tooltipStyles }}
+        onTransitionEnd={() => console.log('done')}
         ref={tooltip => this.tooltip = tooltip}
       >
         <div style={styles.content[type]}>

src/TooltipContainer/styles.css

@@ -1,10 +1,20 @@
 .react-autotip-hidden {
-  visibility: hidden;
   opacity: 0;
+  transition-property: opacity;
+  transition-duration: 1s;
+  transition-timing-function: ease-in-out;
 }
 
 .react-autotip-active {
-  visibility: visible;
   opacity: 1;
-  transition: opacity 0.25s ease-in 0.35s;
+}
+
+@keyframes in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes out {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
 }

src/utils/calc-position.test.js

@@ -1,5 +1,8 @@
 // local imports
-import calcPosition, { offset, padding } from './calc-position'
+import calcPosition from './calc-position'
+
+import enums from './enums'
+const { offset, padding } = enums
 
 // dims of container that spawns tooltip
 const container = { height: 25, width: 25 }
@@ -20,43 +23,43 @@ describe('utils', () => {
     test('can position to the top of container (default)', () => {
       // the dims of the container that spawns the tooltip
       const containerDims = { ...container, top: 100, left: 100 }
-      const res = calcPosition({ containerDims, tooltipDims })
+      const res = calcPosition({ containerDims, tooltipDims, offset, padding })
       expect(res.pos).toEqual('top')
     })
 
     test('can position to the right of container', () => {
       const left = padding + (tooltipDims.width / 2) - (container.width / 2)
 
       const containerDims = { ...container, top: 100, left }
-      let res = calcPosition({ containerDims, tooltipDims })
+      let res = calcPosition({ containerDims, tooltipDims, offset, padding })
       expect(res.pos).toEqual('top')
 
       containerDims.left = left - 1
-      res = calcPosition({ containerDims, tooltipDims })
+      res = calcPosition({ containerDims, tooltipDims, offset, padding })
       expect(res.pos).toEqual('right')
     })
 
     test('can position to the left of container', () => {
       const left = window.innerWidth - (tooltipDims.width / 2) - padding - (container.width / 2)
 
       const containerDims = { ...container, top: 100, left }
-      let res = calcPosition({ containerDims, tooltipDims })
+      let res = calcPosition({ containerDims, tooltipDims, offset, padding })
       expect(res.pos).toEqual('top')
 
       containerDims.left = left + 1
-      res = calcPosition({ containerDims, tooltipDims })
+      res = calcPosition({ containerDims, tooltipDims, offset, padding })
       expect(res.pos).toEqual('left')
     })
 
     test('can position to the bottom of container', () => {
       const top = padding + tooltipDims.height + offset
 
       const containerDims = { ...container, left: 100, top }
-      let res = calcPosition({ containerDims, tooltipDims })
+      let res = calcPosition({ containerDims, tooltipDims, offset, padding })
       expect(res.pos).toEqual('top')
 
       containerDims.top = top - 1
-      res = calcPosition({ containerDims, tooltipDims })
+      res = calcPosition({ containerDims, tooltipDims, offset, padding })
       expect(res.pos).toEqual('bottom')
     })
   })

src/utils/enums.js

@@ -1,3 +1,6 @@
 export default {
-  ON_TOOLTIP: 'onreactautotip'
+  ON_TOOLTIP: 'onreactautotip',
+  offset: 8,
+  padding: 16,
+  caretSize: 5
 }