test(cypress): add tests for videocall pair chat (#3331)

Satellite-im · Jun 21, 2022 · 855ad53 · 855ad53
1 parent f9be673
commit 855ad53
Show file tree

Hide file tree

Showing 16 changed files with 644 additions and 64 deletions.
diff --git a/components/interactables/Volume/Volume.html b/components/interactables/Volume/Volume.html
@@ -1,4 +1,7 @@
-<div :class="`volume-slider volume-slider--${direction}`">
+<div
+  data-cy="volume-slider"
+  :class="`volume-slider volume-slider--${direction}`"
+>
   <vue-slider
     v-model="value"
     v-bind:direction="direction"

diff --git a/components/ui/Loaders/Message/Message.vue b/components/ui/Loaders/Message/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="message-loader" data-cy="message-loading">
+  <div class="message-loader">
     <div v-for="i in count" :key="i" class="message-loader-item">
       <div class="left">
         <div class="placeholder-profile" />

diff --git a/components/views/chat/conversation/Conversation.html b/components/views/chat/conversation/Conversation.html
@@ -49,7 +49,11 @@
     >
       <template #placeholder>
         <div class="conversation-loader">
-          <UiLoadersSpinner class="conversation-loader-spinner" spinning />
+          <UiLoadersSpinner
+            data-cy="message-loading"
+            class="conversation-loader-spinner"
+            spinning
+          />
           {{ $t('pages.chat.infinite_scroll.loading') }}
         </div>
       </template>

diff --git a/components/views/media/Media.html b/components/views/media/Media.html
@@ -8,6 +8,7 @@
   <div id="media" ref="media">
     <MediaUser
       id="local_video"
+      data-cy="local-video"
       @dblclick="handleDoubleClick('local_video')"
       :user="localParticipant"
       :isLocal="true"
@@ -16,6 +17,7 @@
     <div v-for="participant in remoteParticipants" v-if="participant">
       <MediaUser
         :id="`remote_video_${ participant.peerId }`"
+        data-cy="remote-video"
         @dblclick="handleDoubleClick('remote_video')"
         :user="participant"
         :calling="!participant"

diff --git a/components/views/media/actions/Actions.html b/components/views/media/actions/Actions.html
@@ -11,20 +11,21 @@
       :loading="isLoading"
       loadingText=""
     >
-      <video-icon v-if="!videoMuted" size="1.2x" />
-      <video-off-icon v-else size="1.2x" />
+      <video-icon data-cy="video-unmuted" v-if="!videoMuted" size="1.2x" />
+      <video-off-icon data-cy="video-muted" v-else size="1.2x" />
     </InteractablesButton>
   </div>
   <div v-tooltip.top="audioMuted ? $t('controls.unmute') : $t('controls.mute')">
     <InteractablesButton
       :type="audioMuted ? 'danger' : 'dark'"
       size="small"
+      data-cy="call-audio"
       :action="() => toggleMute('audio')"
       :loading="isLoading"
       loadingText=""
     >
-      <mic-icon v-if="!audioMuted" size="1.2x" />
-      <mic-off-icon v-else size="1.2x" />
+      <mic-icon data-cy="audio-unmuted" v-if="!audioMuted" size="1.2x" />
+      <mic-off-icon data-cy="audio-muted" v-else size="1.2x" />
     </InteractablesButton>
   </div>
   <div
@@ -33,18 +34,24 @@
     <InteractablesButton
       :type="screenMuted ? 'danger' : 'dark'"
       size="small"
+      data-cy="call-screen-share"
       :action="() => toggleMute('screen')"
       :loading="isLoading"
       loadingText=""
     >
-      <screen-share-icon v-if="!screenMuted" size="1.2x" />
-      <screen-share-off-icon v-else size="1.2x" />
+      <screen-share-icon
+        data-cy="screen-unmuted"
+        v-if="!screenMuted"
+        size="1.2x"
+      />
+      <screen-share-off-icon data-cy="screen-muted" v-else size="1.2x" />
     </InteractablesButton>
   </div>
-  <div data-cy="call-hangup" v-tooltip.top="$t('controls.hang_up')">
+  <div v-tooltip.top="$t('controls.hang_up')">
     <InteractablesButton
       class="right"
       type="danger"
+      data-cy="call-hangup"
       size="small"
       :action="() => hangUp()"
     >

diff --git a/components/views/media/actions/settings/Settings.html b/components/views/media/actions/settings/Settings.html
@@ -1,4 +1,8 @@
-<div id="media-settings" v-tooltip.right="$t('controls.not_available')">
+<div
+  id="media-settings"
+  data-cy="media-settings"
+  v-tooltip.right="$t('controls.not_available')"
+>
   <ul id="settings-menu" v-if="menuOpen" ref="menu" v-click-outside="hideMenu">
     <li class="settings-item">
       <div class="item-header" @click="switchMenuItem">

diff --git a/components/views/media/actions/volume/Volume.html b/components/views/media/actions/volume/Volume.html
@@ -10,27 +10,31 @@
     v-bind:direction="direction"
     @returned-value="receivedValue"
   />
-  <div class="volume-icon" v-if="!plain">
+  <div class="volume-icon" data-cy="volume-icon" v-if="!plain">
     <volume-2-icon
       v-if="volume >= 70"
+      data-cy="volume-at-max"
       @click="toggleSlider"
       size="1.2x"
       class="fa-fw"
     />
     <volume-1-icon
       v-if="volume > 30 && volume < 70"
+      data-cy="volume-less-than-70"
       @click="toggleSlider"
       size="1.2x"
       class="fa-fw"
     />
     <volume-icon
       v-if="volume > 0 && volume <= 30"
+      data-cy="volume-less-than-30"
       @click="toggleSlider"
       size="1.2x"
       class="fa-fw"
     />
     <volume-x-icon
       v-if="volume == 0"
+      data-cy="volume-at-min"
       @click="toggleSlider"
       size="1.2x"
       class="fa-fw"

diff --git a/components/views/media/heading/Heading.html b/components/views/media/heading/Heading.html
@@ -1,14 +1,26 @@
 <div id="media-heading">
-  <TypographyTag v-if="elapsedTimeLabel" :text="elapsedTimeLabel" />
+  <TypographyTag
+    v-if="elapsedTimeLabel"
+    data-cy="elapsed-time"
+    :text="elapsedTimeLabel"
+  />
   <div class="spacer"></div>
   <transition name="media-fullscreen" mode="out-in">
     <div
       v-bind:key="ui.fullscreen"
       v-tooltip.left="ui.fullscreen ? $t('ui.exit_fullscreen') : $t('ui.fullscreen')"
       @click="toggleFullscreen"
     >
-      <minimize-icon v-if="ui.fullscreen" size="1.2x" />
-      <maximize-icon v-else="ui.fullscreen" size="1.2x" />
+      <minimize-icon
+        data-cy="exit-fullscreen"
+        v-if="ui.fullscreen"
+        size="1.2x"
+      />
+      <maximize-icon
+        data-cy="go-fullscreen"
+        v-else="ui.fullscreen"
+        size="1.2x"
+      />
     </div>
   </transition>
 </div>
diff --git a/components/views/media/incomingCall/IncomingCall.html b/components/views/media/incomingCall/IncomingCall.html
@@ -25,17 +25,24 @@
     </div>
   </div>
   <footer class="modal-card-foot">
-    <button class="button is-success" v-on:click="() => acceptCall(['audio'])">
+    <button
+      class="button is-success"
+      data-cy="incoming-call-accept"
+      v-on:click="() => acceptCall(['audio'])"
+    >
       <phone-icon size="1x" class="button-icon" />
     </button>
     <!-- <button
       class="button is-success"
-      data-cy="incoming-call-accept-video"
       v-on:click="() => acceptCall(['audio', 'video'])"
     >
       <video-icon size="1x" class="button-icon" />
     </button> -->
-    <button class="button is-danger" v-on:click="denyCall">
+    <button
+      class="button is-danger"
+      data-cy="incoming-call-deny"
+      v-on:click="denyCall"
+    >
       <phone-off-icon size="1x" class="button-icon" />
     </button>
   </footer>

diff --git a/components/views/media/user/User.html b/components/views/media/user/User.html
@@ -1,13 +1,14 @@
 <div v-if="call" class="user">
   <div class="indicators">
-    <div class="indicator" v-if="muted.audio">
+    <div class="indicator" data-cy="muted-indicator" v-if="muted.audio">
       <mic-off-icon />
     </div>
   </div>
 
   <div v-if="screenStream" class="video-stream-container">
     <video
       class="video-stream screen-stream"
+      data-cy="screen-stream"
       :src-object.prop="screenStream"
       playsinline
       :id="`${isLocal ? 'local' : 'remote'}-screen-${user.address}`"
@@ -17,6 +18,7 @@
   <div v-else-if="videoStream" class="video-stream-container">
     <video
       class="video-stream"
+      data-cy="video-stream"
       :class="{flip: flipVideo && isLocal}"
       :src-object.prop="videoStream"
       playsinline
@@ -29,6 +31,7 @@
       :type="src ? 'image' : 'random'"
       :seed="user.address"
       :size="$device.isMobile ? 36 : 65"
+      data-cy="media-user-circle"
       :class="{calling: audioStream}"
       :source="src"
       color="transparent"

diff --git a/components/views/navigation/sidebar/controls/Controls.html b/components/views/navigation/sidebar/controls/Controls.html
@@ -4,22 +4,36 @@
     size="small"
     v-tooltip.top="audioMuted ? $t('controls.unmute') : $t('controls.mute')"
     :action="() => toggleMute('audio')"
+    data-cy="sidebar-mic-button"
     :text="$t('controls.mic')"
     :loading="isLoading"
     loadingText=""
   >
-    <mic-off-icon v-if="audioMuted" size="1x"></mic-off-icon>
-    <mic-icon v-else size="1x"></mic-icon>
+    <mic-off-icon
+      data-cy="sidebar-mic-muted"
+      v-if="audioMuted"
+      size="1x"
+    ></mic-off-icon>
+    <mic-icon data-cy="sidebar-mic-unmuted" v-else size="1x"></mic-icon>
   </InteractablesButton>
   <InteractablesButton
     :type="audio.deafened ? 'danger' : 'dark'"
+    data-cy="sidebar-audio-button"
     size="small"
     v-tooltip.top="audio.deafened ? $t('controls.undeafen') : $t('controls.deafen')"
     :action="() => toggleDeafen()"
     :text="$t('controls.headphones')"
   >
-    <headphones-off-icon v-if="audio.deafened" size="1x"></headphones-off-icon>
-    <headphones-icon v-else size="1x"></headphones-icon>
+    <headphones-off-icon
+      data-cy="sidebar-audio-deafened"
+      v-if="audio.deafened"
+      size="1x"
+    ></headphones-off-icon>
+    <headphones-icon
+      data-cy="sidebar-audio-not-deafened"
+      v-else
+      size="1x"
+    ></headphones-icon>
   </InteractablesButton>
   <InteractablesButton
     v-if="inCall"
@@ -31,7 +45,11 @@
     :loading="isLoading"
     loadingText=""
   >
-    <video-off-icon v-if="videoMuted" size="1x"></video-off-icon>
-    <video-icon v-else size="1x"></video-icon>
+    <video-off-icon
+      data-cy="sidebar-video-muted"
+      v-if="videoMuted"
+      size="1x"
+    ></video-off-icon>
+    <video-icon data-cy="sidebar-video-unmuted" v-else size="1x"></video-icon>
   </InteractablesButton>
 </div>