@fluentui-react-native/tester 0.48.1 → 0.50.2

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

@@ -16,17 +16,56 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
     <View style={[stackStyle, commonTestStyles.view]}>
       {svgIconsEnabled && (
         <>
-          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Small Button with icon
+          </Button>
+          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Medium Button with icon
+          </Button>
+          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Large Button with icon
+          </Button>
         </>
       )}
-      <Button size="small" content="Small" style={commonTestStyles.vmargin} />
-      <Button size="medium" content="Medium" style={commonTestStyles.vmargin} />
-      <Button size="large" content="Large" style={commonTestStyles.vmargin} />
-      <CompoundButton size="small" content="Small" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton size="medium" content="Medium" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton size="large" content="Large" secondaryContent="Compound" style={commonTestStyles.vmargin} />
+      <Button size="small" style={commonTestStyles.vmargin}>
+        Small
+      </Button>
+      <Button size="medium" style={commonTestStyles.vmargin}>
+        Medium
+      </Button>
+      <Button size="large" style={commonTestStyles.vmargin}>
+        Large
+      </Button>
+      <Button loading size="small" style={commonTestStyles.vmargin}>
+        Loading Button Small
+      </Button>
+      <Button loading size="medium" style={commonTestStyles.vmargin}>
+        Loading Button Medium
+      </Button>
+      <Button loading size="large" style={commonTestStyles.vmargin}>
+        Loading Button Large
+      </Button>
+      <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <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>
     </View>
   );
 };

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

@@ -1,17 +1,23 @@
 import * as React from 'react';
 import { ButtonVariantTest } from './ButtonVariantTestSection';
 import { ToggleButtonTest } from './ToggleButtonTestSection';
-import { ExperimentalButtonTestPageId } from './consts';
+import { EXPERIMENTAL_BUTTON_TEST_PAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { ButtonIconTest } from './ButtonIconTestSection';
 import { ButtonSizeTest } from './ButtonSizeTestSection';
+import { ButtonShapeTest } from './ButtonShapeTestSection';
+import { E2EButtonExperimentalTest } from './E2EButtonTest';
 
 const buttonSections: TestSection[] = [
   {
     name: 'Button Variants',
-    testID: ExperimentalButtonTestPageId,
+    testID: EXPERIMENTAL_BUTTON_TEST_PAGE,
     component: ButtonVariantTest,
   },
+  {
+    name: 'Button Shape',
+    component: ButtonShapeTest,
+  },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
@@ -24,6 +30,10 @@ const buttonSections: TestSection[] = [
     name: 'Sizes',
     component: ButtonSizeTest,
   },
+  {
+    name: 'E2E Button Testing',
+    component: E2EButtonExperimentalTest,
+  },
 ];
 
 export const ExperimentalButtonTest: React.FunctionComponent = () => {

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

@@ -1,6 +1,6 @@
-import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
@@ -13,21 +13,39 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
 
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
-      <Button content="Default" style={commonTestStyles.vmargin} />
-      <Button appearance="primary" content="Primary" style={commonTestStyles.vmargin} />
-      <Button appearance="subtle" content="Subtle" style={commonTestStyles.vmargin} />
-      <Button block content="Block" style={commonTestStyles.vmargin} />
-      <Button appearance="primary" block content="Block Primary" style={commonTestStyles.vmargin} />
-      <Button appearance="subtle" block content="Block Subtle" style={commonTestStyles.vmargin} />
-      <CompoundButton content="Default" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton appearance="primary" content="Primary" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton appearance="subtle" content="Subtle" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      {Platform.OS !== 'windows' && (
-        <>
-          <Button fab icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin} />
-          <Button fab icon={{ svgSource: svgProps, width: 20, height: 20 }} content="FAB" style={commonTestStyles.vmargin} />
-        </>
-      )}
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Disabled
+      </Button>
+      <Button appearance="primary" style={commonTestStyles.vmargin}>
+        Primary
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button loading>Loading Button</Button>
+      <Button block style={commonTestStyles.vmargin}>
+        Block
+      </Button>
+      <Button appearance="primary" block style={commonTestStyles.vmargin}>
+        Block Primary
+      </Button>
+      <Button appearance="subtle" block style={commonTestStyles.vmargin}>
+        Block Subtle
+      </Button>
+      <CompoundButton secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Default
+      </CompoundButton>
+      <CompoundButton appearance="primary" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Primary
+      </CompoundButton>
+      <CompoundButton appearance="subtle" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Subtle
+      </CompoundButton>
+      <FAB icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin} />
+      <FAB icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin}>
+        FAB
+      </FAB>
     </View>
   );
 };

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

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Text } from '@fluentui/react-native';
+import { Button } from '@fluentui-react-native/experimental-button';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  BUTTONEXPERIMENTAL_TEST_COMPONENT,
+  BUTTONEXPERIMENTAL_ON_PRESS,
+  BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT,
+  BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL,
+  BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2EButtonExperimentalTest: 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={BUTTONEXPERIMENTAL_TEST_COMPONENT}
+          onClick={onClick}
+          accessibilityLabel={BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL}
+        />
+        <Button content={BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL} testID={BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        {buttonPressed ? <Text testID={BUTTONEXPERIMENTAL_ON_PRESS}>Button Pressed</Text> : null}
+      </Stack>
+    </View>
+  );
+};

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

