From 523c95447ca38ec7cee786d22c608f0481d0b6cb Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 20 May 2024 16:22:09 +1000
Subject: [PATCH] feat: added datatestids to avatarplaceholder and member
 placeholder

---
 .../avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx     | 10 +++++++---
 ts/components/icon/MemberAvatarPlaceHolder.tsx         |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
index 6c8059fca..811567d53 100644
--- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
+++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
@@ -8,6 +8,7 @@ type Props = {
   diameter: number;
   name: string;
   pubkey: string;
+  dataTestId?: string;
 };
 
 const sha512FromPubkeyOneAtAtime = async (pubkey: string) => {
@@ -20,6 +21,9 @@ const sha512FromPubkeyOneAtAtime = async (pubkey: string) => {
   });
 };
 
+// for testing purposes only
+export const AvatarPlaceHolderUtils = { sha512FromPubkeyOneAtAtime };
+
 // do not do this on every avatar, just cache the values so we can reuse them across the app
 // key is the pubkey, value is the hash
 const cachedHashes = new Map<string, number>();
@@ -74,7 +78,7 @@ function useHashBasedOnPubkey(pubkey: string) {
 }
 
 export const AvatarPlaceHolder = (props: Props) => {
-  const { pubkey, diameter, name } = props;
+  const { pubkey, diameter, name, dataTestId } = props;
 
   const { hash, loading } = useHashBasedOnPubkey(pubkey);
 
@@ -85,7 +89,7 @@ export const AvatarPlaceHolder = (props: Props) => {
 
   if (loading || !hash) {
     // return avatar placeholder circle
-    return <MemberAvatarPlaceHolder />;
+    return <MemberAvatarPlaceHolder dataTestId={dataTestId} />;
   }
 
   const initials = getInitials(name);
@@ -97,7 +101,7 @@ export const AvatarPlaceHolder = (props: Props) => {
   const bgColor = avatarPlaceholderColors[bgColorIndex];
 
   return (
-    <svg viewBox={viewBox}>
+    <svg viewBox={viewBox} data-testid={dataTestId}>
       <g id="UrTavla">
         <circle
           cx={r}
diff --git a/ts/components/icon/MemberAvatarPlaceHolder.tsx b/ts/components/icon/MemberAvatarPlaceHolder.tsx
index c2a4bbffc..f2b23b3ae 100644
--- a/ts/components/icon/MemberAvatarPlaceHolder.tsx
+++ b/ts/components/icon/MemberAvatarPlaceHolder.tsx
@@ -1,6 +1,6 @@
-export const MemberAvatarPlaceHolder = () => {
+export const MemberAvatarPlaceHolder = ({ dataTestId }: { dataTestId?: string }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" data-testid={dataTestId}>
       <circle fill="var(--primary-color)" cx="13" cy="13" r="13" />
       <path
         fill="var(--white-color)"