[Win32] Create JS Bundle for E2E Spec Files and Publish as NPM Package (#2345)

* Adding package that includes all FURN automated testing dependencies

* Adding nuget publish for tester deps

* Temporarily post nuget package for testing

* Temporarily post nuget package for testing

* Removing param

* Making param false

* Reverting .ado changes and adding fields in package.json

* Testing nuget push

* Adding yarn.lock

* Revert "Adding yarn.lock"

This reverts commit 0948725dcf.

* Testing CI

* Testing CI

* Testing nuget publish

* removing publish temporarily

* Removing unwanted dep

* Updating deps

* Adding nuget publish job to ado

* Removing unwanted changes

* Removing unwanted changes

* Removing unwanted changes

* Integrating Webpack to create a JS bundle containing all win32 spec files

* Creating bundle in publish pipeline so it's included in the npm package

* Removing unwanted changes

* Reverting unwanted changes

* Reverting

* Reverting testing change

* Reverting newline

* Change files

* Reverting unnecessary .ado change

* Reverting whitespace

* Adding build script to /E2E

* Moving E2E testing files to its own package within /apps. This allows us to export as an NPM package easier (and allows us to consume the testing code outside of this repo)

* Updating pipeline refs to apps/E2E

* Adding support for metro within apps/E2E

* Fixing imports

* Change files

* Fixing Win32 wdio.conf.ts specs path

* Fix imports

* Adding missing dev dep

* Updating yarn.lock

* Re-creating yarn.lock

* Updating yarn conflicts

* Fixing links

* Adding missing dep

* Updating path to no hoisted packages

* Fixing package path

* Adding condition in BasePage

.ado/templates/e2e-testing-ios.yml

@@ -13,7 +13,7 @@ steps:
 
   - script: |
       yarn e2etest:ios
-    workingDirectory: apps/fluent-tester
+    workingDirectory: apps/E2E
     displayName: 'run E2E iOS tests'
     condition: succeeded()
 
@@ -22,4 +22,4 @@ steps:
       applicationType: ios
       platform: 'ios'
       buildArtifacts: variables['task.Build.status']
-      directory: $(Build.SourcesDirectory)/apps/fluent-tester
+      directory: $(Build.SourcesDirectory)/apps/E2E

.ado/templates/e2e-testing-macos.yml

@@ -13,7 +13,7 @@ steps:
 
   - script: |
       yarn e2etest:macos
-    workingDirectory: apps/fluent-tester
+    workingDirectory: apps/E2E
     displayName: 'run E2E macos tests'
     condition: succeeded()
 
@@ -22,4 +22,4 @@ steps:
       applicationType: macos
       platform: 'macos'
       buildArtifacts: variables['task.Build.status']
-      directory: $(Build.SourcesDirectory)/apps/fluent-tester
+      directory: $(Build.SourcesDirectory)/apps/E2E

.ado/templates/e2e-testing-uwp.yml

@@ -59,7 +59,7 @@ steps:
 
   - script: |
       yarn e2etest:windows
-    workingDirectory: apps\fluent-tester
+    workingDirectory: apps\E2E
     displayName: 'run E2E UWP tests'
     condition: succeeded()
 
@@ -70,4 +70,4 @@ steps:
       applicationType: UWP
       platform: windows
       buildArtifacts: variables['task.Build.status']
-      directory: $(Build.SourcesDirectory)/apps/fluent-tester
+      directory: $(Build.SourcesDirectory)/apps/E2E

apps/E2E/README.md

@@ -12,7 +12,7 @@
 
 ### UWP Additional Prerequisites
 
-- [UWP Prerequisites](../../../fluent-tester/docs/windows.md)
+- [UWP Prerequisites](../fluent-tester/docs/windows.md)
 
 ## MacOS Prerequisites
 
@@ -49,9 +49,9 @@ and drag & drop the **XCode Helper** app to **Security & Privacy -> Privacy -> A
 1. Follow step #1 from "Win32 Steps" section above.
 2. Start the server
    - C:\repo\fluentui-react-native> `cd apps\windows`
-   - C:\repo\fluentui-react-native\apps\windows> `yarn start`
+   - C:\repo\fluentui-react-native\apps\E2E> `yarn start`
 3. Open a new command prompt and run the E2E tests
-   - C:\repo\fluentui-react-native\apps\windows> `yarn e2etest`
+   - C:\repo\fluentui-react-native\apps\E2E> `yarn e2etest:windows`
 
 _Note: It could take up to a minute to load the test app with WebDriverIO, don't panic, the tests will run :)_
 
@@ -65,7 +65,7 @@ _Note: It could take up to a minute to load the test app with WebDriverIO, don't
    - C:\repo\fluentui-react-native> `cd apps\fluent-tester`
    - C:\repo\fluentui-react-native\apps\fluent-tester> `yarn start`
 4. Open a new command prompt and run the E2E tests
-   - C:\repo\fluentui-react-native\apps\fluent-tester> `yarn e2etest:macos`
+   - C:\repo\fluentui-react-native\apps\E2E> `yarn e2etest:macos`
 
 _Note: It could take up to a minute to load the test app with WebDriverIO, don't panic, the tests will run :)_
 
@@ -75,7 +75,7 @@ You just added a new component to FURN... Awesome! Now we need to make sure we h
 
 ## Create New E2E Testing Folder for the New Component
 
-All our E2E testing logic exists in _/apps/fluent-tester/src/E2E/_.
+All our E2E testing logic exists in _/apps/E2E/src/_.
 
 Testing is split-up on a **per-component** basis. Each component's testing story is made up of two parts - a **Page Object** and a **Spec Document**.
 
@@ -114,7 +114,7 @@ For each component/scenario you want to test, you will have a page object class
 Page Object is a design pattern which has become popular in test automation for enhancing test maintenance and reducing code duplication. A [page object](https://webdriver.io/docs/pageobjects.html) is an object-oriented class that serves as an interface to a page of you testing app. The tests then use the methods of this Page Object whenever they need to interact with the UI of that page.
 The benefit is that if the UI changes for the test page, the tests themselves don’t need to change, only the code within the page object needs to change.
 
-Page Objects should be put in apps/fluent-tester/src/E2E/_ *ComponentToBeTested* _/pages/.
+Page Objects should be put in apps/E2E/src/_ *ComponentToBeTested* _/pages/.
 
 In most cases, you can copy/paste ButtonPageObject.ts and simply change all instances of Button to your new component.
 
@@ -193,7 +193,7 @@ You can view the spec report right as E2E testing is finished. It shows the fail
 
 In the example below, the SVG test is the one failing the run, and at the bottom, you can see an error message.
 
-![E2E Error Debugging](../../../../assets/E2E/E2E_spec_reporter.png)
+![E2E Error Debugging](../../assets/E2E/E2E_spec_reporter.png)
 
 When running E2E locally, after failing an E2E run, you will get a screenshot of the error in /errorShots/ of the platform you tested.
 
@@ -211,9 +211,9 @@ This will bundle all the generated information and create a report for you to re
 
 When an E2E test run fails within our CI, crucial information is output to Azure-Pipelines to help you debug the failure. Follow these steps:
 
-1. On the PR page, navigate to the "Checks" tab, ensure you've selected the "PR" tab on the left, and press "View more details on Azure Pipelines" at the bottom. ![E2E_Debugging_Step_1](../../../../assets/E2E/E2E_Debugging_Step_1.png)
+1. On the PR page, navigate to the "Checks" tab, ensure you've selected the "PR" tab on the left, and press "View more details on Azure Pipelines" at the bottom. ![E2E_Debugging_Step_1](../../assets/E2E/E2E_Debugging_Step_1.png)
 
-2. Click on the "# published" section. ![E2E_Debugging_Step_2](../../../../assets/E2E/E2E_Debugging_Step_2.png)
+2. Click on the "# published" section. ![E2E_Debugging_Step_2](../../assets/E2E/E2E_Debugging_Step_2.png)
 
 3. Here, you have crucial information to help you debug the problem.
 
@@ -228,4 +228,4 @@ When an E2E test run fails within our CI, crucial information is output to Azure
      2. Navigate to it's location within your cmd, and type:
         - C:\pathToFolder\allure-report\E2E_win32_Dump> `allure open`
 
-![E2E_Debugging_Step_3](../../../../assets/E2E/E2E_Debugging_Step_3.png)
+![E2E_Debugging_Step_3](../../assets/E2E/E2E_Debugging_Step_3.png)

apps/E2E/just.config.js

@@ -0,0 +1,3 @@
+const { preset } = require('@fluentui-react-native/scripts');
+
+preset();

apps/E2E/metro.config.js

@@ -0,0 +1,22 @@
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+const { defaultWatchFolders } = require('@rnx-kit/metro-config');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    watchFolders: defaultWatchFolders(),
+    resolver: {
+      assetExts: [...assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png'],
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  };
+})();

apps/E2E/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@fluentui-react-native/e2e-testing",
+  "version": "1.0.0",
+  "description": "Package containing E2E testing specs",
+  "license": "MIT",
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "bundle": "react-native rnx-bundle --dev false",
+    "e2etest:ios": "wdio run wdio.conf.ios.js",
+    "e2etest:macos": "wdio run wdio.conf.macos.js",
+    "e2etest:windows": "rimraf errorShots/* reports/* && wdio run wdio.conf.windows.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "apps/E2E"
+  },
+  "devDependencies": {
+    "@rnx-kit/cli": "^0.14.8",
+    "@rnx-kit/metro-config": "^1.3.1",
+    "metro-config": "^0.67.0",
+    "metro-react-native-babel-preset": "^0.67.0",
+    "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@fluentui-react-native/scripts": "^0.1.1",
+    "ts-node": "^8.10.1",
+    "tsconfig-paths": "^3.9.0",
+    "typescript": "4.5.4",
+    "webdriverio": "7.23.0",
+    "@types/jasmine": "3.5.10",
+    "@types/react": "^17.0.2",
+    "@types/react-native": "^0.68.0",
+    "@wdio/appium-service": "7.23.0",
+    "@wdio/cli": "7.23.0",
+    "@wdio/jasmine-framework": "7.23.0",
+    "@wdio/local-runner": "7.23.0",
+    "@wdio/spec-reporter": "7.23.0",
+    "appium": "2.0.0-beta.41",
+    "appium-mac2-driver": "1.4.0",
+    "appium-windows-driver": "2.0.7",
+    "appium-xcuitest-driver": "4.11.1",
+    "@babel/core": "^7.8.0",
+    "@babel/runtime": "^7.8.0",
+    "@fluentui-react-native/focus-zone": "^0.11.7"
+  },
+  "rnx-kit": {
+    "reactNativeVersion": "0.68",
+    "kitType": "library",
+    "bundle": [
+      {
+        "id": "win32_specs",
+        "entryFile": "src/index.win32.ts",
+        "bundleOutput": "dist/win32_specs.bundle.js",
+        "sourcemapOutput": "dist/win32_specs.bundle.map",
+        "assetsDest": "dist",
+        "targets": [
+          "native"
+        ],
+        "detectCyclicDependencies": {
+          "throwOnError": true
+        },
+        "detectDuplicateDependencies": {
+          "throwOnError": false
+        },
+        "typescriptValidation": false
+      }
+    ],
+    "capabilities": [
+      "core",
+      "react",
+      "metro-config",
+      "babel-preset-react-native"
+    ]
+  }
+}

