Add E2E Test App for Fabric

.ado/jobs/e2e-test.yml

@@ -143,3 +143,61 @@ jobs:
             - template: ../templates/upload-build-logs.yml
               parameters:
                 buildLogDirectory: '$(BuildLogDirectory)'
+  - ${{ each config in parameters.buildMatrix }}:
+    - ${{ if eq(config.BuildEnvironment, parameters.buildEnvironment) }}:
+      - ${{ each matrix in config.Matrix }}:
+        - job: E2ETestFabric${{ matrix.Name }}
+          displayName: E2E Test App Fabric ${{ matrix.Name }}
+
+          variables: [template: ../variables/windows.yml]
+          pool: ${{ parameters.AgentPool.Medium }}
+          timeoutInMinutes: 60 # how long to run the job before automatically cancelling
+          cancelTimeoutInMinutes: 5 # how much time to give 'run always even if cancelled tasks' before killing them
+
+          steps:
+            - template: ../templates/checkout-shallow.yml
+
+            - template: ../templates/prepare-js-env.yml
+
+            - template: ../templates/prepare-build-env.yml
+              parameters:
+                platform: ${{ matrix.BuildPlatform }}
+                configuration: Release
+                buildEnvironment: ${{ config.buildEnvironment }}
+
+            - powershell: |
+                Write-Host "##vso[task.setvariable variable=BuildLogDirectory]$(Build.BinariesDirectory)\${{ parameters.BuildPlatform }}\BuildLogs"
+              displayName: Set BuildLogDirectory
+
+            - template: ../templates/set-experimental-feature.yml
+              parameters:
+                package: packages/e2e-test-app-fabric
+                feature: UseHermes
+                value: ${{ matrix.UseHermes }}
+
+            - template: ../templates/msbuild-sln.yml
+              parameters:
+                solutionDir: packages/e2e-test-app-fabric/windows
+                solutionName: RNTesterApp-Fabric.sln
+                buildPlatform: ${{ matrix.BuildPlatform}}
+                buildConfiguration: Debug
+                warnAsError: false
+
+            - task: CopyFiles@2
+              displayName: Copy RNTesterApp artifacts
+              inputs:
+                sourceFolder: $(Build.SourcesDirectory)/packages/e2e-test-app-fabic/windows/RNTesterApp-Fabric
+                targetFolder: $(Build.StagingDirectory)/RNTesterApp-Fabric
+                contents: AppPackages\**
+              condition: failed()
+
+            - task: PublishPipelineArtifact@1
+              displayName: "Publish Artifact: RNTesterApp Fabric"
+              inputs:
+                artifactName: RNTesterApp-Fabric-${{ matrix.Name }}-$(System.JobAttempt)
+                targetPath: $(Build.StagingDirectory)/RNTesterApp-Fabric
+              condition: failed()
+
+            - template: ../templates/upload-build-logs.yml
+              parameters:
+                buildLogDirectory: '$(BuildLogDirectory)'

.unbroken_exclusions

@@ -8,6 +8,7 @@ URL not found https://docs.github.com/get-started/quickstart while parsing CONTR
 !packages/override-tools/node_modules
 !packages/@office-iss/react-native-win32/node_modules
 !packages/e2e-test-app/node_modules
+!packages/e2e-test-app-fabric/node_modules
 !packages/sample-apps/node_modules
 !packages/playground/node_modules
 !packages/@react-native-windows/codegen/node_modules

lgtm.yml

@@ -17,6 +17,7 @@ path_classifiers:
     - "**/packages/@react-native/tester"
     - "**/packages/@react-native-windows/tester"
     - "**/packages/e2e-test-app"
+    - "**/packages/e2e-test-app-fabric"
     - "**/packages/integration-test-app"
     - "**/packages/playground"
     - "**/packages/sample-apps"

packages/e2e-test-app-fabric/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['@rnw-scripts'],
+  parserOptions: { tsconfigRootDir: __dirname },
+  globals: {
+    expect: 'readonly',
+    fail: 'readonly',
+    AutomationClient: 'readonly',
+  },
+};

packages/e2e-test-app-fabric/.gitignore

@@ -0,0 +1,9 @@
+/.vscode
+/node_modules
+/windows/RNTesterApp-Fabric/Generated Files/
+/build
+/errorShots
+/reports
+/dist
+/windows/RNTesterApp-Fabric/Bundle/
+msbuild.binlog

