test: use waitFor only when relevant

ReactTooltip · Feb 18, 2024 · 2afd043 · 2afd043
1 parent 890a7a7
commit 2afd043
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 76 deletions.
diff --git a/src/test/tooltip-attributes.spec.js b/src/test/tooltip-attributes.spec.js
@@ -39,12 +39,8 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(anchorElement).toHaveAttribute('data-tooltip-content')
     expect(tooltip).toBeInTheDocument()
@@ -63,12 +59,8 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(anchorElement).toHaveAttribute('data-tooltip-place')
     expect(anchorElement).toHaveAttribute('data-tooltip-content')
@@ -88,12 +80,8 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveClass('tooltip-class-name')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveClass('tooltip-class-name')
 
     expect(anchorElement).toHaveAttribute('data-tooltip-class-name')
     expect(tooltip).toBeInTheDocument()

diff --git a/src/test/tooltip-props.spec.js b/src/test/tooltip-props.spec.js
@@ -35,12 +35,8 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
@@ -54,12 +50,8 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
@@ -71,12 +63,8 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
@@ -98,14 +86,10 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-    let button = null
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      button = screen.getByRole('button')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const button = await screen.findByRole('button')
 
     await userEvent.click(button)
 
@@ -123,22 +107,13 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(
-      () => {
-        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
-      },
-      {
-        timeout: 250,
-      },
-    )
-
     await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
     })
 
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
+
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
   })
@@ -151,15 +126,16 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    await waitFor(() => {
-      expect(screen.queryByRole('tooltip')).toBeInTheDocument()
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
+
+    expect(tooltip).toBeInTheDocument()
 
     await userEvent.unhover(anchorElement)
 
     await waitFor(
       () => {
-        expect(screen.queryByRole('tooltip')).toBeInTheDocument()
+        expect(tooltip).toBeInTheDocument()
       },
       {
         timeout: 200,
@@ -168,7 +144,7 @@ describe('tooltip props', () => {
 
     await waitFor(
       () => {
-        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+        expect(tooltip).not.toBeInTheDocument()
       },
       {
         timeout: 500,
@@ -186,12 +162,8 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()
@@ -203,12 +175,8 @@ describe('tooltip props', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(tooltip).toBeInTheDocument()
     expect(container).toMatchSnapshot()

diff --git a/src/test/utils.spec.js b/src/test/utils.spec.js
@@ -1,8 +1,5 @@
 import { debounce, computeTooltipPosition, cssTimeToMs } from 'utils'
 
-// Tell Jest to mock all timeout functions
-jest.useRealTimers()
-
 describe('compute positions', () => {
   test('empty reference elements', async () => {
     const value = await computeTooltipPosition({