@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 162 lines 3.81 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @emails react-core
8 */
9
10 'use strict';
11
12 let React;
13 let ReactDOMClient;
14 let act;
15
16 describe('SyntheticMouseEvent', () => {
17 let container;
18
19 beforeEach(() => {
20 jest.resetModules();
21 React = require('react');
22 ReactDOMClient = require('react-dom/client');
23 act = require('internal-test-utils').act;
24
25 // The container has to be attached for events to fire.
26 container = document.createElement('div');
27 document.body.appendChild(container);
28 });
29
30 afterEach(() => {
31 document.body.removeChild(container);
32 container = null;
33 });
34
35 it('should only use values from movementX/Y when event type is mousemove', async () => {
36 const events = [];
37 const onMouseMove = event => {
38 events.push(event.movementX);
39 };
40
41 const onMouseDown = event => {
42 events.push(event.movementX);
43 };
44
45 const root = ReactDOMClient.createRoot(container);
46 await act(() => {
47 root.render(<div onMouseMove={onMouseMove} onMouseDown={onMouseDown} />);
48 });
49 const node = container.firstChild;
50
51 let event = new MouseEvent('mousemove', {
52 relatedTarget: null,
53 bubbles: true,
54 screenX: 2,
55 screenY: 2,
56 });
57
58 await act(() => {
59 node.dispatchEvent(event);
60 });
61
62 event = new MouseEvent('mousemove', {
63 relatedTarget: null,
64 bubbles: true,
65 screenX: 8,
66 screenY: 8,
67 });
68
69 await act(() => {
70 node.dispatchEvent(event);
71 });
72
73 // Now trigger a mousedown event to see if movementX has changed back to 0
74 event = new MouseEvent('mousedown', {
75 relatedTarget: null,
76 bubbles: true,
77 screenX: 25,
78 screenY: 65,
79 });
80
81 await act(() => {
82 node.dispatchEvent(event);
83 });
84
85 expect(events.length).toBe(3);
86 expect(events[0]).toBe(0);
87 expect(events[1]).toBe(6);
88 expect(events[2]).toBe(0); // mousedown event should have movementX at 0
89 });
90
91 it('should correctly calculate movementX/Y for capture phase', async () => {
92 const events = [];
93 const onMouseMove = event => {
94 events.push(['move', false, event.movementX, event.movementY]);
95 };
96 const onMouseMoveCapture = event => {
97 events.push(['move', true, event.movementX, event.movementY]);
98 };
99 const onMouseDown = event => {
100 events.push(['down', false, event.movementX, event.movementY]);
101 };
102 const onMouseDownCapture = event => {
103 events.push(['down', true, event.movementX, event.movementY]);
104 };
105
106 const root = ReactDOMClient.createRoot(container);
107 await act(() => {
108 root.render(
109 <div
110 onMouseMove={onMouseMove}
111 onMouseMoveCapture={onMouseMoveCapture}
112 onMouseDown={onMouseDown}
113 onMouseDownCapture={onMouseDownCapture}
114 />,
115 );
116 });
117 const node = container.firstChild;
118
119 let event = new MouseEvent('mousemove', {
120 relatedTarget: null,
121 bubbles: true,
122 screenX: 2,
123 screenY: 2,
124 });
125
126 await act(() => {
127 node.dispatchEvent(event);
128 });
129
130 event = new MouseEvent('mousemove', {
131 relatedTarget: null,
132 bubbles: true,
133 screenX: 8,
134 screenY: 9,
135 });
136
137 await act(() => {
138 node.dispatchEvent(event);
139 });
140
141 // Now trigger a mousedown event to see if movementX has changed back to 0
142 event = new MouseEvent('mousedown', {
143 relatedTarget: null,
144 bubbles: true,
145 screenX: 25,
146 screenY: 65,
147 });
148
149 await act(() => {
150 node.dispatchEvent(event);
151 });
152
153 expect(events).toEqual([
154 ['move', true, 0, 0],
155 ['move', false, 0, 0],
156 ['move', true, 6, 7],
157 ['move', false, 6, 7],
158 ['down', true, 0, 0],
159 ['down', false, 0, 0],
160 ]);
161 });
162 });