@fluentui-react-native/tester 0.53.2 → 0.55.1

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

@@ -1,33 +1,71 @@
 import {
-  EXPERIMENTAL_BUTTON_TEST_PAGE,
-  BUTTONEXPERIMENTAL_TEST_COMPONENT,
-  BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT,
-  HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
-} from '../../../FluentTester/TestComponents/ButtonExperimental/consts';
+  BUTTON_TESTPAGE,
+  BUTTON_TEST_COMPONENT,
+  BUTTON_NO_A11Y_LABEL_COMPONENT,
+  HOMEPAGE_BUTTON_BUTTON,
+  BUTTON_ON_PRESS,
+} from '../../../FluentTester/TestComponents/Button/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
+/* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.
+ * The spec file should import this enum and use it when wanting to interact with different elements on the page. */
+export const enum ButtonSelector {
+  PrimaryButton, //this._primaryComponent
+}
 class ButtonExperimentalPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  didOnClickCallbackFire(): boolean {
+    const callbackText = By(BUTTON_ON_PRESS);
+    browser.waitUntil(
+      () => {
+        return callbackText.isDisplayed();
+      },
+      {
+        timeout: this.waitForPageTimeout,
+        timeoutMsg: 'The OnClick callback did not fire.',
+        interval: 1000,
+      },
+    );
+
+    return callbackText.isDisplayed();
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(buttonSelector: ButtonSelector, key: string): void {
+    this.getButtonSelector(buttonSelector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the Button Selector */
+  getButtonSelector(buttonSelector?: ButtonSelector): WebdriverIO.Element {
+    if (buttonSelector == ButtonSelector.PrimaryButton) {
+      return this._primaryComponent;
+    }
+    return this._primaryComponent;
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
   get _testPage() {
-    return By(EXPERIMENTAL_BUTTON_TEST_PAGE);
+    return By(BUTTON_TESTPAGE);
   }
 
   get _pageName() {
-    return EXPERIMENTAL_BUTTON_TEST_PAGE;
+    return BUTTON_TESTPAGE;
   }
 
   get _primaryComponent() {
-    return By(BUTTONEXPERIMENTAL_TEST_COMPONENT);
+    return By(BUTTON_TEST_COMPONENT);
   }
 
   get _secondaryComponent() {
-    return By(BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT);
+    return By(BUTTON_NO_A11Y_LABEL_COMPONENT);
   }
 
   get _pageButton() {
-    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
+    return By(HOMEPAGE_BUTTON_BUTTON);
   }
 }
 

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

@@ -1,11 +1,8 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
-import ButtonExperimentalPageObject from '../pages/ButtonExperimentalPageObject';
+import ButtonExperimentalPageObject, { ButtonSelector } from '../pages/ButtonExperimentalPageObject';
 import { ComponentSelector } from '../../common/BasePage.win';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE } from '../../common/consts';
-import {
-  BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL,
-  BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
-} from '../../../FluentTester/TestComponents/ButtonExperimental/consts';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, BUTTON_A11Y_ROLE, Keys } from '../../common/consts';
+import { BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL } from '../../../FluentTester/TestComponents/Button/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Experimental Button Testing Initialization', function () {
@@ -20,7 +17,7 @@ describe('Experimental Button Testing Initialization', function () {
     ButtonExperimentalPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */
-    NavigateAppPage.clickAndGoToExperimentalButtonPage();
+    NavigateAppPage.clickAndGoToButtonPage();
     ButtonExperimentalPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
     expect(ButtonExperimentalPageObject.isPageLoaded()).toBeTruthy(ButtonExperimentalPageObject.ERRORMESSAGE_PAGELOAD);
@@ -41,7 +38,7 @@ describe('Experimental Button Accessibility Testing', () => {
     ButtonExperimentalPageObject.scrollToTestElement();
     ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
 
-    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL);
+    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTON_ACCESSIBILITY_LABEL);
     expect(ButtonExperimentalPageObject.didAssertPopup()).toBeFalsy(ButtonExperimentalPageObject.ERRORMESSAGE_ASSERT);
   });
 
@@ -49,9 +46,37 @@ describe('Experimental Button Accessibility Testing', () => {
     ButtonExperimentalPageObject.scrollToTestElement();
     ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
 
-    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(
-      BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
-    );
+    expect(ButtonExperimentalPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL);
+    expect(ButtonExperimentalPageObject.didAssertPopup()).toBeFalsy(ButtonExperimentalPageObject.ERRORMESSAGE_ASSERT);
+  });
+});
+
+describe('Experimental Button Functional Testing', () => {
+  /* Scrolls and waits for the Button to be visible on the Test Page */
+  beforeEach(() => {
+    ButtonExperimentalPageObject.scrollToTestElement();
+    ButtonExperimentalPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('Validate OnClick() callback was fired -> Click', () => {
+    ButtonExperimentalPageObject.clickComponent();
+    expect(ButtonExperimentalPageObject.didOnClickCallbackFire()).toBeTruthy();
+    expect(ButtonExperimentalPageObject.didAssertPopup()).toBeFalsy(ButtonExperimentalPageObject.ERRORMESSAGE_ASSERT);
+
+    ButtonExperimentalPageObject.clickComponent(); // Reset Button State
+  });
+
+  it('Validate OnClick() callback was fired -> Type "Enter"', () => {
+    ButtonExperimentalPageObject.sendKey(ButtonSelector.PrimaryButton, Keys.Enter);
+    expect(ButtonExperimentalPageObject.didOnClickCallbackFire()).toBeTruthy();
+    expect(ButtonExperimentalPageObject.didAssertPopup()).toBeFalsy(ButtonExperimentalPageObject.ERRORMESSAGE_ASSERT);
+
+    ButtonExperimentalPageObject.clickComponent(); // Reset Button State
+  });
+
+  it('Validate OnClick() callback was fired -> Type "Spacebar"', () => {
+    ButtonExperimentalPageObject.sendKey(ButtonSelector.PrimaryButton, Keys.Spacebar);
+    expect(ButtonExperimentalPageObject.didOnClickCallbackFire()).toBeTruthy();
     expect(ButtonExperimentalPageObject.didAssertPopup()).toBeFalsy(ButtonExperimentalPageObject.ERRORMESSAGE_ASSERT);
   });
 });

package/src/E2E/common/NavigateAppPage.win.ts

@@ -2,7 +2,6 @@ import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from '../../FluentTester/TestCompo
 import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
 import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../FluentTester/TestComponents/CheckboxExperimental/consts';
 import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
-import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from '../../FluentTester/TestComponents/ButtonExperimental/consts';
 import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
 import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
 import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
@@ -124,10 +123,6 @@ class NavigateAppPage extends BasePage {
     this.tokensPage.click();
   }
 
-  clickAndGoToExperimentalButtonPage() {
-    this.experimentalButtonPage.click();
-  }
-
   clickAndGoToExperimentalTabsPage() {
     this.experimentalTabsPage.click();
   }
@@ -236,10 +231,6 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_TOKEN_BUTTON);
   }
 
