@fluentui-react-native/tester 0.47.2 → 0.49.0

package/src/E2E/{BootPage/pages/BootTestPage.win.ts → common/NavigateAppPage.ts}

@@ -1,25 +1,27 @@
-import { HOMEPAGE_CHECKBOX_BUTTON } from '../../../FluentTester/TestComponents/Checkbox/consts';
-import { HOMEPAGE_BUTTON_BUTTON } from '../../../FluentTester/TestComponents/Button/consts';
-import { HOMEPAGE_CALLOUT_BUTTON } from '../../../FluentTester/TestComponents/Callout/consts';
-import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../../FluentTester/TestComponents/ContextualMenu/consts';
-import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../../FluentTester/TestComponents/TabsExperimental/consts';
-import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../../FluentTester/TestComponents/FocusTrapZone/consts';
-import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../../FluentTester/TestComponents/FocusZone/consts';
-import { HOMEPAGE_ICON_BUTTON } from '../../../FluentTester/TestComponents/Icon/consts';
-import { HOMEPAGE_LINK_BUTTON } from '../../../FluentTester/TestComponents/Link/consts';
-import { HOMEPAGE_PERSONA_BUTTON } from '../../../FluentTester/TestComponents/Persona/consts';
-import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../../FluentTester/TestComponents/PersonaCoin/consts';
-import { HOMEPAGE_PRESSABLE_BUTTON } from '../../../FluentTester/TestComponents/Pressable/consts';
-import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../../FluentTester/TestComponents/RadioGroup/consts';
-import { HOMEPAGE_SEPARATOR_BUTTON } from '../../../FluentTester/TestComponents/Separator/consts';
-import { HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts';
-import { HOMEPAGE_TEXT_BUTTON } from '../../../FluentTester/TestComponents/Text/consts';
-import { HOMEPAGE_TABS_BUTTON } from '../../../FluentTester/TestComponents/Tabs/consts';
-import { HOMEPAGE_THEME_BUTTON } from '../../../FluentTester/TestComponents/Theme/consts';
-import { BASE_TESTPAGE } from '../../../FluentTester/TestComponents/Common/consts';
-import { By, BasePage } from '../../common/BasePage';
-
-class BootTestPage extends BasePage {
+import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
+import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
+import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from '../../FluentTester/TestComponents/ButtonExperimental/consts';
+import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
+import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
+import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
+import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents/FocusTrapZone/consts';
+import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
+import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
+import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
+import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
+import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
+import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
+import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
+import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
+import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
+import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
+import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
+import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
+import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
+import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
+import { By, BasePage } from './BasePage';
+
+class NavigateAppPage extends BasePage {
   clickAndGoToButtonPage() {
     this.buttonPage.click();
   }
@@ -52,6 +54,10 @@ class BootTestPage extends BasePage {
     this.linkPage.click();
   }
 
+  clickAndGoToMenuButtonPage() {
+    this.menuButtonPage.click();
+  }
+
   clickAndGoToPersonaPage() {
     this.personaPage.click();
   }
@@ -88,6 +94,10 @@ class BootTestPage extends BasePage {
     this.themePage.click();
   }
 
+  clickAndGoToExperimentalButtonPage() {
+    this.experimentalButtonPage.click();
+  }
+
   clickAndGoToExperimentalTabsPage() {
     this.experimentalTabsPage.click();
   }
@@ -132,6 +142,10 @@ class BootTestPage extends BasePage {
     return By(HOMEPAGE_LINK_BUTTON);
   }
 
+  private get menuButtonPage() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+
   private get personaPage() {
     return By(HOMEPAGE_PERSONA_BUTTON);
   }
@@ -168,9 +182,13 @@ class BootTestPage extends BasePage {
     return By(HOMEPAGE_THEME_BUTTON);
   }
 
+  private get experimentalButtonPage() {
+    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
+  }
+
   private get experimentalTabsPage() {
     return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
   }
 }
 
-export default new BootTestPage();
+export default new NavigateAppPage();

package/src/E2E/common/consts.ts

@@ -0,0 +1,15 @@
+/* Accessibility Role Control Types - https://docs.microsoft.com/en-us/windows/win32/winauto/uiauto-controltype-ids */
+export const BUTTON_A11Y_ROLE = 'ControlType.Button';
+export const CALLOUT_A11Y_ROLE = 'ControlType.Group';
+export const CHECKBOX_A11Y_ROLE = 'ControlType.CheckBox';
+export const LINK_A11Y_ROLE = 'ControlType.HyperLink';
+export const MENUBUTTON_A11Y_ROLE = 'ControlType.Button';
+export const RADIOBUTTON_A11Y_ROLE = 'ControlType.RadioButton';
+export const RADIOGROUP_A11Y_ROLE = 'ControlType.List';
+export const TAB_A11Y_ROLE = 'ControlType.Tab';
+export const TABITEM_A11Y_ROLE = 'ControlType.TabItem';
+export const TEXT_A11Y_ROLE = 'ControlType.Text';
+
+/* Jasmine Timeouts */
+export const BOOT_APP_TIMEOUT = 60000;
+export const PAGE_TIMEOUT = 15000;

package/src/FluentTester/FluentTester.tsx

@@ -115,12 +115,13 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
         <View style={fluentTesterStyles.header}>
           {/* on iOS, display a back Button */}
           <Button
-            subtle
-            content="‹ Back"
+            appearance="subtle"
             style={{ alignSelf: 'flex-start', display: Platform.OS === 'ios' ? 'flex' : 'none' }}
             onClick={onBackPress}
             disabled={onTestListView}
-          />
+          >
+            ‹ Back
+          </Button>
           <ThemePickers />
         </View>
       </View>
@@ -137,14 +138,15 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
           {sortedTestComponents.map((description, index) => {
             return (
               <Button
-                subtle
+                appearance="subtle"
                 key={index}
                 disabled={index == selectedTestIndex}
-                content={description.name}
                 onClick={() => setSelectedTestIndex(index)}
                 style={fluentTesterStyles.testListItem}
                 testID={description.testPage}
-              />
+              >
+                {description.name}
+              </Button>
             );
           })}
         </ScrollView>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar, Size } from '@fluentui-react-native/experimental-avatar';
+import { Avatar, Size } from '@fluentui-react-native/experimental-avatar/';
 import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { AVATAR_TESTPAGE } from './consts';

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

@@ -0,0 +1,108 @@
+import React, { useState, useCallback, FunctionComponent } from 'react';
+import { AvatarSize, AvatarColor, JSAvatar, AvatarPresence } from '@fluentui-react-native/experimental-avatar';
+import { Switch, View, Text, Picker, ColorValue } from 'react-native';
+import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
+
+type WithUndefined<T> = T | typeof undefinedText;
+
+const allSizes: WithUndefined<AvatarSize>[] = [
+  undefinedText,
+  'size8',
+  'size24',
+  'size32',
+  'size40',
+  'size48',
+  'size56',
+  'size72',
+  'size100',
+  'size120',
+];
+
+const allColors: WithUndefined<AvatarColor>[] = [
+  undefinedText,
+  'cornflower',
+  'blue',
+  'royalBlue',
+  'teal',
+  'forest',
+  'darkGreen',
+  'berry',
+  'hotPink',
+  'grape',
+  'purple',
+  'pumpkin',
+  'red',
+  'burgundy',
+  'orchid',
+  'brass',
+  'darkRed',
+  'beige',
+  'platinum',
+  'steel',
+  'brown',
+];
+
+const allPresences: WithUndefined<AvatarPresence>[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
+
+const StyledPicker = (props) => {
+  const { prompt, selected, onChange, collection } = props;
+  const theme = useTheme();
+  const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
+  return (
+    <Picker prompt={prompt} style={pickerStyles} selectedValue={selected} onValueChange={onChange}>
+      {collection.map((value, index) => (
+        <Picker.Item label={value} key={index} value={value} />
+      ))}
+    </Picker>
+  );
+};
+
+export const StandardUsage: FunctionComponent = () => {
+  const tokens: JSAvatarTokens = {};
+  const [isSquare, setSquare] = useState(false);
+  const [showImage, setShowImage] = useState(true);
+  const [imageSize, setImageSize] = useState<WithUndefined<AvatarSize>>('size72');
+  const [coinColor, setCoinColor] = useState<WithUndefined<AvatarColor>>('brass');
+  const [presence, setPresence] = useState<WithUndefined<AvatarPresence>>('online');
+
+  const onSizeChange = useCallback((value) => setImageSize(value), []);
+  const onColorChange = useCallback((value) => setCoinColor(value), []);
+  const onPresenceChange = useCallback((value) => setPresence(value), []);
+
+  const theme = useTheme();
+  const textStyles = { color: theme.colors.inputText as ColorValue };
+
+  tokens.backgroundColor = coinColor;
+
+  return (
+    <View style={commonStyles.root}>
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text style={textStyles}>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+        <View style={commonStyles.switch}>
+          <Text style={textStyles}>Set square Avatar</Text>
+          <Switch value={isSquare} onValueChange={() => setSquare(!isSquare)} />
+        </View>
+
+        <StyledPicker prompt="Size" selected={imageSize} onChange={onSizeChange} collection={allSizes} />
+        <StyledPicker prompt="Coin color" selected={coinColor} onChange={onColorChange} collection={allColors} />
+        <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
+      </View>
+
+      <JSAvatar
+        size={imageSize === undefinedText ? undefined : imageSize}
+        initials="SN"
+        shape={isSquare ? 'square' : 'circular'}
+        imageDescription="Photo of Satya Nadella"
+        presence={presence === undefinedText ? undefined : presence}
+        imageUrl={showImage ? satyaPhotoUrl : undefined}
+        coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { JSAvatar, IconAlignment, JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
+import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
+import { Slider } from '../Common/Slider';
+import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { AlignmentPicker } from '../Common/AlignmentPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [coinColor, setCoinColor] = React.useState<string>();
+  const [textColor, setTextColor] = React.useState<string>();
+  const [physicalSize, setPhysicalSize] = React.useState<number>(80);
+  const [iconSize, setIconSize] = React.useState<number>(24);
+  const [iconStrokeWidth, setIconStrokeWidth] = React.useState<number>(2);
+  const [iconStrokeColor, setIconStrokeColor] = React.useState<string>(undefined);
+  const [initialsSize, setInitialsSize] = React.useState<number>(14);
+  const [horizontalAlignment, setHorizontalAlignment] = React.useState<IconAlignment>();
+  const [verticalAlignment, setVerticalAlignment] = React.useState<IconAlignment>();
+
+  const [ringColor, setRingColor] = React.useState<string>('red');
+  const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
+  const [showRing, setShowRing] = React.useState<boolean>(true);
+  const [transparent, setTransparent] = React.useState<boolean>(false);
+
+  const theme = useTheme();
+  const textBoxBorderStyle: TextStyle = {
+    borderColor: theme.colors.inputBorder,
+  };
+
+  const tokens: JSAvatarTokens = {};
+  if (coinColor) {
+    tokens.backgroundColor = coinColor;
+  }
+  if (textColor) {
+    tokens.color = textColor;
+  }
+  if (horizontalAlignment) {
+    tokens.horizontalIconAlignment = horizontalAlignment;
+  }
+  if (verticalAlignment) {
+    tokens.verticalIconAlignment = verticalAlignment;
+  }
+  if (iconSize) {
+    tokens.iconSize = iconSize;
+  }
+  if (iconStrokeWidth) {
+    tokens.iconStrokeWidth = iconStrokeWidth;
+  }
+  if (iconStrokeColor) {
+    tokens.iconStrokeColor = iconStrokeColor;
+  }
+  if (initialsSize) {
+    tokens.initialsSize = initialsSize;
+  }
+  if (physicalSize) {
+    tokens.avatarSize = physicalSize;
+  }
+
+  const CustomizedAvatar = JSAvatar.customize(tokens);
+
+  return (
+    <View style={commonStyles.root}>
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Show rings</Text>
+          <Switch value={showRing} onValueChange={setShowRing} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Transparent Ring</Text>
+          <Switch value={transparent} onValueChange={setTransparent} />
+        </View>
+
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setCoinColor(e.nativeEvent.text);
+          }}
+        />
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Initials text color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setTextColor(e.nativeEvent.text);
+          }}
+        />
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Icon stroke color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setIconStrokeColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingBackgroundColor(e.nativeEvent.text);
+          }}
+        />
+
+        <AlignmentPicker style={commonStyles.header} label="Horizontal icon alignment" onSelectionChange={setHorizontalAlignment} />
+        <AlignmentPicker style={commonStyles.header} label="Vertical icon alignment" onSelectionChange={setVerticalAlignment} />
+
+        <Text>Coin size</Text>
+        <Slider minimum={8} maximum={200} initialValue={80} style={commonStyles.vmargin} onChange={setPhysicalSize} />
+
+        <Text>Icon size</Text>
+        <Slider minimum={8} maximum={100} initialValue={24} style={commonStyles.vmargin} onChange={setIconSize} />
+
+        <Text>Icon stroke width</Text>
+        <Slider minimum={0} maximum={8} initialValue={2} style={commonStyles.vmargin} onChange={setIconStrokeWidth} />
+
+        <Text>Font size</Text>
+        <Slider minimum={5} maximum={50} initialValue={14} style={commonStyles.vmargin} onChange={setInitialsSize} />
+      </View>
+
+      <CustomizedAvatar
+        initials="SB"
+        imageDescription="Former CEO of Microsoft"
+        presence="blocked"
+        imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+        ring={
+          showRing
+            ? {
+                ringColor,
+                ringBackgroundColor,
+                ringThickness: 4,
+                innerGap: 4,
+                transparent,
+              }
+            : undefined
+        }
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { JSAVATAR_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { StandardUsage } from './BasicAvatar';
+import { CustomizeUsage } from './CustomizedAvatar';
+
+const avatarSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: JSAVATAR_TESTPAGE,
+    component: StandardUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage,
+  },
+];
+
+export const JSAvatarTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Beta',
+    macosStatus: 'Experimental',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'AvatarView is a visual representation of a user, entity, or group. If an image is supplied, it is cropped to a circle of the requested size. If an image is not supplied, initials are extracted from the given name and email address provided and displayed on a colorful background.';
+
+  return <Test name="Avatar Test" description={description} sections={avatarSections} status={status} />;
+};

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

@@ -1,2 +1,3 @@
 export const HOMEPAGE_AVATAR_BUTTON = 'Homepage_Avatar_Button';
 export const AVATAR_TESTPAGE = 'Avatar_TestPage';
+export const JSAVATAR_TESTPAGE = 'Avatar_Win32_TestPage';

package/src/FluentTester/TestComponents/Avatar/index.ts

@@ -1,2 +1,3 @@
 export * from './AvatarTest';
+export * from './JSAvatarTest';
 export * from './consts';

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ButtonFocusTest } from './ButtonFocusTest';
 import { ButtonIconTest } from './ButtonIconTest';
 import { BUTTON_TESTPAGE } from './consts';
+import { E2EButtonTest } from './E2EButtonTest';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 const buttonSections: TestSection[] = [
@@ -14,6 +15,10 @@ const buttonSections: TestSection[] = [
     name: 'Icon Button',
     component: ButtonIconTest,
   },
+  {
+    name: 'E2E Button Testing',
+    component: E2EButtonTest,
+  },
 ];
 
 export const ButtonTest: React.FunctionComponent = () => {

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

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Button, Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  BUTTON_TEST_COMPONENT,
+  BUTTON_ON_PRESS,
+  BUTTON_NO_A11Y_LABEL_COMPONENT,
+  BUTTON_ACCESSIBILITY_LABEL,
+  BUTTON_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2EButtonTest: 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={BUTTON_TEST_COMPONENT}
+          onClick={onClick}
+          accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}
+        />
+        <Button content={BUTTON_TEST_COMPONENT_LABEL} testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        {buttonPressed ? <Text testID={BUTTON_ON_PRESS}>Button Pressed</Text> : null}
+      </Stack>
+    </View>
+  );
+};

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

