feat(test): add tests for <Dropdown> and <Tooltip>

src/components/Popper/Dropdown.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, render, screen } from '~/common/utils/test'
+import { Dropdown, hidePopperOnClick } from '~/components'
+
+describe('<Dropdown>', () => {
+  it('should render a dropdown and hide when click outside', () => {
+    const handleClick = vi.fn()
+
+    render(
+      <Dropdown
+        content={
+          <button type="button" onClick={handleClick}>
+            Opened
+          </button>
+        }
+      >
+        {({ openDropdown, ref }) => (
+          <button onClick={openDropdown} ref={ref}>
+            Open
+          </button>
+        )}
+      </Dropdown>
+    )
+
+    // show dropdown
+    const $openBtn = screen.getByRole('button', { name: 'Open' })
+    $openBtn.click()
+    const $openedBtn = screen.getByRole('button', { name: 'Opened' })
+    expect($openedBtn).toBeInTheDocument()
+
+    // click dropdown content
+    $openedBtn.click()
+    expect(handleClick).toHaveBeenCalled()
+
+    // click outside to hide dropdown
+    fireEvent.click(document.body)
+    expect(
+      screen.queryByRole('button', { name: 'Opened' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('should render a dropdown and hide when click the content', () => {
+    const handleClick = vi.fn()
+
+    render(
+      <Dropdown
+        content={
+          <button type="button" onClick={handleClick}>
+            Opened
+          </button>
+        }
+        onShown={hidePopperOnClick}
+      >
+        {({ openDropdown, ref }) => (
+          <button onClick={openDropdown} ref={ref}>
+            Open
+          </button>
+        )}
+      </Dropdown>
+    )
+
+    // open dropdown
+    const $openBtn = screen.getByRole('button', { name: 'Open' })
+    $openBtn.click()
+    const $openedBtn = screen.getByRole('button', { name: 'Opened' })
+    expect($openedBtn).toBeInTheDocument()
+
+    // click content and hide dropdown
+    $openedBtn.click()
+    expect(handleClick).toHaveBeenCalled()
+    expect(
+      screen.queryByRole('button', { name: 'Opened' })
+    ).not.toBeInTheDocument()
+  })
+})

src/components/Popper/Tooltip.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { act, fireEvent, render, screen } from '~/common/utils/test'
+import { Tooltip } from '~/components'
+
+describe('<Tooltip>', () => {
+  it('should render a tooltip and show when hover on it', () => {
+    const content = 'Hello, world!'
+
+    render(
+      <Tooltip content={content}>
+        <span>Hover Me</span>
+      </Tooltip>
+    )
+
+    const $hoverMe = screen.getByText('Hover Me')
+    expect($hoverMe).toBeInTheDocument()
+
+    fireEvent.mouseEnter($hoverMe)
+    const $tooltip = screen.getByText(content)
+    expect($tooltip).toBeInTheDocument()
+  })
+
+  it('should render a disabled tooltip', () => {
+    const content = 'Hello, world!'
+
+    render(
+      <Tooltip content={content} disabled>
+        <span>Hover Me</span>
+      </Tooltip>
+    )
+
+    const $hoverMe = screen.getByText('Hover Me')
+    expect($hoverMe).toBeInTheDocument()
+
+    fireEvent.mouseEnter($hoverMe)
+    expect(screen.queryByText(content)).not.toBeInTheDocument()
+  })
+
+  it('should render a delayed tooltip', () => {
+    vi.useFakeTimers()
+
+    const content = 'Hello, world!'
+    const delay = 1000
+
+    render(
+      <Tooltip content={content} delay={[delay, null]}>
+        <span>Hover Me</span>
+      </Tooltip>
+    )
+
+    const $hoverMe = screen.getByText('Hover Me')
+    expect($hoverMe).toBeInTheDocument()
+
+    // content should not be shown before delay
+    fireEvent.mouseEnter($hoverMe)
+    expect(screen.queryByText(content)).not.toBeInTheDocument()
+
+    // content should be shown after delay
+    act(() => {
+      vi.advanceTimersByTime(delay)
+    })
+    const $tooltip = screen.getByText(content)
+    expect($tooltip).toBeInTheDocument()
+
+    act(() => {
+      vi.runAllTimers()
+      vi.useRealTimers()
+      // done();
+    })
+  })
+})

src/components/Popper/index.tsx

@@ -152,6 +152,7 @@ export const hidePopperOnClick = (instance: PopperInstance) => {
   box.addEventListener('click', (event: any) => {
     const target = event.target as HTMLElement
 
+    console.log('click....')
     if (target?.closest && target.closest('[data-clickable], a, button')) {
       instance.hide()
     }