test: add a few tests to the Tooltip test suite

Author: danielbarion

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tooltip attributes basic tooltip 1`] = `
+<div>
+  <span
+    data-tooltip-content="Hello World!"
+    id="basic-example-attr"
+  >
+    Lorem Ipsum
+  </span>
+  <div
+    class="react-tooltip"
+    role="tooltip"
+  >
+    Hello World!
+    <div
+      class="react-tooltip-arrow"
+    />
+  </div>
+</div>
+`;
+
+exports[`tooltip attributes tooltip with place 1`] = `
+<div>
+  <span
+    data-tooltip-content="Hello World!"
+    data-tooltip-place="right"
+    id="example-place-attr"
+  >
+    Lorem Ipsum
+  </span>
+  <div
+    class="react-tooltip"
+    role="tooltip"
+  >
+    Hello World!
+    <div
+      class="react-tooltip-arrow"
+    />
+  </div>
+</div>
+`;
+
+exports[`tooltip attributes tooltip without element reference 1`] = `
+<div>
+  <span
+    data-tooltip-content="Hello World!"
+  >
+    Lorem Ipsum
+  </span>
+</div>
+`;

src/test/__snapshots__/tooltip.spec.js.snap renamed to src/test/__snapshots__/tooltip-props.spec.js.snap

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tooltip attributes basic tooltip 1`] = `
+exports[`tooltip props basic tooltip 1`] = `
 <div>
   <span
-    data-tooltip-content="Hello World!"
-    id="basic-example-attr"
+    id="basic-example"
   >
     Lorem Ipsum
   </span>
@@ -20,12 +19,33 @@ exports[`tooltip attributes basic tooltip 1`] = `
 </div>
 `;
 
-exports[`tooltip attributes tooltip with place 1`] = `
+exports[`tooltip props clickable tooltip 1`] = `
+<div>
+  <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 with custom position 1`] = `
 <div>
   <span
-    data-tooltip-content="Hello World!"
-    data-tooltip-place="right"
-    id="example-place-attr"
+    id="example-place"
   >
     Lorem Ipsum
   </span>
@@ -41,20 +61,20 @@ exports[`tooltip attributes tooltip with place 1`] = `
 </div>
 `;
 
-exports[`tooltip attributes tooltip without element reference 1`] = `
+exports[`tooltip props tooltip with delay hide 1`] = `
 <div>
   <span
