@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Menu/MenuTriggerCallbacks.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import type { ColorValue } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { Stack } from '@fluentui-react-native/stack';
+import Svg, { Path } from 'react-native-svg';
+
+import { stackStyle } from '../Common/styles';
+
+export const MenuTriggerOnClickCallback: React.FunctionComponent = () => {
+  const [counter, setCounter] = React.useState<number>(0);
+  const onClick = React.useCallback(() => {
+    setCounter(counter + 1);
+  }, [counter, setCounter]);
+
+  return (
+    <Stack style={stackStyle}>
+      <Menu>
+        <MenuTrigger>
+          <Button onClick={onClick}>{'Click to increase counter: ' + counter}</Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>A plain MenuItem</MenuItem>
+            <MenuItem disabled>A second disabled plain MenuItem</MenuItem>
+            <MenuItem>A third plain MenuItem</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Stack>
+  );
+};
+
+export const MenuTriggerHoverCallback: React.FunctionComponent = () => {
+  const [iconColor, setIconColor] = React.useState<ColorValue>('red');
+  const onHoverIn = React.useCallback(() => {
+    setIconColor('blue');
+  }, [setIconColor]);
+  const onHoverOut = React.useCallback(() => {
+    setIconColor('red');
+  }, [setIconColor]);
+  const chevron = (
+    <Svg width="12" height="16" viewBox="0 0 11 6" color={iconColor}>
+      <Path
+        fill="currentColor"
+        d="M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z"
+      />
+    </Svg>
+  );
+
+  return (
+    <Stack style={stackStyle}>
+      <Menu>
+        <MenuTrigger>
+          <Button onHoverIn={onHoverIn} onHoverOut={onHoverOut}>
+            Test
+            {chevron}
+          </Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>A plain MenuItem</MenuItem>
+            <MenuItem disabled>A second disabled plain MenuItem</MenuItem>
+            <MenuItem>A third plain MenuItem</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Stack>
+  );
+};

package/src/TestComponents/Menu/index.ts

@@ -0,0 +1 @@
+export * from './MenuTest';

package/src/TestComponents/MenuButtonLegacy/CustomizedMenuButtonTest.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import { MenuButton } from '@fluentui/react-native';
+
+import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonLegacyTestStyles';
+import { menuItems } from './testData';
+
+const StyledMenuButton = MenuButton.customize({
+  button: {
+    borderRadius: 4,
+    backgroundColor: '#0095ff',
+    borderWidth: 0,
+    color: '#fff',
+    variant: 'heroSemibold',
+    fontFamily: 'Georgia',
+  },
+  contextualMenu: { backgroundColor: '#a9dbff' },
+});
+
+export const CustomizedMenuButton: React.FunctionComponent = () => {
+  return (
+    <View>
+      <View style={viewWrapperStyle}>
+        <View style={columnStyle}>
+          <View style={rowStyle}>
+            <Text>MenuButton with customized UI</Text>
+          </View>
+        </View>
+      </View>
+      <StyledMenuButton content="styled MenuButton" menuItems={menuItems} />
+    </View>
+  );
+};

package/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyE2ETest.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import type { ContextualMenuProps } from '@fluentui/react-native';
+import { MenuButton } from '@fluentui/react-native';
+import {
+  MENU_BUTTON_TEST_COMPONENT,
+  MENU_BUTTON_ACCESSIBILITY_LABEL,
+  MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+  MENU_BUTTON_TEST_COMPONENT_LABEL,
+} from '@fluentui-react-native/e2e-testing';
+
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';
+import { menuItems } from './testData';
+import { testProps } from '../Common/TestProps';
+
+export const MenuButtonLegacyE2ETest: 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}
+                accessibilityLabel={MENU_BUTTON_ACCESSIBILITY_LABEL}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENU_BUTTON_TEST_COMPONENT)}
+              />
+            </View>
+          </View>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content={MENU_BUTTON_TEST_COMPONENT_LABEL}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENU_BUTTON_NO_A11Y_LABEL_COMPONENT)}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTest.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { MENU_BUTTON_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
+import { MenuButtonLegacyE2ETest } from './MenuButtonLegacyE2ETest';
+import { NestedMenuButton } from './NestedMenuButtonTest';
+import { StandardMenuButton } from './StandardMenuButtonTest';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const menuButtonSections: TestSection[] = [
+  {
+    name: 'Standard MenuButton',
+    testID: MENU_BUTTON_TESTPAGE,
+    component: StandardMenuButton,
+  },
+  {
+    name: 'Nested MenuButton',
+    component: NestedMenuButton,
+  },
+  {
+    name: 'MenuButton with customized UI',
+    component: CustomizedMenuButton,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'MenuButton for E2E Testing',
+    component: MenuButtonLegacyE2ETest,
+  },
+];
+
+export const MenuButtonLegacyTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+
+  const description =
+    'MenuButton is a component which contains ContextualMenu and Button components. This control combines and simplifies the API for customers.\nClicking on MenuButton opens ContextualMenu. It can have Submenu. But selection checks and a beak are not implemented.';
+
+  return (
+    <Test name="MenuButton Legacy Test" description={description} sections={menuButtonSections} status={status} e2eSections={e2eSections} />
+  );
+};

