@fluentui-react-native/tester 0.50.9 → 0.50.13

package/src/E2E/README.md

@@ -69,6 +69,12 @@ _Note: It could take up to a minute to load the test app with WebDriverIO, don't
 
 # Authoring E2E Test
 
+You just added a new component to FURN... Awesome! Now we need to make sure we have proper regression testing to make sure we put the safest product out there (don't worry, it's not as hard as it sounds). Here's what we have to do:
+
+## Create New E2E Testing Folder for the New Component
+
+All our E2E testing logic exists in _/apps/fluent-tester/src/E2E/_.
+
 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**.
 
 Example File Structure:
@@ -79,6 +85,15 @@ Example File Structure:
 
 ----> CheckboxSpec.ts
 
+Please follow this structure for the new component.
+
+## Create New Constants
+
+The way we our automation framework interacts with our test app is by selecting UI components based on a string value. For this, we have a **consts.ts** file for each component that defines these values.
+You'll want to make one for your component under **apps/fluent-tester/src/FluentTester/TestComponents/_your-component_/consts.ts**.
+
+**You can simply copy/paste a _consts.ts_ file from another component, and just change the name of the component in the const names and the values.**
+
 Now, what are Page Objects and Spec Documents?
 
 ## Page Objects
@@ -92,6 +107,8 @@ The benefit is that if the UI changes for the test page, the tests themselves do
 
 Page Objects should be put in apps/fluent-tester/src/E2E/_ *ComponentToBeTested* _/pages/.
 
