feat(e2e): add data-testid attributes for E2E testing

Author: HexaField

app/src/components/call/controls/JoinCallControls.vue

@@ -5,6 +5,7 @@
     </j-toggle>
 
     <j-button
+      data-testid="join-call"
       variant="primary"
       size="lg"
       :disabled="audioDisabled"

app/src/components/call/controls/MainCallControls.vue

@@ -2,6 +2,7 @@
   <div class="call-controls" :class="{ mobile: isMobile, 'landscape-mobile': isLandscapeMobile }">
     <j-tooltip placement="top" :title="mediaSettings.audioEnabled ? 'Mute microphone' : 'Unmute microphone'">
       <j-button
+        data-testid="toggle-audio"
         :variant="mediaSettings.audioEnabled ? '' : 'primary'"
         @click="mediaDeviceStore.toggleAudio"
         square
@@ -14,6 +15,7 @@
 
     <j-tooltip placement="top" :title="mediaSettings.videoEnabled ? 'Disable camera' : 'Enable camera'">
       <j-button
+        data-testid="toggle-video"
         :variant="mediaSettings.videoEnabled ? '' : 'primary'"
         @click="mediaDeviceStore.toggleVideo"
         square
@@ -30,6 +32,7 @@
 
     <j-tooltip placement="top" :title="mediaSettings.screenShareEnabled ? 'Stop sharing' : 'Share screen'">
       <j-button
+        data-testid="screen-share"
         :variant="mediaSettings.screenShareEnabled ? 'primary' : ''"
         @click="mediaDeviceStore.toggleScreenShare"
         square
@@ -119,6 +122,7 @@
 
     <j-tooltip placement="top" title="Leave call">
       <j-button
+        data-testid="leave-call"
         variant="danger"
         @click="webrtcStore.leaveRoom"
         square

app/src/components/call/widgets/SfuIndicator.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    data-testid="call-indicator"
     class="sfu-indicator"
     :class="{
       'sfu-active': topology === 'sfu' && !switching,
@@ -10,7 +11,7 @@
     :title="tooltipText"
   >
     <span class="indicator-icon">{{ icon }}</span>
-    <span class="indicator-label">{{ label }}</span>
+    <span class="indicator-label" data-testid="sfu-mode-text">{{ label }}</span>
   </div>
 </template>
 

app/src/components/call/window/CallWindow.vue

@@ -28,7 +28,7 @@
 
           <j-flex v-if="!isMobile && agentsInCall.length" a="center" gap="100" style="margin-left: -6px">
             <AvatarGroup :users="agentsInCall" size="xs" />
-            <j-text size="400" nomargin color="ui-500">{{
+            <j-text size="400" nomargin color="ui-500" data-testid="participant-count">{{
               `${agentsInCall.length} agent${agentsInCall.length > 1 ? 's' : ''} in the call`
             }}</j-text>
           </j-flex>

app/src/components/call/window/VideoGrid.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    data-testid="video-grid"
     class="video-grid"
     :class="[selectedVideoLayout.class, { mobile: isMobile, 'landscape-mobile': isLandscapeMobile }]"
     :style="{ '--number-of-columns': numberOfColumns }"
@@ -12,6 +13,7 @@
           <MediaPlayer
             v-for="participant in unfocusedParticipants"
             :key="`participant-${participant.did}`"
+            data-testid="video-tile"
             :did="participant.did"
             :isMe="participant.isMe"
             :inCall="participant.inCall"
@@ -31,6 +33,7 @@
       <!-- Main focused video -->
       <MediaPlayer
         v-if="focusedParticipant"
+        data-testid="video-tile"
         :key="`participant-${focusedParticipant.did}`"
         :did="focusedParticipant.did"
         :isMe="focusedParticipant.isMe"
@@ -52,6 +55,7 @@
       <MediaPlayer
         v-for="participant in allParticipants"
         :key="`participant-${participant.did}`"
+        data-testid="video-tile"
         :did="participant.did"
         :isMe="participant.isMe"
         :inCall="participant.inCall"

app/src/views/main/MainView.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppLayout>
+  <AppLayout data-testid="app-home">
     <template v-slot:sidebar>
       <Sidebar />
     </template>

app/src/views/main/community/sidebar/SidebarHeader.vue

@@ -44,7 +44,7 @@
         </j-menu>
       </j-popover>
     </div>
-    <div class="community-info">
+    <div class="community-info" data-testid="community-item">
       <j-avatar size="xl" :initials="`${community?.name}`.charAt(0).toUpperCase()" :src="community?.image || null" />
       <div class="community-info-content">
         <j-text size="500" nomargin color="black">