初始化

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
import { act, renderHook } from '@testing-library/react'
import useBreakpoints, { MediaType } from './use-breakpoints'
 
describe('useBreakpoints', () => {
  const originalInnerWidth = window.innerWidth
 
  // Mock the window resize event
  const fireResize = (width: number) => {
    window.innerWidth = width
    act(() => {
      window.dispatchEvent(new Event('resize'))
    })
  }
 
  // Restore the original innerWidth after tests
  afterAll(() => {
    window.innerWidth = originalInnerWidth
  })
 
  it('should return mobile for width <= 640px', () => {
    // Mock window.innerWidth for mobile
    Object.defineProperty(window, 'innerWidth', {
      writable: true,
      configurable: true,
      value: 640,
    })
 
    const { result } = renderHook(() => useBreakpoints())
    expect(result.current).toBe(MediaType.mobile)
  })
 
  it('should return tablet for width > 640px and <= 768px', () => {
    // Mock window.innerWidth for tablet
    Object.defineProperty(window, 'innerWidth', {
      writable: true,
      configurable: true,
      value: 768,
    })
 
    const { result } = renderHook(() => useBreakpoints())
    expect(result.current).toBe(MediaType.tablet)
  })
 
  it('should return pc for width > 768px', () => {
    // Mock window.innerWidth for pc
    Object.defineProperty(window, 'innerWidth', {
      writable: true,
      configurable: true,
      value: 1024,
    })
 
    const { result } = renderHook(() => useBreakpoints())
    expect(result.current).toBe(MediaType.pc)
  })
 
  it('should update media type when window resizes', () => {
    // Start with desktop
    Object.defineProperty(window, 'innerWidth', {
      writable: true,
      configurable: true,
      value: 1024,
    })
 
    const { result } = renderHook(() => useBreakpoints())
    expect(result.current).toBe(MediaType.pc)
 
    // Resize to tablet
    fireResize(768)
    expect(result.current).toBe(MediaType.tablet)
 
    // Resize to mobile
    fireResize(600)
    expect(result.current).toBe(MediaType.mobile)
  })
 
  it('should clean up event listeners on unmount', () => {
    // Spy on addEventListener and removeEventListener
    const addEventListenerSpy = jest.spyOn(window, 'addEventListener')
    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
 
    const { unmount } = renderHook(() => useBreakpoints())
 
    // Unmount should trigger cleanup
    unmount()
 
    expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
    expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
 
    // Clean up spies
    addEventListenerSpy.mockRestore()
    removeEventListenerSpy.mockRestore()
  })
})