-  private get experimentalButtonPage() {
-    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
-  }
-
   private get experimentalTabsPage() {
     return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
   }

package/src/FluentTester/TestComponents/{ButtonExperimental → Button}/ButtonHOCTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { Icon } from '@fluentui-react-native/icon';
 import * as React from 'react';

package/src/FluentTester/TestComponents/{ButtonExperimental → Button}/ButtonIconTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import * as React from 'react';
 import { Platform, View, StyleSheet } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
@@ -18,7 +18,7 @@ export const ButtonIconTest: React.FunctionComponent = () => {
   };
 
   /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('./icon_24x24.png');
+  const testImage = require('./../../../../assets/icon_24x24.png');
 
   const svgProps: SvgIconProps = {
     src: TestSvg,

package/src/FluentTester/TestComponents/{ButtonExperimental → Button}/ButtonShapeTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button, CompoundButton } from '@fluentui-react-native/button';
 import * as React from 'react';
 import { View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';

package/src/FluentTester/TestComponents/{ButtonExperimental → Button}/ButtonSizeTestSection.tsx

@@ -1,4 +1,4 @@
-import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import { ButtonV1 as Button, CompoundButton } from '@fluentui-react-native/button';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import * as React from 'react';
 import { Platform, View } from 'react-native';

package/src/FluentTester/TestComponents/Button/ButtonTest.tsx

@@ -1,23 +1,58 @@
 import * as React from 'react';
-import { ButtonFocusTest } from './ButtonFocusTest';
-import { ButtonIconTest } from './ButtonIconTest';
+import { ButtonFocusTest_deprecated } from './deprecated/ButtonFocusTest';
+import { ButtonIconTest_deprecated } from './deprecated/ButtonIconTest';
 import { BUTTON_TESTPAGE } from './consts';
-import { E2EButtonTest } from './E2EButtonTest';
+import { E2EButtonTest_deprecated } from './deprecated/E2EButtonTest';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { ButtonVariantTest } from './ButtonVariantTestSection';
+import { ToggleButtonTest } from './ToggleButtonTestSection';
+import { ButtonIconTest } from '../Button/ButtonIconTestSection';
+import { ButtonSizeTest } from './ButtonSizeTestSection';
+import { ButtonShapeTest } from './ButtonShapeTestSection';
+import { E2EButtonExperimentalTest } from './E2EButtonTest';
+import { ButtonHOCTest } from '../Button/ButtonHOCTestSection';
 
 const buttonSections: TestSection[] = [
   {
-    name: 'Basic Button',
+    name: 'Button Variants',
     testID: BUTTON_TESTPAGE,
-    component: ButtonFocusTest,
+    component: ButtonVariantTest,
+  },
+  {
+    name: 'Button Shape',
+    component: ButtonShapeTest,
   },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
   },
+  {
+    name: 'Toggle Button',
+    component: ToggleButtonTest,
+  },
+  {
+    name: 'Sizes',
+    component: ButtonSizeTest,
+  },
+  {
+    name: 'Customize, Compose, and Ref',
+    component: ButtonHOCTest,
+  },
   {
     name: 'E2E Button Testing',
-    component: E2EButtonTest,
+    component: E2EButtonExperimentalTest,
+  },
+  {
+    name: 'Deprecated Basic Button',
+    component: ButtonFocusTest_deprecated,
+  },
+  {
+    name: 'Deprecated Icon Button',
+    component: ButtonIconTest_deprecated,
+  },
+  {
+    name: 'Deprecated E2E Button Testing',
+    component: E2EButtonTest_deprecated,
   },
 ];
 
