初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react'
import { cleanup, fireEvent, render } from '@testing-library/react'
import '@testing-library/jest-dom'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '.'
 
afterEach(cleanup)
 
describe('PortalToFollowElem', () => {
  describe('Context and Provider', () => {
    test('should throw error when using context outside provider', () => {
      // Suppress console.error for this test
      const originalError = console.error
      console.error = jest.fn()
 
      expect(() => {
        render(
          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>,
        )
      }).toThrow('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
 
      console.error = originalError
    })
 
    test('should not throw when used within provider', () => {
      expect(() => {
        render(
          <PortalToFollowElem>
            <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
          </PortalToFollowElem>,
        )
      }).not.toThrow()
    })
  })
 
  describe('PortalToFollowElemTrigger', () => {
    test('should render children correctly', () => {
      const { getByText } = render(
        <PortalToFollowElem>
          <PortalToFollowElemTrigger>Trigger Text </PortalToFollowElemTrigger>
        </PortalToFollowElem>,
      )
      expect(getByText('Trigger Text')).toBeInTheDocument()
    })
 
    test('should handle asChild prop correctly', () => {
      const { getByRole } = render(
        <PortalToFollowElem>
          <PortalToFollowElemTrigger asChild >
            <button>Button Trigger </button>
          </PortalToFollowElemTrigger>
        </PortalToFollowElem>,
      )
 
      expect(getByRole('button')).toHaveTextContent('Button Trigger')
    })
  })
 
  describe('PortalToFollowElemContent', () => {
    test('should not render content when closed', () => {
      const { queryByText } = render(
        <PortalToFollowElem open={false} >
          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
          <PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
        </PortalToFollowElem>,
      )
 
      expect(queryByText('Popup Content')).not.toBeInTheDocument()
    })
 
    test('should render content when open', () => {
      const { getByText } = render(
        <PortalToFollowElem open={true} >
          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
          <PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
        </PortalToFollowElem>,
      )
 
      expect(getByText('Popup Content')).toBeInTheDocument()
    })
  })
 
  describe('Controlled behavior', () => {
    test('should call onOpenChange when interaction happens', () => {
      const handleOpenChange = jest.fn()
 
      const { getByText } = render(
        <PortalToFollowElem onOpenChange={handleOpenChange} >
          <PortalToFollowElemTrigger>Hover Me </PortalToFollowElemTrigger>
          <PortalToFollowElemContent > Content </PortalToFollowElemContent>
        </PortalToFollowElem>,
      )
 
      fireEvent.mouseEnter(getByText('Hover Me'))
      expect(handleOpenChange).toHaveBeenCalled()
 
      fireEvent.mouseLeave(getByText('Hover Me'))
      expect(handleOpenChange).toHaveBeenCalled()
    })
  })
 
  describe('Configuration options', () => {
    test('should accept placement prop', () => {
      // Since we can't easily test actual positioning, we'll check if the prop is passed correctly
      const useFloatingMock = jest.spyOn(require('@floating-ui/react'), 'useFloating')
 
      render(
        <PortalToFollowElem placement="top-start" >
          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
        </PortalToFollowElem>,
      )
 
      expect(useFloatingMock).toHaveBeenCalledWith(
        expect.objectContaining({
          placement: 'top-start',
        }),
      )
 
      useFloatingMock.mockRestore()
    })
  })
})