@fluentui-react-native/tester 0.47.3 → 0.50.0

package/src/FluentTester/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { Text, View, Switch } from 'react-native';
+import { Button, ContextualMenu, ContextualMenuItem, Separator } from '@fluentui/react-native';
+import { CONTEXTUALMENUITEM_TEST_COMPONENT } from './consts';
+
+export const E2EContextualMenuTest: 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],
+  );
+
+  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>
+          <Button content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
+        </View>
+      </View>
+
+      {showContextualMenu && (
+        <ContextualMenu
+          target={stdBtnRef}
+          onDismiss={onDismissContextualMenu}
+          onShow={onShowContextualMenu}
+          onItemClick={onItemClick}
+          setShowMenu={toggleShowContextualMenu}
+          shouldFocusOnMount={focusOnMount}
+          shouldFocusOnContainer={focusOnContainer}
+          isBeakVisible={isBeakVisible}
+        >
+          <ContextualMenuItem text="MenuItem 1" itemKey="1" testID={CONTEXTUALMENUITEM_TEST_COMPONENT} />
+          <ContextualMenuItem text="MenuItem 2" itemKey="2" />
+          <ContextualMenuItem text="Disabled Menu Item" itemKey="3" disabled />
+          <ContextualMenuItem text="MenuItem 4" itemKey="4" />
+          <ContextualMenuItem text="MenuItem 5" itemKey="5" />
+        </ContextualMenu>
+      )}
+    </View>
+  );
+};

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

@@ -1,2 +1,18 @@
 export const HOMEPAGE_CONTEXTUALMENU_BUTTON = 'Homepage_ContextualMenu_Button';
 export const CONTEXTUALMENU_TESTPAGE = 'ContextualMenu_TestPage';
+
+/* E2E Testing ContextualMenu 1 */
+export const CONTEXTUALMENU_TEST_COMPONENT = 'ContextualMenu_Test_Component'; // A component on each specific test page
+export const CONTEXTUALMENU_ACCESSIBILITY_LABEL = 'E2E testing ContextualMenu accessibility label';
+
+/* E2E Testing ContextualMenu 2 */
+export const CONTEXTUALMENU_NO_A11Y_LABEL_COMPONENT = 'ContextualMenu_No_A11y_label_Component';
+export const CONTEXTUALMENU_TEST_COMPONENT_LABEL = 'Test ContextualMenu2 - No Accessibility Label'; // A component on each specific test page
+
+/* E2E Testing ContextualMenuItem 1 */
+export const CONTEXTUALMENUITEM_TEST_COMPONENT = 'ContextualMenuItem_Test_Component'; // A component on each specific test page
+export const CONTEXTUALMENUITEM_ACCESSIBILITY_LABEL = 'E2E testing ContextualMenuItem accessibility label';
+
+/* E2E Testing ContextualMenuItem 2 */
+export const CONTEXTUALMENUITEM_NO_A11Y_LABEL_COMPONENT = 'ContextualMenuItem_No_A11y_label_Component';
+export const CONTEXTUALMENUITEM_TEST_COMPONENT_LABEL = 'Test ContextualMenuItem2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import { Stack } from '@fluentui-react-native/stack';
+import { DRAWER_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { NativeModules } from 'react-native';
+
+const basicDrawer: React.FunctionComponent = () => {
+  console.log(NativeModules.DrawerModule);
+  return (
+    <Stack style={stackStyle} gap={5}>
+      <Text>test to come</Text>
+    </Stack>
+  );
+};
+
+const drawerSections: TestSection[] = [
+  {
+    name: 'Basic Drawer',
+    testID: DRAWER_TESTPAGE,
+    component: basicDrawer,
+  },
+];
+
+export const DrawerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'N/A',
+    uwpStatus: 'N/A',
+    iosStatus: 'Backlog',
+    macosStatus: 'N/A',
+    androidStatus: 'Experimental',
+  };
+
+  const description =
+    'A Drawer component using the Fluent Design System.  Currently only implemented on Android.';
+
+  return <Test name="Drawer Test" description={description} sections={drawerSections} status={status} />;
+};

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