apps/E2E/src/ActivityIndicator/pages/ActivityIndicatorPageObject.ts

@@ -2,7 +2,7 @@ import {
   HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
   ACTIVITY_INDICATOR_TESTPAGE,
   ACTIVITY_INDICATOR_TEST_COMPONENT,
-} from '../../../TestComponents/ActivityIndicator/consts';
+} from '../../../../fluent-tester/src/TestComponents/ActivityIndicator/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class ActivityIndicatorPageObject extends BasePage {

apps/E2E/src/Avatar/pages/AvatarPageObject.ts

@@ -3,7 +3,7 @@ import {
   HOMEPAGE_AVATAR_BUTTON,
   AVATAR_TEST_COMPONENT,
   AVATAR_SECONDARY_TEST_COMPONENT,
-} from '../../../TestComponents/Avatar/consts';
+} from '../../../../fluent-tester/src/TestComponents/Avatar/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 export const enum AvatarComponentSelector {

apps/E2E/src/Avatar/specs/Avatar.spec.win.ts

@@ -10,7 +10,7 @@ import {
   ACCESSIBILITY_ROLE_ATTRIBUTE,
   ACCESSIBILITY_ROLE_IMAGE,
   ACCESSIBILITY_ROLE_LINK,
-} from '../../../TestComponents/Avatar/consts';
+} from '../../../../fluent-tester/src/TestComponents/Avatar/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Avatar Testing Initialization', function () {

apps/E2E/src/Badge/pages/BasicBadgePageObject.ts

@@ -3,7 +3,7 @@ import {
   HOMEPAGE_BADGE_BUTTON,
   BADGE_TEST_COMPONENT,
   BADGE_SECONDARY_TEST_COMPONENT,
-} from '../../../TestComponents/Badge/consts';
+} from '../../../../fluent-tester/src/TestComponents/Badge/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 export const enum BadgeComponentSelector {

