Add pointer event pointer move event order test
Summary: Changelog: [Internal] - Add pointer event pointer move event order test This diff adds a port of the [mouse event mouse move event order test](https://github.com/web-platform-tests/wpt/blob/master/uievents/order-of-events/mouse-events/mouseevents-mousemove.html) but instead used here for testing our pointer event implementation. Reviewed By: lunaleaps Differential Revision: D40041387 fbshipit-source-id: 491659405865e1a0d95cfd1b3227a48a6136a98b
This commit is contained in:
Родитель
bbb6b9631e
Коммит
36c971695c
|
@ -136,6 +136,10 @@ class RNTesterPlatformTestEventRecorder {
|
|||
}, [callback, targetNames]);
|
||||
}
|
||||
|
||||
getRecords(): Array<EventRecord> {
|
||||
return this.allRecords;
|
||||
}
|
||||
|
||||
checkRecords(
|
||||
expected: Array<{
|
||||
type: string,
|
||||
|
|
|
@ -0,0 +1,147 @@
|
|||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
|
||||
import type {PointerEvent} from 'react-native/Libraries/Types/CoreEventTypes';
|
||||
|
||||
import * as React from 'react';
|
||||
import {useCallback, useState} from 'react';
|
||||
import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
end: {
|
||||
backgroundColor: 'red',
|
||||
position: 'absolute',
|
||||
right: '15%',
|
||||
bottom: '15%',
|
||||
width: '50%',
|
||||
height: '50%',
|
||||
borderWidth: 1,
|
||||
borderColor: 'grey',
|
||||
},
|
||||
green: {
|
||||
backgroundColor: 'green',
|
||||
},
|
||||
start: {
|
||||
backgroundColor: 'red',
|
||||
position: 'absolute',
|
||||
left: '15%',
|
||||
top: '15%',
|
||||
width: '50%',
|
||||
height: '50%',
|
||||
borderWidth: 1,
|
||||
borderColor: 'grey',
|
||||
},
|
||||
testarea: {
|
||||
width: '80%',
|
||||
height: 250,
|
||||
borderWidth: 1,
|
||||
borderColor: 'grey',
|
||||
},
|
||||
});
|
||||
|
||||
// adapted from https://github.com/web-platform-tests/wpt/blob/master/uievents/order-of-events/mouse-events/mouseevents-mousemove.htm
|
||||
function PointerEventPointerMoveEventOrderTestCase(
|
||||
props: PlatformTestComponentBaseProps,
|
||||
) {
|
||||
const {harness} = props;
|
||||
const pointer_test = harness.useAsyncTest('Pointermove events');
|
||||
|
||||
const [eventRecorder] = useState(
|
||||
() =>
|
||||
new RNTesterPlatformTestEventRecorder({
|
||||
mergeEventTypes: ['pointerMove'],
|
||||
relevantEvents: ['pointerMove'],
|
||||
}),
|
||||
);
|
||||
|
||||
const [startMoved, setStartMoved] = useState(false);
|
||||
const [endMoved, setEndMoved] = useState(false);
|
||||
|
||||
const eventHandler = useCallback(
|
||||
(event: PointerEvent, eventType: string, eventTarget: string) => {
|
||||
event.stopPropagation();
|
||||
if (
|
||||
!startMoved &&
|
||||
eventType === 'pointerMove' &&
|
||||
eventTarget === 'start'
|
||||
) {
|
||||
setStartMoved(true);
|
||||
}
|
||||
if (!endMoved && eventType === 'pointerMove' && eventTarget === 'end') {
|
||||
setEndMoved(true);
|
||||
const results = eventRecorder.getRecords();
|
||||
pointer_test.step(({assert_equals}) => {
|
||||
assert_equals(results.length, 2, 'Two pointermove events');
|
||||
if (results.length === 2) {
|
||||
assert_equals(
|
||||
results[0].type,
|
||||
'pointerMove',
|
||||
'First event is a pointermove event',
|
||||
);
|
||||
assert_equals(
|
||||
results[1].type,
|
||||
'pointerMove',
|
||||
'Second event is a pointermove event',
|
||||
);
|
||||
assert_equals(
|
||||
results[0].target,
|
||||
'start',
|
||||
'First event targeted #start',
|
||||
);
|
||||
assert_equals(
|
||||
results[1].target,
|
||||
'end',
|
||||
'Second event targeted #end',
|
||||
);
|
||||
}
|
||||
});
|
||||
pointer_test.done();
|
||||
}
|
||||
},
|
||||
[endMoved, eventRecorder, pointer_test, startMoved],
|
||||
);
|
||||
|
||||
const eventProps = eventRecorder.useRecorderTestEventHandlers(
|
||||
['start', 'end'],
|
||||
eventHandler,
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.testarea}>
|
||||
<View
|
||||
{...eventProps.start}
|
||||
style={[styles.start, startMoved && styles.green]}
|
||||
/>
|
||||
<View
|
||||
{...eventProps.end}
|
||||
style={[styles.end, endMoved && styles.green]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
type Props = $ReadOnly<{}>;
|
||||
export default function PointerEventPointerMoveEventOrder(
|
||||
props: Props,
|
||||
): React.MixedElement {
|
||||
return (
|
||||
<RNTesterPlatformTest
|
||||
component={PointerEventPointerMoveEventOrderTestCase}
|
||||
instructions={[
|
||||
'Move the pointer to the upper-left red box and then move it directly toward and into the lower-right red box.',
|
||||
]}
|
||||
description="Verifies that pointermove events track the pointer position and transition from top-most visible element to top-most visible element, changing targets along the way."
|
||||
title="PointerEvent - pointermove event order"
|
||||
/>
|
||||
);
|
||||
}
|
|
@ -19,6 +19,7 @@ import PointerEventPrimaryTouchPointer from './W3CPointerEventPlatformTests/Poin
|
|||
import PointerEventAttributesNoHoverPointers from './W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers';
|
||||
import PointerEventPointerMoveOnChordedMouseButton from './W3CPointerEventPlatformTests/PointerEventPointerMoveOnChordedMouseButton';
|
||||
import PointerEventPointerMoveAcross from './W3CPointerEventPlatformTests/PointerEventPointerMoveAcross';
|
||||
import PointerEventPointerMoveEventOrder from './W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder';
|
||||
import EventfulView from './W3CPointerEventsEventfulView';
|
||||
|
||||
function AbsoluteChildExample({log}: {log: string => void}) {
|
||||
|
@ -211,6 +212,14 @@ export default {
|
|||
return <PointerEventPointerMoveAcross />;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'pointerevent_pointermove_event_order',
|
||||
description: '',
|
||||
title: 'PointerEvent - pointermove event order',
|
||||
render(): React.Node {
|
||||
return <PointerEventPointerMoveEventOrder />;
|
||||
},
|
||||
},
|
||||
CompatibilityAnimatedPointerMove,
|
||||
CompatibilityNativeGestureHandling,
|
||||
],
|
||||
|
|
Загрузка…
Ссылка в новой задаче