Skip to content

Commit 6e4a8f0

Browse files
chiaramooneychiaramooney
authored
Add Functional Touchable* Tests (#14575)
* Add Touchable Tests * Adjust Implementation * Update Snapshots
1 parent 6505cf6 commit 6e4a8f0

File tree

4 files changed

+292
-4
lines changed

4 files changed

+292
-4
lines changed

‎packages/@react-native-windows/tester/src/js/examples/Touchable/TouchableExample.windows.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ class TouchableFeedbackEvents extends React.Component<{...}, $FlowFixMeState> {
181181
</View>
182182
<View
183183
testID="touchable_feedback_events_console"
184+
accessible // Windows
184185
style={styles.eventLogBox}>
185186
{this.state.eventLog.map((e, ii) => (
186187
<RNTesterText key={ii}>{e}</RNTesterText>
@@ -356,10 +357,28 @@ function TouchableNativeMethods() {
356357
}
357358

358359
class TouchableDisabled extends React.Component<{...}> {
360+
constructor(props) {
361+
super(props);
362+
this.state = {
363+
disabledColor: 'transparent',
364+
};
365+
}
366+
359367
render(): React.Node {
360368
return (
361369
<View>
362-
<TouchableOpacity disabled={true} style={[styles.row, styles.block]}>
370+
<TouchableOpacity
371+
disabled={true}
372+
style={[
373+
styles.row,
374+
styles.block,
375+
{backgroundColor: this.state.disabledColor},
376+
]}
377+
testID="disabled_touchable" // Windows
378+
onPress={() => {
379+
this.setState({disabledColor: 'blue'});
380+
}} // Windows
381+
>
363382
<RNTesterText style={styles.disabledButton}>
364383
Disabled TouchableOpacity
365384
</RNTesterText>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,24 @@ afterEach(async () => {
2121
await verifyNoErrorLogs();
2222
});
2323

24+
const searchBox = async (input: string) => {
25+
const searchBox = await app.findElementByTestID('example_search');
26+
await app.waitUntil(
27+
async () => {
28+
await searchBox.setValue(input);
29+
if (input === '') {
30+
return (await searchBox.getText()) === 'Search...';
31+
}
32+
return (await searchBox.getText()) === input;
33+
},
34+
{
35+
interval: 1500,
36+
timeout: 5000,
37+
timeoutMsg: `Unable to enter correct search text into test searchbox.`,
38+
},
39+
);
40+
};
41+
2442
describe('Touchable Tests', () => {
2543
test('Touchables can contain a Text component', async () => {
2644
const component = await app.findElementByTestID(
@@ -47,12 +65,17 @@ describe('Touchable Tests', () => {
4765
expect(dump).toMatchSnapshot();
4866
});
4967
test('Touchables can register feedback events', async () => {
68+
await searchBox('fee');
5069
const component = await app.findElementByTestID(
5170
'touchable_feedback_events_button',
5271
);
5372
await component.waitForDisplayed({timeout: 5000});
5473
const dump = await dumpVisualTree('touchable_feedback_events_button');
5574
expect(dump).toMatchSnapshot();
75+
await component.click();
76+
const dump2 = await dumpVisualTree('touchable_feedback_events_console');
77+
expect(dump2).toMatchSnapshot();
78+
await searchBox('');
5679
});
5780
test('Text components can be tappable', async () => {
5881
const component = await app.findElementByTestID('tappable_text');
@@ -82,4 +105,15 @@ describe('Touchable Tests', () => {
82105
const dump = await dumpVisualTree('touchable_set');
83106
expect(dump).toMatchSnapshot();
84107
});
108+
test('Touchables can be disabled', async () => {
109+
await searchBox('dis');
110+
const component = await app.findElementByTestID('disabled_touchable');
111+
await component.waitForDisplayed({timeout: 5000});
112+
const dump = await dumpVisualTree('disabled_touchable');
113+
expect(dump).toMatchSnapshot();
114+
await component.click();
115+
const dump2 = await dumpVisualTree('disabled_touchable');
116+
expect(dump2).toMatchSnapshot();
117+
await searchBox('');
118+
});
85119
});

‎packages/e2e-test-app-fabric/test/__snapshots__/TouchableComponentTest.test.ts.snap

Lines changed: 235 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,124 @@ exports[`Touchable Tests Touchables can be defined in a set using accessibilityP
238238
}
239239
`;
240240

241+
exports[`Touchable Tests Touchables can be disabled 1`] = `
242+
{
243+
"Automation Tree": {
244+
"AutomationId": "disabled_touchable",
245+
"ControlType": 50026,
246+
"IsEnabled": false,
247+
"LocalizedControlType": "group",
248+
"__Children": [
249+
{
250+
"AutomationId": "",
251+
"ControlType": 50020,
252+
"LocalizedControlType": "text",
253+
"Name": "Disabled TouchableOpacity",
254+
"TextRangePattern.GetText": "Disabled TouchableOpacity",
255+
},
256+
],
257+
},
258+
"Component Tree": {
259+
"Type": "Microsoft.ReactNative.Composition.ViewComponentView",
260+
"_Props": {
261+
"TestId": "disabled_touchable",
262+
},
263+
"__Children": [
264+
{
265+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
266+
"_Props": {
267+
"Opacity": 0.5,
268+
},
269+
},
270+
],
271+
},
272+
"Visual Tree": {
273+
"Brush": {
274+
"Brush Type": "ColorBrush",
275+
"Color": "rgba(0, 0, 0, 0)",
276+
},
277+
"Comment": "disabled_touchable",
278+
"Offset": "0, 0, 0",
279+
"Size": "916, 38",
280+
"Visual Type": "SpriteVisual",
281+
"__Children": [
282+
{
283+
"Offset": "374, 10, 0",
284+
"Size": "168, 20",
285+
"Visual Type": "SpriteVisual",
286+
"__Children": [
287+
{
288+
"Offset": "0, 0, 0",
289+
"Opacity": 0.5,
290+
"Size": "168, 20",
291+
"Visual Type": "SpriteVisual",
292+
},
293+
],
294+
},
295+
],
296+
},
297+
}
298+
`;
299+
300+
exports[`Touchable Tests Touchables can be disabled 2`] = `
301+
{
302+
"Automation Tree": {
303+
"AutomationId": "disabled_touchable",
304+
"ControlType": 50026,
305+
"IsEnabled": false,
306+
"LocalizedControlType": "group",
307+
"__Children": [
308+
{
309+
"AutomationId": "",
310+
"ControlType": 50020,
311+
"LocalizedControlType": "text",
312+
"Name": "Disabled TouchableOpacity",
313+
"TextRangePattern.GetText": "Disabled TouchableOpacity",
314+
},
315+
],
316+
},
317+
"Component Tree": {
318+
"Type": "Microsoft.ReactNative.Composition.ViewComponentView",
319+
"_Props": {
320+
"TestId": "disabled_touchable",
321+
},
322+
"__Children": [
323+
{
324+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
325+
"_Props": {
326+
"Opacity": 0.5,
327+
},
328+
},
329+
],
330+
},
331+
"Visual Tree": {
332+
"Brush": {
333+
"Brush Type": "ColorBrush",
334+
"Color": "rgba(0, 0, 0, 0)",
335+
},
336+
"Comment": "disabled_touchable",
337+
"Offset": "0, 0, 0",
338+
"Size": "916, 38",
339+
"Visual Type": "SpriteVisual",
340+
"__Children": [
341+
{
342+
"Offset": "374, 10, 0",
343+
"Size": "168, 20",
344+
"Visual Type": "SpriteVisual",
345+
"__Children": [
346+
{
347+
"Offset": "0, 0, 0",
348+
"Opacity": 0.5,
349+
"Size": "168, 20",
350+
"Visual Type": "SpriteVisual",
351+
},
352+
],
353+
},
354+
],
355+
},
356+
}
357+
`;
358+
241359
exports[`Touchable Tests Touchables can contain a Text component 1`] = `
242360
{
243361
"Automation Tree": {
@@ -483,17 +601,131 @@ exports[`Touchable Tests Touchables can register feedback events 1`] = `
483601
"Visual Tree": {
484602
"Comment": "touchable_feedback_events_button",
485603
"Offset": "0, 0, 0",
486-
"Size": "56, 18",
604+
"Size": "56, 19",
605+
"Visual Type": "SpriteVisual",
606+
"__Children": [
607+
{
608+
"Offset": "0, 0, 0",
609+
"Size": "56, 19",
610+
"Visual Type": "SpriteVisual",
611+
"__Children": [
612+
{
613+
"Offset": "0, 0, 0",
614+
"Size": "56, 19",
615+
"Visual Type": "SpriteVisual",
616+
},
617+
],
618+
},
619+
],
620+
},
621+
}
622+
`;
623+
624+
exports[`Touchable Tests Touchables can register feedback events 2`] = `
625+
{
626+
"Automation Tree": {
627+
"AutomationId": "touchable_feedback_events_console",
628+
"ControlType": 50026,
629+
"LocalizedControlType": "group",
630+
"__Children": [
631+
{
632+
"AutomationId": "",
633+
"ControlType": 50020,
634+
"LocalizedControlType": "text",
635+
"Name": "press",
636+
"TextRangePattern.GetText": "press",
637+
},
638+
{
639+
"AutomationId": "",
640+
"ControlType": 50020,
641+
"LocalizedControlType": "text",
642+
"Name": "pressIn",
643+
"TextRangePattern.GetText": "pressIn",
644+
},
645+
],
646+
},
647+
"Component Tree": {
648+
"Type": "Microsoft.ReactNative.Composition.ViewComponentView",
649+
"_Props": {
650+
"TestId": "touchable_feedback_events_console",
651+
},
652+
"__Children": [
653+
{
654+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
655+
"_Props": {},
656+
},
657+
{
658+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
659+
"_Props": {},
660+
},
661+
],
662+
},
663+
"Visual Tree": {
664+
"Comment": "touchable_feedback_events_console",
665+
"Offset": "0, 0, 0",
666+
"Size": "896, 120",
487667
"Visual Type": "SpriteVisual",
488668
"__Children": [
489669
{
490670
"Offset": "0, 0, 0",
491-
"Size": "56, 20",
671+
"Size": "1, 1",
672+
"Visual Type": "SpriteVisual",
673+
},
674+
{
675+
"Offset": "1, 0, 0",
676+
"Size": "-2, 1",
677+
"Visual Type": "SpriteVisual",
678+
},
679+
{
680+
"Offset": "-1, 0, 0",
681+
"Size": "1, 1",
682+
"Visual Type": "SpriteVisual",
683+
},
684+
{
685+
"Offset": "-1, 1, 0",
686+
"Size": "1, -2",
687+
"Visual Type": "SpriteVisual",
688+
},
689+
{
690+
"Offset": "-1, -1, 0",
691+
"Size": "1, 1",
692+
"Visual Type": "SpriteVisual",
693+
},
694+
{
695+
"Offset": "1, -1, 0",
696+
"Size": "-2, 1",
697+
"Visual Type": "SpriteVisual",
698+
},
699+
{
700+
"Offset": "0, -1, 0",
701+
"Size": "1, 1",
702+
"Visual Type": "SpriteVisual",
703+
},
704+
{
705+
"Offset": "0, 1, 0",
706+
"Size": "1, -2",
707+
"Visual Type": "SpriteVisual",
708+
},
709+
{
710+
"Offset": "11, 11, 0",
711+
"Size": "874, 20",
712+
"Visual Type": "SpriteVisual",
713+
"__Children": [
714+
{
715+
"Offset": "0, 0, 0",
716+
"Size": "874, 20",
717+
"Visual Type": "SpriteVisual",
718+
},
719+
],
720+
},
721+
{
722+
"Offset": "11, 29, 0",
723+
"Size": "874, 20",
492724
"Visual Type": "SpriteVisual",
493725
"__Children": [
494726
{
495727
"Offset": "0, 0, 0",
496-
"Size": "56, 20",
728+
"Size": "874, 20",
497729
"Visual Type": "SpriteVisual",
498730
},
499731
],

‎packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82781,6 +82781,7 @@ exports[`snapshotAllPages Touchable* and onPress 8`] = `
8278182781
</View>
8278282782
</View>
8278382783
<View
82784+
accessible={true}
8278482785
style={
8278582786
{
8278682787
"borderColor": "#f0f0f0",
@@ -83247,12 +83248,14 @@ exports[`snapshotAllPages Touchable* and onPress 14`] = `
8324783248
onStartShouldSetResponder={[Function]}
8324883249
style={
8324983250
{
83251+
"backgroundColor": "transparent",
8325083252
"flexDirection": "row",
8325183253
"justifyContent": "center",
8325283254
"opacity": 1,
8325383255
"padding": 10,
8325483256
}
8325583257
}
83258+
testID="disabled_touchable"
8325683259
>
8325783260
<Text
8325883261
style={

0 commit comments

Comments
 (0)