How to use findRootContainerNode method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

ReactDOMEventListener.js

Source: ReactDOMEventListener.js Github

copy
1import SimpleEventPlugin from './SimpleEventPlugin';
2import {
3	DiscreteEvent,
4	UserBlockingEvent,
5	ContinuousEvent,
6} from '../../shared/ReactTypes';
7import { PLUGIN_EVENT_SYSTEM } from '../../events/EventSystemFlags';
8import { discreteUpdates, batchedEventUpdates } from './ReactGenericBatching';
9import getEventTarget from './getEventTarget';
10import { getClosestInstanceFromNode } from '../ReactDOMComponentTree';
11import { HostRoot } from '../../shared/ReactWorkTags';
12import { getRawEventName } from './DOMTopLevelEventTypes';
13import {
14	addEventCaptureListener,
15	addEventBubbleListener,
16} from './EventListener';
17import { runExtractedPluginEventsInBatch } from '../../events/EventPluginHub'
18
19const { getEventPriority } = SimpleEventPlugin;
20
21const CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
22const callbackBookkeepingPool = [];
23
24export let _enabled = true;
25
26export function setEnabled(enabled) {
27	_enabled = !!enabled;
28}
29
30export function isEnabled() {
31	return _enabled;
32}
33
34function releaseTopLevelCallbackBookKeeping(instance) {
35	instance.topLevelType = null;
36	instance.nativeEvent = null;
37	instance.targetInst = null;
38	instance.ancestors.length = 0;
39	if (callbackBookkeepingPool.length < CALLBACK_BOOKKEEPING_POOL_SIZE) {
40		callbackBookkeepingPool.push(instance);
41	}
42}
43
44function getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
45	if (callbackBookkeepingPool.length) {
46		// 复用
47		const instance = callbackBookkeepingPool.pop();
48
49		instance.topLevelType = topLevelType;
50		instance.nativeEvent = nativeEvent;
51		instance.targetInst = targetInst;
52		return instance;
53	}
54	return {
55		topLevelType,
56		nativeEvent,
57		targetInst,
58		ancestors: [],
59	};
60}
61
62function findRootContainerNode(inst) {
63	while (inst.return) {
64		inst = inst.return;
65	}
66	if (inst.tag !== HostRoot) {
67		// This can happen if we're in a detached tree.
68		return null;
69	}
70	return inst.stateNode.containerInfo;
71}
72
73function handleTopLevel(bookKeeping) {
74	let targetInst = bookKeeping.targetInst;
75
76	let ancestor = targetInst;
77	do {
78		if (!ancestor) {
79			const ancestors = bookKeeping.ancestors;
80			ancestors.push(ancestor);
81			break;
82		}
83		const root = findRootContainerNode(ancestor);
84
85		if (!root) {
86			break;
87		}
88		bookKeeping.ancestors.push(ancestor);
89
90		ancestor = getClosestInstanceFromNode(root);
91	} while (ancestor);
92
93	for (let i = 0; i < bookKeeping.ancestors.length; i++) {
94		targetInst = bookKeeping.ancestors[i];
95		const eventTarget = getEventTarget(bookKeeping.nativeEvent);
96		const topLevelType = bookKeeping.topLevelType;
97		const nativeEvent = bookKeeping.nativeEvent;
98
99		runExtractedPluginEventsInBatch(
100			topLevelType,
101			targetInst,
102			nativeEvent,
103			eventTarget,
104		);
105	}
106}
107
108function dispatchEventForPluginEventSystem(
109	topLevelType,
110	eventSystemFlags,
111	nativeEvent,
112	targetInst,
113) {
114	const bookKeeping = getTopLevelCallbackBookKeeping(
115		topLevelType,
116		nativeEvent,
117		targetInst,
118	);
119
120	try {
121		batchedEventUpdates(handleTopLevel, bookKeeping);
122	} finally {
123		releaseTopLevelCallbackBookKeeping(bookKeeping);
124	}
125}
126
127function dispatchEvent(topLevelType, eventSystemFlags, nativeEvent) {
128	if (!_enabled) {
129		return;
130	}
131
132	const nativeEventTarget = getEventTarget(nativeEvent);
133	let targetInst = getClosestInstanceFromNode(nativeEventTarget);
134
135	dispatchEventForPluginEventSystem(
136		topLevelType,
137		eventSystemFlags,
138		nativeEvent,
139		targetInst,
140	);
141}
142
143function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
144	discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
145}
146
147function trapEventForPluginEventSystem(element, topLevelType, capture) {
148	let listener;
149	switch (getEventPriority(topLevelType)) {
150		case DiscreteEvent:
151			listener = dispatchDiscreteEvent.bind(
152				null,
153				topLevelType,
154				PLUGIN_EVENT_SYSTEM,
155			);
156			break;
157		case UserBlockingEvent:
158		case ContinuousEvent:
159		default:
160			listener = dispatchEvent.bind(
161				null,
162				topLevelType,
163				PLUGIN_EVENT_SYSTEM,
164			);
165			break;
166	}
167	const rawEventName = getRawEventName(topLevelType);
168	if (capture) {
169		addEventCaptureListener(element, rawEventName, listener);
170	} else {
171		addEventBubbleListener(element, rawEventName, listener);
172	}
173}
174
175export function trapBubbledEvent(topLevelType, element) {
176	trapEventForPluginEventSystem(element, topLevelType, false);
177}
178
Full Screen

