@fluentui-react-native/tester 0.64.7 → 0.64.10

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

@@ -70,84 +70,88 @@ export const CustomizeUsage: React.FunctionComponent = () => {
           <Switch value={transparent} onValueChange={setTransparent} />
         </View>
 
-        <View>
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Background color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setCoinColor(e.nativeEvent.text);
-            }}
-          />
+        <View style={{ flexDirection: 'row' }}>
+          <View>
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Background color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setCoinColor(e.nativeEvent.text);
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Ring color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setRingColor(e.nativeEvent.text);
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Ring color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingColor(e.nativeEvent.text);
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Avatar size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setSize(e.nativeEvent.text);
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Avatar size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setSize(e.nativeEvent.text);
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Icon size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setIconSize(parseInt(e.nativeEvent.text));
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Icon size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setIconSize(parseInt(e.nativeEvent.text));
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Ring background color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setRingBackgroundColor(e.nativeEvent.text);
-            }}
-          />
-          <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Initials text color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setTextColor(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Initials size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setInitialsSize(parseInt(e.nativeEvent.text));
-            }}
-          />
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Font weight"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setFontWeight(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Font family"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setFontFamily(e.nativeEvent.text);
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Ring background color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingBackgroundColor(e.nativeEvent.text);
+              }}
+            />
+          </View>
+          <View style={{ paddingHorizontal: 20 }}>
+            <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Initials text color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setTextColor(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Initials size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setInitialsSize(parseInt(e.nativeEvent.text));
+              }}
+            />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Font weight"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setFontWeight(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Font family"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setFontFamily(e.nativeEvent.text);
+              }}
+            />
+          </View>
         </View>
 
         <Text>These features will be available later</Text>

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

@@ -0,0 +1,24 @@
+import { JSAvatar } from '@fluentui-react-native/experimental-avatar';
+import * as React from 'react';
+import { View } from 'react-native';
+import {
+  JSAVATAR_ACCESSIBILITY_LABEL,
+  JSAVATAR_ACCESSIBILITY_HINT,
+  JSAVATAR_ACCESSIBILITY_ROLE,
+  AVATAR_TEST_COMPONENT,
+  AVATAR_SECONDARY_TEST_COMPONENT,
+} from './consts';
+
+export const E2EAvatarTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <JSAvatar
+        testID={AVATAR_TEST_COMPONENT}
+        accessibilityHint={JSAVATAR_ACCESSIBILITY_HINT}
+        accessibilityLabel={JSAVATAR_ACCESSIBILITY_LABEL}
+        accessibilityRole={JSAVATAR_ACCESSIBILITY_ROLE}
+      />
+      <JSAvatar testID={AVATAR_SECONDARY_TEST_COMPONENT} name="Richard" badge={{ status: 'available' }} />
+    </View>
+  );
+};

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

@@ -3,6 +3,7 @@ import { JSAVATAR_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { StandardUsage } from './BasicAvatar';
 import { CustomizeUsage } from './CustomizedAvatar';
+import { E2EAvatarTest } from './E2EAvatarTest';
 
 const avatarSections: TestSection[] = [
   {
@@ -14,6 +15,10 @@ const avatarSections: TestSection[] = [
     name: 'Customize Usage',
     component: CustomizeUsage,
   },
+  {
+    name: 'Avatar E2E',
+    component: E2EAvatarTest,
+  },
 ];
 
 export const JSAvatarTest: React.FunctionComponent = () => {

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

@@ -1,3 +1,17 @@
 export const HOMEPAGE_AVATAR_BUTTON = 'Homepage_Avatar_Button';
 export const AVATAR_TESTPAGE = 'Avatar_TestPage';
 export const JSAVATAR_TESTPAGE = 'Avatar_Win32_TestPage';
+
+export const JSAVATAR_ACCESSIBILITY_LABEL = 'E2E Avatar Accessibility label';
+export const JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME = 'Richard, available';
+export const JSAVATAR_ACCESSIBILITY_HINT = 'E2E Avatar Accessibility hint';
+export const JSAVATAR_ACCESSIBILITY_ROLE = 'link';
+
+export const AVATAR_TEST_COMPONENT = 'AVATAR_TEST_COMPONENT';
+export const AVATAR_SECONDARY_TEST_COMPONENT = 'AVATAR_SECONDARY_TEST_COMPONENT';
+
+export const ACCESSIBILITY_LABEL_ATTR = 'Name';
+export const ACCESSIBILITY_HINT_ATTRIBUTE = 'HelpText';
+export const ACCESSIBILITY_ROLE_ATTRIBUTE = 'ControlType';
+export const ACCESSIBILITY_ROLE_IMAGE = 'ControlType.Image';
+export const ACCESSIBILITY_ROLE_LINK = 'ControlType.HyperLink';