packages/e2e-test-app-fabric/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/e2e-test-app-fabric/README.md

@@ -0,0 +1,5 @@
+# e2e-test-app-fabric project
+
+This package is not published, and is just used to verify a standalone app
+
+For information on how to run and debug this project, see [e2e-testing](https://github.com/microsoft/react-native-windows/blob/main/docs/e2e-testing.md).

packages/e2e-test-app-fabric/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "RNTesterApp-Fabric",
+  "displayName": "RNTesterApp-Fabric"
+}

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

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@rnw-scripts/babel-react-native-config",
+};

packages/e2e-test-app-fabric/custom-transformer.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ * @ts-check
+ */
+
+'use strict';
+
+const generate = require('@babel/generator').default;
+const transformer = require('metro-react-native-babel-transformer');
+module.exports = {
+  process(src /*: string */, file /*: string */) /*: {code: string, ...} */ {
+    const {ast} = transformer.transform({
+      filename: file,
+      options: {
+        inlineRequires: true,
+      },
+      src,
+    });
+
+    return generate(ast, {}, src);
+  },
+};

packages/e2e-test-app-fabric/index.js

@@ -0,0 +1 @@
+require('@react-native-windows/tester/js/RNTesterApp');

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

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ * @ts-check
+ */
+
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+const assetTransform = 'react-native-windows/jest/assetFileTransformer.js';
+const reactNativeTransform = './custom-transformer.js';
+const defaultTransform = [
+  'babel-jest',
+  require('@rnw-scripts/babel-node-config'),
+];
+
+module.exports = {
+  preset: '@rnx-kit/jest-preset',
+
+  // A list of paths to directories that Jest should use to search for files in
+  roots: ['<rootDir>/test/'],
+
+  // The test environment that will be used for testing
+  testEnvironment: '@react-native-windows/automation',
+
+  // The pattern or patterns Jest uses to detect test files
+  testRegex: '.*\\.test\\.ts$',
+
+  // Default timeout of a test in milliseconds
+  testTimeout: 70000,
+
+  // A map from regular expressions to paths to transformers
+  transform: {
+    '^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': assetTransform,
+    'node_modules\\\\@?react-native\\\\.*': reactNativeTransform,
+    '@react-native-windows\\\\tester\\\\.*': reactNativeTransform,
+    'vnext\\\\.*': reactNativeTransform,
+    '^.+\\.[jt]sx?$': defaultTransform,
+  },
+
+  snapshotResolver: 'react-native-windows/jest-snapshot-resolver.js',
+
+  // An array of regexp pattern strings that are matched against all source file paths before transformation.
+  // If the file path matches any of the patterns, it will not be transformed.
+  transformIgnorePatterns: ['jest-runner'],
+
+  // Specifies the maximum number of workers the worker-pool will spawn for running tests.
+  maxWorkers: 1,
+
+  // Indicates whether each individual test should be reported during the run.
+  verbose: true,
+
+  // A list of paths to modules that run some code to configure or set up the testing framework
+  // before each test file in the suite is executed
+  setupFilesAfterEnv: ['react-native-windows/jest/setup', './jest.setup.js'],
+
+  testEnvironmentOptions: {
+    app: 'RNTesterApp',
+    enableAutomationChannel: true,
+  },
+};

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ * @ts-check
+ */
+
+const config = require('./jest.config');
+
+config.testEnvironmentOptions.breakOnStart = true;
+module.exports = config;

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

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ * @ts-check
+ */
+
+const fs = require('fs');
+const path = require('path');
+const sanitizeFilename = require('sanitize-filename');
+const {LogBox} = require('react-native');
+
+const screenshotDir = './errorShots';
+fs.mkdirSync(screenshotDir, {recursive: true});
+
+LogBox.ignoreAllLogs(true);

packages/e2e-test-app-fabric/just-task.js

@@ -0,0 +1,2 @@
+
+require('@rnw-scripts/just-task');

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

