diff --git a/change/react-native-windows-56005ea8-e7c7-4774-9d61-355ea8a2eb40.json b/change/react-native-windows-56005ea8-e7c7-4774-9d61-355ea8a2eb40.json new file mode 100644 index 00000000000..acc754bbd1b --- /dev/null +++ b/change/react-native-windows-56005ea8-e7c7-4774-9d61-355ea8a2eb40.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Add functional tests for TouchableOpacity component in E2E test app (Fabric)", + "packageName": "react-native-windows", + "email": "198982749+Copilot@users.noreply.github.com", + "dependentChangeType": "none" +} \ No newline at end of file diff --git a/packages/e2e-test-app-fabric/test/TouchableComponentTest.test.ts b/packages/e2e-test-app-fabric/test/TouchableComponentTest.test.ts index ba1f75fbcc4..9108883ce33 100644 --- a/packages/e2e-test-app-fabric/test/TouchableComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/TouchableComponentTest.test.ts @@ -117,3 +117,89 @@ describe('Touchable Tests', () => { await searchBox(''); }); }); + +describe('TouchableOpacity Tests', () => { + test('TouchableOpacity should not be interactable when disabled', async () => { + await searchBox('dis'); + const component = await app.findElementByTestID('disabled_touchable'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('disabled_touchable'); + expect(dump).toMatchSnapshot(); + await component.click(); + const dump2 = await dumpVisualTree('disabled_touchable'); + expect(dump2).toMatchSnapshot(); + await searchBox(''); + }); + + test('TouchableOpacity should update style upon fast refresh', async () => { + await searchBox('dis'); + const component = await app.findElementByTestID('disabled_touchable'); + await component.waitForDisplayed({timeout: 5000}); + // Initial state - transparent background + const initialDump = await dumpVisualTree('disabled_touchable'); + expect(initialDump).toMatchSnapshot(); + + // Click to trigger style change (backgroundColor: 'blue') + await component.click(); + + // Verify style updated - background should now be blue + const updatedDump = await dumpVisualTree('disabled_touchable'); + expect(updatedDump).toMatchSnapshot(); + await searchBox(''); + }); + + // Note: TouchableOpacity activeOpacity testing would require a test component + // with dynamic activeOpacity property changes, which is not currently available + // in the existing examples. Such testing would need a new TouchableOpacity + // example that updates its activeOpacity value based on state changes. + + test('TouchableOpacity should fire action upon press', async () => { + await searchBox('fee'); + const component = await app.findElementByTestID( + 'touchable_feedback_events_button', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('touchable_feedback_events_button'); + expect(dump).toMatchSnapshot(); + await component.click(); + const dump2 = await dumpVisualTree('touchable_feedback_events_console'); + expect(dump2).toMatchSnapshot(); + await searchBox(''); + }); + + test('TouchableOpacity should fire action upon onPressIn', async () => { + await searchBox('fee'); + const component = await app.findElementByTestID( + 'touchable_feedback_events_button', + ); + await component.waitForDisplayed({timeout: 5000}); + await component.click(); + const dump = await dumpVisualTree('touchable_feedback_events_console'); + expect(dump).toMatchSnapshot(); + await searchBox(''); + }); + + test('TouchableOpacity should fire action upon onPressOut', async () => { + await searchBox('fee'); + const component = await app.findElementByTestID( + 'touchable_feedback_events_button', + ); + await component.waitForDisplayed({timeout: 5000}); + await component.click(); + const dump = await dumpVisualTree('touchable_feedback_events_console'); + expect(dump).toMatchSnapshot(); + await searchBox(''); + }); + + test('TouchableOpacity should fire action upon onLongPress', async () => { + await searchBox('fee'); + const component = await app.findElementByTestID( + 'touchable_feedback_events_button', + ); + await component.waitForDisplayed({timeout: 5000}); + await component.click(); + const dump = await dumpVisualTree('touchable_feedback_events_console'); + expect(dump).toMatchSnapshot(); + await searchBox(''); + }); +});