From 855b8245db1a86bd0bc6e59c622a14255963ac96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Carden=CC=83a?=
 <35935591+luisecm@users.noreply.github.com>
Date: Fri, 25 Oct 2024 14:37:57 -0600
Subject: [PATCH] add(attributes): adding test attributes for some elements

---
 .../components/calling/IncomingCall.svelte    | 20 +++++++++----------
 .../components/messaging/ChatPreview.svelte   |  6 +++---
 .../components/messaging/Conversation.svelte  |  4 ++--
 src/lib/layouts/Chatbar.svelte                | 10 +++++-----
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/calling/IncomingCall.svelte b/src/lib/components/calling/IncomingCall.svelte
index 8295b6cc9..78f65b9cd 100644
--- a/src/lib/components/calling/IncomingCall.svelte
+++ b/src/lib/components/calling/IncomingCall.svelte
@@ -78,26 +78,26 @@
 </script>
 
 {#if pending && (VoiceRTCInstance.incomingCallFrom === null || (VoiceRTCInstance.incomingCallFrom && $callInProgress !== VoiceRTCInstance.incomingCallFrom[1]?.metadata.channel))}
-    <div id="incoming-call">
+    <div id="incoming-call" data-cy="incoming-call-modal">
         <div class="body">
             <div class="content" style={cancelledCall ? "border: var(--border-width) solid var(--warning-color);" : "border: var(--border-width) solid var(--success-color);"}>
                 {#if cancelledCall}
                     <ProfilePicture id={$user.key} hook="friend-profile-picture" size={Size.Large} image={$user.profile.photo.image} status={$user.profile.status} />
-                    <Text>{$user.name}</Text>
-                    <Text muted size={Size.Large}>{$_("settings.calling.hasCancelled")}</Text>
-                    <Text muted size={Size.Large}>{$_("settings.calling.disconnecting")}</Text>
+                    <Text hook="text-cancelled-call-username">{$user.name}</Text>
+                    <Text hook="text-has-cancelled" muted size={Size.Large}>{$_("settings.calling.hasCancelled")}</Text>
+                    <Text hook="text-disconnecting" muted size={Size.Large}>{$_("settings.calling.disconnecting")}</Text>
                     <Spacer less={true} />
                 {:else}
                     {#if $callChat.kind === ChatType.DirectMessage}
                         <ProfilePicture id={$user.key} hook="friend-profile-picture" size={Size.Large} image={$user.profile.photo.image} status={$user.profile.status} />
-                        <Text>{$user.name}</Text>
+                        <Text hook="incoming-call-username">{$user.name}</Text>
                         {#if $user.profile.status_message !== ""}
-                            <Text muted>{$user.profile.status_message}</Text>
+                            <Text hook="incoming-call-status-message" muted>{$user.profile.status_message}</Text>
                         {/if}
                     {:else}
                         <ProfilePicture id={$user.key} hook="friend-profile-picture" size={Size.Medium} image={$user.profile.photo.image} status={$user.profile.status} />
                         <div class="text-container">
-                            <Text>
+                            <Text hook="text-inviting-to-a-call">
                                 {@html $_("settings.calling.userInviteToAGroupCall", {
                                     values: {
                                         user: `<span class="bold-text" style="font-weight: bold">${$user.name}</span>`,
@@ -110,14 +110,14 @@
                     {/if}
                     <Spacer less={true} />
                     <Controls>
-                        <Button appearance={Appearance.Success} text={$_("settings.calling.voice")} on:click={_ => answerCall(true)}>
+                        <Button hook="button-accept-voice" appearance={Appearance.Success} text={$_("settings.calling.voice")} on:click={_ => answerCall(true)}>
                             <Icon icon={Shape.PhoneCall} />
                         </Button>
-                        <Button appearance={Appearance.Success} text={$_("settings.calling.video")} on:click={_ => answerCall(false)}>
+                        <Button hook="button-accept-video" appearance={Appearance.Success} text={$_("settings.calling.video")} on:click={_ => answerCall(false)}>
                             <Icon icon={Shape.VideoCamera} />
                         </Button>
                     </Controls>
-                    <Button appearance={Appearance.Error} text={$_("settings.calling.decline")} on:click={endCall}>
+                    <Button hook="button-decline" appearance={Appearance.Error} text={$_("settings.calling.decline")} on:click={endCall}>
                         <Icon icon={Shape.PhoneXMark} />
                     </Button>
                 {/if}
diff --git a/src/lib/components/messaging/ChatPreview.svelte b/src/lib/components/messaging/ChatPreview.svelte
index 1c113da9f..539ba774b 100644
--- a/src/lib/components/messaging/ChatPreview.svelte
+++ b/src/lib/components/messaging/ChatPreview.svelte
@@ -27,10 +27,10 @@
 
     $: users = Store.getUsers(chat.users)
     $: lookupUsers = Store.getUsersLookup(chat.users)
-    $: chatName = chat.kind === ChatType.Group ? chat.name : $users[1]?.name ?? $users[0].name
+    $: chatName = chat.kind === ChatType.Group ? chat.name : ($users[1]?.name ?? $users[0].name)
     $: loading = chatName === "Unknown User" || ($users.length <= 2 && ($users[1]?.loading == true || $users[0].loading == true))
     $: directChatPhoto = $users[1]?.profile.photo.image ?? $users[0].profile.photo.image
-    $: chatStatus = $users.length > 2 ? Status.Offline : $users[1]?.profile.status ?? $users[0].profile.status
+    $: chatStatus = $users.length > 2 ? Status.Offline : ($users[1]?.profile.status ?? $users[0].profile.status)
     $: simpleUnreads = derived(SettingsStore.state, s => s.messaging.simpleUnreads)
     $: user = chat.typing_indicator.users().map(u => {
         return $lookupUsers[u]
@@ -149,7 +149,7 @@
                             {chat.notifications}
                         </span>
                     {:else if chat.notifications > 0 && $simpleUnreads}
-                        <span class="unreads simple"></span>
+                        <span class="unreads simple" data-cy="unreads-notification"></span>
                     {/if}
                 {/if}
             </div>
diff --git a/src/lib/components/messaging/Conversation.svelte b/src/lib/components/messaging/Conversation.svelte
index a8f7b993d..283c34283 100644
--- a/src/lib/components/messaging/Conversation.svelte
+++ b/src/lib/components/messaging/Conversation.svelte
@@ -109,8 +109,8 @@
         </div>
     {:else}
         {#if unreads && unreads.unread > 0}
-            <div class="unreads" aria-label="unreads" role="presentation" on:click={scrollToUnread}>
-                <div class="bookmark"></div>
+            <div class="unreads" data-cy="unreads" aria-label="unreads" role="presentation" on:click={scrollToUnread}>
+                <div class="bookmark" data-cy="unreads-scroll-to"></div>
                 {$_("chat.newMessageSinceAmount", { values: { amount: unreads.unread, date: $date(unreads.since, { format: "medium" }), time: $time(unreads.since) } })}
             </div>
         {/if}
diff --git a/src/lib/layouts/Chatbar.svelte b/src/lib/layouts/Chatbar.svelte
index fc1098f3a..feb863c23 100644
--- a/src/lib/layouts/Chatbar.svelte
+++ b/src/lib/layouts/Chatbar.svelte
@@ -185,14 +185,14 @@
 
     <slot></slot>
     {#if replyTo}
-        <div class="chatbar-reply">
+        <div class="chatbar-reply" data-cy="chatbar-reply">
             <StoreResolver value={replyTo.details.origin} resolver={v => Store.getUser(v)} let:resolved>
-                <Label text={$_("chat.replyTo", { values: { user: resolved.name } })} />
+                <Label hook="label-reply-to" text={$_("chat.replyTo", { values: { user: resolved.name } })} />
                 <div class="reply-message">
                     <Message id={replyTo.id} remote={false} position={MessagePosition.First} morePadding={replyTo.text.length > 1 || replyTo.attachments.length > 0}>
                         {#each replyTo.text as line}
                             {#if getValidPaymentRequest(line) != undefined}
-                                <Button text={getValidPaymentRequest(line)?.toDisplayString()} on:click={async () => getValidPaymentRequest(line)?.execute()}></Button>
+                                <Button hook="button-payment-request" text={getValidPaymentRequest(line)?.toDisplayString()} on:click={async () => getValidPaymentRequest(line)?.execute()}></Button>
                             {:else if !line.includes(VoiceRTCMessageType.Calling) && !line.includes(VoiceRTCMessageType.EndingCall) && !line.includes(tempCDN)}
                                 <Text hook="text-chat-message" markdown={line} />
                             {:else if line.includes(tempCDN)}
@@ -203,14 +203,14 @@
                         {/each}
 
                         {#if replyTo.attachments.length > 0}
-                            <div class="attachment-container">
+                            <div class="attachment-container" data-cy="reply-attachment-container">
                                 <Icon icon={Shape.Document} size={Size.Large} />
                                 {$_("chat.attachments-count", { values: { amount: replyTo.attachments.length } })}
                             </div>
                         {/if}
                     </Message>
                     <ProfilePicture id={resolved.key} hook="message-group-remote-profile-picture" size={Size.Small} image={resolved.profile.photo.image} status={resolved.profile.status} highlight={Appearance.Default} notifications={0} />
-                    <Button appearance={Appearance.Default} icon={true} small={true} on:click={_ => (replyTo = undefined)}>
+                    <Button hook="button-cancel-reply" appearance={Appearance.Default} icon={true} small={true} on:click={_ => (replyTo = undefined)}>
                         <Icon icon={Shape.XMark} />
                     </Button>
                 </div>