@fluentui-react-native/tester 0.47.2 → 0.49.0

package/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import * as React from 'react';
-import { Text, View, Switch, Platform } from 'react-native';
+import { Text, View, Switch } from 'react-native';
 import {
   Text as FURNText,
   Button,
@@ -13,8 +13,8 @@ import {
 } from '@fluentui/react-native';
 import { CONTEXTUALMENU_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
-import { SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../Button/test.svg';
+import { svgProps, fontProps, testImage } from '../Common/iconExamples';
+import { E2EContextualMenuTest } from './E2EContextualMenuTest';
 
 const contextualMenu: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
@@ -115,27 +115,6 @@ const contextualMenu: React.FunctionComponent = () => {
 };
 
 const nestedContextualMenu: React.FunctionComponent = () => {
-  const testImage = require('../Button/icon_24x24.png');
-  const testTtf = require('../Button/Font Awesome 5 Free-Solid-900.otf');
-
-  const fontProps: FontIconProps = Platform.select({
-    macos: {
-      fontFamily: 'Arial',
-      codepoint: 0x2663,
-      fontSize: 32,
-    },
-    default: {
-      fontFamily: `Font Awesome 5 Free`,
-      fontSrcFile: testTtf,
-      codepoint: 0xf083,
-      fontSize: 32,
-    },
-  });
-
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   const stdBtnRef = React.useRef(null);
 
@@ -184,6 +163,7 @@ const nestedContextualMenu: React.FunctionComponent = () => {
     console.log('submenu item clicked');
   }, []);
 
+
   return (
     <View>
       <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
@@ -255,10 +235,6 @@ const nestedContextualMenu: React.FunctionComponent = () => {
 };
 
 const IconContextualMenu: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   const stdBtnRef = React.useRef(null);
 
@@ -343,6 +319,152 @@ const IconContextualMenu: React.FunctionComponent = () => {
   );
 };
 
+const ScrollViewContextualMenu: React.FunctionComponent = () => {
+  const stdBtnRef = React.useRef(null);
+
+  const [showContextualMenu, setShowContextualMenu] = React.useState(false);
+  const [isContextualMenuVisible, setIsContextualMenuVisible] = React.useState(false);
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+
+  const [isBeakVisible, setIsBeakVisible] = React.useState(false);
+  const onIsBeakVisibleChange = React.useCallback((value) => setIsBeakVisible(value), []);
+
+  const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
+  const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
+
+  const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
+  const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
+
+  const toggleShowContextualMenu = React.useCallback(() => {
+    setShowContextualMenu(!showContextualMenu);
+    setIsContextualMenuVisible(false);
+  }, [showContextualMenu, setShowContextualMenu, setIsContextualMenuVisible]);
+
+  const onShowContextualMenu = React.useCallback(() => {
+    setIsContextualMenuVisible(true);
+  }, [setIsContextualMenuVisible]);
+
+  const onDismissContextualMenu = React.useCallback(() => {
+    setShowContextualMenu(false);
+    setIsContextualMenuVisible(false);
+  }, [setShowContextualMenu]);
+
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+
+  const stdMenuItemRef = React.useRef(null);
+
+  const [showSubmenu, setShowSubmenu] = React.useState(false);
+  const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
+
+  const toggleShowSubmenu = React.useCallback(() => {
+    setShowSubmenu(!showSubmenu);
+    setIsSubmenuVisible(!isSubmenuVisible);
+  }, [showSubmenu, isSubmenuVisible, setShowSubmenu, setIsSubmenuVisible]);
+
+  const onShowSubmenu = React.useCallback(() => {
+    setIsSubmenuVisible(true);
+  }, [setIsSubmenuVisible]);
+
+  const onDismissSubmenu = React.useCallback(() => {
+    setShowSubmenu(false);
+  }, [setShowSubmenu]);
+
+  const onClick = React.useCallback(() => {
+    console.log('submenu item clicked');
+  }, []);
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
+        <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
+          <View style={{ flexDirection: 'row' }}>
+            <Text>Should Focus on Mount</Text>
+            <Switch value={focusOnMount} onValueChange={toggleFocusOnMount} />
+          </View>
+
+          <View style={{ flexDirection: 'row' }}>
+            <Text>Should Focus on Container</Text>
+            <Switch value={focusOnContainer} onValueChange={toggleFocusOnContainer} />
+          </View>
+          <View style={{ flexDirection: 'row' }}>
+            <Text>Beak Visible</Text>
+            <Switch value={isBeakVisible} onValueChange={onIsBeakVisibleChange} />
+          </View>
+        </View>
+
+        <Separator vertical />
+
+        <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
+          <Text>
+            <Text>Menu Visibility: </Text>
+            {isContextualMenuVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
+          </Text>
+          <Text>
+            <Text>Last Menu Item Clicked: </Text>
+            {lastMenuItemClicked > 0 ? (
+              <Text style={{ color: 'blue' }}>{lastMenuItemClicked}</Text>
+            ) : (
+              <Text style={{ color: 'blue' }}>none</Text>
+            )}
+          </Text>
+          <Text>
+            <Text>Menu and Submenu max height set to 200</Text>
+          </Text>
+          <Button content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
+        </View>
+      </View>
+
+      {showContextualMenu && (
+        <ContextualMenu
+          target={stdBtnRef}
+          onDismiss={onDismissContextualMenu}
+          onShow={onShowContextualMenu}
+          accessibilityLabel="Standard ContextualMenu"
+          onItemClick={onItemClick}
+          setShowMenu={toggleShowContextualMenu}
+          shouldFocusOnMount={focusOnMount}
+          shouldFocusOnContainer={focusOnContainer}
+          isBeakVisible={isBeakVisible}
+          maxHeight={200}
+        >
+          <ContextualMenuItem text="MenuItem 1" itemKey="1" />
+          <ContextualMenuItem text="MenuItem 2" itemKey="2" />
+          <SubmenuItem
+            icon={{ svgSource: svgProps, width: 12, height: 12 }}
+            text="Nested Menu"
+            itemKey="3"
+            onHoverIn={toggleShowSubmenu}
+            componentRef={stdMenuItemRef}
+          />
+          {showSubmenu && (
+            <Submenu maxHeight={200} target={stdMenuItemRef} onDismiss={onDismissSubmenu} onShow={onShowSubmenu} setShowMenu={toggleShowSubmenu}>
+              <ContextualMenuItem text="MenuItem 4" itemKey="4" />
+              <ContextualMenuItem text="MenuItem 5" itemKey="5" />
+              <ContextualMenuItem text="MenuItem 6" itemKey="6" />
+              <ContextualMenuItem text="MenuItem 7" itemKey="7" />
+              <ContextualMenuItem
+                icon={{ svgSource: svgProps, width: 12, height: 12 }}
+                text="SubmenuItem svg icon"
+                itemKey="8"
+                onClick={onClick}
+              />
+              <ContextualMenuItem text="SubmenuItem 2" itemKey="9" />
+              <ContextualMenuItem text="Disabled Menu Item" itemKey="10" disabled />
+            </Submenu>
+          )}
+          <ContextualMenuItem text="Disabled Menu Item" itemKey="11" disabled />
+          <ContextualMenuItem text="MenuItem 4" itemKey="12" />
+        </ContextualMenu>
+      )}
+    </View>
+  );
+};
+
 const contextualMenuSections: TestSection[] = [
   {
     name: 'Standard ContextualMenu',
@@ -357,6 +479,14 @@ const contextualMenuSections: TestSection[] = [
     name: 'IconButton with Customized ContextualMenu',
     component: IconContextualMenu,
   },
+  {
+    name: 'ContextalMenu with ScrollView',
+    component: ScrollViewContextualMenu,
+  },
+  {
+    name: 'ContextualMenu E2E Test',
+    component: E2EContextualMenuTest,
+  },  
 ];
 
 export const ContextualMenuTest: React.FunctionComponent = () => {

package/src/FluentTester/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { Text, View, Switch } from 'react-native';
+import { Button, ContextualMenu, ContextualMenuItem, Separator } from '@fluentui/react-native';
+import { CONTEXTUALMENUITEM_TEST_COMPONENT } from './consts';
+
+export const E2EContextualMenuTest: React.FunctionComponent = () => {
+  const stdBtnRef = React.useRef(null);
+
+  const [showContextualMenu, setShowContextualMenu] = React.useState(false);
+  const [isContextualMenuVisible, setIsContextualMenuVisible] = React.useState(false);
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+
+  const [isBeakVisible, setIsBeakVisible] = React.useState(false);
+  const onIsBeakVisibleChange = React.useCallback((value) => setIsBeakVisible(value), []);
+
+  const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
+  const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
+
+  const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
+  const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
+
+  const toggleShowContextualMenu = React.useCallback(() => {
+    setShowContextualMenu(!showContextualMenu);
+    setIsContextualMenuVisible(false);
+  }, [showContextualMenu, setShowContextualMenu, setIsContextualMenuVisible]);
+
+  const onShowContextualMenu = React.useCallback(() => {
+    setIsContextualMenuVisible(true);
+  }, [setIsContextualMenuVisible]);
+
+  const onDismissContextualMenu = React.useCallback(() => {
+    setShowContextualMenu(false);
+    setIsContextualMenuVisible(false);
+  }, [setShowContextualMenu]);
+
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
+        <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
+          <View style={{ flexDirection: 'row' }}>
+            <Text>Should Focus on Mount</Text>
+            <Switch value={focusOnMount} onValueChange={toggleFocusOnMount} />
+          </View>
+
+          <View style={{ flexDirection: 'row' }}>
+            <Text>Should Focus on Container</Text>
+            <Switch value={focusOnContainer} onValueChange={toggleFocusOnContainer} />
+          </View>
+          <View style={{ flexDirection: 'row' }}>
+            <Text>Beak Visible</Text>
+            <Switch value={isBeakVisible} onValueChange={onIsBeakVisibleChange} />
+          </View>
+        </View>
+
+        <Separator vertical />
+
+        <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
+          <Text>
+            <Text>Menu Visibility: </Text>
+            {isContextualMenuVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
+          </Text>
+          <Text>
+            <Text>Last Menu Item Clicked: </Text>
+            {lastMenuItemClicked > 0 ? (
+              <Text style={{ color: 'blue' }}>{lastMenuItemClicked}</Text>
+            ) : (
+              <Text style={{ color: 'blue' }}>none</Text>
+            )}
+          </Text>
+          <Button content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
+        </View>
+      </View>
+
+      {showContextualMenu && (
+        <ContextualMenu
+          target={stdBtnRef}
+          onDismiss={onDismissContextualMenu}
+          onShow={onShowContextualMenu}
+          onItemClick={onItemClick}
+          setShowMenu={toggleShowContextualMenu}
+          shouldFocusOnMount={focusOnMount}
+          shouldFocusOnContainer={focusOnContainer}
+          isBeakVisible={isBeakVisible}
+        >
+          <ContextualMenuItem text="MenuItem 1" itemKey="1" testID={CONTEXTUALMENUITEM_TEST_COMPONENT} />
+          <ContextualMenuItem text="MenuItem 2" itemKey="2" />
+          <ContextualMenuItem text="Disabled Menu Item" itemKey="3" disabled />
+          <ContextualMenuItem text="MenuItem 4" itemKey="4" />
+          <ContextualMenuItem text="MenuItem 5" itemKey="5" />
+        </ContextualMenu>
+      )}
+    </View>
+  );
+};

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

@@ -1,2 +1,18 @@
 export const HOMEPAGE_CONTEXTUALMENU_BUTTON = 'Homepage_ContextualMenu_Button';
 export const CONTEXTUALMENU_TESTPAGE = 'ContextualMenu_TestPage';
+
+/* E2E Testing ContextualMenu 1 */
+export const CONTEXTUALMENU_TEST_COMPONENT = 'ContextualMenu_Test_Component'; // A component on each specific test page
+export const CONTEXTUALMENU_ACCESSIBILITY_LABEL = 'E2E testing ContextualMenu accessibility label';
+
+/* E2E Testing ContextualMenu 2 */
+export const CONTEXTUALMENU_NO_A11Y_LABEL_COMPONENT = 'ContextualMenu_No_A11y_label_Component';
+export const CONTEXTUALMENU_TEST_COMPONENT_LABEL = 'Test ContextualMenu2 - No Accessibility Label'; // A component on each specific test page
+
+/* E2E Testing ContextualMenuItem 1 */
+export const CONTEXTUALMENUITEM_TEST_COMPONENT = 'ContextualMenuItem_Test_Component'; // A component on each specific test page
+export const CONTEXTUALMENUITEM_ACCESSIBILITY_LABEL = 'E2E testing ContextualMenuItem accessibility label';
+
+/* E2E Testing ContextualMenuItem 2 */
+export const CONTEXTUALMENUITEM_NO_A11Y_LABEL_COMPONENT = 'ContextualMenuItem_No_A11y_label_Component';
+export const CONTEXTUALMENUITEM_TEST_COMPONENT_LABEL = 'Test ContextualMenuItem2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import { Stack } from '@fluentui-react-native/stack';
+import { DRAWER_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { NativeModules } from 'react-native';
+
+const basicDrawer: React.FunctionComponent = () => {
+  console.log(NativeModules.DrawerModule);
+  return (
+    <Stack style={stackStyle} gap={5}>
+      <Text>test to come</Text>
+    </Stack>
+  );
+};
+
+const drawerSections: TestSection[] = [
+  {
+    name: 'Basic Drawer',
+    testID: DRAWER_TESTPAGE,
+    component: basicDrawer,
+  },
+];
+
+export const DrawerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'N/A',
+    uwpStatus: 'N/A',
+    iosStatus: 'Backlog',
+    macosStatus: 'N/A',
+    androidStatus: 'Experimental',
+  };
+
+  const description =
+    'A Drawer component using the Fluent Design System.  Currently only implemented on Android.';
+
+  return <Test name="Drawer Test" description={description} sections={drawerSections} status={status} />;
+};

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

@@ -0,0 +1,2 @@
+export const HOMEPAGE_DRAWER_BUTTON = 'Homepage_Drawer_Button';
+export const DRAWER_TESTPAGE = 'Drawer_TestPage';

package/src/FluentTester/TestComponents/Drawer/index.ts

@@ -0,0 +1,2 @@
+export * from './DrawerTest';
+export * from './consts';

package/src/FluentTester/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -40,7 +40,7 @@ interface IComponentTwiddlerProps {
   onPress?: TouchableHighlightProps['onPress'];
 }
 
-const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (props: IComponentTwiddlerProps) => {
+export const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (props: IComponentTwiddlerProps) => {
   const [focusProps, focusState] = useFocusState({});
 
   return (

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

@@ -1,2 +1,8 @@
 export const HOMEPAGE_FOCUSTRAPZONE_BUTTON = 'Homepage_FocusTrapZone_Button';
 export const FOCUSTRAPZONE_TESTPAGE = 'FocusTrapZone_TestPage';
+
+/* E2E Testing FocusTrapZone 1 */
+export const FOCUSTRAPZONE_TEST_COMPONENT = 'FocusTrapZone_Test_Component'; // A component on each specific test page
+
+/* E2E Testing FocusTrapZone 2 */
+export const FOCUSTRAPZONE_SECOND_TEST_COMPONENT = 'FocusTrapZone_Second_Test_Component';

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

@@ -1,2 +1,8 @@
 export const HOMEPAGE_FOCUSZONE_BUTTON = 'Homepage_FocusZone_Button';
 export const FOCUSZONE_TESTPAGE = 'FocusZone_TestPage';
+
+/* E2E Testing FocusZone 1 */
+export const FOCUSZONE_TEST_COMPONENT = 'FocusZone_Test_Component'; // A component on each specific test page
+
+/* E2E Testing FocusZone 2 */
+export const FOCUSZONE_SECOND_TEST_COMPONENT = 'FocusZone_Second_Test_Component';

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

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui/react-native';
+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');
+
+export const E2ETestingIcon: React.FunctionComponent = () => {
+  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };
+  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };
+
+  const showRasterIcons = true;
+
+  return (
+    <View>
+      {showRasterIcons ? (
+        <View>
+          <Text>Raster icons</Text>
+          <Icon
+            rasterImageSource={rasterRainbowSpectrumProps}
+            width={100}
+            height={100}
+            color="green"
+            accessibilityLabel={ICON_ACCESSIBILITY_LABEL}
+          />
+          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" />
+        </View>
+      ) : null}
+    </View>
+  );
+};

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

@@ -5,6 +5,7 @@ import { Text } from '@fluentui/react-native';
 import { Icon, RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
 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');
@@ -95,6 +96,10 @@ const iconSections: TestSection[] = [
     testID: ICON_TESTPAGE,
     component: icons,
   },
+  {
+    name: 'Icon for E2E Testing',
+    component: E2ETestingIcon,
+  },
 ];
 
 export const IconTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,9 @@
 export const HOMEPAGE_ICON_BUTTON = 'Homepage_Icon_Button';
 export const ICON_TESTPAGE = 'Icon_TestPage';
+
+/* E2E Testing Icon 1 */
+export const ICON_TEST_COMPONENT = 'Icon_Test_Component'; // A component on each specific test page
+export const ICON_ACCESSIBILITY_LABEL = 'E2E testing Icon accessibility label';
+
+/* E2E Testing Icon 2 */
+export const ICON_NO_A11Y_LABEL_COMPONENT = 'Icon_No_A11y_label_Component';

package/src/FluentTester/TestComponents/Link/E2ELinkTest.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+import { Link } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { LINK_TEST_COMPONENT, LINK_ACCESSIBILITY_LABEL, LINK_NO_A11Y_LABEL_COMPONENT, LINK_TEST_COMPONENT_LABEL } from './consts';
+
+export const LinkE2ETest: React.FunctionComponent = () => {
+  const doPress = (): void => {
+    Alert.alert('Alert.', 'You have been alerted.');
+  };
+
+  return (
+    <Stack style={stackStyle}>
+      <Link
+        url="https://www.bing.com/"
+        content="Link with Accessibility Label."
+        testID={LINK_TEST_COMPONENT}
+        accessibilityLabel={LINK_ACCESSIBILITY_LABEL}
+      />
+      <Link url="https://www.bing.com/" onPress={doPress} content={LINK_TEST_COMPONENT_LABEL} testID={LINK_NO_A11Y_LABEL_COMPONENT} />
+    </Stack>
+  );
+};

package/src/FluentTester/TestComponents/Link/LinkTest.tsx

@@ -5,6 +5,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { LINK_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { LinkE2ETest } from './E2ELinkTest';
 
 const links: React.FunctionComponent = () => {
   const doPress = (): void => {
@@ -25,6 +26,10 @@ const linkSections: TestSection[] = [
     testID: LINK_TESTPAGE,
     component: links,
   },
+  {
+    name: 'Link E2E Test',
+    component: LinkE2ETest,
+  },
 ];
 
 export const LinkTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_LINK_BUTTON = 'Homepage_Link_Button';
 export const LINK_TESTPAGE = 'Link_TestPage';
+
+/* E2E Testing Link 1 */
+export const LINK_TEST_COMPONENT = 'Link_Test_Component'; // A component on each specific test page
+export const LINK_ACCESSIBILITY_LABEL = 'E2E testing Link accessibility label';
+
+/* E2E Testing Link 2 */
+export const LINK_NO_A11Y_LABEL_COMPONENT = 'Link_No_A11y_label_Component';
+export const LINK_TEST_COMPONENT_LABEL = 'Test Link2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/MenuButton/MenuButtonE2ETest.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { MenuButton, ContextualMenuProps } from '@fluentui/react-native';
+import { Text, View } from 'react-native';
+import { menuItems } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
+import {
+  MENU_BUTTON_TEST_COMPONENT,
+  MENU_BUTTON_ACCESSIBILITY_LABEL,
+  MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+  MENU_BUTTON_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2ETestMenuButton: 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={MENU_BUTTON_TEST_COMPONENT}
+                accessibilityLabel={MENU_BUTTON_ACCESSIBILITY_LABEL}
+              />
+            </View>
+          </View>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content={MENU_BUTTON_TEST_COMPONENT_LABEL}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                testID={MENU_BUTTON_NO_A11Y_LABEL_COMPONENT}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

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

@@ -4,6 +4,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { StandardMenuButton } from './StandardMenuButtonTest';
 import { NestedMenuButton } from './NestedMenuButtonTest';
 import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
+import { E2ETestMenuButton } from './MenuButtonE2ETest';
 
 const menuButtonSections: TestSection[] = [
   {
@@ -19,6 +20,10 @@ const menuButtonSections: TestSection[] = [
     name: 'MenuButton with customized UI',
     component: CustomizedMenuButton,
   },
+  {
+    name: 'MenuButton for E2E Testing',
+    component: E2ETestMenuButton,
+  },
 ];
 
 export const MenuButtonTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
 export const MENU_BUTTON_TESTPAGE = 'Menu_Button_TestPage';
+
+/* E2E Testing Menu_Button 1 */
+export const MENU_BUTTON_TEST_COMPONENT = 'Menu_Button_Test_Component'; // A component on each specific test page
+export const MENU_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Menu_Button accessibility label';
+
+/* E2E Testing Menu_Button 2 */
+export const MENU_BUTTON_NO_A11Y_LABEL_COMPONENT = 'Menu_Button_No_A11y_label_Component';
+export const MENU_BUTTON_TEST_COMPONENT_LABEL = 'Test Menu_Button2 - No Accessibility Label'; // A component on each specific test page