Merge pull request bigbluebutton#22187 from antonbsa/breakout-tests-n…

…ew-ui test(new-ui): Update breakout test steps
antonbsa · Feb 6, 2025 · 8b58a3a · 8b58a3a
2 parents 27b70a6 + e203d10
commit 8b58a3a
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 96 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/breakout-room/create-breakout-room/component.tsx b/bigbluebutton-html5/imports/ui/components/breakout-room/create-breakout-room/component.tsx
@@ -586,6 +586,7 @@ const CreateBreakoutRoom: React.FC<CreateBreakoutRoomProps> = ({
           ? intl.formatMessage(intlMessages.updateConfirm)
           : intl.formatMessage(intlMessages.confirmButton)}
         onClick={isUpdate ? userUpdate : createRoom}
+        data-test={isUpdate ? 'updateBreakoutRoomsButton' : 'createBreakoutRoomsButton'}
         disabled={!leastOneUserIsValid || !numberOfRoomsIsValid || !durationIsValid}
       />
     </>

diff --git a/bigbluebutton-html5/imports/ui/components/sidebar-navigation/pinned-apps/component.tsx b/bigbluebutton-html5/imports/ui/components/sidebar-navigation/pinned-apps/component.tsx
@@ -31,6 +31,7 @@ const PinnedApps = ({ sidebarNavigationInput }: PinnedAppsProps) => {
           role="button"
           tabIndex={0}
           active={sidebarContentPanel === pinnedAppKey}
+          data-test={`${pinnedAppKey}SidebarButton`}
           onClick={() => {
             layoutContextDispatch({
               type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,

diff --git a/bigbluebutton-tests/playwright/breakout/breakout.spec.js b/bigbluebutton-tests/playwright/breakout/breakout.spec.js
@@ -3,7 +3,7 @@ const { test } = require('../fixtures');
 const { Create } = require('./create');
 const { Join } = require('./join');
 
-test.describe.parallel('Breakout', { tag: ['@ci', '@flaky-3.1'] }, () => {
+test.describe.parallel('Breakout', { tag: '@ci' }, () => {
   test.describe.parallel('Creating', () => {
     test('Create Breakout room', async ({ browser, context, page }) => {
       const create = new Create(browser, context);
@@ -47,7 +47,7 @@ test.describe.parallel('Breakout', { tag: ['@ci', '@flaky-3.1'] }, () => {
     test('Join Breakout room', async ({ browser, context, page }) => {
       const join = new Join(browser, context);
       await join.initPages(page);
-      await join.create()
+      await join.create();
       await join.joinRoom();
     });
 

diff --git a/bigbluebutton-tests/playwright/breakout/create.js b/bigbluebutton-tests/playwright/breakout/create.js
@@ -10,51 +10,37 @@ class Create extends MultiUsers {
 
   // Create BreakoutRooms
   async create(captureNotes = false, captureWhiteboard = false) {
-    await this.modPage.waitAndClick(e.manageUsers);
-    await this.modPage.waitAndClick(e.createBreakoutRooms);
-
+    await this.modPage.setHeightWidthViewPortSize({ width: 1920, height: 1080 }); // needed for better create breakout rooms button disposition
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     // assign user to first room
     await this.modPage.dragDropSelector(e.attendeeNotAssigned, e.breakoutBox1);
-
     if (captureNotes) await this.modPage.page.check(e.captureBreakoutSharedNotes);
     if (captureWhiteboard) await this.modPage.page.check(e.captureBreakoutWhiteboard);
-    await this.modPage.waitAndClick(e.modalConfirmButton, ELEMENT_WAIT_LONGER_TIME);
-
+    await this.modPage.waitAndClick(e.createBreakoutRoomsButton, ELEMENT_WAIT_LONGER_TIME);
     await this.userPage.hasElement(e.modalConfirmButton, 'should appear the modal confirm button to join breakout');
     await this.userPage.waitAndClick(e.modalDismissButton);
-    await this.modPage.hasElement(e.breakoutRoomsItem, 'should have the breakout room item');
+    await this.userPage.hasElement(e.breakoutRoomSidebarButton, 'should display the breakout room sidebar button for the attendee after rooms are created');
   }
 
   async createToAllowChooseOwnRoom() {
-    await this.modPage.waitAndClick(e.manageUsers);
-    await this.modPage.waitAndClick(e.createBreakoutRooms);
-
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     await this.modPage.waitAndClick(e.allowChoiceRoom);
-
-    await this.modPage.waitAndClick(e.modalConfirmButton, ELEMENT_WAIT_LONGER_TIME);
-
+    await this.modPage.waitAndClick(e.createBreakoutRoomsButton, ELEMENT_WAIT_LONGER_TIME);
     await this.userPage.hasElement(e.modalConfirmButton);
-    await this.modPage.hasElement(e.breakoutRoomsItem);
   }
 
   async changeNumberOfRooms() {
-    await this.modPage.waitAndClick(e.manageUsers);
-    await this.modPage.waitAndClick(e.createBreakoutRooms);
-
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     await this.modPage.waitAndClick(e.randomlyAssign);
     await this.modPage.getLocator(e.selectNumberOfRooms).selectOption('7');
-    await this.modPage.waitAndClick(e.modalConfirmButton, ELEMENT_WAIT_LONGER_TIME);
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
+    await this.modPage.waitAndClick(e.createBreakoutRoomsButton, ELEMENT_WAIT_LONGER_TIME);
     await this.modPage.checkElementCount(e.userNameBreakoutRoom7, 1, 'should have one user on the breakout room number 7');
   }
 
   async changeDurationTime() {
-    await this.modPage.waitAndClick(e.manageUsers);
-    await this.modPage.waitAndClick(e.createBreakoutRooms);
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     await this.modPage.waitAndClick(e.randomlyAssign);
-
-    const createButtonLocator = this.modPage.getLocator(e.modalConfirmButton);
-
+    const createButtonLocator = this.modPage.getLocator(e.createBreakoutRoomsButton);
     //test minimum 5 minutes
     await this.modPage.getLocator(e.durationTime).press('Backspace');
     await this.modPage.getLocator(e.durationTime).press('Backspace');
@@ -67,56 +53,50 @@ class Create extends MultiUsers {
 
     // await this.modPage.getLocator(e.durationTime).press('Backspace');
     await this.modPage.page.fill(e.durationTime, '15');
-    await this.modPage.waitAndClick(e.modalConfirmButton, ELEMENT_WAIT_LONGER_TIME);
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
+    await this.modPage.waitAndClick(e.createBreakoutRoomsButton, ELEMENT_WAIT_LONGER_TIME);
     await this.modPage.hasText(e.breakoutRemainingTime, /14:[0-5][0-9]/, 'should have the breakout room remaining time between 14:00 and 14:59 minutes', ELEMENT_WAIT_LONGER_TIME);
   }
 
   async changeRoomsName() {
-    await this.modPage.waitAndClick(e.manageUsers);
-    await this.modPage.waitAndClick(e.createBreakoutRooms);
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     await this.modPage.waitAndClick(e.randomlyAssign);
     //Change room's name
     await this.modPage.type(e.roomNameInput, 'Test');
-    await this.modPage.waitAndClick(e.modalConfirmButton, ELEMENT_WAIT_LONGER_TIME);
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
+    await this.modPage.waitAndClick(e.createBreakoutRoomsButton, ELEMENT_WAIT_LONGER_TIME);
     await this.modPage.hasText(e.roomName1Test, /Test/, 'should display the correct breakout room name');
   }
 
   async removeAndResetAssignments() {
-    await this.modPage.waitAndClick(e.manageUsers);
-    await this.modPage.waitAndClick(e.createBreakoutRooms);
-
+    await this.modPage.setHeightWidthViewPortSize({ width: 1920, height: 1080 }); // needed for better create breakout rooms button disposition
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     // Reset assignments
     await this.modPage.dragDropSelector(e.attendeeNotAssigned, e.breakoutBox1);
-    await this.modPage.hasText(e.breakoutBox1, /Attendee/, 'should have an attende on second breakout room box');
+    await this.modPage.hasText(e.breakoutBox1, /Attendee/, 'should have an attendee on second breakout room box');
     await this.modPage.waitAndClick(e.resetAssignments);
-    await this.modPage.hasText(e.breakoutBox0, /Attendee/, 'should have and attende on first breakout room box');
+    await this.modPage.hasText(e.breakoutBox0, /Attendee/, 'should have and attendee on first breakout room box');
 
     // Remove specific assignment
     await this.modPage.dragDropSelector(e.attendeeNotAssigned, e.breakoutBox1);
     await this.modPage.waitAndClick(`${e.breakoutBox1} span[role="button"]`);
-    await this.modPage.hasText(e.breakoutBox0, /Attendee/, 'should have and attende on first breakout room box');
+    await this.modPage.hasText(e.breakoutBox0, /Attendee/, 'should display the attendee name on the first breakout room box');
   }
 
   async dragDropUserInRoom() {
-    await this.modPage.waitAndClick(e.manageUsers);
-    await this.modPage.waitAndClick(e.createBreakoutRooms);
-
-    //testing no user assigned
-    const modalConfirmButton = this.modPage.getLocator(e.modalConfirmButton);
-    await expect(modalConfirmButton, 'should designate a user to a specific a breakout room, before creating it').toBeDisabled();
+    await this.modPage.setHeightWidthViewPortSize({ width: 1920, height: 1080 }); // needed for better create breakout rooms button disposition
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
+    // check no user assigned
+    const createButtonLocator = this.modPage.getLocator(e.createBreakoutRoomsButton);
+    await expect(createButtonLocator, 'should designate a user to a specific a breakout room, before creating it').toBeDisabled();
     await this.modPage.hasElement(e.warningNoUserAssigned, 'should designate a user to a specific a breakout room, before creating it');
 
     await this.modPage.dragDropSelector(e.attendeeNotAssigned, e.breakoutBox1);
-    await this.modPage.hasText(e.breakoutBox1, /Attendee/, 'should have the attende on the second breakout room');
-    await expect(modalConfirmButton).toBeEnabled();
+    await this.modPage.hasText(e.breakoutBox1, /Attendee/, 'should have the attendee on the second breakout room');
+    await expect(createButtonLocator).toBeEnabled();
     await this.modPage.wasRemoved(e.warningNoUserAssigned, 'should designate a user to a specific a breakout room, before creating it');
-    await this.modPage.waitAndClick(e.modalConfirmButton, ELEMENT_WAIT_LONGER_TIME);
+    await this.modPage.waitAndClick(e.createBreakoutRoomsButton, ELEMENT_WAIT_LONGER_TIME);
     await this.userPage.waitAndClick(e.modalConfirmButton);
 
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
-    await this.modPage.hasText(e.userNameBreakoutRoom, /Attendee/, 'should have the attende name on the first breakout room', ELEMENT_WAIT_LONGER_TIME);
+    await this.modPage.hasText(e.userNameBreakoutRoom, /Attendee/, 'should have the attendee name on the first breakout room', ELEMENT_WAIT_LONGER_TIME);
   }
 }
 

diff --git a/bigbluebutton-tests/playwright/breakout/join.js b/bigbluebutton-tests/playwright/breakout/join.js
@@ -20,8 +20,8 @@ class Join extends Create {
       await this.userPage.joinMicrophone();
     }
 
-    await this.userPage.waitAndClick(e.breakoutRoomsItem);
-    await this.userPage.waitAndClick(e.joinRoom1);
+    await this.userPage.waitAndClick(e.breakoutRoomSidebarButton);
+    await this.userPage.waitAndClick(e.joinFirstRoom);
     await this.userPage.hasElement(e.alreadyConnected, 'should display the element alreadyConnected', ELEMENT_WAIT_LONGER_TIME);
 
     const breakoutUserPage = await this.userPage.getLastTargetPage(this.context);
@@ -59,20 +59,15 @@ class Join extends Create {
   async messageToAllRooms() {
     const breakoutUserPage = await this.joinRoom();
     await breakoutUserPage.hasElement(e.presentationTitle, 'should have the presentation title once the user is on the breakout room.');
-
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
     await this.modPage.hasElement(e.breakoutRemainingTime);
     await this.modPage.type(e.chatBox, "test");
     await this.modPage.waitAndClick(e.sendButton);
-
     await breakoutUserPage.hasElement(e.chatUserMessageText, 'should have a test message on the public chat.');
   }
 
   async changeDurationTime() {
     const breakoutUserPage = await this.joinRoom();
     await breakoutUserPage.hasElement(e.presentationTitle);
-
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
     await this.modPage.waitAndClick(e.breakoutOptionsMenu);
     await this.modPage.waitAndClick(e.openBreakoutTimeManager);
     await this.modPage.getLocator(e.inputSetTimeSelector).press('Backspace');
@@ -84,61 +79,52 @@ class Join extends Create {
   }
 
   async inviteUserAfterCreatingRooms() {
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
     await this.modPage.waitAndClick(e.breakoutOptionsMenu);
     await this.modPage.waitAndClick(e.openUpdateBreakoutUsersModal);
     await this.modPage.dragDropSelector(e.attendeeNotAssigned, e.breakoutBox1);
-    await this.modPage.hasText(e.breakoutBox1, /Attendee/,  'should have the attende name on the second breakout room box.');
-    await this.modPage.waitAndClick(e.modalConfirmButton);
-
-    await this.userPage.hasElement(e.modalConfirmButton, 'should display the modal confirm button for the attende to join the meeting');
+    await this.modPage.hasText(e.breakoutBox1, /Attendee/,  'should have the attendee name on the second breakout room box.');
+    await this.modPage.waitAndClick(e.updateBreakoutRoomsButton);
+    await this.userPage.hasElement(e.modalConfirmButton, 'should display the modal confirm button for the attendee to join the meeting');
     await this.userPage.waitAndClick(e.modalDismissButton);
   }
 
   async usernameShowsBelowRoomsName() {
     const breakoutUserPage = await this.joinRoom();
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
-    await this.modPage.hasText(e.userNameBreakoutRoom, /Attendee/, 'should have the attende name on the breakout room below a room on the main breakout panel');
+    await breakoutUserPage.hasElement(e.presentationTitle, 'should display the presentation title on the breakout room');
+    await this.modPage.hasText(e.userNameBreakoutRoom, /Attendee/, 'should have the attendee name on the breakout room below a room on the main breakout panel');
   }
 
   async showBreakoutRoomTimeRemaining() {
     const breakoutUserPage = await this.joinRoom();
     await breakoutUserPage.hasElement(e.presentationTitle, 'should display the presentation title on the breakout room');
 
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
     await this.modPage.waitAndClick(e.breakoutOptionsMenu);
     await this.modPage.waitAndClick(e.openBreakoutTimeManager);
     await this.modPage.getLocator(e.inputSetTimeSelector).press('Backspace');
     await this.modPage.type(e.inputSetTimeSelector, '2');
     await this.modPage.waitAndClick(e.sendButtonDurationTime);
     await this.modPage.hasText(e.breakoutRemainingTime, /[11-12]:[0-5][0-9]/, 'should have the breakout room time remaining counting down on the breakout main panel.');
 
-    await breakoutUserPage.hasText(e.timeRemaining, /[11-12]:[0-5][0-9]/, 'should display the remaining time inside the breakout rooom');
+    await breakoutUserPage.hasText(e.timeRemaining, /[11-12]:[0-5][0-9]/, 'should display the remaining time inside the breakout room');
   }
 
   async endAllBreakoutRooms() {
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
     await this.modPage.waitAndClick(e.breakoutOptionsMenu);
     await this.modPage.waitAndClick(e.endAllBreakouts);
-    await this.modPage.wasRemoved(e.breakoutRoomsItem, 'should not have the breakout rooms item displayed anymore');
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
+    await this.modPage.hasElement(e.createBreakoutRoomsButton, 'should display create breakout rooms button after ending all breakout rooms');
   }
 
   async moveUserToOtherRoom() {
     const breakoutUserPage = await this.joinRoom();
     await breakoutUserPage.hasElement(e.presentationTitle, 'should display the presentation title inside the breakout room');
-
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
     await this.modPage.hasText(e.userNameBreakoutRoom, /Attendee/, 'should display the user name below the first breakout room name');
-
     await this.modPage.waitAndClick(e.breakoutOptionsMenu);
-
     await this.modPage.waitAndClick(e.openUpdateBreakoutUsersModal);
     await this.modPage.dragDropSelector(e.moveUser, e.breakoutBox2);
-    await this.modPage.waitAndClick(e.modalConfirmButton);
-
+    await this.modPage.waitAndClick(e.updateBreakoutRoomsButton);
     await this.userPage.hasElement(e.modalConfirmButton, 'should display the modal confirm button for the user to join the breakout room');
     await breakoutUserPage.page.isClosed();
-
     await this.userPage.waitAndClick(e.modalConfirmButton);
     await this.modPage.hasText(e.userNameBreakoutRoom2, /Attendee/, 'should display the user name below the first breakout room name', ELEMENT_WAIT_LONGER_TIME);
   }
@@ -159,7 +145,7 @@ class Join extends Create {
     await notesLocator.type(e.message);
     await sleep(1000); // making sure there's enough time for the typing to finish
 
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     await this.modPage.waitAndClick(e.breakoutOptionsMenu);
     await this.modPage.closeAllToastNotifications();
     await this.modPage.waitAndClick(e.endAllBreakouts);
@@ -203,7 +189,7 @@ class Join extends Create {
     await breakoutUserPage.page.mouse.up();
     await sleep(1000); // making sure there's enough time for the typing to finish
 
-    await this.modPage.waitAndClick(e.breakoutRoomsItem);
+    await this.modPage.waitAndClick(e.breakoutRoomSidebarButton);
     await this.modPage.waitAndClick(e.breakoutOptionsMenu);
     await this.modPage.closeAllToastNotifications();
     await this.modPage.waitAndClick(e.endAllBreakouts);

diff --git a/bigbluebutton-tests/playwright/core/elements.js b/bigbluebutton-tests/playwright/core/elements.js
@@ -59,13 +59,16 @@ exports.speechRecognition = 'select[id="speechSelect"]';
 exports.speechRecognitionUnsupported = 'div[data-test="speechRecognitionUnsupported"]';
 
 // Breakout
-exports.createBreakoutRooms = 'li[data-test="createBreakoutRooms"]';
+exports.createBreakoutRoomsButton = 'button[data-test="createBreakoutRoomsButton"]';
+exports.updateBreakoutRoomsButton = 'button[data-test="updateBreakoutRoomsButton"]';
+exports.breakoutRoomSidebarButton = 'div[data-test="breakoutroomSidebarButton"]';
 exports.randomlyAssign = 'button[data-test="randomlyAssign"]';
 exports.resetAssignments = 'button[data-test="resetAssignments"]'
 exports.breakoutRoomsItem = 'div[data-test="breakoutRoomsItem"]';
 exports.alreadyConnected = 'span[data-test="alreadyConnected"]';
 exports.askJoinRoom1 = 'button[data-test="askToJoinRoom1"]';
 exports.joinRoom1 = 'button[data-test="joinRoom1"]';
+exports.joinFirstRoom = 'button[data-test^="joinRoom"]';
 exports.allowChoiceRoom = 'input[id="freeJoinCheckbox"]';
 exports.labelGeneratingURL = 'span[data-test="labelGeneratingURL"]';
 exports.endBreakoutRoomsButton = 'button[data-test="endBreakoutRoomsButton"]';
@@ -184,7 +187,7 @@ exports.minutesInput = 'input[data-test="minutesInput"]';
 exports.secondsInput = 'input[data-test="secondsInput"]';
 
 // Notes
-exports.sharedNotes = 'div[data-test="sharedNotes"]';
+exports.sharedNotes = 'div[data-test="sharedNotesButton"]';
 exports.hideNotesLabel = 'button[data-test="hideNotesLabel"]';
 exports.etherpadFrame = 'iframe[title="pad"]';
 exports.etherpadOuter = 'iframe[title="Ether"]';

diff --git a/bigbluebutton-tests/playwright/core/page.js b/bigbluebutton-tests/playwright/core/page.js
@@ -329,8 +329,8 @@ class Page {
     }
   }
 
-  async setHeightWidthViewPortSize() {
-    await this.page.setViewportSize({ width: 1366, height: 768 });
+  async setHeightWidthViewPortSize({ width = 1366, height = 768 } = {}) {
+    await this.page.setViewportSize({ width, height });
   }
 
   async getYoutubeFrame() {