apps/E2E/src/Button/pages/ButtonPageObject.ts

@@ -4,7 +4,7 @@ import {
   BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED,
   HOMEPAGE_BUTTON_BUTTON,
   BUTTON_ON_PRESS_DEPRECATED,
-} from '../../../TestComponents/Button/consts';
+} from '../../../../fluent-tester/src/TestComponents/Button/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.

apps/E2E/src/Button/specs/Button.spec.win.ts

@@ -2,7 +2,10 @@ import NavigateAppPage from '../../common/NavigateAppPage';
 import ButtonPageObject, { ButtonSelector } from '../pages/ButtonPageObject';
 import { ComponentSelector } from '../../common/BasePage';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE, Keys } from '../../common/consts';
-import { BUTTON_ACCESSIBILITY_LABEL_DEPRECATED, BUTTON_TEST_COMPONENT_LABEL_DEPRECATED } from '../../../TestComponents/Button/consts';
+import {
+  BUTTON_ACCESSIBILITY_LABEL_DEPRECATED,
+  BUTTON_TEST_COMPONENT_LABEL_DEPRECATED,
+} from '../../../../fluent-tester/src/TestComponents/Button/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Button Testing Initialization', function () {

apps/E2E/src/ButtonExperimental/pages/ButtonExperimentalPageObject.ts

@@ -4,7 +4,7 @@ import {
   BUTTON_NO_A11Y_LABEL_COMPONENT,
   HOMEPAGE_BUTTON_BUTTON,
   BUTTON_ON_PRESS,
-} from '../../../TestComponents/Button/consts';
+} from '../../../../fluent-tester/src/TestComponents/Button/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.

