test: add click test to Tooltip test suite

Author: danielbarion

src/App.tsx

@@ -19,7 +19,13 @@ function WithProviderMinimal() {
         </TooltipWrapper>
       </p>
       <Tooltip clickable>
-        <button>button</button>
+        <button
+          onClick={() => {
+            console.log('button clicked')
+          }}
+        >
+          button
+        </button>
       </Tooltip>
     </section>
   )

src/test/__snapshots__/tooltip.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tooltip attributes basic tooltip component 1`] = `
+exports[`tooltip attributes basic tooltip 1`] = `
 <div>
   <span
     data-tooltip-content="Hello World!"
@@ -20,17 +20,7 @@ exports[`tooltip attributes basic tooltip component 1`] = `
 </div>
 `;
 
-exports[`tooltip attributes tooltip component - without element reference 1`] = `
-<div>
-  <span
-    data-tooltip-content="Hello World!"
-  >
-    Lorem Ipsum
-  </span>
-</div>
-`;
-
-exports[`tooltip attributes tooltip component with place 1`] = `
+exports[`tooltip attributes tooltip with place 1`] = `
 <div>
   <span
     data-tooltip-content="Hello World!"
@@ -51,7 +41,17 @@ exports[`tooltip attributes tooltip component with place 1`] = `
 </div>
 `;
 
-exports[`tooltip props basic tooltip component 1`] = `
+exports[`tooltip attributes tooltip without element reference 1`] = `
+<div>
+  <span
+    data-tooltip-content="Hello World!"
+  >
+    Lorem Ipsum
+  </span>
+</div>
+`;
+
+exports[`tooltip props basic tooltip 1`] = `
 <div>
   <span
     id="basic-example"
@@ -70,15 +70,30 @@ exports[`tooltip props basic tooltip component 1`] = `
 </div>
 `;
 
-exports[`tooltip props tooltip component - without element reference 1`] = `
+exports[`tooltip props clickable tooltip 1`] = `
 <div>
-  <span>
+  <span
+    id="example-clickable"
+  >
     Lorem Ipsum
   </span>
+  <div
+    class="react-tooltip undefined"
+    role="tooltip"
+    style="left: 5px; top: -10px;"
+  >
+    <button>
+      button
+    </button>
+    <div
+      class="react-tooltip-arrow"
+      style="left: 5px; bottom: -4px;"
+    />
+  </div>
 </div>
 `;
 
-exports[`tooltip props tooltip component with html 1`] = `
+exports[`tooltip props tooltip with html 1`] = `
 <div>
   <span
     id="example-html"
@@ -102,7 +117,7 @@ exports[`tooltip props tooltip component with html 1`] = `
 </div>
 `;
 
-exports[`tooltip props tooltip component with place 1`] = `
+exports[`tooltip props tooltip with place 1`] = `
 <div>
   <span
     id="example-place"
@@ -120,3 +135,11 @@ exports[`tooltip props tooltip component with place 1`] = `
   </div>
 </div>
 `;
+
+exports[`tooltip props tooltip without element reference 1`] = `
+<div>
+  <span>
+    Lorem Ipsum
+  </span>
+</div>
+`;

src/test/tooltip-wrapper.spec.js

@@ -21,7 +21,7 @@ describe('tooltip props', () => {
     )
     const anchorElement = screen.getByText('Minimal 1')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     let tooltip = null
 

src/test/tooltip.spec.js

@@ -24,11 +24,11 @@ const TooltipAttrs = ({ id, ...anchorParams }) => (
 )
 
 describe('tooltip props', () => {
-  test('tooltip component - without element reference', async () => {
+  test('tooltip without element reference', async () => {
     const { container } = render(<TooltipProps content="Hello World!" />)
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     await waitFor(() => {
       expect(screen.queryByText('Hello World!')).not.toBeInTheDocument()
@@ -38,11 +38,11 @@ describe('tooltip props', () => {
     expect(container).toMatchSnapshot()
   })
 
-  test('basic tooltip component', async () => {
+  test('basic tooltip', async () => {
     const { container } = render(<TooltipProps id="basic-example" content="Hello World!" />)
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     let tooltip = null
 
@@ -54,13 +54,13 @@ describe('tooltip props', () => {
     expect(container).toMatchSnapshot()
   })
 
-  test('tooltip component with place', async () => {
+  test('tooltip with place', async () => {
     const { container } = render(
       <TooltipProps id="example-place" content="Hello World!" place="right" />,
     )
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     let tooltip = null
 
@@ -72,11 +72,11 @@ describe('tooltip props', () => {
     expect(container).toMatchSnapshot()
   })
 
-  test('tooltip component with html', async () => {
+  test('tooltip with html', async () => {
     const { container } = render(<TooltipProps id="example-html" html="<div>Hello World!<div>" />)
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     let tooltip = null
 
@@ -87,14 +87,46 @@ describe('tooltip props', () => {
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })
+
+  test('clickable tooltip', async () => {
+    const id = 'example-clickable'
+
+    const mockCallBack = jest.fn()
+    const { container } = render(
+      <>
+        <span id={id}>Lorem Ipsum</span>
+        <Tooltip anchorId={id} clickable>
+          <button onClick={mockCallBack}>button</button>
+        </Tooltip>
+      </>,
+    )
+    const anchorElement = screen.getByText('Lorem Ipsum')
+
+    await userEvent.hover(anchorElement)
+
+    let tooltip = null
+    let button = null
+
+    await waitFor(() => {
+      tooltip = screen.getByRole('tooltip')
+      button = screen.getByRole('button')
+    })
+
+    await userEvent.click(button)
+
+    expect(tooltip).toBeInTheDocument()
+    expect(button).toBeInTheDocument()
+    expect(mockCallBack).toHaveBeenCalled()
+    expect(container).toMatchSnapshot()
+  })
 })
 
 describe('tooltip attributes', () => {
-  test('tooltip component - without element reference', async () => {
+  test('tooltip without element reference', async () => {
     const { container } = render(<TooltipAttrs data-tooltip-content="Hello World!" />)
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     await waitFor(() => {
       expect(screen.queryByText('Hello World!')).not.toBeInTheDocument()
@@ -104,13 +136,13 @@ describe('tooltip attributes', () => {
     expect(container).toMatchSnapshot()
   })
 
-  test('basic tooltip component', async () => {
+  test('basic tooltip', async () => {
     const { container } = render(
       <TooltipAttrs id="basic-example-attr" data-tooltip-content="Hello World!" />,
     )
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     let tooltip = null
 
@@ -123,7 +155,7 @@ describe('tooltip attributes', () => {
     expect(container).toMatchSnapshot()
   })
 
-  test('tooltip component with place', async () => {
+  test('tooltip with place', async () => {
     const { container } = render(
       <TooltipAttrs
         id="example-place-attr"
@@ -133,7 +165,7 @@ describe('tooltip attributes', () => {
     )
     const anchorElement = screen.getByText('Lorem Ipsum')
 
-    userEvent.hover(anchorElement)
+    await userEvent.hover(anchorElement)
 
     let tooltip = null