Merge pull request #449 from ant-media/integrationTestForRaisingHand

Add raising hand integration test code

react/.env.development.webinar

@@ -28,7 +28,7 @@ REACT_APP_FOOTER_MESSAGE_BUTTON_VISIBILITY=true
 REACT_APP_FOOTER_PARTICIPANT_LIST_BUTTON_VISIBILITY=true
 REACT_APP_FOOTER_END_CALL_BUTTON_VISIBILITY=true
 REACT_APP_FOOTER_CLOCK_VISIBILITY=true
-REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=false
+REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=true
 
 # Option menu buttons configurations
 REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=false

react/.env.production.webinar

@@ -28,7 +28,7 @@ REACT_APP_FOOTER_MESSAGE_BUTTON_VISIBILITY=true
 REACT_APP_FOOTER_PARTICIPANT_LIST_BUTTON_VISIBILITY=true
 REACT_APP_FOOTER_END_CALL_BUTTON_VISIBILITY=true
 REACT_APP_FOOTER_CLOCK_VISIBILITY=true
-REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=false
+REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=true
 
 # Option menu buttons configurations
 REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=false

react/src/Components/Footer/Components/MoreOptionsButton.js

@@ -214,7 +214,7 @@ function MoreOptionsButton(props) {
                       <ListItemIcon>
                           <SvgIcon size={36} name={"raise-hand"} color={"white"} />
                       </ListItemIcon>
-                      <ListItemText id={"publisher-request-list-button"}>{t("Publisher Request List")}</ListItemText>
+                      <ListItemText id={"more-options-publisher-request-list-button"}>{t("Publisher Request List")}</ListItemText>
                   </MenuItem>
                   : null}
 
@@ -225,7 +225,7 @@ function MoreOptionsButton(props) {
                       <ListItemIcon>
                           <SvgIcon size={36} name={"raise-hand"} color={"white"} />
                       </ListItemIcon>
-                      <ListItemText id={"request-to-publisher-button"}>{t("Request becoming publisher")}</ListItemText>
+                      <ListItemText id={"more-options-request-publish-button"}>{t("Request becoming publisher")}</ListItemText>
                   </MenuItem>
                   : null}
 

react/src/Components/Footer/Footer.js

@@ -222,7 +222,9 @@ function Footer(props) {
                       <RequestPublishButton
                           footer={true}
                           rounded={false}
-                          handlePublisherRequest={()=>props?.handlePublisherRequest()}
+                          handlePublisherRequest={()=> {
+                            props?.handlePublisherRequest()
+                          }}
                       />
                     </Grid>
                     : null}
@@ -270,6 +272,7 @@ function Footer(props) {
                     <Grid item xs={0}>
                       <MoreOptionsButton
                           footer={true}
+                          isAdmin={props?.isAdmin}
                           isPlayOnly={props?.isPlayOnly}
                           isScreenShared={props?.isScreenShared}
                           handleStartScreenShare={props?.handleStartScreenShare}

react/src/Components/PublisherRequestTab.js

@@ -3,11 +3,11 @@ import Stack from "@mui/material/Stack";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import {styled} from "@mui/material/styles";
+import {styled, useTheme} from "@mui/material/styles";
 import { SvgIcon } from "./SvgIcon";
 
 const PublisherRequestName = styled(Typography)(({ theme }) => ({
-    color: "#000",
+    color: theme.palette?.participantListIcon?.primary,
     fontWeight: 500,
     fontSize: 14,
 }));
@@ -20,6 +20,8 @@ const PinBtn = styled(Button)(({ theme }) => ({
 }));
 
 function PublisherRequestTab(props) {
+    const theme = useTheme();
+
     const getPublisherRequestItem = (streamId) => {
         return (
             <Grid
@@ -35,6 +37,7 @@ function PublisherRequestTab(props) {
                 </Grid>
                 <Grid item>
                     <PinBtn
+                        id={"approve-become-speaker-"+streamId}
                         data-testid={"approve-become-speaker-"+streamId}
                         sx={{ minWidth: "unset", pt: 1, pb: 1 }}
                         onClick={() => {props?.approveBecomeSpeakerRequest(streamId);}}
@@ -43,6 +46,7 @@ function PublisherRequestTab(props) {
                     </PinBtn>
 
                     <PinBtn
+                        id={"reject-become-speaker-"+streamId}
                         data-testid={"reject-become-speaker-"+streamId}
                         sx={{ minWidth: "unset", pt: 1, pb: 1 }}
                         onClick={() => {props?.rejectBecomeSpeakerRequest(streamId);}}
@@ -58,10 +62,10 @@ function PublisherRequestTab(props) {
         <div style={{width: "100%", overflowY: "auto"}}>
             <Stack sx={{width: "100%",}} spacing={2}>
                 <Grid container>
-                    <SvgIcon size={28} name="participants" color="#000"/>
+                    <SvgIcon size={28} name="participants" color={theme.palette?.participantListIcon?.primary}/>
                     <PublisherRequestName
                         variant="body2"
-                        style={{marginLeft: 8, fontWeight: 500}}
+                        style={{marginLeft: 8, fontWeight: 500, color: theme.palette?.participantListIcon?.primary}}
                     >
                         {props?.requestSpeakerList.length}
                     </PublisherRequestName>

react/src/pages/AntMedia.js

@@ -3401,6 +3401,7 @@ function AntMedia(props) {
                             pinVideo={(streamId) => pinVideo(streamId)}
                             isAdmin={isAdmin}
                             publishStreamId={publishStreamId}
+                            role={role}
                         />
                     ) : (
                         <>
@@ -3454,7 +3455,7 @@ function AntMedia(props) {
                                 handleParticipantListOpen={(open) => handleParticipantListOpen(open)}
                                 requestSpeakerList={requestSpeakerList}
                                 handlePublisherRequestListOpen={(open) => setPublisherRequestListDrawerOpen(open)}
-                                handlePublisherRequest={()=>{}}
+                                handlePublisherRequest={()=>handlePublisherRequest()}
                                 setLeftTheRoom={(left) => setLeftTheRoom(left)}
                                 addFakeParticipant={() => addFakeParticipant()}
                                 removeFakeParticipant={() => removeFakeParticipant()}
@@ -3523,10 +3524,15 @@ function AntMedia(props) {
                                 setPublisherRequestListDrawerOpen={(open) => setPublisherRequestListDrawerOpen(open)}
                             />
                             <PublisherRequestListDrawer
+                                publisherRequestListDrawerOpen={publisherRequestListDrawerOpen}
                                 approveBecomeSpeakerRequest={(streamId) => approveBecomeSpeakerRequest(streamId)}
                                 rejectBecomeSpeakerRequest={(streamId) => rejectBecomeSpeakerRequest(streamId)}
                                 requestSpeakerList={requestSpeakerList}
                                 publishStreamId={publishStreamId}
+                                handleMessageDrawerOpen={(open) => handleMessageDrawerOpen(open)}
+                                handleParticipantListOpen={(open) => handleParticipantListOpen(open)}
+                                handleEffectsOpen={(open) => handleEffectsOpen(open)}
+                                setPublisherRequestListDrawerOpen={(open) => setPublisherRequestListDrawerOpen(open)}
                             />
                         </>
                     )}

react/src/pages/MeetingRoom.js

@@ -252,7 +252,7 @@ const MeetingRoom = React.memo((props) => {
                   requestSpeakerList={props?.requestSpeakerList}
                   publisherRequestListDrawerOpen={props?.publisherRequestListDrawerOpen}
                   handlePublisherRequestListOpen={props?.handlePublisherRequestListOpen}
-                  handlePublisherRequest={props?.handlePublisherRequest}
+                  handlePublisherRequest={()=> {props?.handlePublisherRequest()}}
                   setLeftTheRoom={props?.setLeftTheRoom}
                   addFakeParticipant={props?.addFakeParticipant}
                   removeFakeParticipant={props?.removeFakeParticipant}

react/src/pages/WaitingRoom.js

@@ -70,9 +70,9 @@ function WaitingRoom(props) {
     };
 
     React.useEffect(() => {
-        if (conference.role === WebinarRoles.TempListener) {
+        if (props?.role === WebinarRoles.TempListener) {
             const tempLocalVideo = document.getElementById("localVideo");
-            conference?.localVideoCreate(tempLocalVideo);
+            props?.localVideoCreate(tempLocalVideo);
             console.log("TempListener local video created");
         }
     }, []);
@@ -319,7 +319,7 @@ function WaitingRoom(props) {
             <Grid
                 container
                 spacing={4}
-                justifyContent={conference.role !== WebinarRoles.TempListener ? "space-between" : "center"}
+                justifyContent={props?.role !== WebinarRoles.TempListener ? "space-between" : "center"}
                 alignItems={"center"}
             >
 
@@ -414,7 +414,7 @@ function WaitingRoom(props) {
                                 "You can choose whether to open your camera and microphone before you get into room"
                             )}
                         </Typography>
-                        {conference.role === WebinarRoles.TempListener ? (
+                        {props?.role === WebinarRoles.TempListener ? (
                             <form
                                 data-testid="temp-listener-join-form"
                                 onSubmit={(e) => {
@@ -438,7 +438,7 @@ function WaitingRoom(props) {
                     </Grid>
                     : null}
 
-                {conference.role !== WebinarRoles.TempListener ? (
+                {props?.role !== WebinarRoles.TempListener ? (
                 <Grid item md={props?.isPlayOnly === false ? 4 : 12}>
                     <Grid container justifyContent={"center"}>
                         <Grid container justifyContent={"center"}>

test/test_webinar.py

@@ -141,7 +141,7 @@ def join_room_as_player(self, participant, room, skip_speed_test=False):
     app = "/"+self.test_app_name
     if self.url.endswith("localhost:3000"):
       app = ""
-    handle = self.chrome.open_in_new_tab(self.url+app+"/"+room+"?playOnly=true&role=listener&streamName=" + participant + ("&enterDirectly=true" if skip_speed_test else ""))
+    handle = self.chrome.open_in_new_tab(self.url+app+"/"+room+"?playOnly=true&role=listener&streamName=" + participant + "&streamId=" + participant + ("&enterDirectly=true" if skip_speed_test else ""))
 
     wait = self.chrome.get_wait()
 
@@ -184,6 +184,14 @@ def join_room_as_player(self, participant, room, skip_speed_test=False):
 
     return handle
 
+  def accept_raising_hand_request(self, participant):
+    accept_button = self.chrome.get_element_with_retry(By.ID,"approve-become-speaker-"+participant)
+    self.chrome.click_element(accept_button)
+
+  def reject_raising_hand_request(self, participant):
+    reject_button = self.chrome.get_element_with_retry(By.ID,"reject-become-speaker-"+participant)
+    self.chrome.click_element(reject_button)
+
   def add_presenter_to_listener_room(self, presenter):
     add_button = self.chrome.get_element(By.ID,"add-presenter-"+presenter)
     self.chrome.click_element(add_button)
@@ -752,6 +760,90 @@ def _test_admin_video_card_controls(self):
     wait.until(lambda x: self.chrome.get_element_in_element(presenterA_video_card, By.XPATH, ".//button[@type='button' and @aria-label='turn-off-camera']") is not None)
 
 
+    self.chrome.close_all()
+
+  def get_request_publish_button(self):
+    rp_button = None
+    if(self.chrome.is_element_exist(By.ID, "request-publish-button")):
+      rp_button = self.chrome.get_element(By.ID, "request-publish-button")
+    else:
+      more_button = self.chrome.get_element_with_retry(By.ID, "more-button")
+      self.chrome.click_element(more_button)
+      rp_button = self.chrome.get_element_with_retry(By.ID, "more-options-request-publish-button")
+    return rp_button
+
+  def test_raising_hand(self):
+    # create a room and join as admin and 2 players
+    room = "room"+str(random.randint(100, 999))
+    handle_admin = self.join_room_as_admin("admin", room, True)
+    handle_player_A = self.join_room_as_player("playerA", room, False)
+    handle_player_B = self.join_room_as_player("playerB", room, False)
+
+    wait = self.chrome.get_wait()
+
+    # switch to playerA and raise hand
+    self.chrome.switch_to_tab(handle_player_A)
+
+    raise_hand_button = self.get_request_publish_button()
+    self.chrome.click_element(raise_hand_button)
+
+    # switch to admin and check if playerA is in the request list
+    self.chrome.switch_to_tab(handle_admin)
+
+    self.open_close_publisher_request_list_drawer()
+
+    time.sleep(15)
+
+    self.accept_raising_hand_request("playerA")
+
+    # switch to playerA and join the room
+    self.chrome.switch_to_tab(handle_player_A)
+
+    join_button = self.chrome.get_element_with_retry(By.ID,"room_join_button")
+    self.chrome.click_element(join_button)
+
+    time.sleep(5)
+    speedTestCircularProgress = self.chrome.get_element_with_retry(By.ID,"speed-test-modal-circle-progress-bar", retries=20)
+    assert(speedTestCircularProgress.is_displayed())
+
+    time.sleep(5)
+
+    timeoutCounter = 0
+
+    isSpeedTestFinished = False
+    isSpeedTestFailed = False
+
+    while not isSpeedTestFailed and not isSpeedTestFinished and timeoutCounter < 100:
+      time.sleep(1)
+      timeoutCounter += 1
+      script = "return window.conference.speedTestObject;"
+      result_json = self.chrome.execute_script(script)
+      if result_json is not None:
+        isSpeedTestFinished = result_json["isfinished"]
+        isSpeedTestFailed = result_json["isfailed"]
+
+    speedTestModalJoinButton = self.chrome.get_element_with_retry(By.ID,"speed-test-modal-join-button")
+
+    self.chrome.print_ss_as_base64()
+
+    self.chrome.click_element(speedTestModalJoinButton)
+
+    time.sleep(5)
+
+    meeting_gallery = self.chrome.get_element_with_retry(By.ID,"meeting-gallery")
+
+    assert(meeting_gallery.is_displayed())
+
+    wait.until(lambda x: len(self.get_participants()) == 2)
+
+    # switch to admin
+    self.chrome.switch_to_tab(handle_admin)
+
+    wait.until(lambda x: len(self.get_participants()) == 2)
+
+    # switch to playerB
+    self.chrome.switch_to_tab(handle_player_B)
+
     self.chrome.close_all()
 
 if __name__ == '__main__':