@@ -26,7 +61,7 @@ export const ButtonTest: React.FunctionComponent = () => {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
-    macosStatus: 'Experimental',
+    macosStatus: 'Beta',
     androidStatus: 'Backlog',
   };
 

package/src/FluentTester/TestComponents/{ButtonExperimental → Button}/ButtonVariantTestSection.tsx

@@ -5,6 +5,7 @@ import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 
+// Test also pulls button from deprecated package to ensure it's still working
 export const ButtonVariantTest: React.FunctionComponent = () => {
   const svgProps: SvgIconProps = {
     src: TestSvg,
@@ -15,11 +16,14 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
     <View style={[stackStyle, commonTestStyles.view]}>
       <Button style={commonTestStyles.vmargin}>Default</Button>
       <Button disabled style={commonTestStyles.vmargin}>
-        Disabled
+        Default Disabled
       </Button>
       <Button appearance="primary" style={commonTestStyles.vmargin}>
         Primary
       </Button>
+      <Button disabled appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Disabled
+      </Button>
       <Button appearance="subtle" style={commonTestStyles.vmargin}>
         Subtle
       </Button>

package/src/FluentTester/TestComponents/Button/E2EButtonTest.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { Button, Text } from '@fluentui/react-native';
+import { Text } from '@fluentui/react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { View } from 'react-native';
@@ -12,7 +13,7 @@ import {
   BUTTON_TEST_COMPONENT_LABEL,
 } from './consts';
 
-export const E2EButtonTest: React.FunctionComponent = () => {
+export const E2EButtonExperimentalTest: React.FunctionComponent = () => {
   const [buttonPressed, setButtonPressed] = React.useState(false);
 
   const onClick = React.useCallback(() => {
@@ -22,13 +23,12 @@ export const E2EButtonTest: React.FunctionComponent = () => {
   return (
     <View>
       <Stack style={stackStyle}>
-        <Button
-          content="This is a button for E2E testing"
-          testID={BUTTON_TEST_COMPONENT}
-          onClick={onClick}
-          accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}
-        />
-        <Button content={BUTTON_TEST_COMPONENT_LABEL} testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        <Button testID={BUTTON_TEST_COMPONENT} onClick={onClick} accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}>
+          This is a button for E2E testing
+        </Button>
+        <Button testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick}>
+          {BUTTON_TEST_COMPONENT_LABEL}
+        </Button>
         {buttonPressed ? <Text testID={BUTTON_ON_PRESS}>Button Pressed</Text> : null}
       </Stack>
     </View>

package/src/FluentTester/TestComponents/{ButtonExperimental → Button}/ToggleButtonTestSection.tsx

@@ -1,4 +1,4 @@
-import { ToggleButton } from '@fluentui-react-native/experimental-button';
+import { ToggleButton } from '@fluentui-react-native/button';
 import { Checkbox } from '@fluentui/react-native';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';

package/src/FluentTester/TestComponents/Button/consts.ts

@@ -1,6 +1,16 @@
 export const HOMEPAGE_BUTTON_BUTTON = 'Homepage_Button_Button'; // Button on the homepage that navigates to the selected test page
 export const BUTTON_TESTPAGE = 'Button_TestPage'; // The title of each test page. This is displayed after navigating to the test page
 
+/* Test Button 1 */
+export const BUTTON_TEST_COMPONENT_DEPRECATED = 'Button_Test_Component_Deprecated'; // A component on each specific test page
+export const BUTTON_ACCESSIBILITY_LABEL_DEPRECATED = 'E2E testing Button accessibility label';
+
+/* Test Button 2 */
+export const BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED = 'Button_No_A11y_label_Component_Deprecated';
+export const BUTTON_TEST_COMPONENT_LABEL_DEPRECATED = 'Test Button2 - No Accessibility Label'; // A component on each specific test page
+
+export const BUTTON_ON_PRESS_DEPRECATED = 'Button_On_Press'; // For testing the press functionality on a button
+
 /* Test Button 1 */
 export const BUTTON_TEST_COMPONENT = 'Button_Test_Component'; // A component on each specific test page
 export const BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility label';

package/src/FluentTester/TestComponents/Button/{ButtonFocusTest.tsx → deprecated/ButtonFocusTest.tsx}

@@ -3,9 +3,9 @@ import { IFocusable } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { findNodeHandle } from 'react-native';
-import { stackStyle } from '../Common/styles';
+import { stackStyle } from '../../Common/styles';
 
-export const ButtonFocusTest: React.FunctionComponent = () => {
+export const ButtonFocusTest_deprecated: React.FunctionComponent = () => {
   const [state, setState] = React.useState({
     focused: false,
   });

package/src/FluentTester/TestComponents/Button/{ButtonIconTest.tsx → deprecated/ButtonIconTest.tsx}

@@ -3,17 +3,18 @@ import { Button, Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
-import { stackStyle } from '../Common/styles';
+import { stackStyle } from '../../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from './test.svg';
+import TestSvg from '../test.svg';
 
 const CustomizedIconButton = Button.customize({
   tokens: { iconColor: 'red' },
   content: { style: { marginStart: 5 } },
 });
 
-export const ButtonIconTest: React.FunctionComponent = () => {
-  const testImage = require('./icon_24x24.png');
+export const ButtonIconTest_deprecated: React.FunctionComponent = () => {
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  const testImage = require('./../../../../../assets/icon_24x24.png');
 
   const svgProps: SvgIconProps = {
     src: TestSvg,

package/src/FluentTester/TestComponents/Button/deprecated/E2EButtonTest.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Button, Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../../Common/styles';
+import {
+  BUTTON_TEST_COMPONENT_DEPRECATED,
+  BUTTON_ON_PRESS_DEPRECATED,
+  BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED,
+  BUTTON_ACCESSIBILITY_LABEL_DEPRECATED,
+  BUTTON_TEST_COMPONENT_LABEL_DEPRECATED,
+} from '../consts';
+
+export const E2EButtonTest_deprecated: React.FunctionComponent = () => {
+  const [buttonPressed, setButtonPressed] = React.useState(false);
+
+  const onClick = React.useCallback(() => {
+    setButtonPressed(!buttonPressed);
+  }, [buttonPressed]);
+
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Button
+          content="This is a button for E2E testing"
+          testID={BUTTON_TEST_COMPONENT_DEPRECATED}
+          onClick={onClick}
+          accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL_DEPRECATED}
+        />
+        <Button content={BUTTON_TEST_COMPONENT_LABEL_DEPRECATED} testID={BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED} onClick={onClick} />
+        {buttonPressed ? <Text testID={BUTTON_ON_PRESS_DEPRECATED}>Button Pressed</Text> : null}
+      </Stack>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/CheckboxExperimental/consts.ts

@@ -1,5 +1,5 @@
-export const HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON = 'HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON'; // Button on the homepage that navigates to the selected test page
-export const EXPERIMENTAL_CHECKBOX_TESTPAGE = 'Checkbox_Experimental_TestPage'; // A component on each specific test page.
+export const HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON = 'Homepage_CheckboxExperimental_Button'; // Button on the homepage that navigates to the selected test page
+export const EXPERIMENTAL_CHECKBOX_TESTPAGE = 'CheckboxExperimental_TestPage'; // A component on each specific test page.
 
 /* Test Experimental Checkbox 1 */
 export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT = 'Experimental_Checkbox_Test_Component'; // A component on each specific test page

package/src/FluentTester/TestComponents/Common/iconExamples.tsx

@@ -7,7 +7,7 @@ export const svgProps: SvgIconProps = {
   viewBox: '0 0 500 500',
 };
 
-const testTtf = require('../Button/Font Awesome 5 Free-Solid-900.otf');
+const testTtf = require('./../../../../assets/Font_Awesome_900.otf');
 
 export const fontProps: FontIconProps = Platform.select({
   macos: {
@@ -23,4 +23,4 @@ export const fontProps: FontIconProps = Platform.select({
   },
 });
 
-export const testImage = require('../Button/icon_24x24.png');
+export const testImage = require('./../../../../assets/icon_24x24.png');

package/src/FluentTester/TestComponents/Icon/IconE2ETest.tsx

@@ -6,7 +6,7 @@ import { Icon } from '@fluentui-react-native/icon';
 import { ICON_ACCESSIBILITY_LABEL } from './consts';
 import { RasterImageIconProps } from '@fluentui-react-native/icon';
 
-const testImage = require('./assets/testicon.png');
+const testImage = require('./../../../../assets/testicon.png');
 
 export const E2ETestingIcon: React.FunctionComponent = () => {
   const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };

package/src/FluentTester/TestComponents/Icon/IconTest.tsx

@@ -7,8 +7,8 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { ICON_TESTPAGE } from './consts';
 import { E2ETestingIcon } from './IconE2ETest';
 
-const testImage = require('./assets/testicon.png');
-const testTtf = require('./assets/Font Awesome 5 Free-Solid-900.otf');
+const testImage = require('./../../../../assets/testicon.png');
+const testTtf = require('./../../../../assets/Font_Awesome_900.otf');
 import TestSvg from './assets/test.svg';
 
 const icons: React.FunctionComponent = () => {

package/src/FluentTester/TestComponents/MenuButton/testData.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { MenuButtonItemProps } from '@fluentui/react-native';
 import { SvgIconProps } from '@fluentui-react-native/icon';
-export const testImage = require('../Button/icon_24x24.png');
+export const testImage = require('./../../../../assets/icon_24x24.png');
 import TestSvg from '../Button/test.svg';
 import { MENU_ITEM_1_COMPONENT } from './consts';
 

package/src/FluentTester/TestComponents/MenuButtonExperimental/consts.ts

@@ -1,4 +1,4 @@
-export const HOMEPAGE_EXPERIMENTAL_MENU_BUTTON = 'Homepage_MenuButtonExperimental';
+export const HOMEPAGE_EXPERIMENTAL_MENU_BUTTON = 'Homepage_MenuButtonExperimental_Button';
 export const MENU_BUTTON_EXPERIMENTAL_TESTPAGE = 'MenuButtonExperimental_TestPage';
 
 /* E2E Testing Experimental Menu_Button 1 */

package/src/FluentTester/TestComponents/MenuButtonExperimental/testData.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { MenuButtonItemProps } from '@fluentui/react-native';
 import { SvgIconProps } from '@fluentui-react-native/icon';
-export const testImage = require('../Button/icon_24x24.png');
+export const testImage = require('./../../../../assets/icon_24x24.png');
 import TestSvg from '../Button/test.svg';
 
 const svgProps: SvgIconProps = {

package/src/FluentTester/TestComponents/TabsExperimental/consts.ts

@@ -1,5 +1,5 @@
-export const HOMEPAGE_EXPERIMENTAL_TABS_BUTTON = 'HOMEPAGE_EXPERIMENTAL_TABS_BUTTON';
-export const EXPERIMENTAL_TABS_TESTPAGE = 'Experimental_Tabs_TestPage';
+export const HOMEPAGE_EXPERIMENTAL_TABS_BUTTON = 'Homepage_TabsExperimental_Button';
+export const EXPERIMENTAL_TABS_TESTPAGE = 'TabsExperimental_TestPage';
 
 /* E2E Testing Experimental Tabs 1 */
 export const EXPERIMENTAL_TABS_TEST_COMPONENT = 'Experimental_Tabs_Test_Component'; // A component on each specific test page

package/src/FluentTester/TestComponents/TextExperimental/consts.ts

@@ -1,5 +1,5 @@
-export const HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON = 'Homepage_Text_Experimental_Button';
-export const EXPERIMENTAL_TEXT_TESTPAGE = 'Text_Experimental_TestPage';
+export const HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON = 'Homepage_TextExperimental_Button';
+export const EXPERIMENTAL_TEXT_TESTPAGE = 'TextExperimental_TestPage';
 
 /* E2E Testing Experimental Text 1 */
 export const EXPERIMENTAL_TEXT_TEST_COMPONENT = 'Experimental_Text_Test_Component'; // A component on each specific test page

package/src/FluentTester/testPages.android.ts

@@ -20,7 +20,6 @@ import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
 import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
 import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
-import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
 import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental';
 
@@ -45,11 +44,6 @@ export const tests: TestDescription[] = [
     component: ButtonTest,
     testPage: HOMEPAGE_BUTTON_BUTTON,
   },
-  {
-    name: 'Experimental Button',
-    component: ExperimentalButtonTest,
-    testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
-  },
   {
     name: 'Callout Test',
     component: CalloutTest,

package/src/FluentTester/testPages.ios.ts

@@ -4,7 +4,6 @@ import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
-import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
 import { NativeDatePickerTest, HOMEPAGE_NATIVEDATEPICKER_BUTTON } from './TestComponents/NativeDatePicker';
@@ -47,11 +46,6 @@ export const tests: TestDescription[] = [
     component: NativeDatePickerTest,
     testPage: HOMEPAGE_NATIVEDATEPICKER_BUTTON,
   },
-  {
-    name: 'Experimental Button',
-    component: ExperimentalButtonTest,
-    testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
-  },
   {
     name: 'Pressable Test',
     component: PressableTest,

package/src/FluentTester/testPages.macos.ts

@@ -6,7 +6,6 @@ import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
 import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
-import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { HOMEPAGE_FOCUSZONE_BUTTON, FocusZoneTest } from './TestComponents/FocusZone';
 import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
@@ -63,11 +62,6 @@ export const tests: TestDescription[] = [
     component: ContextualMenuTest,
     testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
   },
-  {
-    name: 'Experimental Button',
-    component: ExperimentalButtonTest,
-    testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
-  },
   {
     name: 'Experimental Checkbox',
     component: ExperimentalCheckboxTest,

package/src/FluentTester/testPages.ts

@@ -14,7 +14,6 @@ import { HOMEPAGE_SHIMMER_BUTTON, ShimmerTest } from './TestComponents/Shimmer';
 import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg';
 import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
 import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
-import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL, ExperimentalButtonTest } from './TestComponents/ButtonExperimental';
 import { HOMEPAGE_FOCUSZONE_BUTTON, FocusZoneTest } from './TestComponents/FocusZone';
 import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
@@ -128,11 +127,6 @@ export const tests: TestDescription[] = [
     component: SvgTest,
     testPage: HOMEPAGE_SVG_BUTTON,
   },
-  {
-    name: 'Experimental Button',
-    component: ExperimentalButtonTest,
-    testPage: HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL,
-  },
   {
     name: 'Callout Test',
     component: CalloutTest,