Add VisitAllPages Test to E2E Test App on Fabric

.ado/jobs/e2e-test.yml

@@ -184,7 +184,7 @@ jobs:
               parameters:
                 buildEnvironment: ${{ parameters.BuildEnvironment }}
                 certificateName: reactUWPTestAppEncodedKey
-                buildConfiguration: Debug
+                buildConfiguration: Release
                 buildPlatform: ${{ matrix.BuildPlatform }}
                 buildLogDirectory: $(BuildLogDirectory)
                 deployOption: '--no-deploy'
@@ -194,6 +194,13 @@ jobs:
                 echo ##vso[task.setvariable variable=StartedFabricTests]true
               displayName: Set StartedFabricTests
 
+            - task: CopyFiles@2
+              displayName: Copy Bundle
+              inputs:
+                sourceFolder: packages/e2e-test-app-fabric/windows/x64/Release/Bundle
+                targetFolder: packages/e2e-test-app-fabric/Bundle
+                contents: "**"
+
             - script: yarn e2etest
               displayName: yarn e2etest
               workingDirectory: packages/e2e-test-app-fabric

packages/e2e-test-app-fabric/jest.config.js

@@ -60,7 +60,7 @@ module.exports = {
   setupFilesAfterEnv: ['react-native-windows/jest/setup', './jest.setup.js'],
 
   testEnvironmentOptions: {
-    app: `windows\\x64\\Debug\\RNTesterApp-Fabric.exe`,
+    app: `windows\\x64\\Release\\RNTesterApp-Fabric.exe`,
     enableAutomationChannel: true,
   },
 

packages/e2e-test-app-fabric/test/RNTesterNavigation.ts

@@ -11,8 +11,9 @@ import {app} from '@react-native-windows/automation';
  * Visit an example on the RNTester Components tab
  */
 export async function goToComponentExample(example: string) {
-  //const componentsTabButton = await app.findElementByTestID('components-tab');
-  //await componentsTabButton.click();
+  const componentsTabButton = await app.findElementByTestID('components-tab');
+  await componentsTabButton.waitForDisplayed({timeout: 20000});
+  await componentsTabButton.click();
   await goToExample(example);
 }
 
@@ -21,23 +22,22 @@ export async function goToComponentExample(example: string) {
  */
 export async function goToApiExample(example: string) {
   const componentsTabButton = await app.findElementByTestID('apis-tab');
+  await componentsTabButton.waitForDisplayed({timeout: 20000});
   await componentsTabButton.click();
   await goToExample(example);
 }
 
 async function goToExample(example: string) {
   // Filter the list down to the one test, to improve the stability of selectors
   const searchBox = await app.findElementByTestID('explorer_search');
-  await searchBox.setValue(regexEscape(example));
-
+  await searchBox.addValue(['Backspace', 'Backspace', 'Backspace']);
+  // Only grab first three characters of string to reduce cases in WebDriverIO mistyping.
+  await searchBox.addValue(regexEscape(example.substring(0, 3)));
   const exampleButton = await app.findElementByTestID(example);
   await exampleButton.click();
 
-  // Make sure we've launched the example by waiting until the search box is
-  // no longer present, but make sure we haven't crashed by checking that nav
-  // buttons are still visible
-  await app.waitUntil(async () => !(await exampleButton.isDisplayed()));
   const componentsTab = await app.findElementByTestID('components-tab');
+  await componentsTab.waitForDisplayed({timeout: 5000});
   expect(await componentsTab.isDisplayed()).toBe(true);
 }
 

packages/e2e-test-app-fabric/test/visitAllPages.test.ts

@@ -4,8 +4,12 @@
  *
  * @format
  */
-//import {goToApiExample, goToComponentExample} from './RNTesterNavigation';
-//import {verifyNoErrorLogs} from './Helpers';
+import {goToComponentExample} from './RNTesterNavigation';
+import {verifyNoErrorLogs} from './Helpers';
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
 
 type RNTesterExampleModule = {
   title: string;
@@ -24,7 +28,7 @@ type RNTesterList = {
 
 const testerList: RNTesterList = require('@react-native-windows/tester/js/utils/RNTesterList');
 
-const apiExamples = testerList.APIs.map(e => e.module.title);
+//const apiExamples = testerList.APIs.map(e => e.module.title);
 const componentExamples = testerList.Components.map(e => e.module.title);
 
 describe('visitAllPages', () => {
@@ -33,20 +37,23 @@ describe('visitAllPages', () => {
   });
 
   for (const component of componentExamples) {
-    test(component, () => {
-      expect(true).toBe(true);
-    });
+    if (component === 'Flyout' || component === 'XAML') {
+      continue;
+    }
+
+    test(component, async () => await goToComponentExample(component));
   }
 
-  for (const api of apiExamples) {
-    if (api === 'Transforms')
-      // disable until either transformExample uses units, or that isn't an error
+  // Disable Temporarily Until Stable
+  /*for (const api of apiExamples) {
+    if (api === 'Transforms' || api === 'Keyboard Focus Example')
+      // Disable until tests are supported.
       continue;
 
-    test(api, () => {
-      expect(true).toBe(true);
+    test(api, async () => {
+      await goToApiExample(api);
     });
-  }
+  }*/
 });
 
 export {};

packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp

@@ -82,14 +82,21 @@ struct WindowData {
   static HINSTANCE s_instance;
   static constexpr uint16_t defaultDebuggerPort{9229};
 
-  std::wstring m_bundleFile = L"index";
   bool m_windowInited{false};
   winrt::Microsoft::ReactNative::CompositionHwndHost m_CompositionHwndHost{nullptr};
   winrt::Microsoft::ReactNative::ReactNativeHost m_host{nullptr};
   winrt::Microsoft::ReactNative::ReactInstanceSettings m_instanceSettings{nullptr};
 
+#if BUNDLE
+  std::wstring m_bundleFile = L"index.windows";
+  bool m_useWebDebugger{false};
+  bool m_fastRefreshEnabled{false};
+#else
+  std::wstring m_bundleFile = L"index";
   bool m_useWebDebugger{false};
   bool m_fastRefreshEnabled{true};
+#endif
+
   bool m_useDirectDebugger{false};
   bool m_breakOnNextLine{false};
   uint16_t m_debuggerPort{defaultDebuggerPort};