From d87aa4e0613b496a50ea22052eb5653fa9b5539a Mon Sep 17 00:00:00 2001
From: Ayush Singh <ayushsinghs@yahoo.in>
Date: Tue, 28 Feb 2023 17:06:53 +0530
Subject: [PATCH 1/3] Expand avatar jest tests

---
 .../{Avatar.test.jsx => Avatar.test.tsx}      |  34 +-
 .../__snapshots__/Avatar.test.jsx.snap        |  92 ---
 .../__snapshots__/Avatar.test.tsx.snap        | 560 ++++++++++++++++++
 3 files changed, 587 insertions(+), 99 deletions(-)
 rename packages/components/Avatar/src/__tests__/{Avatar.test.jsx => Avatar.test.tsx} (85%)
 delete mode 100644 packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.jsx.snap
 create mode 100644 packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.tsx.snap

diff --git a/packages/components/Avatar/src/__tests__/Avatar.test.jsx b/packages/components/Avatar/src/__tests__/Avatar.test.tsx
similarity index 85%
rename from packages/components/Avatar/src/__tests__/Avatar.test.jsx
rename to packages/components/Avatar/src/__tests__/Avatar.test.tsx
index 0f1cc71dd8..494d8d6914 100644
--- a/packages/components/Avatar/src/__tests__/Avatar.test.jsx
+++ b/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();
+  });
+});
diff --git a/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.jsx.snap b/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.jsx.snap
deleted file mode 100644
index 57aa9ec47d..0000000000
--- a/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.jsx.snap
+++ /dev/null
@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Avatar rendering renders Avatar 1`] = `
-<View
-  accessibilityLabel=""
-  accessibilityRole="image"
-  accessible={true}
-  icon={null}
-  image={
-    Object {
-      "accessibilityLabel": undefined,
-      "source": undefined,
-    }
-  }
-  initials=""
-  shape="circular"
-  style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "aspectRatio": 1,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "minHeight": 24,
-      "minWidth": 24,
-      "opacity": 1,
-    }
-  }
->
-  <View
-    accessible={false}
-    style={
-      Object {
-        "alignItems": "center",
-        "aspectRatio": 1,
-        "backgroundColor": "#e6e6e6",
-        "borderColor": "#d1d1d1",
-        "borderRadius": 9999,
-        "borderWidth": 0,
-        "justifyContent": "center",
-        "minHeight": 24,
-        "minWidth": 24,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight={16}
-      bbWidth={16}
-      color={4284572001}
-      focusable={false}
-      height={16}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          Object {
-            "flex": 0,
-            "height": 16,
-            "width": 16,
-          },
-        ]
-      }
-      tintColor={4284572001}
-      vbHeight={16}
-      vbWidth={14}
-      width={16}
-    >
-      <RNSVGGroup>
-        <RNSVGPath
-          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
-          fill={
-            Array [
-              2,
-            ]
-          }
-          propList={
-            Array [
-              "fill",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
diff --git a/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.tsx.snap
new file mode 100644
index 0000000000..0b22e5cb15
--- /dev/null
+++ b/packages/components/Avatar/src/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -0,0 +1,560 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar component tests Avatar badge 1`] = `
+<View
+  accessibilityLabel=", available"
+  accessibilityRole="image"
+  accessible={true}
+  badgeStatus="available"
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  outOfOffice={false}
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 9999,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <View
+    accessible={true}
+    iconPosition="before"
+    position="absolute"
+    style={
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "aspectRatio": 1,
+        "backgroundColor": "#ffffff",
+        "borderColor": "#ffffff",
+        "borderRadius": 9999,
+        "borderWidth": 1,
+        "bottom": -1,
+        "flexDirection": "row",
+        "height": 8,
+        "justifyContent": "center",
+        "paddingHorizontal": 0,
+        "position": "absolute",
+        "right": -1,
+        "width": 8,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={6}
+      bbWidth={6}
+      color={4279476494}
+      fill="none"
+      focusable={false}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "aspectRatio": 1,
+            "color": "#13a10e",
+            "height": 6,
+            "width": 6,
+          },
+          Object {
+            "flex": 0,
+            "height": 6,
+            "width": 6,
+          },
+        ]
+      }
+      tintColor={4279476494}
+      vbHeight={16}
+      vbWidth={16}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          Array [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.7-9.3l-4 4a1 1 0 01-1.41 0l-2-2a1 1 0 111.42-1.4L7 8.58l3.3-3.3a1 1 0 011.4 1.42z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar circular 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 9999,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar default 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 9999,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar ring 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  active="active"
+  activeAppearance="ring"
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 32,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "aspectRatio": 1,
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 9999,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "marginLeft": 2,
+        "marginTop": 2,
+        "minHeight": 32,
+        "minWidth": 32,
+      }
+    }
+  >
+    <View
+      accessible={false}
+      style={
+        Object {
+          "alignItems": "center",
+          "aspectRatio": 1,
+          "backgroundColor": "#e6e6e6",
+          "borderColor": "#d1d1d1",
+          "borderRadius": 9999,
+          "borderWidth": 0,
+          "justifyContent": "center",
+          "marginLeft": 2,
+          "marginTop": 2,
+          "minHeight": 24,
+          "minWidth": 24,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={16}
+        bbWidth={16}
+        color={4284572001}
+        focusable={false}
+        height={16}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 16,
+              "width": 16,
+            },
+          ]
+        }
+        tintColor={4284572001}
+        vbHeight={16}
+        vbWidth={14}
+        width={16}
+      >
+        <RNSVGGroup>
+          <RNSVGPath
+            d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+            fill={
+              Array [
+                2,
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Avatar component tests Avatar square 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  icon={null}
+  image={
+    Object {
+      "accessibilityLabel": undefined,
+      "source": undefined,
+    }
+  }
+  initials=""
+  shape="square"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "aspectRatio": 1,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "aspectRatio": 1,
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 4,
+        "borderWidth": 0,
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={16}
+      color={4284572001}
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 16,
+          },
+        ]
+      }
+      tintColor={4284572001}
+      vbHeight={16}
+      vbWidth={14}
+      width={16}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+          fill={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

From 913d68a0fc833c4773110cede0c5ce5f48603121 Mon Sep 17 00:00:00 2001
From: Ayush Singh <ayushsinghs@yahoo.in>
Date: Thu, 30 Mar 2023 01:05:27 +0530
Subject: [PATCH 2/3] Fix default avatar rendering and e2e section

---
 .../src/TestComponents/Avatar/E2EAvatarTest.tsx   |  1 +
 .../components/Avatar/src/AvatarTokens.mobile.ts  | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx b/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx
index 14e001a992..bba9ba21bf 100644
--- a/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx
+++ b/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)}
       />
