@fluentui-react-native/tester 0.47.2 → 0.49.0

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

@@ -16,17 +16,47 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
     <View style={[stackStyle, commonTestStyles.view]}>
       {svgIconsEnabled && (
         <>
-          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Small Button with icon
+          </Button>
+          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Medium Button with icon
+          </Button>
+          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Large Button with icon
+          </Button>
         </>
       )}
-      <Button size="small" content="Small" style={commonTestStyles.vmargin} />
-      <Button size="medium" content="Medium" style={commonTestStyles.vmargin} />
-      <Button size="large" content="Large" style={commonTestStyles.vmargin} />
-      <CompoundButton size="small" content="Small" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton size="medium" content="Medium" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton size="large" content="Large" secondaryContent="Compound" style={commonTestStyles.vmargin} />
+      <Button size="small" style={commonTestStyles.vmargin}>
+        Small
+      </Button>
+      <Button size="medium" style={commonTestStyles.vmargin}>
+        Medium
+      </Button>
+      <Button size="large" style={commonTestStyles.vmargin}>
+        Large
+      </Button>
+      <Button loading size="small" style={commonTestStyles.vmargin}>
+        Loading Button Small
+      </Button>
+      <Button loading size="medium" style={commonTestStyles.vmargin}>
+        Loading Button Medium
+      </Button>
+      <Button loading size="large" style={commonTestStyles.vmargin}>
+        Loading Button Large
+      </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>
   );
 };

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

@@ -1,17 +1,23 @@
 import * as React from 'react';
 import { ButtonVariantTest } from './ButtonVariantTestSection';
 import { ToggleButtonTest } from './ToggleButtonTestSection';
-import { ExperimentalButtonTestPageId } from './consts';
+import { EXPERIMENTAL_BUTTON_TEST_PAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { ButtonIconTest } from './ButtonIconTestSection';
 import { ButtonSizeTest } from './ButtonSizeTestSection';
+import { ButtonShapeTest } from './ButtonShapeTestSection';
+import { E2EButtonExperimentalTest } from './E2EButtonTest';
 
 const buttonSections: TestSection[] = [
   {
     name: 'Button Variants',
-    testID: ExperimentalButtonTestPageId,
+    testID: EXPERIMENTAL_BUTTON_TEST_PAGE,
     component: ButtonVariantTest,
   },
+  {
+    name: 'Button Shape',
+    component: ButtonShapeTest,
+  },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
@@ -24,6 +30,10 @@ const buttonSections: TestSection[] = [
     name: 'Sizes',
     component: ButtonSizeTest,
   },
+  {
+    name: 'E2E Button Testing',
+    component: E2EButtonExperimentalTest,
+  },
 ];
 
 export const ExperimentalButtonTest: React.FunctionComponent = () => {

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

@@ -1,6 +1,6 @@
-import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
@@ -13,21 +13,39 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
 
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
-      <Button content="Default" style={commonTestStyles.vmargin} />
-      <Button primary content="Primary" style={commonTestStyles.vmargin} />
-      <Button subtle content="Subtle" style={commonTestStyles.vmargin} />
-      <Button fluid content="Fluid" style={commonTestStyles.vmargin} />
-      <Button primary fluid content="Fluid Primary" style={commonTestStyles.vmargin} />
-      <Button subtle fluid content="Fluid Subtle" style={commonTestStyles.vmargin} />
-      <CompoundButton content="Default" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton primary content="Primary" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton subtle content="Subtle" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      {Platform.OS !== 'windows' && (
-        <>
-          <Button fab icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin} />
-          <Button fab icon={{ svgSource: svgProps, width: 20, height: 20 }} content="FAB" style={commonTestStyles.vmargin} />
-        </>
-      )}
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Disabled
+      </Button>
+      <Button appearance="primary" style={commonTestStyles.vmargin}>
+        Primary
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button loading>Loading Button</Button>
+      <Button block style={commonTestStyles.vmargin}>
+        Block
+      </Button>
+      <Button appearance="primary" block style={commonTestStyles.vmargin}>
+        Block Primary
+      </Button>
+      <Button appearance="subtle" block style={commonTestStyles.vmargin}>
+        Block Subtle
+      </Button>
+      <CompoundButton secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Default
+      </CompoundButton>
+      <CompoundButton appearance="primary" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Primary
+      </CompoundButton>
+      <CompoundButton appearance="subtle" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Subtle
+      </CompoundButton>
+      <FAB icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin} />
+      <FAB icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin}>
+        FAB
+      </FAB>
     </View>
   );
 };

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

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Text } from '@fluentui/react-native';
+import { Button } from '@fluentui-react-native/experimental-button';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  BUTTONEXPERIMENTAL_TEST_COMPONENT,
+  BUTTONEXPERIMENTAL_ON_PRESS,
+  BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT,
+  BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL,
+  BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2EButtonExperimentalTest: 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={BUTTONEXPERIMENTAL_TEST_COMPONENT}
+          onClick={onClick}
+          accessibilityLabel={BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL}
+        />
+        <Button content={BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL} testID={BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        {buttonPressed ? <Text testID={BUTTONEXPERIMENTAL_ON_PRESS}>Button Pressed</Text> : null}
+      </Stack>
+    </View>
+  );
+};

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

