@fluentui-react-native/tester 0.47.3 → 0.50.0

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,18 +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 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 subtle checked content="Checked Subtle Toggle" style={commonTestStyles.vmargin} />
-      <ToggleButton 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/Callout/CalloutE2ETest.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ScreenRect, Text, View } from 'react-native';
+import { Button, Callout } from '@fluentui/react-native';
+import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL } from './consts';
+
+export const E2ECalloutTest: React.FunctionComponent = () => {
+  const [showCustomizedCallout, setShowCustomizedCallout] = React.useState(false);
+  const [isCustomizedCalloutVisible, setIsCustomizedCalloutVisible] = React.useState(false);
+
+  const toggleShowCustomizedCallout = React.useCallback(() => {
+    setShowCustomizedCallout(!showCustomizedCallout);
+    setIsCustomizedCalloutVisible(false);
+  }, [showCustomizedCallout, setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+
+  const onShowCustomizedCallout = React.useCallback(() => {
+    setIsCustomizedCalloutVisible(true);
+  }, [setIsCustomizedCalloutVisible]);
+
+  const onDismissCustomizedCallout = React.useCallback(() => {
+    setIsCustomizedCalloutVisible(false);
+    setShowCustomizedCallout(false);
+  }, [setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+
+  const myRect: ScreenRect = { screenX: 10, screenY: 10, width: 100, height: 100 };
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'column', paddingVertical: 5 }}>
+        <Button content="Press for Callout" onClick={toggleShowCustomizedCallout} testID={BUTTON_TO_OPEN_CALLOUT} />
+        <Text selectable={true}>
+          <Text>Visibility: </Text>
+          {isCustomizedCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
+        </Text>
+      </View>
+
+      {showCustomizedCallout && (
+        <Callout
+          anchorRect={myRect}
+          onDismiss={onDismissCustomizedCallout}
+          onShow={onShowCustomizedCallout}
+          accessibilityLabel={CALLOUT_ACCESSIBILITY_LABEL}
+          accessibilityRole="alert"
+          accessibilityOnShowAnnouncement="Be informed that a customized callout has been opened."
+        >
+          <View style={{ padding: 20, borderWidth: 2, borderColor: 'black' }}>
+            <Text>just some text so it does not take focus and is not empty.</Text>
+          </View>
+        </Callout>
+      )}
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -3,6 +3,7 @@ import { ScreenRect, Text, View, Switch, Picker, ScrollView } from 'react-native
 import { Button, Callout, Separator, IFocusable, RestoreFocusEvent, DismissBehaviors, StealthButton } from '@fluentui/react-native';
 import { CALLOUT_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2ECalloutTest } from './CalloutE2ETest';
 import { fluentTesterStyles } from '../Common/styles';
 
 const standardCallout: React.FunctionComponent = () => {
@@ -96,10 +97,10 @@ const standardCallout: React.FunctionComponent = () => {
   const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState<string | undefined>(undefined);
   const [selectedBorderColor, setSelectedBorderColor] = React.useState<string | undefined>(undefined);
 
-  const borderWidthDefault: string = 'default (1)';
-  const borderWidthSelections: (number | string)[] = ['default (1)', 2, 4, 10];
+  const borderWidthDefault: string = '1';
+  const borderWidthSelections: string[] = ['1', '2', '4', '10'];
 
-  const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<number | undefined>(undefined);
+  const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<string | undefined>(undefined);
 
   const [showScrollViewCallout, setShowScrollViewCalout] = React.useState(false);
   const [scrollviewContents, setScrollviewContents] = React.useState([1, 2, 3]);
@@ -111,7 +112,7 @@ const standardCallout: React.FunctionComponent = () => {
   }, [setScrollviewContents, scrollviewContents]);
 
   const addButton = React.useCallback(() => {
-    setScrollviewContents(arr => [...arr, 1]);
+    setScrollviewContents((arr) => [...arr, 1]);
   }, [setScrollviewContents, scrollviewContents]);
 
   return (
@@ -174,7 +175,7 @@ const standardCallout: React.FunctionComponent = () => {
             onValueChange={(width) => setSelectedBorderWidth(width === borderWidthDefault ? undefined : width)}
           >
             {borderWidthSelections.map((width, index) => (
-              <Picker.Item label={width.toString()} key={index} value={width} />
+              <Picker.Item label={width} key={index} value={width} />
             ))}
           </Picker>
         </View>
@@ -217,31 +218,27 @@ const standardCallout: React.FunctionComponent = () => {
             isBeakVisible: isBeakVisible,
             ...(selectedBorderColor && { borderColor: selectedBorderColor }),
             ...(selectedBackgroundColor && { backgroundColor: selectedBackgroundColor }),
-            ...(selectedBorderWidth && { borderWidth: selectedBorderWidth }),
+            ...(selectedBorderWidth && { borderWidth: parseInt(selectedBorderWidth) }),
             ...(calloutDismissBehaviors && { dismissBehaviors: calloutDismissBehaviors }),
-          }}>
-          {showScrollViewCallout ?
+          }}
+        >
+          {showScrollViewCallout ? (
             <View style={fluentTesterStyles.scrollViewContainer}>
               <ScrollView contentContainerStyle={fluentTesterStyles.scrollViewStyle} showsVerticalScrollIndicator={true}>
                 <StealthButton content="click to change anchor" onClick={toggleCalloutRef} />
                 <StealthButton content="Click to add a button" style={fluentTesterStyles.testListItem} onClick={addButton} />
                 <StealthButton content="Click to remove a button" style={fluentTesterStyles.testListItem} onClick={removeButton} />
-                  {scrollviewContents.map((value) => {
-                    return (
-                      <StealthButton
-                        key={value}
-                        content="Button"
-                        style={fluentTesterStyles.testListItem}
-                      />
-                    )
-                  })}
+                {scrollviewContents.map((value) => {
+                  return <StealthButton key={value} content="Button" style={fluentTesterStyles.testListItem} />;
+                })}
               </ScrollView>
             </View>
-          : //else
+          ) : (
+            //else
             <View style={{ padding: 20 }}>
               <Button content="click to change anchor" onClick={toggleCalloutRef} />
             </View>
-          }
+          )}
         </Callout>
       )}
     </View>
@@ -312,7 +309,11 @@ const calloutSections: TestSection[] = [
   {
     name: 'Customized Usage',
     component: customCallout,
-  }
+  },
+  {
+    name: 'E2E Testing Callout',
+    component: E2ECalloutTest,
+  },
 ];
 
 export const CalloutTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,13 @@
 export const HOMEPAGE_CALLOUT_BUTTON = 'Homepage_Callout_Button';
 export const CALLOUT_TESTPAGE = 'Callout_TestPage';
+
+/* Test Callout 1 */
+export const CALLOUT_TEST_COMPONENT = 'Callout_Test_Component'; // A component on each specific test page
+export const CALLOUT_ACCESSIBILITY_LABEL = 'E2E testing Callout accessibility label';
+
+/* Test Callout 2 */
+export const CALLOUT_NO_A11Y_LABEL_COMPONENT = 'Callout_No_A11y_label_Component';
+export const CALLOUT_TEST_COMPONENT_LABEL = 'Test Callout2 - No Accessibility Label'; // A component on each specific test page
+
+/* Button to open the Callout */
+export const BUTTON_TO_OPEN_CALLOUT = 'Open_Callout_Button_Component';

package/src/FluentTester/TestComponents/Checkbox/CheckboxE2ETest.tsx

@@ -0,0 +1,39 @@
+import { Checkbox, Text } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  CHECKBOX_TEST_COMPONENT,
+  CHECKBOX_ON_PRESS,
+  CHECKBOX_NO_A11Y_LABEL_COMPONENT,
+  CHECKBOX_TEST_COMPONENT_LABEL,
+  CHECKBOX_ACCESSIBILITY_LABEL,
+} from './consts';
+import { Stack } from '@fluentui-react-native/stack';
+
+export const E2ECheckboxTest: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Checkbox
+          accessibilityLabel={CHECKBOX_ACCESSIBILITY_LABEL}
+          disabled={false}
+          label="Testing accessibilityLabel"
+          testID={CHECKBOX_TEST_COMPONENT}
+          onChange={onClick}
+        />
+        <Checkbox label={CHECKBOX_TEST_COMPONENT_LABEL} testID={CHECKBOX_NO_A11Y_LABEL_COMPONENT} />
+        {checkboxPressed ? <Text testID={CHECKBOX_ON_PRESS}>Checkbox Selected</Text> : null}
+      </Stack>
+    </View>
+  );
+};

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { View, TextInput, TextStyle } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { CHECKBOX_TESTPAGE } from './consts';
+import { E2ECheckboxTest } from './CheckboxE2ETest';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 function onChangeUncontrolled(isChecked: boolean) {
@@ -157,6 +158,10 @@ const checkboxSections: TestSection[] = [
     name: 'Token Customized Checkboxes',
     component: tokenCheckbox,
   },
+  {
+    name: 'Checkbox for E2E Testing',
+    component: E2ECheckboxTest,
+  },
 ];
 
 export const CheckboxTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,12 @@
 export const HOMEPAGE_CHECKBOX_BUTTON = 'Homepage_Checkbox_Button';
 export const CHECKBOX_TESTPAGE = 'Checkbox_TestPage';
+
+/* Test Checkbox 1 */
+export const CHECKBOX_TEST_COMPONENT = 'Checkbox_Test_Component'; // A component on each specific test page
+export const CHECKBOX_ACCESSIBILITY_LABEL = 'E2E testing Checkbox accessibility label';
+
+/* Test Checkbox 2 */
+export const CHECKBOX_NO_A11Y_LABEL_COMPONENT = 'Checkbox_No_A11y_label_Component';
+export const CHECKBOX_TEST_COMPONENT_LABEL = 'Test Checkbox2 - No Accessibility Label'; // A component on each specific test page
+
+export const CHECKBOX_ON_PRESS = 'Checkbox_On_Press'; // For testing the press functionality on a Checkbox

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 = () => {