[Avatar] Add more jest tests / Fix default avatar rendering for Android

apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx

@@ -25,6 +25,7 @@ export const E2EAvatarTest: React.FunctionComponent = () => {
       <Avatar
         name="Richard"
         badge={{ status: 'available' }}
+        avatarColor={'colorful'}
         /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
         {...testProps(AVATAR_SECONDARY_TEST_COMPONENT)}
       />

change/@fluentui-react-native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix default avatar rendering and e2e section",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Fix default avatar rendering and e2e section",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}

packages/components/Avatar/src/AvatarTokens.mobile.ts

@@ -6,22 +6,27 @@ import type { AvatarTokens } from '.';
 
 export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme) =>
   ({
-    badgeSize: 'small',
     color: t.colors.neutralForeground3,
     backgroundColor: t.colors.neutralBackground5,
     avatarOpacity: 1,
     fontFamily: t.typography.variants.body1.face,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size200,
-    size: 56,
-    iconSize: 16,
     iconColor: t.colors.neutralForeground2,
     ringBackgroundColor: t.colors.neutralBackground1,
     ringColor: t.colors.neutralStroke1,
     borderColor: 'white',
     circular: {
       borderRadius: globalTokens.corner.radiusCircular,
     },
+    size: 24,
+    badgeSize: 'small',
+    badgeY: -1 - globalTokens.stroke.width20, // width20 subtracted to accomodate border width of presence badge
+    badgeX: 1 - globalTokens.stroke.width20, // sign negated to flip x-axis based on design assumption
+    iconSize: 16,
+    fontSize: globalTokens.font.size100,
+    fontWeight: globalTokens.font.weight.regular,
+    square: {
+      borderRadius: globalTokens.corner.radius40,
+    },
     // Badge is not shown for size 16 on Android.
     size16: {
       size: 16,

packages/components/Avatar/src/__tests__/Avatar.test.jsx → packages/components/Avatar/src/__tests__/Avatar.test.tsx

@@ -92,13 +92,6 @@ const edgeCaseData = [
   ['1x1', 'X'],
 ];
 
-describe('Avatar rendering', () => {
-  it('renders Avatar', () => {
-    const tree = renderer.create(<Avatar />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
-
 describe('getInitials method', () => {
   it.each(emptyData)("returns an empty string for '%s'", (text, expected) => {
     expect(getInitials(text)).toBe(expected);
@@ -140,3 +133,30 @@ describe('resolveColorfulToSpecificColor method', () => {
     expect(resolveColorfulToSpecificColor('x', undefined)).toBe('darkRed');
   });
 });
+
+describe('Avatar component tests', () => {
+  it('Avatar default', () => {
+    const tree = renderer.create(<Avatar />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar circular', () => {
+    const tree = renderer.create(<Avatar shape="circular" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar square', () => {
+    const tree = renderer.create(<Avatar shape="square" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar badge', () => {
+    const tree = renderer.create(<Avatar badge={{ status: 'available', outOfOffice: false }} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Avatar ring', () => {
+    const tree = renderer.create(<Avatar active="active" activeAppearance="ring" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});