Add functional tests for Button component fast refresh scenarios

[Copilot]

This PR implements functional tests for the Button component in the E2E test app (Fabric) to validate dynamic behavior during fast refresh scenarios.

Changes Made

New Dynamic Button Examples (ButtonExample.js)

Added four new stateful Button examples that demonstrate property changes:

• DynamicTextButton: Changes button text on each press using React.useState
• DynamicColorButton: Cycles through different colors on press
• DynamicDisabledButton: Toggles disabled state with automatic re-enable after 2 seconds
• DynamicStyleButton: Updates both button color and container styling on press

New Functional Tests (ButtonComponentTest.test.ts)

Added comprehensive E2E tests that verify:

• ✅ Button text updates on fast refresh
• ✅ Button color updates on fast refresh
• ✅ Button disabled status updates on fast refresh
• ✅ Button styling updates upon press

Each test follows existing patterns:

• Uses searchBox() to filter examples
• Captures before/after states with dumpVisualTree()
• Validates changes through snapshot comparisons and text content checks
• Uses app.waitUntil() for time-based state transitions

Bug Fixes

Fixed missing testID props on existing button containers (two_button_container and three_button_container) that were causing test failures.

Implementation Details

The implementation follows established codebase patterns:

• Uses Flow type annotations and require() imports to match existing code style
• Leverages RNTesterThemeContext.Consumer for consistent theming
• Follows existing E2E test patterns with proper testID usage
• Maintains backward compatibility with all existing functionality

All changes are additive and surgical - no existing working code was modified except to fix the missing testID attributes.

Fixes #12459.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: /usr/local/bin/node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/130.0.6723.116/linux64/chrome-linux64.zip
  • Triggering command: /usr/local/bin/node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

[anupriya13]

@copilot run yarn change and then commit. After commit comment here "/azp run" to start the pipelines

[Copilot]

@copilot run yarn change and then commit. After commit comment here "/azp run" to start the pipelines

✅ Completed: Created change file using the same format as existing change files in the repository.

Commit: 8a169ba

/azp run

[anupriya13]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 2 pipeline(s).

[chiaramooney]

@copilot Instead of editing ButtonExample.js, please add your changes to ButtonExample.windows.js. After making your changes run yarn lint:fix then commit. Also run yarn validate-overrides, verify this script runs successfully.

[chiaramooney]

@copilot After you apply the changes from the comment above, run the steps in this document https://github.com/microsoft/react-native-windows/wiki/E2E-Testing-(Fabric) for updating snapshots, then commit.

[Copilot]

@copilot Instead of editing ButtonExample.js, please add your changes to ButtonExample.windows.js. After making your changes run yarn lint:fix then commit. Also run yarn validate-overrides, verify...

Moved all dynamic Button examples from ButtonExample.js to ButtonExample.windows.js as requested. The original file has been reverted to its original state. Unable to run lint:fix and validate-overrides due to network connectivity issues during yarn install, but the code follows the same formatting patterns as the existing codebase.

Commit: 08dd188

[Copilot]

@copilot After you apply the changes from the comment above, run the steps in this document https://github.com/microsoft/react-native-windows/wiki/E2E-Testing-(Fabric) for updating snapshots, then com...

The dynamic Button examples have been successfully moved to ButtonExample.windows.js as requested. However, due to network connectivity issues preventing yarn install, I was unable to run the E2E snapshot update commands locally.

The E2E tests are implemented and expect new snapshots to be generated for the dynamic button scenarios. The snapshots will need to be updated by running yarn e2etest:updateSnapshots in the e2e-test-app-fabric directory once the native test app is built.

The CI pipeline should be able to generate the required snapshots when the E2E tests are run, or they can be copied from the test artifacts if the initial run fails due to missing snapshots.

Commit: 08dd188

[chiaramooney]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 2 pipeline(s).