@@ -22,18 +22,35 @@ export const ToggleButtonTest: React.FunctionComponent = () => {
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
       <View style={styles.row}>
-        <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} content="Default Toggle" style={commonTestStyles.vmargin} />
+        <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} style={commonTestStyles.vmargin}>
+          Default Toggle
+        </ToggleButton>
         <Checkbox checked={defaultChecked} label="Default Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
       </View>
-      <ToggleButton checked content="Checked Default Toggle" style={commonTestStyles.vmargin} />
-      <ToggleButton checked={false} content="Unchecked Default Toggle" style={commonTestStyles.vmargin} />
-      {/* <ToggleButton primary content="Primary Toggle" /> */}
+      <ToggleButton checked style={commonTestStyles.vmargin}>
+        Checked Default Toggle
+      </ToggleButton>
+      <ToggleButton checked={false} style={commonTestStyles.vmargin}>
+        Unchecked Default Toggle
+      </ToggleButton>
+      <ToggleButton appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Toggle
+      </ToggleButton>
+      <ToggleButton defaultChecked appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Toggle
+      </ToggleButton>
       <View style={styles.row}>
-        <ToggleButton subtle onClick={onGhostClicked} checked={subtleChecked} content="Subtle Toggle" style={commonTestStyles.vmargin} />
+        <ToggleButton appearance="subtle" onClick={onGhostClicked} checked={subtleChecked} style={commonTestStyles.vmargin}>
+          Subtle Toggle
+        </ToggleButton>
         <Checkbox checked={subtleChecked} label="Subtle Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
       </View>
-      <ToggleButton subtle checked content="Checked Subtle Toggle" style={commonTestStyles.vmargin} />
-      <ToggleButton subtle checked={false} content="Unchecked Subtle Toggle" style={commonTestStyles.vmargin} />
+      <ToggleButton appearance="subtle" checked style={commonTestStyles.vmargin}>
+        Checked Subtle Toggle
+      </ToggleButton>
+      <ToggleButton appearance="subtle" checked={false} style={commonTestStyles.vmargin}>
+        Unchecked Subtle Toggle
+      </ToggleButton>
     </View>
   );
 };

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

@@ -1,2 +1,12 @@
 export const HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL = 'Homepage_Button_ButtonExperimental'; // Button on the homepage that navigates to the selected test page
-export const ExperimentalButtonTestPageId = 'ButtonExperimental_TestPage'; // A component on each specific test page.
+export const EXPERIMENTAL_BUTTON_TEST_PAGE = 'ButtonExperimental_TestPage'; // A component on each specific test page.
+
+/* Test Button 1 */
+export const BUTTONEXPERIMENTAL_TEST_COMPONENT = 'Button_Test_Component'; // A component on each specific test page
+export const BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility label';
+
+/* Test Button 2 */
+export const BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT = 'Button_No_A11y_label_Component';
+export const BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL = 'Test Button2 - No Accessibility Label'; // A component on each specific test page
+
+export const BUTTONEXPERIMENTAL_ON_PRESS = 'Button_On_Press'; // For testing the press functionality on a button

