test(tooltip): Add test to check for trigger and bubble

telus · Sep 29, 2017 · d82c0bd · d82c0bd
1 parent 3043990
commit d82c0bd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
@@ -17,7 +17,7 @@ const Tooltip = ({ direction, children, ...rest }) => {
         {children}
       </span>
       <button className={styles.trigger}>
-        <DecorativeIcon symbol="questionMarkCircle" />
+        <DecorativeIcon symbol="questionMarkCircle" size={16} />
       </button>
     </div>
   )

diff --git a/src/components/Tooltip/__tests__/Tooltip.spec.jsx b/src/components/Tooltip/__tests__/Tooltip.spec.jsx
@@ -1,16 +1,21 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { shallow, render } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import Tooltip from '../Tooltip'
 
 describe('Tooltip', () => {
+
+  const doRender = (overrides = {}) => render(
+    <Tooltip {...overrides}>Helper text</Tooltip>
+  )
+
   const doShallow = (overrides = {}) => shallow(
     <Tooltip {...overrides}>Helper text</Tooltip>
   )
 
   it('renders', () => {
-    const tooltip = doShallow()
+    const tooltip = doRender()
 
     expect(toJson(tooltip)).toMatchSnapshot()
   })
@@ -21,6 +26,18 @@ describe('Tooltip', () => {
     expect(tooltip).toHaveTagName('div')
   })
 
+  it('has a trigger'), () => {
+    const tooltip = doShallow()
+
+    expect(tooltip.find('button')).toContainReact(<DecorativeIcon symbol="questionMarkCircle" size={16} />)
+  }
+
+  it('has a bubble', () => {
+    const tooltip = doShallow()
+
+    expect(tooltip.find('span').text()).toEqual('Helper text')
+  })
+
   // it('can set direction', () => {
   //   let tooltip = doShallow()
   //   expect(tooltip).toHaveClassName('right')

diff --git a/src/components/Tooltip/__tests__/__snapshots__/Tooltip.spec.jsx.snap b/src/components/Tooltip/__tests__/__snapshots__/Tooltip.spec.jsx.snap
@@ -2,19 +2,19 @@
 
 exports[`Tooltip renders 1`] = `
 <div
-  className="wrapper"
+  class="wrapper"
 >
   <span
-    className="right"
+    class="right"
   >
     Helper text
   </span>
   <button
-    className="trigger"
+    class="trigger"
   >
-    <DecorativeIcon
-      size={24}
-      symbol="questionMarkCircle"
+    <i
+      aria-hidden="true"
+      class="iconQuestionMarkCircle size16"
     />
   </button>
 </div>