Skip to content

Commit 9c2fb74

Browse files
acoates-msvmoroz
acoates-ms
authored and
vmoroz
committed
Add tests
1 parent 98b7b2c commit 9c2fb74

3 files changed

Lines changed: 175 additions & 0 deletions

File tree

‎packages/@react-native-windows/tester/src/js/examples-win/HitTest/HitTestExample.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* Copyright (c) Microsoft Corporation.
3+
* Licensed under the MIT License.
4+
* @format
5+
*/
6+
7+
'use strict';
8+
9+
import React from 'react';
10+
11+
import {View, Text, Pressable} from 'react-native';
12+
import {useState} from 'react';
13+
14+
exports.displayName = 'HitTestExample';
15+
exports.title = 'Hit Testing';
16+
exports.category = 'Basic';
17+
exports.description = 'Test that overflow hidden affect hit testing';
18+
exports.examples = [
19+
{
20+
title: 'overflow visible affects hit testing\n',
21+
render: function (): React.Node {
22+
const [bgColor, setBgColor] = React.useState('red');
23+
24+
return (
25+
<View>
26+
<Text>
27+
Clicking the pressable should work even if it is outside the bounds
28+
of its parent.
29+
</Text>
30+
<View
31+
accessible={true}
32+
accessibilityValue={{text: bgColor}}
33+
style={{width: 150, height: 150}}
34+
testID="visible-overflow-element">
35+
<View
36+
style={{
37+
width: 50,
38+
height: 50,
39+
backgroundColor: 'yellow',
40+
overflow: 'visible',
41+
}}>
42+
<Pressable
43+
style={{
44+
width: 100,
45+
height: 100,
46+
backgroundColor: bgColor,
47+
}}
48+
onPress={() => {
49+
setBgColor(bgColor === 'red' ? 'green' : 'red');
50+
}}>
51+
<Text>Press me</Text>
52+
</Pressable>
53+
</View>
54+
</View>
55+
</View>
56+
);
57+
},
58+
},
59+
{
60+
title: 'overflow hidden affects hit testing\n',
61+
render: function (): React.Node {
62+
const [bgColor, setBgColor] = React.useState('red');
63+
64+
return (
65+
<View>
66+
<Text>
67+
Clicking within the visible view will trigger the pressable.
68+
Clicking outside the bounds, where the pressable extends but is
69+
clipped by its parent overflow:hidden, should not trigger the
70+
pressable.
71+
</Text>
72+
<View
73+
accessible={true}
74+
accessibilityValue={{text: bgColor}}
75+
style={{width: 150, height: 150}}
76+
testID="hidden-overflow-element">
77+
<View
78+
style={{
79+
width: 50,
80+
height: 50,
81+
backgroundColor: 'yellow',
82+
overflow: 'hidden',
83+
}}>
84+
<Pressable
85+
style={{
86+
width: 100,
87+
height: 100,
88+
backgroundColor: bgColor,
89+
}}
90+
onPress={() => {
91+
setBgColor(bgColor === 'red' ? 'green' : 'red');
92+
}}>
93+
<Text>Press me</Text>
94+
</Pressable>
95+
</View>
96+
</View>
97+
</View>
98+
);
99+
},
100+
},
101+
];

‎packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,11 @@ const Components: Array<RNTesterModuleInfo> = [
212212
key: 'LegacyTextHitTestTest',
213213
module: require('../examples-win/LegacyTests/TextHitTestPage'),
214214
},
215+
{
216+
key: 'HitTestExample',
217+
category: 'UI',
218+
module: require('../examples-win/HitTest/HitTestExample'),
219+
},
215220
{
216221
key: 'PerformanceComparisonExample',
217222
category: 'Basic',

‎packages/e2e-test-app-fabric/test/HitTest.test.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* Copyright (c) Microsoft Corporation.
3+
* Licensed under the MIT License.
4+
*
5+
* @format
6+
*/
7+
8+
import { app } from '@react-native-windows/automation';
9+
import { dumpVisualTree } from '@react-native-windows/automation-commands';
10+
import { goToComponentExample } from './RNTesterNavigation';
11+
import { verifyNoErrorLogs } from './Helpers';
12+
13+
beforeAll(async () => {
14+
// If window is partially offscreen, tests will fail to click on certain elements
15+
await app.setWindowPosition(0, 0);
16+
await app.setWindowSize(1000, 1250);
17+
await goToComponentExample('Hit Testing');
18+
});
19+
20+
afterEach(async () => {
21+
await verifyNoErrorLogs();
22+
});
23+
24+
async function verifyElementAccessibiltyValue(element: string, value: string) {
25+
const dump = await dumpVisualTree(element);
26+
expect(dump!["Automation Tree"]["ValuePattern.Value"]).toBe(value);
27+
}
28+
29+
describe('Hit Testing', () => {
30+
31+
test('Hit testing child outside the bounds of parents', async () => {
32+
const target = await app.findElementByTestID('visible-overflow-element');
33+
34+
// View starts in red state
35+
await verifyElementAccessibiltyValue('visible-overflow-element', 'red');
36+
37+
// The webdriverio package computes the offsets from the center point of the target.
38+
// This is within the bounds of the child and the parent, so should hitTest even with overflow:visible
39+
await target.click({ x: -50, y: -50, });
40+
41+
await verifyElementAccessibiltyValue('visible-overflow-element', 'green');
42+
43+
// The webdriverio package computes the offsets from the center point of the target.
44+
// This is within the bounds of the child, but outside the parents bounds
45+
await target.click({ x: 0, y: 0, });
46+
47+
// View should still be red, since the click should hit the pressable
48+
await verifyElementAccessibiltyValue('visible-overflow-element', 'red');
49+
});
50+
51+
test('Overflow hidden prevents hittesting child', async () => {
52+
const target = await app.findElementByTestID('hidden-overflow-element');
53+
54+
// View starts in red state
55+
await verifyElementAccessibiltyValue('hidden-overflow-element', 'red');
56+
57+
// This is within the bounds of the child and the parent, so should hitTest even with overflow:hidden
58+
await target.click({ x: -50, y: -50, });
59+
60+
await verifyElementAccessibiltyValue('hidden-overflow-element', 'green');
61+
62+
// This is within the bounds of the child, but shouldn't hit test, since the parent is overflow:hidden
63+
await target.click({ x: 0, y: 0, });
64+
65+
// View should still be green, since the click shouldn't hit the pressable
66+
await verifyElementAccessibiltyValue('hidden-overflow-element', 'green');
67+
});
68+
69+
});

0 commit comments

Comments
 (0)