diff --git a/packages/components/Avatar/src/AvatarTokens.mobile.ts b/packages/components/Avatar/src/AvatarTokens.mobile.ts
index ab7fa152f9..de208618ca 100644
--- a/packages/components/Avatar/src/AvatarTokens.mobile.ts
+++ b/packages/components/Avatar/src/AvatarTokens.mobile.ts
@@ -6,15 +6,10 @@ 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,
@@ -22,6 +17,16 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     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,

From 807dbbcb4dcc37d92ea544c414ea99abe1d9a956 Mon Sep 17 00:00:00 2001
From: Ayush Singh <ayushsinghs@yahoo.in>
Date: Thu, 30 Mar 2023 01:22:36 +0530
Subject: [PATCH 3/3] Change files

---
 ...native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json | 7 +++++++
 ...native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json
 create mode 100644 change/@fluentui-react-native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json

diff --git a/change/@fluentui-react-native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json b/change/@fluentui-react-native-avatar-afbabcb7-20be-4858-b26f-36cc256153be.json
new file mode 100644
index 0000000000..49208d7586
--- /dev/null
+++ b/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"
+}
diff --git a/change/@fluentui-react-native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json b/change/@fluentui-react-native-tester-d73be75c-c520-4e1c-8e88-7d9c1b9fdfc7.json
new file mode 100644
index 0000000000..45c0f68b2e
--- /dev/null
+++ b/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"
+}