-    data-tooltip-content="Hello World!"
+    id="example-delay-hide"
   >
     Lorem Ipsum
   </span>
 </div>
 `;
 
-exports[`tooltip props basic tooltip 1`] = `
+exports[`tooltip props tooltip with delay show 1`] = `
 <div>
   <span
-    id="basic-example"
+    id="example-delay-show"
   >
     Lorem Ipsum
   </span>
@@ -70,24 +90,20 @@ exports[`tooltip props basic tooltip 1`] = `
 </div>
 `;
 
-exports[`tooltip props clickable tooltip 1`] = `
+exports[`tooltip props tooltip with float 1`] = `
 <div>
   <span
-    id="example-clickable"
+    id="example-float"
   >
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip undefined"
+    class="react-tooltip"
     role="tooltip"
-    style="left: 5px; top: -10px;"
   >
-    <button>
-      button
-    </button>
+    Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: 5px; bottom: -4px;"
     />
   </div>
 </div>

src/test/tooltip-attributes.spec.js

@@ -0,0 +1,76 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { TooltipController as Tooltip } from '../components/TooltipController'
+
+// Tell Jest to mock all timeout functions
+jest.useRealTimers()
+
+// eslint-disable-next-line react/prop-types
+const TooltipAttrs = ({ id, ...anchorParams }) => (
+  <>
+    <span id={id} {...anchorParams}>
+      Lorem Ipsum
+    </span>
+    <Tooltip anchorId={id} />
+  </>
+)
+
+describe('tooltip attributes', () => {
+  test('tooltip without element reference', async () => {
+    const { container } = render(<TooltipAttrs data-tooltip-content="Hello World!" />)
+    const anchorElement = screen.getByText('Lorem Ipsum')
+
+    await userEvent.hover(anchorElement)
+
+    await waitFor(() => {
+      expect(screen.queryByText('Hello World!')).not.toBeInTheDocument()
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+    })
+
+    expect(container).toMatchSnapshot()
+  })
+
+  test('basic tooltip', async () => {
+    const { container } = render(
+      <TooltipAttrs id="basic-example-attr" data-tooltip-content="Hello World!" />,
+    )
+    const anchorElement = screen.getByText('Lorem Ipsum')
+
+    await userEvent.hover(anchorElement)
+
+    let tooltip = null
+
+    await waitFor(() => {
+      tooltip = screen.getByRole('tooltip')
+    })
+
+    expect(anchorElement).toHaveAttribute('data-tooltip-content')
+    expect(tooltip).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
+  })
+
+  test('tooltip with place', async () => {
+    const { container } = render(
+      <TooltipAttrs
+        id="example-place-attr"
+        data-tooltip-content="Hello World!"
+        data-tooltip-place="right"
+      />,
+    )
+    const anchorElement = screen.getByText('Lorem Ipsum')
+
+    await userEvent.hover(anchorElement)
+
+    let tooltip = null
+
+    await waitFor(() => {
+      tooltip = screen.getByRole('tooltip')
+    })
+
+    expect(anchorElement).toHaveAttribute('data-tooltip-place')
+    expect(anchorElement).toHaveAttribute('data-tooltip-content')
+    expect(tooltip).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
+  })
+})

src/test/tooltip.spec.js renamed to src/test/tooltip-props.spec.js

@@ -13,15 +13,6 @@ const TooltipProps = ({ id, ...tooltipParams }) => (
     <Tooltip anchorId={id} {...tooltipParams} />
   </>
 )
-// eslint-disable-next-line react/prop-types
-const TooltipAttrs = ({ id, ...anchorParams }) => (
-  <>
-    <span id={id} {...anchorParams}>
-      Lorem Ipsum
-    </span>
-    <Tooltip anchorId={id} />
-  </>
-)
 
 describe('tooltip props', () => {
   test('tooltip without element reference', async () => {
@@ -119,26 +110,74 @@ describe('tooltip props', () => {
     expect(mockCallBack).toHaveBeenCalled()
     expect(container).toMatchSnapshot()
   })
-})
 
-describe('tooltip attributes', () => {
-  test('tooltip without element reference', async () => {
-    const { container } = render(<TooltipAttrs data-tooltip-content="Hello World!" />)
+  test('tooltip with delay show', async () => {
+    const { container } = render(
+      <TooltipProps id="example-delay-show" content="Hello World!" delayShow={300} />,
+    )
     const anchorElement = screen.getByText('Lorem Ipsum')
 
     await userEvent.hover(anchorElement)
 
+    let tooltip = null
+
+    await waitFor(
+      () => {
+        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+      },
+      {
+        timeout: 250,
+      },
+    )
+
+    await userEvent.unhover(anchorElement)
+
     await waitFor(() => {
-      expect(screen.queryByText('Hello World!')).not.toBeInTheDocument()
-      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+      tooltip = screen.getByRole('tooltip')
     })
 
+    expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })
 
-  test('basic tooltip', async () => {
+  test('tooltip with delay hide', async () => {
+    const { container } = render(
+      <TooltipProps id="example-delay-hide" content="Hello World!" delayHide={300} />,
+    )
+    const anchorElement = screen.getByText('Lorem Ipsum')
+
+    await userEvent.hover(anchorElement)
+
+    await waitFor(() => {
+      expect(screen.queryByRole('tooltip')).toBeInTheDocument()
+    })
+
+    await userEvent.unhover(anchorElement)
+
+    await waitFor(
+      () => {
+        expect(screen.queryByRole('tooltip')).toBeInTheDocument()
+      },
+      {
+        timeout: 200,
+      },
+    )
+
+    await waitFor(
+      () => {
+        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+      },
+      {
+        timeout: 500,
+      },
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  test('tooltip with custom position', async () => {
     const { container } = render(
-      <TooltipAttrs id="basic-example-attr" data-tooltip-content="Hello World!" />,
+      <TooltipProps id="example-place" content="Hello World!" position={{ x: 0, y: 0 }} />,
     )
     const anchorElement = screen.getByText('Lorem Ipsum')
 
@@ -150,19 +189,12 @@ describe('tooltip attributes', () => {
       tooltip = screen.getByRole('tooltip')
     })
 
-    expect(anchorElement).toHaveAttribute('data-tooltip-content')
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })
 
-  test('tooltip with place', async () => {
-    const { container } = render(
-      <TooltipAttrs
-        id="example-place-attr"
-        data-tooltip-content="Hello World!"
-        data-tooltip-place="right"
-      />,
-    )
+  test('tooltip with float', async () => {
+    const { container } = render(<TooltipProps id="example-float" content="Hello World!" float />)
     const anchorElement = screen.getByText('Lorem Ipsum')
 
     await userEvent.hover(anchorElement)
@@ -173,8 +205,6 @@ describe('tooltip attributes', () => {
       tooltip = screen.getByRole('tooltip')
     })
 
-    expect(anchorElement).toHaveAttribute('data-tooltip-place')
-    expect(anchorElement).toHaveAttribute('data-tooltip-content')
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })