@fluentui-react-native/tester 0.63.4 → 0.64.0

package/src/FluentTester/TestComponents/Avatar/BasicAvatar.tsx

@@ -98,7 +98,7 @@ export const StandardUsage: FunctionComponent = () => {
       </View>
       <JSAvatar name="Richard" avatarColor="colorful" />
       <JSAvatar icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }} size={56} />
-      <JSAvatar icon={{ fontSource: { ...fontBuiltInProps } }} size={120} />
+      <JSAvatar accessibilityLabel="Fall-back Icon" accessibilityHint="A picture representing a user" size={120} />
       <JSAvatar
         active={active}
         activeAppearance={activeAppearance}
@@ -129,8 +129,10 @@ export const StandardUsage: FunctionComponent = () => {
             accessibilityLabel="SVG Icon"
             icon={iconProps}
             avatarColor={avatarColor}
+            badge={{ status: 'outOfOffice' }}
           />
           <JSAvatar
+            accessibilityHint="A picture representing a user"
             active={active}
             activeAppearance={activeAppearance}
             size={imageSize === undefinedText ? undefined : imageSize}
@@ -138,6 +140,7 @@ export const StandardUsage: FunctionComponent = () => {
             accessibilityLabel="SVG Icon"
             icon={{ svgSource: svgProps }}
             avatarColor={avatarColor}
+            badge={{ status: 'away' }}
             idForColor="15"
           />
         </>

package/src/FluentTester/TestComponents/Menu/E2EMenuTest.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui-react-native/menu';
+import {
+  MENUITEM_ACCESSIBILITY_LABEL,
+  MENUITEM_NO_A11Y_LABEL_COMPONENT,
+  MENUTRIGGER_TEST_COMPONENT,
+  MENUITEM_TEST_LABEL,
+  MENU_ON_CLOSE,
+  MENU_ON_OPEN,
+  MENUITEM_TEST_COMPONENT,
+  MENUPOPOVER_TEST_COMPONENT,
+} from './consts';
+
+export const E2EMenuTest: React.FunctionComponent = () => {
+  const [menuOpened, setMenuOpened] = React.useState(false);
+
+  const onOpenChange = React.useCallback(
+    (_e: any, isOpen: boolean) => {
+      setMenuOpened(isOpen);
+    },
+    [setMenuOpened],
+  );
+
+  return (
+    <Stack style={stackStyle}>
+      <Menu open={menuOpened} onOpenChange={onOpenChange}>
+        <MenuTrigger>
+          <Button testID={MENUTRIGGER_TEST_COMPONENT}>Test</Button>
+        </MenuTrigger>
+        <MenuPopover testID={MENUPOPOVER_TEST_COMPONENT}>
+          <MenuList>
+            <MenuItem testID={MENUITEM_TEST_COMPONENT} accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL} content="A plain MenuItem" />
+            <MenuItem disabled content="A second disabled plain MenuItem" />
+            <MenuItem testID={MENUITEM_NO_A11Y_LABEL_COMPONENT} content={MENUITEM_TEST_LABEL} />
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+
+      {menuOpened ? <Text testID={MENU_ON_OPEN}>Menu opened</Text> : <Text testID={MENU_ON_CLOSE}>Menu closed</Text>}
+    </Stack>
+  );
+};

package/src/FluentTester/TestComponents/Menu/MenuTest.tsx

@@ -14,6 +14,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { MENU_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2EMenuTest } from './E2EMenuTest';
 
 const MenuDefault: React.FunctionComponent = () => {
   return (
@@ -196,6 +197,10 @@ const menuSections: TestSection[] = [
     name: 'Menu Submenu',
     component: MenuSubMenu,
   },
+  {
+    name: 'Menu E2E',
+    component: E2EMenuTest,
+  },
 ];
 
 export const MenuTest: React.FunctionComponent = () => {
@@ -207,7 +212,8 @@ export const MenuTest: React.FunctionComponent = () => {
     androidStatus: 'Backlog',
   };
 
-  const description = '!!!!!!!TODO TODO TODO TODO!!!!!!!!';
+  const description =
+    'A Menu is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.';
 
   return <Test name="Menu Test" description={description} sections={menuSections} status={status}></Test>;
 };

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

@@ -1,2 +1,16 @@
 export const HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
 export const MENU_TESTPAGE = 'Menu_TestPage';
+
+export const MENUTRIGGER_TEST_COMPONENT = 'MenuTrigger_Test_Component';
+export const MENUPOPOVER_TEST_COMPONENT = 'MenuPopover_Test_Component';
+
+/* Test MenuItem 1 */
+export const MENUITEM_TEST_COMPONENT = 'MenuItem_Test_Component'; // A component on each specific test page
+export const MENUITEM_ACCESSIBILITY_LABEL = 'E2E testing MenuItem accessibility label';
+
+/* Test MenuItem 2 */
+export const MENUITEM_NO_A11Y_LABEL_COMPONENT = 'MenuItem_No_A11y_label_Component';
+export const MENUITEM_TEST_LABEL = 'Test MenuItem2 - No Accessibility Label'; // A component on each specific test page
+
+export const MENU_ON_OPEN = 'Menu_On_Open'; // For testing the open functionality of Menu
+export const MENU_ON_CLOSE = 'Menu_On_Close'; // For testing the open functionality of Menu