Rewrite SyntheticWheelEvent-test depending on internal API (#11299) (#11367)
* Update SyntheticWheelEvent tests to use public API * Replace: ReactTestUtils.SimulateNative to native Events() * Update: Replaced WheelEvent() interface to document.createEvent * Fix: Lint SyntheticWheelEvent file * Update: Custom WheelEvent function to a generic MouseEvent function * Update: Prettier SyntheticWheelEvent-test.js * Verify the `button` property is set on synthetic event * Use MouseEvent constructor over custom helper * Rewrite to test React rather than jsdom * Force the .srcElement code path to execute * Style tweaks and slight code reorganization
DouglasGimli committed
Nov 10, 2017 at 13:39 UTC
b4b09cb8bbf669a406d0cc00d50fd7bb4da0bdda
1 file changed
+123
-31
packages/react-dom/src/events/__tests__/SyntheticWheelEvent-test.js
+123
-31
@@ -9,61 +9,153 @@
9
10
'use strict';
11
12
-var SyntheticWheelEvent;
12
+var React;
13
+var ReactDOM;
14
15
describe('SyntheticWheelEvent', () => {
15
- var createEvent;
16
+ var container;
17
18
beforeEach(() => {
18
- // TODO: can we express this test with only public API?
19
- SyntheticWheelEvent = require('../SyntheticWheelEvent').default;
19
+ React = require('react');
20
+ ReactDOM = require('react-dom');
21
21
- createEvent = function(nativeEvent) {
22
- var target = require('../getEventTarget').default(nativeEvent);
23
- return SyntheticWheelEvent.getPooled({}, '', nativeEvent, target);
24
- };
22
+ container = document.createElement('div');
23
+ document.body.appendChild(container);
24
+ });
25
+
26
+ afterEach(() => {
27
+ document.body.removeChild(container);
28
+ container = null;
29
});
30
31
it('should normalize properties from the Event interface', () => {
28
- var target = document.createElement('div');
29
- var syntheticEvent = createEvent({srcElement: target});
32
+ const events = [];
33
+ var onWheel = event => {
34
+ event.persist();
35
+ events.push(event);
36
+ };
37
+ ReactDOM.render(<div onWheel={onWheel} />, container);
38
31
- expect(syntheticEvent.target).toBe(target);
32
- expect(syntheticEvent.type).toBe(undefined);
39
+ const event = new MouseEvent('wheel', {
40
+ bubbles: true,
41
+ });
42
+ // Emulate IE8
43
+ Object.defineProperty(event, 'target', {
44
+ get() {},
45
+ });
46
+ Object.defineProperty(event, 'srcElement', {
47
+ get() {
48
+ return container.firstChild;
49
+ },
50
+ });
51
+ container.firstChild.dispatchEvent(event);
52
+
53
+ expect(events.length).toBe(1);
54
+ expect(events[0].target).toBe(container.firstChild);
55
+ expect(events[0].type).toBe('wheel');
56
});
57
58
it('should normalize properties from the MouseEvent interface', () => {
36
- expect(createEvent({which: 2, button: 1}).button).toBe(1);
59
+ const events = [];
60
+ var onWheel = event => {
61
+ event.persist();
62
+ events.push(event);
63
+ };
64
+ ReactDOM.render(<div onWheel={onWheel} />, container);
65
+
66
+ container.firstChild.dispatchEvent(
67
+ new MouseEvent('wheel', {
68
+ bubbles: true,
69
+ button: 1,
70
+ }),
71
+ );
72
+
73
+ expect(events.length).toBe(1);
74
+ expect(events[0].button).toBe(1);
75
});
76
77
it('should normalize properties from the WheelEvent interface', () => {
40
- var standardEvent = createEvent({deltaX: 10, deltaY: -50});
41
- expect(standardEvent.deltaX).toBe(10);
42
- expect(standardEvent.deltaY).toBe(-50);
78
+ var events = [];
79
+ var onWheel = event => {
80
+ event.persist();
81
+ events.push(event);
82
+ };
83
+ ReactDOM.render(<div onWheel={onWheel} />, container);
84
+
85
+ var event = new MouseEvent('wheel', {
86
+ bubbles: true,
87
+ });
88
+ // jsdom doesn't support these so we add them manually.
89
+ Object.assign(event, {
90
+ deltaX: 10,
91
+ deltaY: -50,
92
+ });
93
+ container.firstChild.dispatchEvent(event);
94
44
- var webkitEvent = createEvent({wheelDeltaX: -10, wheelDeltaY: 50});
45
- expect(webkitEvent.deltaX).toBe(10);
46
- expect(webkitEvent.deltaY).toBe(-50);
95
+ event = new MouseEvent('wheel', {
96
+ bubbles: true,
97
+ });
98
+ // jsdom doesn't support these so we add them manually.
99
+ Object.assign(event, {
100
+ wheelDeltaX: -10,
101
+ wheelDeltaY: 50,
102
+ });
103
+ container.firstChild.dispatchEvent(event);
104
+
105
+ expect(events.length).toBe(2);
106
+ expect(events[0].deltaX).toBe(10);
107
+ expect(events[0].deltaY).toBe(-50);
108
+ expect(events[1].deltaX).toBe(10);
109
+ expect(events[1].deltaY).toBe(-50);
110
});
111
112
it('should be able to `preventDefault` and `stopPropagation`', () => {
50
- var nativeEvent = {};
51
- var syntheticEvent = createEvent(nativeEvent);
113
+ var events = [];
114
+ var onWheel = event => {
115
+ expect(event.isDefaultPrevented()).toBe(false);
116
+ event.preventDefault();
117
+ expect(event.isDefaultPrevented()).toBe(true);
118
+ event.persist();
119
+ events.push(event);
120
+ };
121
+ ReactDOM.render(<div onWheel={onWheel} />, container);
122
53
- expect(syntheticEvent.isDefaultPrevented()).toBe(false);
54
- syntheticEvent.preventDefault();
55
- expect(syntheticEvent.isDefaultPrevented()).toBe(true);
123
+ container.firstChild.dispatchEvent(
124
+ new MouseEvent('wheel', {
125
+ bubbles: true,
126
+ deltaX: 10,
127
+ deltaY: -50,
128
+ }),
129
+ );
130
57
- expect(syntheticEvent.isPropagationStopped()).toBe(false);
58
- syntheticEvent.stopPropagation();
59
- expect(syntheticEvent.isPropagationStopped()).toBe(true);
131
+ container.firstChild.dispatchEvent(
132
+ new MouseEvent('wheel', {
133
+ bubbles: true,
134
+ deltaX: 10,
135
+ deltaY: -50,
136
+ }),
137
+ );
138
+
139
+ expect(events.length).toBe(2);
140
});
141
142
it('should be able to `persist`', () => {
63
- var syntheticEvent = createEvent({});
143
+ var events = [];
144
+ var onWheel = event => {
145
+ expect(event.isPersistent()).toBe(false);
146
+ event.persist();
147
+ expect(event.isPersistent()).toBe(true);
148
+ events.push(event);
149
+ };
150
+ ReactDOM.render(<div onWheel={onWheel} />, container);
151
+
152
+ container.firstChild.dispatchEvent(
153
+ new MouseEvent('wheel', {
154
+ bubbles: true,
155
+ }),
156
+ );
157
65
- expect(syntheticEvent.isPersistent()).toBe(false);
66
- syntheticEvent.persist();
67
- expect(syntheticEvent.isPersistent()).toBe(true);
158
+ expect(events.length).toBe(1);
159
+ expect(events[0].type).toBe('wheel');
160
});
161
});