package/src/FluentTester/TestComponents/Callout/CalloutE2ETest.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ScreenRect, Text, View } from 'react-native';
+import { Button, Callout } from '@fluentui/react-native';
+import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL } from './consts';
+
+export const E2ECalloutTest: React.FunctionComponent = () => {
+  const [showCustomizedCallout, setShowCustomizedCallout] = React.useState(false);
+  const [isCustomizedCalloutVisible, setIsCustomizedCalloutVisible] = React.useState(false);
+
+  const toggleShowCustomizedCallout = React.useCallback(() => {
+    setShowCustomizedCallout(!showCustomizedCallout);
+    setIsCustomizedCalloutVisible(false);
+  }, [showCustomizedCallout, setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+
+  const onShowCustomizedCallout = React.useCallback(() => {
+    setIsCustomizedCalloutVisible(true);
+  }, [setIsCustomizedCalloutVisible]);
+
+  const onDismissCustomizedCallout = React.useCallback(() => {
+    setIsCustomizedCalloutVisible(false);
+    setShowCustomizedCallout(false);
+  }, [setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+
+  const myRect: ScreenRect = { screenX: 10, screenY: 10, width: 100, height: 100 };
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'column', paddingVertical: 5 }}>
+        <Button content="Press for Callout" onClick={toggleShowCustomizedCallout} testID={BUTTON_TO_OPEN_CALLOUT} />
+        <Text selectable={true}>
+          <Text>Visibility: </Text>
+          {isCustomizedCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
+        </Text>
+      </View>
+
+      {showCustomizedCallout && (
+        <Callout
+          anchorRect={myRect}
+          onDismiss={onDismissCustomizedCallout}
+          onShow={onShowCustomizedCallout}
+          accessibilityLabel={CALLOUT_ACCESSIBILITY_LABEL}
+          accessibilityRole="alert"
+          accessibilityOnShowAnnouncement="Be informed that a customized callout has been opened."
+        >
+          <View style={{ padding: 20, borderWidth: 2, borderColor: 'black' }}>
+            <Text>just some text so it does not take focus and is not empty.</Text>
+          </View>
+        </Callout>
+      )}
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -3,6 +3,7 @@ import { ScreenRect, Text, View, Switch, Picker, ScrollView } from 'react-native
 import { Button, Callout, Separator, IFocusable, RestoreFocusEvent, DismissBehaviors, StealthButton } from '@fluentui/react-native';
 import { CALLOUT_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2ECalloutTest } from './CalloutE2ETest';
 import { fluentTesterStyles } from '../Common/styles';
 
 const standardCallout: React.FunctionComponent = () => {
@@ -96,10 +97,10 @@ const standardCallout: React.FunctionComponent = () => {
   const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState<string | undefined>(undefined);
   const [selectedBorderColor, setSelectedBorderColor] = React.useState<string | undefined>(undefined);
 
-  const borderWidthDefault: string = 'default (1)';
-  const borderWidthSelections: (number | string)[] = ['default (1)', 2, 4, 10];
+  const borderWidthDefault: string = '1';
+  const borderWidthSelections: string[] = ['1', '2', '4', '10'];
 
-  const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<number | undefined>(undefined);
+  const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<string | undefined>(undefined);
 
   const [showScrollViewCallout, setShowScrollViewCalout] = React.useState(false);
   const [scrollviewContents, setScrollviewContents] = React.useState([1, 2, 3]);
@@ -111,7 +112,7 @@ const standardCallout: React.FunctionComponent = () => {
   }, [setScrollviewContents, scrollviewContents]);
 
   const addButton = React.useCallback(() => {
-    setScrollviewContents(arr => [...arr, 1]);
+    setScrollviewContents((arr) => [...arr, 1]);
   }, [setScrollviewContents, scrollviewContents]);
 
   return (
@@ -174,7 +175,7 @@ const standardCallout: React.FunctionComponent = () => {
             onValueChange={(width) => setSelectedBorderWidth(width === borderWidthDefault ? undefined : width)}
           >
             {borderWidthSelections.map((width, index) => (
-              <Picker.Item label={width.toString()} key={index} value={width} />
+              <Picker.Item label={width} key={index} value={width} />
             ))}
           </Picker>
         </View>
@@ -217,31 +218,27 @@ const standardCallout: React.FunctionComponent = () => {
             isBeakVisible: isBeakVisible,
             ...(selectedBorderColor && { borderColor: selectedBorderColor }),
             ...(selectedBackgroundColor && { backgroundColor: selectedBackgroundColor }),
-            ...(selectedBorderWidth && { borderWidth: selectedBorderWidth }),
+            ...(selectedBorderWidth && { borderWidth: parseInt(selectedBorderWidth) }),
             ...(calloutDismissBehaviors && { dismissBehaviors: calloutDismissBehaviors }),
-          }}>
-          {showScrollViewCallout ?
+          }}
+        >
+          {showScrollViewCallout ? (
             <View style={fluentTesterStyles.scrollViewContainer}>
               <ScrollView contentContainerStyle={fluentTesterStyles.scrollViewStyle} showsVerticalScrollIndicator={true}>
                 <StealthButton content="click to change anchor" onClick={toggleCalloutRef} />
                 <StealthButton content="Click to add a button" style={fluentTesterStyles.testListItem} onClick={addButton} />
                 <StealthButton content="Click to remove a button" style={fluentTesterStyles.testListItem} onClick={removeButton} />
-                  {scrollviewContents.map((value) => {
-                    return (
-                      <StealthButton
-                        key={value}
-                        content="Button"
-                        style={fluentTesterStyles.testListItem}
-                      />
-                    )
-                  })}
+                {scrollviewContents.map((value) => {
+                  return <StealthButton key={value} content="Button" style={fluentTesterStyles.testListItem} />;
+                })}
               </ScrollView>
             </View>
-          : //else
+          ) : (
+            //else
             <View style={{ padding: 20 }}>
               <Button content="click to change anchor" onClick={toggleCalloutRef} />
             </View>
-          }
+          )}
         </Callout>
       )}
     </View>
@@ -312,7 +309,11 @@ const calloutSections: TestSection[] = [
   {
     name: 'Customized Usage',
     component: customCallout,
-  }
+  },
+  {
+    name: 'E2E Testing Callout',
+    component: E2ECalloutTest,
+  },
 ];
 
 export const CalloutTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,13 @@
 export const HOMEPAGE_CALLOUT_BUTTON = 'Homepage_Callout_Button';
 export const CALLOUT_TESTPAGE = 'Callout_TestPage';
+
+/* Test Callout 1 */
+export const CALLOUT_TEST_COMPONENT = 'Callout_Test_Component'; // A component on each specific test page
+export const CALLOUT_ACCESSIBILITY_LABEL = 'E2E testing Callout accessibility label';
+
+/* Test Callout 2 */
+export const CALLOUT_NO_A11Y_LABEL_COMPONENT = 'Callout_No_A11y_label_Component';
+export const CALLOUT_TEST_COMPONENT_LABEL = 'Test Callout2 - No Accessibility Label'; // A component on each specific test page
+
+/* Button to open the Callout */
+export const BUTTON_TO_OPEN_CALLOUT = 'Open_Callout_Button_Component';

package/src/FluentTester/TestComponents/Checkbox/CheckboxE2ETest.tsx

@@ -0,0 +1,39 @@
+import { Checkbox, Text } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  CHECKBOX_TEST_COMPONENT,
+  CHECKBOX_ON_PRESS,
+  CHECKBOX_NO_A11Y_LABEL_COMPONENT,
+  CHECKBOX_TEST_COMPONENT_LABEL,
+  CHECKBOX_ACCESSIBILITY_LABEL,
+} from './consts';
+import { Stack } from '@fluentui-react-native/stack';
+
+export const E2ECheckboxTest: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Checkbox
+          accessibilityLabel={CHECKBOX_ACCESSIBILITY_LABEL}
+          disabled={false}
+          label="Testing accessibilityLabel"
+          testID={CHECKBOX_TEST_COMPONENT}
+          onChange={onClick}
+        />
+        <Checkbox label={CHECKBOX_TEST_COMPONENT_LABEL} testID={CHECKBOX_NO_A11Y_LABEL_COMPONENT} />
+        {checkboxPressed ? <Text testID={CHECKBOX_ON_PRESS}>Checkbox Selected</Text> : null}
+      </Stack>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { View, TextInput, TextStyle } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { CHECKBOX_TESTPAGE } from './consts';
+import { E2ECheckboxTest } from './CheckboxE2ETest';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 function onChangeUncontrolled(isChecked: boolean) {
@@ -157,6 +158,10 @@ const checkboxSections: TestSection[] = [
     name: 'Token Customized Checkboxes',
     component: tokenCheckbox,
   },
+  {
+    name: 'Checkbox for E2E Testing',
+    component: E2ECheckboxTest,
+  },
 ];
 
 export const CheckboxTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,12 @@
 export const HOMEPAGE_CHECKBOX_BUTTON = 'Homepage_Checkbox_Button';
 export const CHECKBOX_TESTPAGE = 'Checkbox_TestPage';
