react-testing-library/src/__tests__/mouse-enter-related-target.js at f7ca7bcb8d8607cef4c37517169d87331fd151f2 · testing-library/react-testing-library · GitHub

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
import * as React from 'react'
import {render, fireEvent, screen} from '../'

test('mouseEnter forwards relatedTarget correctly', () => {
  const handleMouseEnter = jest.fn()

  render(<div onMouseEnter={handleMouseEnter}>Hello</div>)

  const element = screen.getByText('Hello')
  const mockRelatedTarget = document.createElement('div')

  fireEvent.mouseEnter(element, {
    relatedTarget: mockRelatedTarget,
  })

  expect(handleMouseEnter).toHaveBeenCalledTimes(1)
  expect(handleMouseEnter.mock.calls[0][0].relatedTarget).toBe(
    mockRelatedTarget,
  )
})

test('mouseOver forwards relatedTarget correctly (for comparison)', () => {
  const handleMouseOver = jest.fn()

  render(<div onMouseOver={handleMouseOver}>Hello</div>)

  const element = screen.getByText('Hello')
  const mockRelatedTarget = document.createElement('div')

  fireEvent.mouseOver(element, {
    relatedTarget: mockRelatedTarget,
  })

  expect(handleMouseOver).toHaveBeenCalledTimes(1)
  expect(handleMouseOver.mock.calls[0][0].relatedTarget).toBe(
    mockRelatedTarget,
  )
})

test('pointerEnter forwards relatedTarget correctly', () => {
  const handlePointerEnter = jest.fn()

  render(<div onPointerEnter={handlePointerEnter}>Hello</div>)

  const element = screen.getByText('Hello')
  const mockRelatedTarget = document.createElement('div')

  fireEvent.pointerEnter(element, {
    relatedTarget: mockRelatedTarget,
  })

  expect(handlePointerEnter).toHaveBeenCalledTimes(1)
  expect(handlePointerEnter.mock.calls[0][0].relatedTarget).toBe(
    mockRelatedTarget,
  )
})

test('mouseLeave forwards relatedTarget correctly', () => {
  const handleMouseLeave = jest.fn()

  render(<div onMouseLeave={handleMouseLeave}>Hello</div>)

  const element = screen.getByText('Hello')
  const mockRelatedTarget = document.createElement('div')

  fireEvent.mouseLeave(element, {
    relatedTarget: mockRelatedTarget,
  })

  expect(handleMouseLeave).toHaveBeenCalledTimes(1)
  expect(handleMouseLeave.mock.calls[0][0].relatedTarget).toBe(
    mockRelatedTarget,
  )
})