From f471a34c5034774c360d935c67c06518a2cabe4e Mon Sep 17 00:00:00 2001
From: Michael Kaye <1917473+michaelkaye@users.noreply.github.com>
Date: Fri, 25 Aug 2023 14:46:41 +0100
Subject: [PATCH] TestID tags that are i believe required for the majority of
 tl cases.

---
 src/icons/DisableVideo.svg   | 2 +-
 src/icons/Mic.svg            | 2 +-
 src/icons/MuteMic.svg        | 2 +-
 src/icons/Video.svg          | 2 +-
 src/room/InCallView.tsx      | 2 +-
 src/room/VideoPreview.tsx    | 4 +++-
 src/video-grid/VideoTile.tsx | 3 ++-
 7 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/icons/DisableVideo.svg b/src/icons/DisableVideo.svg
index 52fca7fa..29573c7e 100644
--- a/src/icons/DisableVideo.svg
+++ b/src/icons/DisableVideo.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg data-testid="icon_videomute" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.290472 1.37627C0.677768 0.985743 1.3057 0.985743 1.69299 1.37627L16.569 16.3762C16.9563 16.7668 16.9563 17.3999 16.569 17.7904C16.1817 18.181 15.5538 18.181 15.1665 17.7904L0.290472 2.79048C-0.096824 2.39995 -0.096824 1.76679 0.290472 1.37627Z" fill="#394049"/>
 <path d="M0.597515 5.19186C0.323238 5.646 0.165249 6.17941 0.165249 6.75001V14.0833C0.165249 15.7402 1.49729 17.0833 3.14045 17.0833H12.363L0.639137 5.2371C0.624608 5.22242 0.610733 5.20733 0.597515 5.19186Z" fill="#394049"/>
 <path d="M14.2148 6.75002V11.9031L6.14598 3.75002H11.2396C12.8828 3.75002 14.2148 5.09317 14.2148 6.75002Z" fill="#394049"/>
diff --git a/src/icons/Mic.svg b/src/icons/Mic.svg
index 727ba05a..ba0ecf03 100644
--- a/src/icons/Mic.svg
+++ b/src/icons/Mic.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg data-testid="icon_audio" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.37785 4.70549C6.37785 2.79707 7.99961 1.25 10.0001 1.25C12.0007 1.25 13.6224 2.79707 13.6224 4.70548V9.87324C13.6224 11.7817 12.0007 13.3287 10.0001 13.3287C7.99961 13.3287 6.37785 11.7817 6.37785 9.87324V4.70549Z" fill="white"/>
 <path d="M3.66099 8.77015C4.30219 8.77015 4.82198 9.266 4.82198 9.87768C4.82198 12.5957 7.1314 14.8024 9.98617 14.8095C9.99084 14.8094 9.99552 14.8094 10.0002 14.8094C10.0049 14.8094 10.0095 14.8094 10.0141 14.8095C12.8688 14.8022 15.178 12.5956 15.178 9.87768C15.178 9.266 15.6978 8.77015 16.339 8.77015C16.9802 8.77015 17.5 9.266 17.5 9.87768C17.5 13.4496 14.7509 16.4077 11.1612 16.9394V17.6425C11.1612 18.2541 10.6414 18.75 10.0002 18.75C9.359 18.75 8.83921 18.2541 8.83921 17.6425V16.9395C5.24925 16.4079 2.5 13.4497 2.5 9.87768C2.5 9.266 3.01979 8.77015 3.66099 8.77015Z" fill="white"/>
 </svg>