@@ -0,0 +1,153 @@
+const {makeMetroConfig} = require('@rnw-scripts/metro-dev-config');
+
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+const fs = require('fs');
+const path = require('path');
+
+const rnwPath = fs.realpathSync(
+  path.dirname(require.resolve('react-native-windows/package.json')),
+);
+console.log(rnwPath);
+
+const rnwTesterPath = fs.realpathSync(
+  path.dirname(require.resolve('@react-native-windows/tester/package.json')),
+);
+console.log(rnwTesterPath);
+
+const devPackages = {
+  'react-native': path.normalize(rnwPath),
+  'react-native-windows': path.normalize(rnwPath),
+  '@react-native-windows/tester': path.normalize(rnwTesterPath),
+};
+
+function isRelativeImport(filePath) {
+  return /^[.][.]?(?:[/]|$)/.test(filePath);
+}
+
+// Example: devResolve('C:/Repos/react-native-windows/vnext/', './Libraries/Text/Text');
+// Returns a full path to the resolved location which would be in the src subdirectory if
+// the file exists or the directory root otherwise
+function devResolve(packageName, originDir, moduleName) {
+  const originDirSrc = originDir.replace(
+    devPackages[packageName],
+    path.join(devPackages[packageName], 'src'),
+  );
+
+  // redirect the resolution to src if an appropriate file exists there
+  const extensions = [
+    '',
+    '.windows.tsx',
+    '.windows.ts',
+    '.windows.jsx',
+    '.windows.js',
+    '.tsx',
+    '.ts',
+    '.jsx',
+    '.js',
+  ];
+
+  // For each potential extension we need to check for the file in either src and root
+  for (const extension of extensions) {
+    // Start with the src folder
+    let potentialSrcModuleName = path.resolve(originDirSrc, moduleName);
+    if (fs.existsSync(potentialSrcModuleName) &&
+        fs.statSync(potentialSrcModuleName).isDirectory()) {
+      potentialSrcModuleName = path.resolve(potentialSrcModuleName, 'index');
+    }
+    potentialSrcModuleName += extension;
+
+    if (fs.existsSync(potentialSrcModuleName)) {
+      return potentialSrcModuleName;
+    }
+
+    // Next check under root folder
+    let potentialModuleName = path.resolve(originDir, moduleName);
+    if (fs.existsSync(potentialModuleName) &&
+        fs.statSync(potentialModuleName).isDirectory()) {
+      potentialModuleName = path.resolve(potentialModuleName, 'index');
+    }
+    potentialModuleName += extension;
+
+    if (fs.existsSync(potentialModuleName)) {
+      return potentialModuleName;
+    }
+  }
+}
+
+/**
+ * Allows the usage of live reload in packages in our repo which merges
+ * Windows-specific over core. These normally work by copying from the "src"
+ * subdirectory to package root during build time, but this resolver will
+ * instead prefere the copy in "src" to avoid the need to build.
+ */
+function devResolveRequest(
+  context,
+  moduleName /* string */,
+  platform /* string */,
+) {
+  const modifiedModuleName =
+      tryResolveDevPackage(moduleName) ||
+      tryResolveDevAbsoluteImport(moduleName) ||
+      tryResolveDevRelativeImport(context.originModulePath, moduleName) ||
+      moduleName;
+      return context.resolveRequest(context, modifiedModuleName, platform);
+}
+
+function tryResolveDevPackage(moduleName) /*: string | null*/ {
+  if (devPackages[moduleName]) {
+    return devResolve(moduleName, devPackages[moduleName], './index');
+  }
+
+  return null;
+}
+
+function tryResolveDevAbsoluteImport(moduleName) /*: string | null*/ {
+  for (const [packageName, packagePath] of Object.entries(devPackages)) {
+    if (moduleName.startsWith(`${packageName}/`)) {
+      return devResolve(
+        packageName,
+        packagePath,
+        `./${moduleName.slice(`${packageName}/`.length)}`,
+      );
+    }
+  }
+
+  return null;
+}
+
+function tryResolveDevRelativeImport(
+  originModulePath,
+  moduleName,
+) /*: string | null*/ {
+  for (const [packageName, packagePath] of Object.entries(devPackages)) {
+    if (
+      isRelativeImport(moduleName) &&
+      originModulePath.startsWith(packagePath)
+    ) {
+      const packageSrcPath = path.join(packagePath, 'src');
+      const originPathWithoutSrc = originModulePath.replace(
+        packageSrcPath,
+        packagePath,
+      );
+
+      return devResolve(
+        packageName,
+        path.dirname(originPathWithoutSrc),
+        moduleName,
+      );
+    }
+  }
+
+  return null;
+}
+
+module.exports = makeMetroConfig({
+  resolver: {
+    resolveRequest: devResolveRequest,
+  },
+});