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

[Copilot]

This PR adds comprehensive E2E tests for the Flyout component in the e2e-test-app-fabric package to validate various functionality scenarios and component properties.

Changes Made

• Added FlyoutComponentTest.test.ts with comprehensive test coverage for Flyout component functionality
• Follows existing test patterns using snapshot testing with dumpVisualTree for verification
• Uses XPath selectors to find UI elements by name since the Flyout example lacks explicit testIDs

Test Coverage

The new test suite covers the following Flyout functionality:

1. Basic Display - Verifies Flyout container renders correctly in default state
2. Target-based Flyout - Tests opening flyout anchored to a TextInput element
3. Targetless Flyout - Tests opening flyout without an anchor element
4. Offset Flyout - Tests flyout with custom horizontal/vertical positioning
5. Placement Options - Tests different flyout positioning (top, bottom, left, right, etc.)
6. Nested Flyouts - Tests opening a second flyout from within the first
7. Popup Integration - Tests opening a popup component from within a flyout

Implementation Notes

• Tests use XPath selectors with @Name attribute to locate buttons since they don't have explicit testIDs
• Includes documentation about current limitations and assumptions
• Notes that Flyout is currently excluded from visitAllPages.test.ts, which may indicate compatibility considerations
• Ready for execution once the full E2E testing infrastructure is available

Code Quality

• ✅ Passes all linting and formatting checks
• ✅ Follows TypeScript and ESLint standards
• ✅ Uses consistent patterns with existing E2E tests
• ✅ Includes comprehensive error handling and timeouts

test('A Flyout can be opened with a target', async () => {
  // Click the "Open Flyout" button to show the flyout
  const openButton = await app.findElementByXPath('//Button[@Name="Open Flyout"]');
  await openButton.waitForDisplayed({timeout: 5000});
  await openButton.click();

  // Wait for flyout to appear and capture its state
  const flyout = await app.findElementByTestID('flyout-accessibility');
  await flyout.waitForDisplayed({timeout: 5000});
  const dump = await dumpVisualTree('flyout-accessibility');
  expect(dump).toMatchSnapshot();

  // Close the flyout
  const closeButton = await app.findElementByXPath('//Button[@Name="Close"]');
  await closeButton.click();
});

Fixes #12460.

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

[anupriya13]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 2 pipeline(s).

[Copilot]

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

✅ Ran yarn change - no change files needed since e2e-test-app-fabric is a private package that doesn't get published. Changes committed in d77cdb4.

You can now run "/azp run" to start the pipelines.

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]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 2 pipeline(s).

[chiaramooney]

@copilot The Flyout component does not exist in Fabric. Please close this PR.

[Copilot]

@copilot The Flyout component does not exist in Fabric. Please close this PR.

You're correct - the Flyout component is not supported in Fabric. I've removed the test file in commit 43beb61. The PR is ready to be closed.