apps/E2E/src/ButtonExperimental/specs/ButtonExperimental.spec.win.ts

@@ -2,7 +2,7 @@ import NavigateAppPage from '../../common/NavigateAppPage';
 import ButtonExperimentalPageObject, { ButtonSelector } from '../pages/ButtonExperimentalPageObject';
 import { ComponentSelector } from '../../common/BasePage';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE, Keys } from '../../common/consts';
-import { BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL } from '../../../TestComponents/Button/consts';
+import { BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL } from '../../../../fluent-tester/src/TestComponents/Button/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Experimental Button Testing Initialization', function () {

apps/E2E/src/Callout/pages/CalloutPageObject.win.ts

@@ -3,7 +3,7 @@ import {
   CALLOUT_TEST_COMPONENT,
   HOMEPAGE_CALLOUT_BUTTON,
   BUTTON_TO_OPEN_CALLOUT,
-} from '../../../TestComponents/Callout/consts';
+} from '../../../../fluent-tester/src/TestComponents/Callout/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class CalloutPageObject extends BasePage {

apps/E2E/src/Callout/specs/Callout.spec.win.ts

@@ -1,6 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import CalloutPageObject from '../pages/CalloutPageObject.win';
-import { CALLOUT_ACCESSIBILITY_LABEL } from '../../../TestComponents/Callout/consts';
+import { CALLOUT_ACCESSIBILITY_LABEL } from '../../../../fluent-tester/src/TestComponents/Callout/consts';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, CALLOUT_A11Y_ROLE } from '../../common/consts';
 import { ComponentSelector } from '../../common/BasePage';
 