package/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTestStyles.ts

@@ -0,0 +1,5 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+export const viewWrapperStyle: ViewStyle = { flexDirection: 'row', paddingVertical: 5 };
+export const columnStyle: ViewStyle = { flexDirection: 'column', paddingHorizontal: 5 };
+export const rowStyle: ViewStyle = { flexDirection: 'row' };
+export const textColor: TextStyle = { color: 'blue' };

package/src/TestComponents/MenuButtonLegacy/NestedMenuButtonTest.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { Text, View, Switch } from 'react-native';
+
+import { Separator, MenuButton } from '@fluentui/react-native';
+
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';
+import { menuItems, iconProps } from './testData';
+import { testImage } from '../Common/iconExamples';
+
+export const NestedMenuButton: React.FunctionComponent = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+
+  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 onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+
+  const [showSubmenu, setShowSubmenu] = React.useState(false);
+  const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
+  const [lastSubmenuItemClicked, setSubmenuLastItemClicked] = React.useState(null);
+
+  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 onSubmenuItemClick = React.useCallback(
+    (key) => {
+      setSubmenuLastItemClicked(key);
+    },
+    [setSubmenuLastItemClicked],
+  );
+
+  const nestedMenuItems = [
+    ...menuItems,
+    {
+      hasSubmenu: true,
+      itemKey: '4',
+      text: 'SubmenuItem svg icon',
+      componentRef: React.useRef(null),
+      icon: iconProps,
+      onHoverIn: toggleShowSubmenu,
+      showSubmenu,
+      submenuProps: {
+        onShow: onShowSubmenu,
+        setShowMenu: toggleShowSubmenu,
+        onDismiss: onDismissSubmenu,
+        onItemClick: onSubmenuItemClick,
+      },
+      submenuItems: [
+        {
+          icon: iconProps,
+          text: 'SubmenuItem svg icon',
+          itemKey: '1',
+        },
+        {
+          itemKey: '2',
+          text: 'SubmenuItem 2',
+          disabled: true,
+        },
+        {
+          itemKey: '3',
+          text: 'SubmenuItem 3',
+        },
+      ],
+    },
+    {
+      itemKey: '5',
+      text: 'Menu Item',
+    },
+    {
+      hasSubmenu: true,
+      itemKey: '6',
+      text: 'SubmenuItem',
+      componentRef: React.useRef(null),
+      submenuProps: {
+        onItemClick: onSubmenuItemClick,
+      },
+      submenuItems: [
+        {
+          text: 'SubmenuItem 1',
+          itemKey: '1',
+        },
+        {
+          itemKey: '2',
+          text: 'SubmenuItem 2',
+        },
+        {
+          itemKey: '3',
+          text: 'SubmenuItem 3',
+        },
+      ],
+    },
+  ];
+
+  const rasterImageProps = {
+    rasterImageSource: {
+      src: testImage,
+    },
+    width: 12,
+    height: 12,
+  };
+
+  return (
+    <View>
+      <View style={viewWrapperStyle}>
+        <View style={columnStyle}>
+          <View style={rowStyle}>
+            <Text>Should Focus on Mount</Text>
+            <Switch value={focusOnMount} onValueChange={toggleFocusOnMount} />
+          </View>
+
+          <View style={rowStyle}>
+            <Text>Should Focus on Container</Text>
+            <Switch value={focusOnContainer} onValueChange={toggleFocusOnContainer} />
+          </View>
+        </View>
+
+        <Separator vertical />
+
+        <View style={columnStyle}>
+          <Text>
+            <Text>Last Menu Item Clicked: </Text>
+            {lastMenuItemClicked > 0 ? <Text style={textColor}>{lastMenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
+          </Text>
+          <Text>
+            <Text>Last Submenu Item Clicked: </Text>
+            {lastSubmenuItemClicked > 0 ? <Text style={textColor}>{lastSubmenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
+          </Text>
+          <MenuButton
+            startIcon={rasterImageProps}
+            content="Press for Nested MenuButton"
+            menuItems={nestedMenuItems}
+            onItemClick={onItemClick}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/MenuButtonLegacy/StandardMenuButtonTest.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { Text, View, Switch, Platform } from 'react-native';
+
+import type { ContextualMenuProps } from '@fluentui/react-native';
+import { Separator, MenuButton } from '@fluentui/react-native';
+import type { IconSourcesType } from '@fluentui-react-native/icon';
+
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';
+import { menuItems, iconProps } from './testData';
+import { testImage } from '../Common/iconExamples';
+
+export const StandardMenuButton: React.FunctionComponent = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+
+  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 onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+
+  const contextualMenuProps: ContextualMenuProps = {
+    accessibilityLabel: 'MenuButton',
+    shouldFocusOnMount: focusOnMount,
+    shouldFocusOnContainer: focusOnContainer,
+  };
+
+  const iconToShow: IconSourcesType = Platform.select({
+    macos: testImage, //GH #931, macOS MenuButton only supports showing PNG icons
+    default: iconProps,
+  });
+
+  return (
+    <View>
+      <View style={viewWrapperStyle}>
+        <View style={columnStyle}>
+          <View style={rowStyle}>
+            <Text>Should Focus on Mount</Text>
+            <Switch value={focusOnMount} onValueChange={toggleFocusOnMount} />
+          </View>
+
+          <View style={rowStyle}>
+            <Text>Should Focus on Container</Text>
+            <Switch value={focusOnContainer} onValueChange={toggleFocusOnContainer} />
+          </View>
+        </View>
+
+        <Separator vertical />
+
+        <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"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>MenuButton with icon</Text>
+              <MenuButton
+                startIcon={iconToShow}
+                content="MenuButton"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>MenuButton with only icon</Text>
+              <MenuButton startIcon={iconToShow} menuItems={menuItems} onItemClick={onItemClick} contextualMenu={contextualMenuProps} />
+              <Text>Disabled MenuButton</Text>
+              <MenuButton disabled content="Disabled MenuButton" menuItems={menuItems} />
+            </View>
+            <Separator vertical />
+            <View style={columnStyle}>
+              <MenuButton
+                primary
+                content="Primary MenuButton"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>Primary MenuButton with icon</Text>
+              <MenuButton
+                primary
+                startIcon={iconToShow}
+                content="Primary MenuButton"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>Primary MenuButton with only icon</Text>
+              <MenuButton
+                primary
+                startIcon={iconToShow}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
+              <Text>Primary Disabled MenuButton</Text>
+              <MenuButton primary disabled content="Disabled Primary MenuButton" menuItems={menuItems} />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/MenuButtonLegacy/index.ts

@@ -0,0 +1 @@
+export * from './MenuButtonLegacyTest';

package/src/TestComponents/MenuButtonLegacy/testData.ts

@@ -0,0 +1,24 @@
+import type { MenuButtonItemProps } from '@fluentui/react-native';
+import { MENU_ITEM_1_COMPONENT } from '@fluentui-react-native/e2e-testing';
+
+import { svgProps, testImage } from '../Common/iconExamples';
+
+export const menuItems: MenuButtonItemProps[] = [
+  {
+    itemKey: '1',
+    text: 'MenuItem 1',
+    icon: testImage,
+    testID: MENU_ITEM_1_COMPONENT,
+  },
+  {
+    itemKey: '2',
+    text: 'MenuItem 2',
+  },
+  {
+    itemKey: '3',
+    text: 'MenuItem 3',
+    disabled: true,
+  },
+];
+
+export const iconProps = { svgSource: svgProps, width: 12, height: 12 };

package/src/TestComponents/MenuButtonV1/CustomizedMenuButtonTest.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import { MenuButton } from '@fluentui/react-native';
+
+import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonV1TestStyles';
+import { menuItems } from './testData';
+
+const StyledMenuButton = MenuButton.customize({
+  button: {
+    borderRadius: 4,
+    backgroundColor: '#0095ff',
+    borderWidth: 0,
+    color: '#fff',
+    variant: 'heroSemibold',
+    fontFamily: 'Georgia',
+  },
+  contextualMenu: { backgroundColor: '#a9dbff' },
+});
+
+export const CustomizedMenuButton: React.FunctionComponent = () => {
+  return (
+    <View>
+      <View style={viewWrapperStyle}>
+        <View style={columnStyle}>
+          <View style={rowStyle}>
+            <Text>MenuButton with customized UI</Text>
+          </View>
+        </View>
+      </View>
+      <StyledMenuButton content="styled MenuButton" menuItems={menuItems} />
+    </View>
+  );
+};

package/src/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import type { ContextualMenuProps } from '@fluentui/react-native';
+import {
+  MENUBUTTONV1_TEST_COMPONENT,
+  MENUBUTTONV1_ACCESSIBILITY_LABEL,
+  MENUBUTTONV1_NO_A11Y_LABEL_COMPONENT,
+  MENUBUTTONV1_TEST_COMPONENT_LABEL,
+} from '@fluentui-react-native/e2e-testing';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
+import { menuItems } from './testData';
+import { testProps } from '../Common/TestProps';
+
+export const MenuButtonV1E2ETest: 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}
+                accessibilityLabel={MENUBUTTONV1_ACCESSIBILITY_LABEL}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENUBUTTONV1_TEST_COMPONENT)}
+              />
+            </View>
+          </View>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content={MENUBUTTONV1_TEST_COMPONENT_LABEL}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENUBUTTONV1_NO_A11Y_LABEL_COMPONENT)}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};