@@ -0,0 +1,2 @@
+export const HOMEPAGE_DRAWER_BUTTON = 'Homepage_Drawer_Button';
+export const DRAWER_TESTPAGE = 'Drawer_TestPage';

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

@@ -0,0 +1,2 @@
+export * from './DrawerTest';
+export * from './consts';

package/src/FluentTester/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -40,7 +40,7 @@ interface IComponentTwiddlerProps {
   onPress?: TouchableHighlightProps['onPress'];
 }
 
-const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (props: IComponentTwiddlerProps) => {
+export const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (props: IComponentTwiddlerProps) => {
   const [focusProps, focusState] = useFocusState({});
 
   return (

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

@@ -1,2 +1,8 @@
 export const HOMEPAGE_FOCUSTRAPZONE_BUTTON = 'Homepage_FocusTrapZone_Button';
 export const FOCUSTRAPZONE_TESTPAGE = 'FocusTrapZone_TestPage';
+
+/* E2E Testing FocusTrapZone 1 */
+export const FOCUSTRAPZONE_TEST_COMPONENT = 'FocusTrapZone_Test_Component'; // A component on each specific test page
+
+/* E2E Testing FocusTrapZone 2 */
+export const FOCUSTRAPZONE_SECOND_TEST_COMPONENT = 'FocusTrapZone_Second_Test_Component';

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

@@ -1,2 +1,8 @@
 export const HOMEPAGE_FOCUSZONE_BUTTON = 'Homepage_FocusZone_Button';
 export const FOCUSZONE_TESTPAGE = 'FocusZone_TestPage';
+
+/* E2E Testing FocusZone 1 */
+export const FOCUSZONE_TEST_COMPONENT = 'FocusZone_Test_Component'; // A component on each specific test page
+
+/* E2E Testing FocusZone 2 */
+export const FOCUSZONE_SECOND_TEST_COMPONENT = 'FocusZone_Second_Test_Component';

package/src/FluentTester/TestComponents/Icon/IconE2ETest.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui/react-native';
+import { Icon } from '@fluentui-react-native/icon';
+import { ICON_ACCESSIBILITY_LABEL } from './consts';
+import { RasterImageIconProps } from '@fluentui-react-native/icon';
+
+const testImage = require('./assets/testicon.png');
+
+export const E2ETestingIcon: React.FunctionComponent = () => {
+  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };
+  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };
+
+  const showRasterIcons = true;
+
+  return (
+    <View>
+      {showRasterIcons ? (
+        <View>
+          <Text>Raster icons</Text>
+          <Icon
+            rasterImageSource={rasterRainbowSpectrumProps}
+            width={100}
+            height={100}
+            color="green"
+            accessibilityLabel={ICON_ACCESSIBILITY_LABEL}
+          />
+          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" />
+        </View>
+      ) : null}
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/Icon/IconTest.tsx

@@ -5,6 +5,7 @@ import { Text } from '@fluentui/react-native';
 import { Icon, RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { ICON_TESTPAGE } from './consts';
+import { E2ETestingIcon } from './IconE2ETest';
 
 const testImage = require('./assets/testicon.png');
 const testTtf = require('./assets/Font Awesome 5 Free-Solid-900.otf');
@@ -95,6 +96,10 @@ const iconSections: TestSection[] = [
     testID: ICON_TESTPAGE,
     component: icons,
   },
+  {
+    name: 'Icon for E2E Testing',
+    component: E2ETestingIcon,
+  },
 ];
 
 export const IconTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,9 @@
 export const HOMEPAGE_ICON_BUTTON = 'Homepage_Icon_Button';
 export const ICON_TESTPAGE = 'Icon_TestPage';
+
+/* E2E Testing Icon 1 */
+export const ICON_TEST_COMPONENT = 'Icon_Test_Component'; // A component on each specific test page
+export const ICON_ACCESSIBILITY_LABEL = 'E2E testing Icon accessibility label';
+
+/* E2E Testing Icon 2 */
+export const ICON_NO_A11Y_LABEL_COMPONENT = 'Icon_No_A11y_label_Component';

package/src/FluentTester/TestComponents/Link/E2ELinkTest.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+import { Link } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { LINK_TEST_COMPONENT, LINK_ACCESSIBILITY_LABEL, LINK_NO_A11Y_LABEL_COMPONENT, LINK_TEST_COMPONENT_LABEL } from './consts';
+
+export const LinkE2ETest: React.FunctionComponent = () => {
+  const doPress = (): void => {
+    Alert.alert('Alert.', 'You have been alerted.');
+  };
+
+  return (
+    <Stack style={stackStyle}>
+      <Link
+        url="https://www.bing.com/"
+        content="Link with Accessibility Label."
+        testID={LINK_TEST_COMPONENT}
+        accessibilityLabel={LINK_ACCESSIBILITY_LABEL}
+      />
+      <Link url="https://www.bing.com/" onPress={doPress} content={LINK_TEST_COMPONENT_LABEL} testID={LINK_NO_A11Y_LABEL_COMPONENT} />
+    </Stack>
+  );
+};

package/src/FluentTester/TestComponents/Link/LinkTest.tsx

@@ -5,6 +5,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { LINK_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { LinkE2ETest } from './E2ELinkTest';
 
 const links: React.FunctionComponent = () => {
   const doPress = (): void => {
@@ -25,6 +26,10 @@ const linkSections: TestSection[] = [
     testID: LINK_TESTPAGE,
     component: links,
   },
+  {
+    name: 'Link E2E Test',
+    component: LinkE2ETest,
+  },
 ];
 
 export const LinkTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_LINK_BUTTON = 'Homepage_Link_Button';
 export const LINK_TESTPAGE = 'Link_TestPage';
+
+/* E2E Testing Link 1 */
+export const LINK_TEST_COMPONENT = 'Link_Test_Component'; // A component on each specific test page
+export const LINK_ACCESSIBILITY_LABEL = 'E2E testing Link accessibility label';
+
+/* E2E Testing Link 2 */
+export const LINK_NO_A11Y_LABEL_COMPONENT = 'Link_No_A11y_label_Component';
+export const LINK_TEST_COMPONENT_LABEL = 'Test Link2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/MenuButton/MenuButtonE2ETest.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { MenuButton, ContextualMenuProps } from '@fluentui/react-native';
+import { Text, View } from 'react-native';
+import { menuItems } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
+import {
+  MENU_BUTTON_TEST_COMPONENT,
+  MENU_BUTTON_ACCESSIBILITY_LABEL,
+  MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+  MENU_BUTTON_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2ETestMenuButton: 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}
+                testID={MENU_BUTTON_TEST_COMPONENT}
+                accessibilityLabel={MENU_BUTTON_ACCESSIBILITY_LABEL}
+              />
+            </View>
+          </View>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content={MENU_BUTTON_TEST_COMPONENT_LABEL}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                testID={MENU_BUTTON_NO_A11Y_LABEL_COMPONENT}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/MenuButton/MenuButtonTest.tsx

@@ -4,6 +4,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { StandardMenuButton } from './StandardMenuButtonTest';
 import { NestedMenuButton } from './NestedMenuButtonTest';
 import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
+import { E2ETestMenuButton } from './MenuButtonE2ETest';
 
 const menuButtonSections: TestSection[] = [
   {
@@ -19,6 +20,10 @@ const menuButtonSections: TestSection[] = [
     name: 'MenuButton with customized UI',
     component: CustomizedMenuButton,
   },
+  {
+    name: 'MenuButton for E2E Testing',
+    component: E2ETestMenuButton,
+  },
 ];
 
 export const MenuButtonTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
 export const MENU_BUTTON_TESTPAGE = 'Menu_Button_TestPage';
+
+/* E2E Testing Menu_Button 1 */
+export const MENU_BUTTON_TEST_COMPONENT = 'Menu_Button_Test_Component'; // A component on each specific test page
+export const MENU_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Menu_Button accessibility label';
+
+/* E2E Testing Menu_Button 2 */
+export const MENU_BUTTON_NO_A11Y_LABEL_COMPONENT = 'Menu_Button_No_A11y_label_Component';
+export const MENU_BUTTON_TEST_COMPONENT_LABEL = 'Test Menu_Button2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/MenuButtonExperimental/StandardMenuButtonTest.tsx

@@ -79,7 +79,7 @@ export const StandardMenuButton: React.FunctionComponent = () => {
             <Separator vertical />
             <View style={columnStyle}>
               <MenuButton
-                primary
+                appearance="primary"
                 content="Primary MenuButton"
                 menuItems={menuItems}
                 onItemClick={onItemClick}
@@ -87,7 +87,7 @@ export const StandardMenuButton: React.FunctionComponent = () => {
               />
               <Text>Primary MenuButton with icon</Text>
               <MenuButton
-                primary
+                appearance="primary"
                 icon={iconToShow}
                 content="Primary MenuButton"
                 menuItems={menuItems}
@@ -95,9 +95,15 @@ export const StandardMenuButton: React.FunctionComponent = () => {
                 contextualMenu={contextualMenuProps}
               />
               <Text>Primary MenuButton with only icon</Text>
-              <MenuButton primary icon={iconToShow} menuItems={menuItems} onItemClick={onItemClick} contextualMenu={contextualMenuProps} />
+              <MenuButton
+                appearance="primary"
+                icon={iconToShow}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+              />
               <Text>Primary Disabled MenuButton</Text>
-              <MenuButton primary disabled content="Disabled Primary MenuButton" menuItems={menuItems} />
+              <MenuButton appearance="primary" disabled content="Disabled Primary MenuButton" menuItems={menuItems} />
             </View>
           </View>
         </View>

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_PERSONA_BUTTON = 'Homepage_Persona_Button';
 export const PERSONA_TESTPAGE = 'Persona_TestPage';
+
+/* E2E Testing Persona 1 */
+export const PERSONA_TEST_COMPONENT = 'Persona_Test_Component'; // A component on each specific test page
+export const PERSONA_ACCESSIBILITY_LABEL = 'E2E testing Persona accessibility label';
+
+/* E2E Testing Persona 2 */
+export const PERSONA_NO_A11Y_LABEL_COMPONENT = 'Persona_No_A11y_label_Component';
+export const PERSONA_TEST_COMPONENT_LABEL = 'Test Persona2 - No Accessibility Label'; // A component on each specific test page

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_PERSONACOIN_BUTTON = 'Homepage_PersonaCoin_Button';
 export const PERSONACOIN_TESTPAGE = 'PersonaCoin_TestPage';
+
+/* E2E Testing PersonaCoin 1 */
+export const PERSONACOIN_TEST_COMPONENT = 'PersonaCoin_Test_Component'; // A component on each specific test page
+export const PERSONACOIN_ACCESSIBILITY_LABEL = 'E2E testing PersonaCoin accessibility label';
+
+/* E2E Testing PersonaCoin 2 */
+export const PERSONACOIN_NO_A11Y_LABEL_COMPONENT = 'PersonaCoin_No_A11y_label_Component';
+export const PERSONACOIN_TEST_COMPONENT_LABEL = 'Test PersonaCoin2 - No Accessibility Label'; // A component on each specific test page

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_PRESSABLE_BUTTON = 'Homepage_Pressable_Button';
 export const PRESSABLE_TESTPAGE = 'Pressable_TestPage';
+
+/* E2E Testing Pressable 1 */
+export const PRESSABLE_TEST_COMPONENT = 'Pressable_Test_Component'; // A component on each specific test page
+export const PRESSABLE_ACCESSIBILITY_LABEL = 'E2E testing Pressable accessibility label';
+
+/* E2E Testing Pressable 2 */
+export const PRESSABLE_NO_A11Y_LABEL_COMPONENT = 'Pressable_No_A11y_label_Component';
+export const PRESSABLE_TEST_COMPONENT_LABEL = 'Test Pressable2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/RadioGroup/RadioGroupE2ETest.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioButton, RadioGroup } from '@fluentui/react-native';
+import {
+  RADIOGROUP_TEST_COMPONENT,
+  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
+  RADIOGROUP_TEST_COMPONENT_LABEL,
+  RADIOGROUP_ACCESSIBILITY_LABEL,
+  RADIOBUTTON_TEST_COMPONENT,
+  RADIOBUTTON_ACCESSIBILITY_LABEL,
+  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
+  RADIOBUTTON_TEST_COMPONENT_LABEL,
+} from './consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+
+export const E2ERadioGroupTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <RadioGroup
+          label="RadioGroup for E2E Testing - Ally Label Set"
+          accessibilityLabel={RADIOGROUP_ACCESSIBILITY_LABEL}
+          testID={RADIOGROUP_TEST_COMPONENT}
+        >
+          <RadioButton content="Option A" buttonKey="A" />
+          <RadioButton
+            content="Option B"
+            buttonKey="B"
+            testID={RADIOBUTTON_TEST_COMPONENT}
+            accessibilityLabel={RADIOBUTTON_ACCESSIBILITY_LABEL}
+          />
+          <RadioButton content="Option C (disabled)" buttonKey="C" disabled={true} />
+          <RadioButton content="Option D" buttonKey="C" />
+        </RadioGroup>
+        <RadioGroup label={RADIOGROUP_TEST_COMPONENT_LABEL} testID={RADIOGROUP_NO_A11Y_LABEL_COMPONENT}>
+          <RadioButton content={RADIOBUTTON_TEST_COMPONENT_LABEL} buttonKey="W" testID={RADIOBUTTON_NO_A11Y_LABEL_COMPONENT} />
+          <RadioButton content="Option X" buttonKey="X" />
+          <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
+          <RadioButton content="Option Z" buttonKey="Z" />
+        </RadioGroup>
+      </Stack>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/RadioGroup/RadioGroupTest.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { RadioButton, RadioGroup, Separator } from '@fluentui/react-native';
 import { RADIOGROUP_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2ERadioGroupTest } from './RadioGroupE2ETest';
 
 const basicRadioGroup: React.FunctionComponent = () => {
   // Client's example onChange function
@@ -57,6 +58,10 @@ const radioGroupSections: TestSection[] = [
     testID: RADIOGROUP_TESTPAGE,
     component: basicRadioGroup,
   },
+  {
+    name: 'RadioGroup for E2E Testing',
+    component: E2ERadioGroupTest,
+  },
 ];
 
 export const RadioGroupTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,20 @@
 export const HOMEPAGE_RADIOGROUP_BUTTON = 'Homepage_RadioGroup_Button';
 export const RADIOGROUP_TESTPAGE = 'RadioGroup_TestPage';
+
+/* E2E Testing RadioGroup 1 */
+export const RADIOGROUP_TEST_COMPONENT = 'RadioGroup_Test_Component'; // A component on each specific test page
+export const RADIOGROUP_ACCESSIBILITY_LABEL = 'E2E testing RadioGroup accessibility label';
+
+/* E2E Testing RadioGroup 2 */
+export const RADIOGROUP_NO_A11Y_LABEL_COMPONENT = 'RadioGroup_No_A11y_label_Component';
+export const RADIOGROUP_TEST_COMPONENT_LABEL = 'Test RadioGroup2 - No Accessibility Label'; // A component on each specific test page
+
+/* E2E Testing RadioButton 1 */
+export const RADIOBUTTON_TEST_COMPONENT = 'RadioButton_Test_Component'; // A component on each specific test page
+export const RADIOBUTTON_ACCESSIBILITY_LABEL = 'E2E testing RadioButton accessibility label';
+
+/* E2E Testing RadioButton 2 */
+export const RADIOBUTTON_NO_A11Y_LABEL_COMPONENT = 'RadioButton_No_A11y_label_Component';
+export const RADIOBUTTON_TEST_COMPONENT_LABEL = 'Test RadioButton2 - No Accessibility Label'; // A component on each specific test page
+
+export const RADIOGROUP_ON_PRESS = 'RadioGroup_On_Press'; // For testing the press functionality on a button

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

@@ -1,2 +1,8 @@
 export const HOMEPAGE_SEPARATOR_BUTTON = 'Homepage_Separator_Button';
 export const SEPARATOR_TESTPAGE = 'Separator_TestPage';
+
+/* E2E Testing Separator 1 */
+export const SEPARATOR_TEST_COMPONENT = 'Separator_Test_Component'; // A component on each specific test page
+
+/* E2E Testing Separator 2 */
+export const SEPARATOR_SECOND_TEST_COMPONENT = 'Separator_Second_Test_Component';

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_SVG_BUTTON = 'Homepage_Svg_Button';
 export const SVG_TESTPAGE = 'Svg_TestPage';
+
+/* E2E Testing Svg 1 */
+export const SVG_TEST_COMPONENT = 'Svg_Test_Component'; // A component on each specific test page
+export const SVG_ACCESSIBILITY_LABEL = 'E2E testing Svg accessibility label';
+
+/* E2E Testing Svg 2 */
+export const SVG_NO_A11Y_LABEL_COMPONENT = 'Svg_No_A11y_label_Component';
+export const SVG_TEST_COMPONENT_LABEL = 'Test Svg2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/Tabs/TabsE2ETest.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Tabs, TabsItem, Text } from '@fluentui/react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  TABS_TEST_COMPONENT,
+  TABS_ACCESSIBILITY_LABEL,
+  TABS_ITEM_TEST_COMPONENT,
+  TABS_ITEM_ACCESSIBILITY_LABEL,
+  TABS_ITEM_NO_A11Y_LABEL_COMPONENT,
+  TABS_TEST_COMPONENT_LABEL,
+  TABS_ITEM_TEST_COMPONENT_LABEL,
+  TABS_NO_A11Y_LABEL_COMPONENT,
+} from './consts';
+
+export const E2ETabsTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <View style={stackStyle}>
+        <Tabs label="Tabs" testID={TABS_TEST_COMPONENT} accessibilityLabel={TABS_ACCESSIBILITY_LABEL}>
+          <TabsItem headerText="Home" itemKey="A" testID={TABS_ITEM_TEST_COMPONENT} accessibilityLabel={TABS_ITEM_ACCESSIBILITY_LABEL}>
+            <Text>Tabs #1</Text>
+          </TabsItem>
+          <TabsItem headerText="Files" itemKey="B">
+            <Text>Tabs #2</Text>
+          </TabsItem>
+          <TabsItem headerText="Settings" itemKey="C">
+            <Text>Tabs #3</Text>
+          </TabsItem>
+        </Tabs>
+      </View>
+      <View style={stackStyle}>
+        <Tabs label={TABS_TEST_COMPONENT_LABEL} testID={TABS_NO_A11Y_LABEL_COMPONENT}>
+          <TabsItem headerText={TABS_ITEM_TEST_COMPONENT_LABEL} itemKey="A" testID={TABS_ITEM_NO_A11Y_LABEL_COMPONENT}>
+            <Text>Tabs #1</Text>
+          </TabsItem>
+          <TabsItem headerText="Files" itemKey="B">
+            <Text>Tabs #2</Text>
+          </TabsItem>
+          <TabsItem headerText="Settings" itemKey="C">
+            <Text>Tabs #3</Text>
+          </TabsItem>
+        </Tabs>
+      </View>
+    </View>
+  );
+};