apps/E2E/src/Checkbox/pages/CheckboxPageObject.ts

@@ -4,7 +4,7 @@ import {
   CHECKBOX_NO_A11Y_LABEL_COMPONENT,
   HOMEPAGE_CHECKBOX_BUTTON,
   CHECKBOX_ON_PRESS,
-} from '../../../TestComponents/Checkbox/consts';
+} from '../../../../fluent-tester/src/TestComponents/Checkbox/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.

apps/E2E/src/Checkbox/specs/Checkbox.spec.win.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import CheckboxPageObject, { CheckboxSelector } from '../pages/CheckboxPageObject';
 import { ComponentSelector } from '../../common/BasePage';
-import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../../../TestComponents/Checkbox/consts';
+import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../../../../fluent-tester/src/TestComponents/Checkbox/consts';
 import { CHECKBOX_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys } from '../../common/consts';
 
 describe('Checkbox Testing Initialization', () => {

apps/E2E/src/Checkbox/specs/Checkbox.spec.windows.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import CheckboxPageObject from '../pages/CheckboxPageObject';
 import { ComponentSelector } from '../../common/BasePage';
-import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../../../TestComponents/Checkbox/consts';
+import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../../../../fluent-tester/src/TestComponents/Checkbox/consts';
 import { CHECKBOX_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 
 describe('Checkbox Testing Initialization', () => {

apps/E2E/src/CheckboxExperimental/pages/ExperimentalCheckboxPageObject.ts

@@ -4,7 +4,7 @@ import {
   EXPERIMENTAL_CHECKBOX_TEST_COMPONENT,
   EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
   EXPERIMENTAL_CHECKBOX_ON_PRESS,
-} from '../../../TestComponents/CheckboxExperimental/consts';
+} from '../../../../fluent-tester/src/TestComponents/CheckboxExperimental/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.

apps/E2E/src/CheckboxExperimental/specs/ExperimentalCheckbox.spec.win.ts

@@ -4,7 +4,7 @@ import { ComponentSelector } from '../../common/BasePage';
 import {
   EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
   EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
-} from '../../../TestComponents/CheckboxExperimental/consts';
+} from '../../../../fluent-tester/src/TestComponents/CheckboxExperimental/consts';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, CHECKBOX_A11Y_ROLE, Keys } from '../../common/consts';
 
 describe('Experimental Checkbox Testing Initialization', () => {

apps/E2E/src/ContextualMenu/pages/ContextualMenuPageObject.win.ts

@@ -3,7 +3,7 @@ import {
   CONTEXTUALMENU_TEST_COMPONENT,
   HOMEPAGE_CONTEXTUALMENU_BUTTON,
   CONTEXTUALMENUITEM_TEST_COMPONENT,
-} from '../../../TestComponents/ContextualMenu/consts';
+} from '../../../../fluent-tester/src/TestComponents/ContextualMenu/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.

apps/E2E/src/CornerRadiusTokens/pages/CornerRadiusTokensPageObject.ts

@@ -1,4 +1,7 @@
-import { HOMEPAGE_CORNERRADIUS_TESTPAGE, HOMEPAGE_CORNERRADIUS_BUTTON } from '../../../TestComponents/CornerRadius/consts';
+import {
+  HOMEPAGE_CORNERRADIUS_TESTPAGE,
+  HOMEPAGE_CORNERRADIUS_BUTTON,
+} from '../../../../fluent-tester/src/TestComponents/CornerRadius/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class CornerRadiusTokensPageObject extends BasePage {

apps/E2E/src/FocusTrapZone/pages/FocusTrapZonePageObject.win.ts

@@ -2,7 +2,7 @@ import {
   FOCUSTRAPZONE_TESTPAGE,
   FOCUSTRAPZONE_TEST_COMPONENT,
   HOMEPAGE_FOCUSTRAPZONE_BUTTON,
-} from '../../../TestComponents/FocusTrapZone/consts';
+} from '../../../../fluent-tester/src/TestComponents/FocusTrapZone/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class FocusTrapZonePageObject extends BasePage {

apps/E2E/src/FocusZone/pages/FocusZonePageObject.ts

@@ -1,4 +1,4 @@
-import { FocusZoneDirection } from '@fluentui/react-native';
+import { FocusZoneDirection } from '@fluentui-react-native/focus-zone';
 import { Attribute, AttributeValue, Keys } from '../../common/consts';
 import {
   FOCUSZONE_CIRCLE_NAV_SWITCH,
@@ -13,7 +13,7 @@ import {
   FOCUSZONE_TEST_COMPONENT,
   FOCUSZONE_TWO_DIM_SWITCH,
   HOMEPAGE_FOCUSZONE_BUTTON,
-} from '../../../TestComponents/FocusZone/consts';
+} from '../../../../fluent-tester/src/TestComponents/FocusZone/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 export const enum GridFocusZoneOption {

apps/E2E/src/Icon/pages/IconPageObject.ts

@@ -3,7 +3,7 @@ import {
   ICON_TEST_COMPONENT,
   HOMEPAGE_ICON_BUTTON,
   ICON_NO_A11Y_LABEL_COMPONENT,
-} from '../../../TestComponents/Icon/consts';
+} from '../../../../fluent-tester/src/TestComponents/Icon/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class IconPageObject extends BasePage {

apps/E2E/src/Link/pages/LinkPageObject.ts

@@ -3,7 +3,7 @@ import {
   LINK_TEST_COMPONENT,
   HOMEPAGE_LINK_BUTTON,
   LINK_NO_A11Y_LABEL_COMPONENT,
-} from '../../../TestComponents/Link/consts';
+} from '../../../../fluent-tester/src/TestComponents/Link/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class LinkPageObject extends BasePage {

