-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.js
103 lines (89 loc) · 3.38 KB
/
test.js
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
import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import useDominantHand from './dhand'
Object.defineProperties(window.HTMLElement.prototype, {
offsetWidth: {
get: function () {
if (this.id === 'large-button') return 410
if (this.id === 'invisible') return 0
return 100
},
},
})
const Wrapper = ({
buttonId = 'large-button',
touchEventOnly = false,
Component = 'button',
}) => {
const { score } = useDominantHand({ touchEventsOnly: touchEventOnly })
return (
<div data-testid="score" data-score={score} style={{ width: '1000px' }}>
<p>Hi</p>
<Component data-testid="button" id={buttonId}>
Click me
</Component>
</div>
)
}
describe('useDominantHand', () => {
it('should not record events on large screens', () => {
Object.defineProperty(window, 'innerWidth', {
writable: true,
configurable: true,
value: 1000,
})
render(<Wrapper />)
fireEvent.click(screen.getByTestId('button'), { clientX: 400, clientY: 10 })
expect(screen.getByTestId('score')).toHaveAttribute('data-score', '0')
Object.defineProperty(window, 'innerWidth', {
writable: true,
configurable: true,
value: 500,
})
})
it('should not record keyboard events', () => {
render(<Wrapper />)
fireEvent.click(screen.getByTestId('button'), { clientX: 0, clientY: 0 })
expect(screen.getByTestId('score')).toHaveAttribute('data-score', '0')
})
it('should not record events when `touchEventOnly` is enabled', () => {
render(<Wrapper touchEventOnly />)
fireEvent.click(screen.getByTestId('button'), { clientX: 10, clientY: 10 })
expect(screen.getByTestId('score')).toHaveAttribute('data-score', '0')
})
it('should not record events when the element is not fullscreen', () => {
render(<Wrapper buttonId="small-button" />)
fireEvent.click(screen.getByTestId('button'), { clientX: 10, clientY: 10 })
expect(screen.getByTestId('score')).toHaveAttribute('data-score', '0')
})
it('should not record events when the element is not interactive', () => {
render(<Wrapper Component="span" />)
fireEvent.click(screen.getByTestId('button'), { clientX: 10, clientY: 10 })
expect(screen.getByTestId('score')).toHaveAttribute('data-score', '0')
})
it('should not record events when the element is not visible', () => {
render(<Wrapper buttonId="invisible" />)
fireEvent.click(screen.getByTestId('button'), { clientX: 10, clientY: 10 })
expect(screen.getByTestId('score')).toHaveAttribute('data-score', '0')
})
it('should not record events when the click is near the center', () => {
render(<Wrapper />)
fireEvent.click(screen.getByTestId('button'), { clientX: 200, clientY: 10 })
expect(screen.getByTestId('score')).toHaveAttribute('data-score', '0')
})
it('should return a negative score for left side', () => {
render(<Wrapper />)
fireEvent.click(screen.getByTestId('button'), { clientX: 100, clientY: 10 })
expect(
+screen.getByTestId('score').getAttribute('data-score')
).toBeLessThan(0)
})
it('should return a positive score for right side', () => {
render(<Wrapper />)
fireEvent.click(screen.getByTestId('button'), { clientX: 300, clientY: 10 })
expect(
+screen.getByTestId('score').getAttribute('data-score')
).toBeGreaterThan(0)
})
})