+In most cases, you can copy/paste ButtonPageObject.ts and simply change all instances of Button to your new component.
+
 ```
 // CheckboxPageObject.win.ts
 class CheckboxPageObject extends BasePage {
@@ -124,6 +141,17 @@ For example, a common task we want to perform is selecting a UI element and gett
 
 - To use this, we must add a prop to our component or UI element in question called “testID”. In our test page, set the “testID” for the component, and we can then select it in our Page Object using the imported **_By_** method above from a base class.
 
+## Setup your Component Test Page in the Test App
+
+In order to test the component, we need a test page in FURNs test app. Once you create that, you'll want to create a separate file for E2E testing (see pattern used by all other controls). Create
+an example and set `testID = {your_components_constant}` on your new control. Now, our automation framework can select this component using the constant you passed in to `testID`.
+
+## Add to NavigateAppPage.ts
+
+This page object is responsible for navigating through the app to each test page. Here, you'll want to add integration for your new component. (Easily reproducible by looking at other components in the file).
+
+**If testID doesn't exist on your component, simply add it to your component's \_types.ts\_ file.**
+
 ## Write a Test Spec
 
 The spec document is where the tests will be written. We use [Jasmine](https://jasmine.github.io/), an open-sourced testing framework for JavaScript.

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

@@ -0,0 +1,25 @@
+import { HOMEPAGE_SHIMMER_BUTTON, SHIMMER_TESTPAGE, SHIMMER_TEST_COMPONENT } from '../../../FluentTester/TestComponents/Shimmer/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+class ShimmerPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SHIMMER_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SHIMMER_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SHIMMER_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SHIMMER_BUTTON);
+  }
+}
+
+export default new ShimmerPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import ShimmerPageObject from '../pages/ShimmerPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Shimmer Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Shimmer test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    ShimmerPageObject.scrollToComponentButton();
+    ShimmerPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToShimmerPage();
+    ShimmerPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(ShimmerPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/TextExperimental/pages/ExperimentalTextPageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  EXPERIMENTAL_TEXT_TESTPAGE,
+  EXPERIMENTAL_TEXT_TEST_COMPONENT,
+  HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
+} from '../../../FluentTester/TestComponents/TextExperimental/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+class ExperimentalTextPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(EXPERIMENTAL_TEXT_TESTPAGE);
+  }
+
+  get _pageName() {
+    return EXPERIMENTAL_TEXT_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(EXPERIMENTAL_TEXT_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON);
+  }
+}
+
+export default new ExperimentalTextPageObject();

package/src/E2E/TextExperimental/specs/ExperimentalText.spec.win.ts

@@ -0,0 +1,31 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import ExperimentalTextPageObject from '../pages/ExperimentalTextPageObject.win';
+import { TEXT_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Experimental Text Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Experimental Text test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    ExperimentalTextPageObject.scrollToComponentButton();
+    ExperimentalTextPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToExperimentalTextPage();
+    ExperimentalTextPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(ExperimentalTextPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('Experimental Text Accessibility Testing', () => {
+  it('Text - Validate accessibilityRole is correct', () => {
+    ExperimentalTextPageObject.scrollToTestElement();
+    ExperimentalTextPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(ExperimentalTextPageObject.getAccessibilityRole()).toEqual(TEXT_A11Y_ROLE);
+  });
+});

package/src/E2E/Tokens/pages/TokensPageObject.win.ts

@@ -0,0 +1,25 @@
+import { HOMEPAGE_TOKEN_BUTTON, TOKEN_TESTPAGE, TOKENS_TEST_COMPONENT } from '../../../FluentTester/TestComponents/Tokens/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+class TokenPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(TOKEN_TESTPAGE);
+  }
+
+  get _pageName() {
+    return TOKEN_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(TOKENS_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_TOKEN_BUTTON);
+  }
+}
+
+export default new TokenPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import TokenPageObject from '../pages/TokensPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Tokens Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Tokens test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    TokenPageObject.scrollToComponentButton();
+    TokenPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToTokensPage();
+    TokenPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(TokenPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

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

@@ -1,4 +1,6 @@
+import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from '../../FluentTester/TestComponents/ActivityIndicator/consts';
 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';
@@ -9,19 +11,27 @@ import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/Foc
 import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
 import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
 import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
+import { HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButtonExperimental/consts';
 import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
 import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
 import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
 import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
 import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
+import { HOMEPAGE_SHIMMER_BUTTON } from '../../FluentTester/TestComponents/Shimmer/consts';
 import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
 import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
+import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from '../../FluentTester/TestComponents/TextExperimental/consts';
+import { HOMEPAGE_TOKEN_BUTTON } from '../../FluentTester/TestComponents/Tokens/consts';
 import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
 import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
 import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
 import { By, BasePage } from './BasePage.win';
 
 class NavigateAppPage extends BasePage {
+  clickAndGoToActivityIndicatorPage() {
+    this.activityIndicatorPage.click();
+  }
+
   clickAndGoToButtonPage() {
     this.buttonPage.click();
   }
@@ -34,6 +44,10 @@ class NavigateAppPage extends BasePage {
     this.checkboxPage.click();
   }
 
+  clickAndGoToCheckboxExperimentalPage() {
+    this.checkboxExperimentalPage.click();
+  }
+
   clickAndGoToContextualMenuPage() {
     this.contextualMenuPage.click();
   }
@@ -58,6 +72,10 @@ class NavigateAppPage extends BasePage {
     this.menuButtonPage.click();
   }
 
+  clickAndGoToExperimentalMenuButtonPage() {
+    this.menuButtonExperimentalPage.click();
+  }
+
   clickAndGoToPersonaPage() {
     this.personaPage.click();
   }
@@ -78,6 +96,10 @@ class NavigateAppPage extends BasePage {
     this.separatorPage.click();
   }
 
+  clickAndGoToShimmerPage() {
+    this.shimmerPage.click();
+  }
+
   clickAndGoToSvgPage() {
     this.svgPage.click();
   }
@@ -86,6 +108,10 @@ class NavigateAppPage extends BasePage {
     this.textPage.click();
   }
 
+  clickAndGoToExperimentalTextPage() {
+    this.textExperimentalPage.click();
+  }
+
   clickAndGoToTabsPage() {
     this.tabsPage.click();
   }
@@ -94,6 +120,10 @@ class NavigateAppPage extends BasePage {
     this.themePage.click();
   }
 
+  clickAndGoToTokensPage() {
+    this.tokensPage.click();
+  }
+
   clickAndGoToExperimentalButtonPage() {
     this.experimentalButtonPage.click();
   }
@@ -110,6 +140,10 @@ class NavigateAppPage extends BasePage {
     return By(BASE_TESTPAGE);
   }
 
+  private get activityIndicatorPage() {
+    return By(HOMEPAGE_ACTIVITY_INDICATOR_BUTTON);
+  }
+
   private get buttonPage() {
     return By(HOMEPAGE_BUTTON_BUTTON);
   }
@@ -122,6 +156,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_CHECKBOX_BUTTON);
   }
 
+  private get checkboxExperimentalPage() {
+    return By(HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON);
+  }
+
   private get contextualMenuPage() {
     return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
   }
@@ -146,6 +184,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_MENU_BUTTON);
   }
 
+  private get menuButtonExperimentalPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_MENU_BUTTON);
+  }
+
   private get personaPage() {
     return By(HOMEPAGE_PERSONA_BUTTON);
   }
@@ -166,6 +208,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_SEPARATOR_BUTTON);
   }
 
+  private get shimmerPage() {
+    return By(HOMEPAGE_SHIMMER_BUTTON);
+  }
+
   private get svgPage() {
     return By(HOMEPAGE_SVG_BUTTON);
   }
@@ -174,6 +220,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_TEXT_BUTTON);
   }
 
+  private get textExperimentalPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON);
+  }
+
   private get tabsPage() {
     return By(HOMEPAGE_TABS_BUTTON);
   }
@@ -182,6 +232,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_THEME_BUTTON);
   }
 
+  private get tokensPage() {
+    return By(HOMEPAGE_TOKEN_BUTTON);
+  }
+
   private get experimentalButtonPage() {
     return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
   }

package/src/FluentTester/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -4,7 +4,7 @@ import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
 import { Test, TestSection, PlatformStatus } from '../Test';
-import { ACTIVITYINDICATOR_TESTPAGE } from './consts';
+import { ACTIVITY_INDICATOR_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 
 const activityIndicatorTest: React.FunctionComponent = () => {
@@ -64,12 +64,12 @@ const basicActivityIndicator: React.FunctionComponent = () => {
 const activityIndicatorSections: TestSection[] = [
   {
     name: 'BaseActivityIndicator',
-    testID: ACTIVITYINDICATOR_TESTPAGE,
+    testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: basicActivityIndicator,
   },
   {
     name: 'ActivityIndicator',
-    testID: ACTIVITYINDICATOR_TESTPAGE,
+    testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: activityIndicatorTest,
   },
 ];

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

@@ -1,2 +1,5 @@
-export const HOMEPAGE_ACTIVITYINDICATOR_BUTTON = 'Homepage_ActivityIndicator_Button';
-export const ACTIVITYINDICATOR_TESTPAGE = 'ActivityIndicator_TestPage';
+export const HOMEPAGE_ACTIVITY_INDICATOR_BUTTON = 'HOMEPAGE_ACTIVITY_INDICATOR_BUTTON';
+export const ACTIVITY_INDICATOR_TESTPAGE = 'ACTIVITY_INDICATOR_TESTPAGE';
+
+/* Test ActivityIndicator 1 */
+export const ACTIVITY_INDICATOR_TEST_COMPONENT = 'Activity_Indicator_Test_Component'; // A component on each specific test page

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonSizeTestSection.tsx

@@ -57,15 +57,19 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
       <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
         Compound Button
       </CompoundButton>
-      <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
-        Content
-      </CompoundButton>
-      <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
-        Content
-      </CompoundButton>
-      <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
-        Content
-      </CompoundButton>
+      {svgIconsEnabled && (
+        <>
+          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
+            Content
+          </CompoundButton>
+          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
+            Content
+          </CompoundButton>
+          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
+            Content
+          </CompoundButton>
+        </>
+      )}
     </View>
   );
 };

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

@@ -23,13 +23,12 @@ export const E2EButtonExperimentalTest: React.FunctionComponent = () => {
   return (
     <View>
       <Stack style={stackStyle}>
-        <Button
-          content="This is a button for E2E testing"
-          testID={BUTTONEXPERIMENTAL_TEST_COMPONENT}
-          onClick={onClick}
-          accessibilityLabel={BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL}
-        />
-        <Button content={BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL} testID={BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        <Button testID={BUTTONEXPERIMENTAL_TEST_COMPONENT} onClick={onClick} accessibilityLabel={BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL}>
+          This is a button for E2E testing
+        </Button>
+        <Button testID={BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT} onClick={onClick}>
+          {BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL}
+        </Button>
         {buttonPressed ? <Text testID={BUTTONEXPERIMENTAL_ON_PRESS}>Button Pressed</Text> : null}
       </Stack>
     </View>

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ExperimentalCheckboxTestPageId } from './consts';
+import { EXPERIMENTAL_CHECKBOX_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { View, TextInput, TextStyle } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
+import { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
 
 function onChangeUncontrolled(isChecked: boolean) {
   console.log(isChecked);
@@ -133,7 +134,7 @@ const tokenCheckbox: React.FunctionComponent = () => {
 const checkboxSections: TestSection[] = [
   {
     name: 'Basic Checkboxes',
-    testID: ExperimentalCheckboxTestPageId,
+    testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
     component: basicCheckbox,
   },
   {
@@ -144,6 +145,10 @@ const checkboxSections: TestSection[] = [
     name: 'Token Customized Checkboxes',
     component: tokenCheckbox,
   },
+  {
+    name: 'E2E Testing for Experimental Checkbox',
+    component: E2ECheckboxExperimentalTest,
+  },
 ];
 
 export const ExperimentalCheckboxTest: React.FunctionComponent = () => {

package/src/FluentTester/TestComponents/CheckboxExperimental/E2ECheckboxExperimentalTest.tsx

@@ -0,0 +1,27 @@
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  EXPERIMENTAL_CHECKBOX_TEST_COMPONENT,
+  EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
+} from './consts';
+import { Stack } from '@fluentui-react-native/stack';
+
+export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Checkbox
+          accessibilityLabel={EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL}
+          disabled={false}
+          label="Testing accessibilityLabel"
+          testID={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT}
+        />
+        <Checkbox label={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT} />
+      </Stack>
+    </View>
+  );
+};

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

@@ -1,2 +1,10 @@
-export const HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL = 'Homepage_Checkbox_CheckboxExperimental'; // Button on the homepage that navigates to the selected test page
-export const ExperimentalCheckboxTestPageId = 'CheckboxExperimental_TestPage'; // A component on each specific test page.
+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.
+
+/* Test Experimental Checkbox 1 */
+export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT = 'Experimental_Checkbox_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL = 'E2E testing Experimental Checkbox accessibility label';
+
+/* Test Experimental Checkbox 2 */
+export const EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT = 'Experimental Checkbox_No_A11y_label_Component';
+export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL = 'Test Experimental Checkbox2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/MenuButtonExperimental/ExperimentalMenuButtonE2ETest.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { ContextualMenuProps } from '@fluentui/react-native';
+import { Text, View } from 'react-native';
+import { menuItems } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
+import {
+  EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT,
+  EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2ETestExperimentalMenuButton: React.FunctionComponent = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+
+  const contextualMenuProps: ContextualMenuProps = {
+    accessibilityLabel: 'MenuButton',
+    shouldFocusOnMount: true,
+    shouldFocusOnContainer: false,
+  };
+
+  return (
+    <View>
+      <View style={viewWrapperStyle}>
+        <View style={columnStyle}>
+          <Text>
+            <Text>Last Menu Item Clicked: </Text>
+            {lastMenuItemClicked > 0 ? <Text style={textColor}>{lastMenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
+          </Text>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content="Standard MenuButton with Accessibility Label"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                testID={EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT}
+                accessibilityLabel={EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL}
+              />
+            </View>
+          </View>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content={EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                testID={EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/MenuButtonExperimental/MenuButtonTest.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { HOMEPAGE_MENU_BUTTON_EXPERIMENTAL } from './consts';
+import { MENU_BUTTON_EXPERIMENTAL_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { StandardMenuButton } from './StandardMenuButtonTest';
 import { NestedMenuButton } from './NestedMenuButtonTest';
+import { E2ETestExperimentalMenuButton } from './ExperimentalMenuButtonE2ETest';
 import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
 
 const menuButtonSections: TestSection[] = [
   {
     name: 'Standard MenuButton',
-    testID: HOMEPAGE_MENU_BUTTON_EXPERIMENTAL,
+    testID: MENU_BUTTON_EXPERIMENTAL_TESTPAGE,
     component: StandardMenuButton,
   },
   {
@@ -19,6 +20,10 @@ const menuButtonSections: TestSection[] = [
     name: 'MenuButton with customized UI',
     component: CustomizedMenuButton,
   },
+  {
+    name: 'E2E Testing MenuButton',
+    component: E2ETestExperimentalMenuButton,
+  },
 ];
 
 export const ExperimentalMenuButtonTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
-export const HOMEPAGE_MENU_BUTTON_EXPERIMENTAL = 'Homepage_MenuButtonExperimental';
+export const HOMEPAGE_EXPERIMENTAL_MENU_BUTTON = 'Homepage_MenuButtonExperimental';
 export const MENU_BUTTON_EXPERIMENTAL_TESTPAGE = 'MenuButtonExperimental_TestPage';
+
+/* E2E Testing Experimental Menu_Button 1 */
+export const EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT = 'Experimental_Menu_Button_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Experimental_Menu_Button accessibility label';
+
+/* E2E Testing Experimental Menu_Button 2 */
+export const EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT = 'Experimental_Menu_Button_No_A11y_label_Component';
+export const EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL = 'Test Experimental_Menu_Button2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/Shimmer/ShimmerE2ETest.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Shimmer } from '@fluentui-react-native/experimental-shimmer';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { shimmerRectsAndRect } from './ShimmerTestElementSets';
+import { SHIMMER_TEST_COMPONENT } from './consts';
+
+export const E2ETestingShimmer: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Shimmer
+        testID={SHIMMER_TEST_COMPONENT}
+        elements={shimmerRectsAndRect()}
+        duration={2000}
+        delay={1000}
+        style={{ width: 300, height: 100 }}
+      />
+    </Stack>
+  );
+};