apps/E2E/src/Link/specs/Link.spec.win.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import LinkPageObject from '../pages/LinkPageObject';
 import { ComponentSelector } from '../../common/BasePage';
-import { LINK_ACCESSIBILITY_LABEL } from '../../../TestComponents/Link/consts';
+import { LINK_ACCESSIBILITY_LABEL } from '../../../../fluent-tester/src/TestComponents/Link/consts';
 import { LINK_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open

apps/E2E/src/LinkExperimental/pages/LinkPageObject.ts

@@ -3,7 +3,7 @@ import {
   EXPERIMENTAL_LINK_TEST_COMPONENT,
   HOMEPAGE_EXPERIMENTAL_LINK_BUTTON,
   EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT,
-} from '../../../TestComponents/LinkExperimental/consts';
+} from '../../../../fluent-tester/src/TestComponents/LinkExperimental/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class ExperimentalLinkPageObject extends BasePage {

apps/E2E/src/LinkExperimental/specs/ExperimentalLink.spec.win.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import ExperimentalLinkPageObject from '../pages/LinkPageObject';
 import { ComponentSelector } from '../../common/BasePage';
-import { EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL } from '../../../TestComponents/LinkExperimental/consts';
+import { EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL } from '../../../../fluent-tester/src/TestComponents/LinkExperimental/consts';
 import { LINK_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open

apps/E2E/src/Menu/pages/MenuPageObject.ts

@@ -6,7 +6,7 @@ import {
   MENUITEM_TEST_COMPONENT,
   MENUPOPOVER_TEST_COMPONENT,
   MENU_DEFOCUS_BUTTON,
-} from '../../../TestComponents/Menu/consts';
+} from '../../../../fluent-tester/src/TestComponents/Menu/consts';
 import { BasePage, By } from '../../common/BasePage';
 import { Keys, ExpandCollapseState, Attribute } from '../../common/consts';
 

apps/E2E/src/Menu/specs/Menu.spec.win.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import MenuPageObject, { MenuComponentSelector } from '../pages/MenuPageObject';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys, MENUITEM_A11Y_ROLE, ExpandCollapseState } from '../../common/consts';
-import { MENUITEM_TEST_LABEL } from '../../../TestComponents/Menu/consts';
+import { MENUITEM_TEST_LABEL } from '../../../../fluent-tester/src/TestComponents/Menu/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Menu Testing Initialization', function () {

apps/E2E/src/MenuButton/pages/MenuButtonPageObject.win.ts

@@ -4,7 +4,7 @@ import {
   HOMEPAGE_MENUBUTTON_BUTTON,
   MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
   MENU_ITEM_1_COMPONENT,
-} from '../../../TestComponents/MenuButton/consts';
+} from '../../../../fluent-tester/src/TestComponents/MenuButton/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 export const enum MenuButtonSelector {

