Add Functional Tests for TouchableOpacity Component in E2E Test App (Fabric)

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"
+}

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('');
+  });
+});