+
+/* Test Checkbox 1 */
+export const CHECKBOX_TEST_COMPONENT = 'Checkbox_Test_Component'; // A component on each specific test page
+export const CHECKBOX_ACCESSIBILITY_LABEL = 'E2E testing Checkbox accessibility label';
+
+/* Test Checkbox 2 */
+export const CHECKBOX_NO_A11Y_LABEL_COMPONENT = 'Checkbox_No_A11y_label_Component';
+export const CHECKBOX_TEST_COMPONENT_LABEL = 'Test Checkbox2 - No Accessibility Label'; // A component on each specific test page
+
+export const CHECKBOX_ON_PRESS = 'Checkbox_On_Press'; // For testing the press functionality on a Checkbox

package/src/FluentTester/TestComponents/Common/iconExamples.tsx

@@ -0,0 +1,26 @@
+import { Platform } from 'react-native';
+import { SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
+import TestSvg from '../Button/test.svg';
+
+export const svgProps: SvgIconProps = {
+  src: TestSvg,
+  viewBox: '0 0 500 500',
+};
+
+const testTtf = require('../Button/Font Awesome 5 Free-Solid-900.otf');
+
+export const fontProps: FontIconProps = Platform.select({
+  macos: {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 12,
+  },
+  default: {
+    fontFamily: `Font Awesome 5 Free`,
+    fontSrcFile: testTtf,
+    codepoint: 0xf083,
+    fontSize: 12,
+  },
+});
+
+export const testImage = require('../Button/icon_24x24.png');