apps/E2E/src/MenuButton/specs/MenuButton.spec.win.ts

@@ -1,7 +1,10 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import MenuButtonPageObject, { MenuButtonSelector } from '../pages/MenuButtonPageObject.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, MENUBUTTON_A11Y_ROLE, Keys } from '../../common/consts';
-import { MENU_BUTTON_ACCESSIBILITY_LABEL, MENU_BUTTON_TEST_COMPONENT_LABEL } from '../../../TestComponents/MenuButton/consts';
+import {
+  MENU_BUTTON_ACCESSIBILITY_LABEL,
+  MENU_BUTTON_TEST_COMPONENT_LABEL,
+} from '../../../../fluent-tester/src/TestComponents/MenuButton/consts';
 import { ComponentSelector } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open

apps/E2E/src/MenuButtonExperimental/pages/ExperimentalMenuButtonPageObject.win.ts

@@ -3,7 +3,7 @@ import {
   EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT,
   HOMEPAGE_EXPERIMENTAL_MENU_BUTTON,
   EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
-} from '../../../TestComponents/MenuButtonExperimental/consts';
+} from '../../../../fluent-tester/src/TestComponents/MenuButtonExperimental/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class ExperimentalMenuButtonPageObject extends BasePage {

apps/E2E/src/MenuButtonExperimental/specs/ExperimentalMenuButton.spec.win.ts

@@ -4,7 +4,7 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, MENUBUTTON_A11Y_ROLE } from '../../comm
 import {
   EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL,
   EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL,
-} from '../../../TestComponents/MenuButtonExperimental/consts';
+} from '../../../../fluent-tester/src/TestComponents/MenuButtonExperimental/consts';
 import { ComponentSelector } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open

apps/E2E/src/Persona/pages/PersonaPageObject.ts

@@ -1,4 +1,8 @@
-import { PERSONA_TESTPAGE, PERSONA_TEST_COMPONENT, HOMEPAGE_PERSONA_BUTTON } from '../../../TestComponents/Persona/consts';
+import {
+  PERSONA_TESTPAGE,
+  PERSONA_TEST_COMPONENT,
+  HOMEPAGE_PERSONA_BUTTON,
+} from '../../../../fluent-tester/src/TestComponents/Persona/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class PersonaPageObject extends BasePage {

apps/E2E/src/PersonaCoin/pages/PersonaCoinPageObject.ts

@@ -1,4 +1,8 @@
-import { PERSONACOIN_TESTPAGE, PERSONACOIN_TEST_COMPONENT, HOMEPAGE_PERSONACOIN_BUTTON } from '../../../TestComponents/PersonaCoin/consts';
+import {
+  PERSONACOIN_TESTPAGE,
+  PERSONACOIN_TEST_COMPONENT,
+  HOMEPAGE_PERSONACOIN_BUTTON,
+} from '../../../../fluent-tester/src/TestComponents/PersonaCoin/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class PersonaCoinPageObject extends BasePage {

apps/E2E/src/Pressable/pages/PressablePageObject.ts

@@ -1,4 +1,8 @@
-import { PRESSABLE_TESTPAGE, PRESSABLE_TEST_COMPONENT, HOMEPAGE_PRESSABLE_BUTTON } from '../../../TestComponents/Pressable/consts';
+import {
+  PRESSABLE_TESTPAGE,
+  PRESSABLE_TEST_COMPONENT,
+  HOMEPAGE_PRESSABLE_BUTTON,
+} from '../../../../fluent-tester/src/TestComponents/Pressable/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class PressablePageObject extends BasePage {

apps/E2E/src/RadioGroup/pages/RadioGroupPageObject.ts