ReactEventListener.js

Source: ReactEventListener.js Github

copy
1/**
2 * Copyright 2013-present, Facebook, Inc.
3 * All rights reserved.
4 *
5 * This source code is licensed under the BSD-style license found in the
6 * LICENSE file in the root directory of this source tree. An additional grant
7 * of patent rights can be found in the PATENTS file in the same directory.
8 *
9 * @providesModule ReactEventListener
10 */
11
12'use strict';
13
14var EventListener = require('EventListener');
15var ExecutionEnvironment = require('ExecutionEnvironment');
16var PooledClass = require('PooledClass');
17var ReactDOMComponentTree = require('ReactDOMComponentTree');
18var ReactGenericBatching = require('ReactGenericBatching');
19var ReactTypeOfWork = require('ReactTypeOfWork');
20
21var getEventTarget = require('getEventTarget');
22var getUnboundedScrollPosition = require('getUnboundedScrollPosition');
23
24var { HostContainer } = ReactTypeOfWork;
25
26/**
27 * Find the deepest React component completely containing the root of the
28 * passed-in instance (for use when entire React trees are nested within each
29 * other). If React trees are not nested, returns null.
30 */
31function findRootContainerNode(inst) {
32  // TODO: It may be a good idea to cache this to prevent unnecessary DOM
33  // traversal, but caching is difficult to do correctly without using a
34  // mutation observer to listen for all DOM changes.
35  if (typeof inst.tag === 'number') {
36    while (inst.return) {
37      inst = inst.return;
38    }
39    if (inst.tag !== HostContainer) {
40      // This can happen if we're in a detached tree.
41      return null;
42    }
43    return inst.stateNode.containerInfo;
44  } else {
45    while (inst._hostParent) {
46      inst = inst._hostParent;
47    }
48    var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
49    return rootNode.parentNode;
50  }
51}
52
53// Used to store ancestor hierarchy in top level callback
54function TopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
55  this.topLevelType = topLevelType;
56  this.nativeEvent = nativeEvent;
57  this.targetInst = targetInst;
58  this.ancestors = [];
59}
60Object.assign(TopLevelCallbackBookKeeping.prototype, {
61  destructor: function() {
62    this.topLevelType = null;
63    this.nativeEvent = null;
64    this.targetInst = null;
65    this.ancestors.length = 0;
66  },
67});
68PooledClass.addPoolingTo(
69  TopLevelCallbackBookKeeping,
70  PooledClass.threeArgumentPooler
71);
72
73function handleTopLevelImpl(bookKeeping) {
74  var targetInst = bookKeeping.targetInst;
75
76  // Loop through the hierarchy, in case there's any nested components.
77  // It's important that we build the array of ancestors before calling any
78  // event handlers, because event handlers can modify the DOM, leading to
79  // inconsistencies with ReactMount's node cache. See #1105.
80  var ancestor = targetInst;
81  do {
82    if (!ancestor) {
83      bookKeeping.ancestors.push(ancestor);
84      break;
85    }
86    var root = findRootContainerNode(ancestor);
87    if (!root) {
88      break;
89    }
90    bookKeeping.ancestors.push(ancestor);
91    ancestor = ReactDOMComponentTree.getClosestInstanceFromNode(
92      root
93    );
94  } while (ancestor);
95
96  for (var i = 0; i < bookKeeping.ancestors.length; i++) {
97    targetInst = bookKeeping.ancestors[i];
98    ReactEventListener._handleTopLevel(
99      bookKeeping.topLevelType,
100      targetInst,
101      bookKeeping.nativeEvent,
102      getEventTarget(bookKeeping.nativeEvent)
103    );
104  }
105}
106
107function scrollValueMonitor(cb) {
108  var scrollPosition = getUnboundedScrollPosition(window);
109  cb(scrollPosition);
110}
111
112var ReactEventListener = {
113  _enabled: true,
114  _handleTopLevel: null,
115
116  WINDOW_HANDLE: ExecutionEnvironment.canUseDOM ? window : null,
117
118  setHandleTopLevel: function(handleTopLevel) {
119    ReactEventListener._handleTopLevel = handleTopLevel;
120  },
121
122  setEnabled: function(enabled) {
123    ReactEventListener._enabled = !!enabled;
124  },
125
126  isEnabled: function() {
127    return ReactEventListener._enabled;
128  },
129
130
131  /**
132   * Traps top-level events by using event bubbling.
133   *
134   * @param {string} topLevelType Record from `EventConstants`.
135   * @param {string} handlerBaseName Event name (e.g. "click").
136   * @param {object} element Element on which to attach listener.
137   * @return {?object} An object with a remove function which will forcefully
138   *                  remove the listener.
139   * @internal
140   */
141  trapBubbledEvent: function(topLevelType, handlerBaseName, element) {
142    if (!element) {
143      return null;
144    }
145    return EventListener.listen(
146      element,
147      handlerBaseName,
148      ReactEventListener.dispatchEvent.bind(null, topLevelType)
149    );
150  },
151
152  /**
153   * Traps a top-level event by using event capturing.
154   *
155   * @param {string} topLevelType Record from `EventConstants`.
156   * @param {string} handlerBaseName Event name (e.g. "click").
157   * @param {object} element Element on which to attach listener.
158   * @return {?object} An object with a remove function which will forcefully
159   *                  remove the listener.
160   * @internal
161   */
162  trapCapturedEvent: function(topLevelType, handlerBaseName, element) {
163    if (!element) {
164      return null;
165    }
166    return EventListener.capture(
167      element,
168      handlerBaseName,
169      ReactEventListener.dispatchEvent.bind(null, topLevelType)
170    );
171  },
172
173  monitorScrollValue: function(refresh) {
174    var callback = scrollValueMonitor.bind(null, refresh);
175    EventListener.listen(window, 'scroll', callback);
176  },
177
178  dispatchEvent: function(topLevelType, nativeEvent) {
179    if (!ReactEventListener._enabled) {
180      return;
181    }
182
183    var nativeEventTarget = getEventTarget(nativeEvent);
184    var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(
185      nativeEventTarget
186    );
187
188    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
189      topLevelType,
190      nativeEvent,
191      targetInst
192    );
193
194    try {
195      // Event queue being processed in the same cycle allows
196      // `preventDefault`.
197      ReactGenericBatching.batchedUpdates(handleTopLevelImpl, bookKeeping);
198    } finally {
199      TopLevelCallbackBookKeeping.release(bookKeeping);
200    }
201  },
202};
203
204module.exports = ReactEventListener;
205
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)