@fluentui-react-native/tester 0.126.16 → 0.126.17

package/src/TestComponents/MenuButtonLegacy/NestedMenuButtonTest.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { Text, View, Switch } from 'react-native';
+import { Separator, MenuButton } from '@fluentui/react-native';
+import { menuItems, iconProps } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';
+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,113 @@
+import * as React from 'react';
+import { Separator, MenuButton, ContextualMenuProps } from '@fluentui/react-native';
+import { Text, View, Switch, Platform } from 'react-native';
+import { menuItems, iconProps } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';
+import { IconSourcesType } from '@fluentui-react-native/icon';
+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 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { MenuButtonItemProps } from '@fluentui/react-native';
+import { MENU_ITEM_1_COMPONENT } from '../../../../E2E/src/MenuButtonLegacy/consts';
+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,32 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { MenuButton } from '@fluentui/react-native';
+import { menuItems } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonV1TestStyles';
+
+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,68 @@
+import * as React from 'react';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { ContextualMenuProps } from '@fluentui/react-native';
+import { Text, View } from 'react-native';
+import { menuItems } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
+import {
+  MENUBUTTONV1_TEST_COMPONENT,
+  MENUBUTTONV1_ACCESSIBILITY_LABEL,
+  MENUBUTTONV1_NO_A11Y_LABEL_COMPONENT,
+  MENUBUTTONV1_TEST_COMPONENT_LABEL,
+} from '../../../../E2E/src/MenuButtonV1/consts';
+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>
+  );
+};

package/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { MENUBUTTONV1_TESTPAGE } from '../../../../E2E/src/MenuButtonV1/consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { StandardMenuButton } from './StandardMenuButtonTest';
+import { NestedMenuButton } from './NestedMenuButtonTest';
+import { MenuButtonV1E2ETest } from './MenuButtonV1E2ETest';
+import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
+
+const menuButtonSections: TestSection[] = [
+  {
+    name: 'Standard MenuButton',
+    testID: MENUBUTTONV1_TESTPAGE,
+    component: StandardMenuButton,
+  },
+  {
+    name: 'Nested MenuButton',
+    component: NestedMenuButton,
+  },
+  {
+    name: 'MenuButton with customized UI',
+    component: CustomizedMenuButton,
+  },
+  {
+    name: 'E2E Testing MenuButton',
+    component: MenuButtonV1E2ETest,
+  },
+];
+
+export const MenuButtonV1Test: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  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="MenuButtonV1 Test" description={description} sections={menuButtonSections} status={status} />;
+};

package/src/TestComponents/MenuButtonV1/NestedMenuButtonTest.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Text, View, Switch } from 'react-native';
+import { Separator } from '@fluentui/react-native';
+import { menuItems, iconProps } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+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 content="Press for Nested MenuButton" icon={rasterImageProps} menuItems={nestedMenuItems} onItemClick={onItemClick} />
+        </View>
+      </View>
+    </View>
+  );
+};