@@ -7,7 +7,7 @@ import {
   SECOND_RADIO_BUTTON,
   THIRD_RADIO_BUTTON,
   FOURTH_RADIO_BUTTON,
-} from '../../../TestComponents/RadioGroup/consts';
+} from '../../../../fluent-tester/src/TestComponents/RadioGroup/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.

apps/E2E/src/RadioGroup/specs/RadioGroup.spec.win.ts

@@ -7,7 +7,7 @@ import {
   RADIOGROUP_TEST_COMPONENT_LABEL,
   FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
   SECOND_RADIO_BUTTON_LABEL,
-} from '../../../TestComponents/RadioGroup/consts';
+} from '../../../../fluent-tester/src/TestComponents/RadioGroup/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('RadioGroup/RadioButton Testing Initialization', function () {

apps/E2E/src/RadioGroupExperimental/pages/RadioGroupExperimentalPageObject.ts

@@ -8,7 +8,7 @@ import {
   THIRD_RADIO,
   FOURTH_RADIO,
   FIFTH_RADIO,
-} from '../../../TestComponents/RadioGroupExperimental/consts';
+} from '../../../../fluent-tester/src/TestComponents/RadioGroupExperimental/consts';
 import { BasePage, By } from '../../common/BasePage';
 import { Attribute, AttributeValue } from '../../common/consts';
 

apps/E2E/src/RadioGroupExperimental/specs/ExperimentalRadioGroup.spec.win.ts

@@ -7,7 +7,7 @@ import {
   RADIOGROUP_TEST_COMPONENT_LABEL,
   FIRST_RADIO_ACCESSIBILITY_LABEL,
   SECOND_RADIO_LABEL,
-} from '../../../TestComponents/RadioGroupExperimental/consts';
+} from '../../../../fluent-tester/src/TestComponents/RadioGroupExperimental/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('RadioGroup/Radio Testing Initialization', function () {

apps/E2E/src/Separator/pages/SeparatorPageObject.ts

@@ -1,4 +1,8 @@
-import { SEPARATOR_TESTPAGE, SEPARATOR_TEST_COMPONENT, HOMEPAGE_SEPARATOR_BUTTON } from '../../../TestComponents/Separator/consts';
+import {
+  SEPARATOR_TESTPAGE,
+  SEPARATOR_TEST_COMPONENT,
+  HOMEPAGE_SEPARATOR_BUTTON,
+} from '../../../../fluent-tester/src/TestComponents/Separator/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class SeparatorPageObject extends BasePage {

apps/E2E/src/Shadow/pages/ShadowPageObject.ts

@@ -1,4 +1,4 @@
-import { SHADOW_TESTPAGE, HOMEPAGE_SHADOW_BUTTON } from '../../../TestComponents/Shadow/consts';
+import { SHADOW_TESTPAGE, HOMEPAGE_SHADOW_BUTTON } from '../../../../fluent-tester/src/TestComponents/Shadow/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class ShadowTestPage extends BasePage {

apps/E2E/src/Shimmer/pages/ShimmerPageObject.win.ts

@@ -1,4 +1,8 @@
-import { HOMEPAGE_SHIMMER_BUTTON, SHIMMER_TESTPAGE, SHIMMER_TEST_COMPONENT } from '../../../TestComponents/Shimmer/consts';
+import {
+  HOMEPAGE_SHIMMER_BUTTON,
+  SHIMMER_TESTPAGE,
+  SHIMMER_TEST_COMPONENT,
+} from '../../../../fluent-tester/src/TestComponents/Shimmer/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class ShimmerPageObject extends BasePage {

apps/E2E/src/StrokeWidthTokens/pages/StrokeWidthTokensPageObject.ts

@@ -1,4 +1,4 @@
-import { STROKEWIDTH_TESTPAGE, HOMEPAGE_STROKEWIDTH_BUTTON } from '../../../TestComponents/StrokeWidth/consts';
+import { STROKEWIDTH_TESTPAGE, HOMEPAGE_STROKEWIDTH_BUTTON } from '../../../../fluent-tester/src/TestComponents/StrokeWidth/consts';
 import { BasePage, By } from '../../common/BasePage';
 
 class StrokeWidthTokensPageObject extends BasePage {