@@ -22,24 +22,35 @@ export const ToggleButtonTest: React.FunctionComponent = () => {
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
       <View style={styles.row}>
-        <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} content="Default Toggle" style={commonTestStyles.vmargin} />
+        <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} style={commonTestStyles.vmargin}>
+          Default Toggle
+        </ToggleButton>
         <Checkbox checked={defaultChecked} label="Default Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
       </View>
-      <ToggleButton checked content="Checked Default Toggle" style={commonTestStyles.vmargin} />
-      <ToggleButton checked={false} content="Unchecked Default Toggle" style={commonTestStyles.vmargin} />
-      {/* <ToggleButton primary content="Primary Toggle" /> */}
+      <ToggleButton checked style={commonTestStyles.vmargin}>
+        Checked Default Toggle
+      </ToggleButton>
+      <ToggleButton checked={false} style={commonTestStyles.vmargin}>
+        Unchecked Default Toggle
+      </ToggleButton>
+      <ToggleButton appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Toggle
+      </ToggleButton>
+      <ToggleButton defaultChecked appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Toggle
+      </ToggleButton>
       <View style={styles.row}>
-        <ToggleButton
-          appearance="subtle"
-          onClick={onGhostClicked}
-          checked={subtleChecked}
-          content="Subtle Toggle"
-          style={commonTestStyles.vmargin}
-        />
+        <ToggleButton appearance="subtle" onClick={onGhostClicked} checked={subtleChecked} style={commonTestStyles.vmargin}>
+          Subtle Toggle
+        </ToggleButton>
         <Checkbox checked={subtleChecked} label="Subtle Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
       </View>
-      <ToggleButton appearance="subtle" checked content="Checked Subtle Toggle" style={commonTestStyles.vmargin} />
-      <ToggleButton appearance="subtle" checked={false} content="Unchecked Subtle Toggle" style={commonTestStyles.vmargin} />
+      <ToggleButton appearance="subtle" checked style={commonTestStyles.vmargin}>
+        Checked Subtle Toggle
+      </ToggleButton>
+      <ToggleButton appearance="subtle" checked={false} style={commonTestStyles.vmargin}>
+        Unchecked Subtle Toggle
+      </ToggleButton>
     </View>
   );
 };

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

@@ -1,2 +1,12 @@
 export const HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL = 'Homepage_Button_ButtonExperimental'; // Button on the homepage that navigates to the selected test page
-export const ExperimentalButtonTestPageId = 'ButtonExperimental_TestPage'; // A component on each specific test page.
+export const EXPERIMENTAL_BUTTON_TEST_PAGE = 'ButtonExperimental_TestPage'; // A component on each specific test page.
+
+/* Test Button 1 */
+export const BUTTONEXPERIMENTAL_TEST_COMPONENT = 'Button_Test_Component'; // A component on each specific test page
+export const BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility label';
+
+/* Test Button 2 */
+export const BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT = 'Button_No_A11y_label_Component';
+export const BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL = 'Test Button2 - No Accessibility Label'; // A component on each specific test page
+
+export const BUTTONEXPERIMENTAL_ON_PRESS = 'Button_On_Press'; // For testing the press functionality on a button

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

@@ -0,0 +1,26 @@
+import { Platform } from 'react-native';
+import { SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
+import TestSvg from '../Button/test.svg';
+
+export const svgProps: SvgIconProps = {
+  src: TestSvg,
+  viewBox: '0 0 500 500',
+};
+
+const testTtf = require('../Button/Font Awesome 5 Free-Solid-900.otf');
+
+export const fontProps: FontIconProps = Platform.select({
+  macos: {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 12,
+  },
+  default: {
+    fontFamily: `Font Awesome 5 Free`,
+    fontSrcFile: testTtf,
+    codepoint: 0xf083,
+    fontSize: 12,
+  },
+});
+
+export const testImage = require('../Button/icon_24x24.png');

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