chore: increase show tooltip delay to 1 second (#809)

Doist · Dec 12, 2023 · 0991d82 · 0991d82
1 parent aabf4bd
commit 0991d82
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v22.3.1
+
+-   [Tweak] Increase showing tooltip delay to 1 second from 500ms
+
 # v22.3.0
 
 -   [Build] Add support for Node v21

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "22.3.0",
+    "version": "22.3.1",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

diff --git a/src/components/time/time.test.tsx b/src/components/time/time.test.tsx
@@ -6,6 +6,8 @@ import { axe } from 'jest-axe'
 import { Time } from './time'
 import userEvent from '@testing-library/user-event'
 
+import { SHOW_DELAY } from '../../tooltip/tooltip'
+
 describe('Time', () => {
     beforeAll(() => {
         jest.useFakeTimers()
@@ -70,9 +72,14 @@ describe('Time', () => {
         render(<Time time={testDate} tooltipOnHover />)
 
         userEvent.hover(screen.getByText('March 22, 1991'))
-        await waitFor(() => {
-            expect(screen.getByRole('tooltip', { name: 'March 22, 1991, 1:37 PM' })).toBeVisible()
-        })
+        await waitFor(
+            () => {
+                expect(
+                    screen.getByRole('tooltip', { name: 'March 22, 1991, 1:37 PM' }),
+                ).toBeVisible()
+            },
+            { timeout: SHOW_DELAY + 10 },
+        )
 
         userEvent.unhover(screen.getByText('March 22, 1991'))
         await waitFor(() => {
@@ -84,9 +91,12 @@ describe('Time', () => {
         render(<Time time={testDate} tooltipOnHover tooltip="Test" />)
 
         userEvent.hover(screen.getByText('March 22, 1991'))
-        await waitFor(() => {
-            expect(screen.getByRole('tooltip', { name: 'Test' })).toBeVisible()
-        })
+        await waitFor(
+            () => {
+                expect(screen.getByRole('tooltip', { name: 'Test' })).toBeVisible()
+            },
+            { timeout: SHOW_DELAY + 10 },
+        )
 
         userEvent.unhover(screen.getByText('March 22, 1991'))
         await waitFor(() => {
@@ -98,10 +108,15 @@ describe('Time', () => {
         render(<Time time={dayjs().unix()} tooltipOnHover expandOnHover />)
         userEvent.hover(screen.getByText('moments ago'))
 
-        await waitFor(() => {
-            expect(screen.getByRole('tooltip', { name: dayjs().format('LL, LT') })).toBeVisible()
-            expect(screen.getByText('moments ago')).toBeVisible()
-        })
+        await waitFor(
+            () => {
+                expect(
+                    screen.getByRole('tooltip', { name: dayjs().format('LL, LT') }),
+                ).toBeVisible()
+                expect(screen.getByText('moments ago')).toBeVisible()
+            },
+            { timeout: SHOW_DELAY + 10 },
+        )
 
         userEvent.unhover(screen.getByText('moments ago'))
         await waitFor(() => {
@@ -113,10 +128,15 @@ describe('Time', () => {
         render(<Time time={dayjs().unix()} tooltipOnHover expandFullyOnHover />)
         userEvent.hover(screen.getByText('moments ago'))
 
-        await waitFor(() => {
-            expect(screen.getByRole('tooltip', { name: dayjs().format('LL, LT') })).toBeVisible()
-            expect(screen.getByText('moments ago')).toBeVisible()
-        })
+        await waitFor(
+            () => {
+                expect(
+                    screen.getByRole('tooltip', { name: dayjs().format('LL, LT') }),
+                ).toBeVisible()
+                expect(screen.getByText('moments ago')).toBeVisible()
+            },
+            { timeout: SHOW_DELAY + 10 },
+        )
 
         userEvent.unhover(screen.getByText('moments ago'))
         await waitFor(() => {

diff --git a/src/tooltip/tooltip.test.tsx b/src/tooltip/tooltip.test.tsx
@@ -247,9 +247,12 @@ describe('Tooltip', () => {
         const button = screen.getByRole('button', { name: 'Click me' })
         userEvent.tab()
 
-        await waitFor(() => {
-            expect(button).toHaveAccessibleDescription('tooltip content here')
-        })
+        await waitFor(
+            () => {
+                expect(button).toHaveAccessibleDescription('tooltip content here')
+            },
+            { timeout: SHOW_DELAY + 10 },
+        )
     })
 
     it('does not acknowledge the className prop, but exceptionallySetClassName instead', async () => {
@@ -267,7 +270,11 @@ describe('Tooltip', () => {
         // available when we hover or focus the button, and not before.
         userEvent.tab()
 
-        const tooltip = await screen.findByRole('tooltip', { name: 'I’m a tooltip' })
+        const tooltip = await screen.findByRole(
+            'tooltip',
+            { name: 'I’m a tooltip' },
+            { timeout: SHOW_DELAY + 10 },
+        )
         expect(tooltip).toHaveClass('right')
         expect(tooltip).not.toHaveClass('wrong')
     })

diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx
@@ -77,7 +77,7 @@ type TooltipProps = {
 }
 
 // These are exported to be used in the tests, they are not meant to be exported publicly
-export const SHOW_DELAY = 500
+export const SHOW_DELAY = 1000
 export const HIDE_DELAY = 100
 
 function useDelayedTooltipState(initialState: AriakitTooltipStateProps) {