@@ -1,2 +1,12 @@
 export const HOMEPAGE_BUTTON_BUTTON = 'Homepage_Button_Button'; // Button on the homepage that navigates to the selected test page
-export const BUTTON_TESTPAGE = 'Button_TestPage'; // A component on each specific test page.
+export const BUTTON_TESTPAGE = 'Button_TestPage'; // The title of each test page. This is displayed after navigating to the test page
+
+/* Test Button 1 */
+export const BUTTON_TEST_COMPONENT = 'Button_Test_Component'; // A component on each specific test page
+export const BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility label';
+
+/* Test Button 2 */
+export const BUTTON_NO_A11Y_LABEL_COMPONENT = 'Button_No_A11y_label_Component';
+export const BUTTON_TEST_COMPONENT_LABEL = 'Test Button2 - No Accessibility Label'; // A component on each specific test page
+
+export const BUTTON_ON_PRESS = 'Button_On_Press'; // For testing the press functionality on a button

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

@@ -4,6 +4,7 @@ import { Platform, View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
+import { SvgXml } from 'react-native-svg';
 
 export const ButtonIconTest: React.FunctionComponent = () => {
   const fontBuiltInProps = {
@@ -21,23 +22,51 @@ export const ButtonIconTest: React.FunctionComponent = () => {
   };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
+  const chevronXml = `
+          <svg width="12" height="16" viewBox="0 0 11 6" color="#000">
+            <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 (
     <View style={[stackStyle, commonTestStyles.view]}>
+      <Button icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
       <Button
         icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }}
-        content="Font icon"
         style={commonTestStyles.vmargin}
-      />
-      <Button icon={{ fontSource: fontBuiltInProps }} content="Font icon" style={commonTestStyles.vmargin} />
-      <Button primary icon={{ fontSource: fontBuiltInProps }} content="Font icon" style={commonTestStyles.vmargin} />
+        iconPosition="after"
+      >
+        Icon after
+      </Button>
+      {svgIconsEnabled && (
+        <Button style={commonTestStyles.vmargin} icon={{ svgSource: svgProps }}>
+          Icon Button and Chevron
+          <SvgXml xml={chevronXml} />
+        </Button>
+      )}
+      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button appearance="primary" icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
       {svgIconsEnabled && (
         <>
-          <Button primary icon={{ svgSource: svgProps, color: 'red' }} content="SVG" style={commonTestStyles.vmargin} />
-          <Button icon={{ svgSource: svgProps }} content="SVG" style={commonTestStyles.vmargin} />
+          <Button appearance="primary" icon={{ svgSource: svgProps, color: 'red' }} style={commonTestStyles.vmargin}>
+            SVG
+          </Button>
+          <Button icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            SVG
+          </Button>
         </>
       )}
-      <Button primary icon={testImage} content="PNG" style={commonTestStyles.vmargin} />
-      <Button icon={testImage} content="PNG" style={commonTestStyles.vmargin} />
+      <Button appearance="primary" icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+      <Button icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
     </View>
   );
 };

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

@@ -0,0 +1,38 @@
+import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, stackStyle } from '../Common/styles';
+
+export const ButtonShapeTest: React.FunctionComponent = () => {
+  return (
+    <View style={[stackStyle, commonTestStyles.view]}>
+      <Button shape="rounded" style={commonTestStyles.vmargin}>
+        Default Rounded Button
+      </Button>
+      <Button shape="square" style={commonTestStyles.vmargin}>
+        Square Button
+      </Button>
+      <Button shape="circular" style={commonTestStyles.vmargin}>
+        Circular Button
+      </Button>
+      <Button appearance="primary" shape="rounded" style={commonTestStyles.vmargin}>
+        Primary Rounded Button
+      </Button>
+      <Button appearance="primary" shape="square" style={commonTestStyles.vmargin}>
+        Square Button
+      </Button>
+      <Button appearance="primary" shape="circular" style={commonTestStyles.vmargin}>
+        Circular Button
+      </Button>
+      <CompoundButton secondaryContent="rounded" shape="rounded" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="square" shape="square" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="circular" shape="circular" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+    </View>
+  );
+};