diff --git a/src/icons/MuteMic.svg b/src/icons/MuteMic.svg
index 16841ab8..35734297 100644
--- a/src/icons/MuteMic.svg
+++ b/src/icons/MuteMic.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg data-testid="icon_audiomute" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.74372 1.50628C2.40201 1.16457 1.84799 1.16457 1.50628 1.50628C1.16457 1.84799 1.16457 2.40201 1.50628 2.74372L6.5 7.73744V10C6.5 11.933 8.067 13.5 10 13.5C10.6491 13.5 11.2569 13.3233 11.778 13.0154L13.042 14.2794C12.1838 14.8906 11.1339 15.25 10 15.25C7.10051 15.25 4.75 12.8995 4.75 10C4.75 9.51675 4.35825 9.125 3.875 9.125C3.39175 9.125 3 9.51675 3 10C3 13.5697 5.67198 16.5153 9.125 16.9458V17.875C9.125 18.3582 9.51675 18.75 10 18.75C10.4832 18.75 10.875 18.3582 10.875 17.875V16.9458C12.1531 16.7865 13.3242 16.2825 14.2924 15.5299L17.2563 18.4937C17.598 18.8354 18.152 18.8354 18.4937 18.4937C18.8354 18.152 18.8354 17.598 18.4937 17.2563L2.74372 1.50628Z" fill="#394049"/>
 <path d="M15.0678 11.3763L16.439 12.7504C16.8001 11.9061 17 10.9764 17 10C17 9.51675 16.6082 9.125 16.125 9.125C15.6418 9.125 15.25 9.51675 15.25 10C15.25 10.4762 15.1866 10.9376 15.0678 11.3763Z" fill="#394049"/>
 <path d="M6.87692 3.16834L13.5 9.80523V4.75C13.5 2.817 11.933 1.25 10 1.25C8.63618 1.25 7.45455 2.03005 6.87692 3.16834Z" fill="#394049"/>
diff --git a/src/icons/Video.svg b/src/icons/Video.svg
index f03bca26..1228bde4 100644
--- a/src/icons/Video.svg
+++ b/src/icons/Video.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg data-testid="icon_video" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.50001 3.33334C1.11929 3.33334 0 4.45264 0 5.83336V14.1667C0 15.5474 1.11929 16.6667 2.50001 16.6667H11.6667C13.0474 16.6667 14.1667 15.5474 14.1667 14.1667V5.83336C14.1667 4.45264 13.0474 3.33334 11.6667 3.33334H2.50001Z" fill="white"/>
 <path d="M18.6462 5.24983L15.8334 7.50004V12.5001L18.6462 14.7503C19.1918 15.1868 20.0001 14.7983 20.0001 14.0996V5.90056C20.0001 5.2018 19.1918 4.81332 18.6462 5.24983Z" fill="white"/>
 </svg>
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index fa99a5c9..1400f68a 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -432,7 +432,7 @@ export function InCallView({
           <RightNav>
             <GridLayoutMenu layout={layout} setLayout={setLayout} />
             {joinRule === JoinRule.Public && (
-              <InviteButton variant="icon" onClick={openInvite} />
+              <InviteButton data-testid="call_invite" variant="icon" onClick={openInvite} />
             )}
           </RightNav>
         </Header>
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index 26139967..6af6a38a 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -119,7 +119,7 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
 
   return (
     <div className={styles.preview} ref={previewRef}>
-      <video ref={videoEl} muted playsInline disablePictureInPicture />
+      <video data-testid="preview_video" ref={videoEl} muted playsInline disablePictureInPicture />
       <>
         {!muteStates.video.enabled && (
           <div className={styles.avatarContainer}>
@@ -135,11 +135,13 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
             muted={!muteStates.audio.enabled}
             onPress={onAudioPress}
             disabled={muteStates.audio.setEnabled === null}
+            data-testid="preview_mute"
           />
           <VideoButton
             muted={!muteStates.video.enabled}
             onPress={onVideoPress}
             disabled={muteStates.video.setEnabled === null}
+            data-testid="preview_videomute"
           />
           <SettingsButton onPress={openSettings} />
         </div>
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index f15052e0..cae8bbd6 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -183,7 +183,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         ) : (
           <div className={classNames(styles.infoBubble, styles.memberName)}>
             {microphoneMuted === false ? <MicIcon /> : <MicMutedIcon />}
-            <span title={displayName}>{displayName}</span>
+            <span data-testid="videoTile_caption" title={displayName}>{displayName}</span>
             {showConnectionStats && (
               <ConnectionQualityIndicator participant={sfuParticipant} />
             )}
@@ -191,6 +191,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         )}
         <VideoTrack
           participant={sfuParticipant}
+          data-testid="videoTile_video"
           source={
             content === TileContent.UserMedia
               ? Track.Source.Camera