BC-8584 - refactor board menu (#279)

* adapt data-testid to renamings board-menu-actions => kebab-menu-actions * fix board-tests - edit step in opendrawing feature - update selector in pageRooms file --------- Co-authored-by: Uzaeir Khan <[email protected]>
hpi-schul-cloud · Jan 16, 2025 · 6ada4f3 · 6ada4f3
1 parent c1c430b
commit 6ada4f3
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 61 deletions.
diff --git a/cypress/e2e/course_board/createEditDeleteMultiColumnInBoard.feature b/cypress/e2e/course_board/createEditDeleteMultiColumnInBoard.feature
@@ -45,7 +45,7 @@ Feature: Course Board - To create, edit and delete column in the course board
         When I choose multi-column board in the dialog box
         Then I see the page Course Board details
         When I click on the button three dot menu in course board
-        When I click on the option Edit in three dot menu in course board
+        When I select the three dot menu action 'rename'
         Then I enter the course board title '<board_title>'
         When I click on the page outside of the column
         #Then I see the course Board name 'Board Cy Title'
@@ -60,7 +60,7 @@ Feature: Course Board - To create, edit and delete column in the course board
 
         # teacher edits the column in the Board
         When I click on three dot menu in the column
-        When I select the option Edit in three dot menu in the column
+        When I select the three dot menu action 'rename'
         Then I enter the title name '<edited_column_board_title>' in the column
         When I click on the page outside of the column
         Then I see my column named '<edited_column_board_title>'

diff --git a/cypress/e2e/course_board/createEditDeleteSingleColumnBoard.feature b/cypress/e2e/course_board/createEditDeleteSingleColumnBoard.feature
@@ -37,7 +37,7 @@ Feature: Course Board - To create, edit and delete a single column course board
         When I choose single-column board in the dialog box
         Then I see the page Course Board details
         When I click on the button three dot menu in course board
-        When I click on the option Edit in three dot menu in course board
+        When I select the three dot menu action 'rename'
         Then I enter the course board title '<board_title>'
         When I click on the page outside of the column
         # Then I see the course Board name '<board_title>'
@@ -72,7 +72,7 @@ Feature: Course Board - To create, edit and delete a single column course board
 
         # teacher edits the column in the single column board
         When I click on three dot menu in the column
-        When I select the option Edit in three dot menu in the column
+        When I select the three dot menu action 'rename'
         Then I enter the title name '<edited_column_board_title>' in the column
         When I click on the page outside of the column
         Then I see my column named '<edited_column_board_title>'
@@ -92,7 +92,7 @@ Feature: Course Board - To create, edit and delete a single column course board
         When I go to course '<course_name>'
         When I click on card Course Board
         When I click on three dot menu in the column
-        When I select the option Delete in three dot menu in the column
+        When I select the three dot menu action 'delete'
         Then I see the modal Confirmation
         When I click on the button Remove on the Modal
         Then I do not see the column

diff --git a/cypress/e2e/course_board/openDrawingElementOnBoard.feature b/cypress/e2e/course_board/openDrawingElementOnBoard.feature
@@ -39,7 +39,7 @@ Feature: Course Board - Opening a drawing element on a course page
         When I choose multi-column board in the dialog box
         Then I see the page Course Board details
         When I click on the button three dot menu in course board
-        When I click on the option Edit in three dot menu in course board
+        When I select the three dot menu action 'rename'
         Then I enter the course board title '<board_title>'
         When I click on the page outside of the column
         Then I see the chip Draft in the course board

diff --git a/cypress/e2e/room_board/createEditDeleteMultiAndSingleColumnBoardInRoom.feature b/cypress/e2e/room_board/createEditDeleteMultiAndSingleColumnBoardInRoom.feature
@@ -28,22 +28,22 @@ Feature: Room - Add, edit and delete board in room
 
         # teacher edits title of the new multi column board
         When I click on the three dot menu in room board
-        When I click on edit in board menu
+        When I select the three dot menu action 'rename'
         Then I change the room board title to '<edited_board_title>'
         When I click on the page outside of the title of the board
         Then I see my room board is named '<edited_board_title>'
 
         # cancel delete-process of the new multi column board
         When I click on the three dot menu in room board
-        When I click on delete in board menu
+        When I select the three dot menu action 'delete'
         Then I see the button to cancel the dialog
         When I click on the button to cancel the deletion
         Then I see the page board details
         Then I see the board '<edited_board_title>' on the room overview page
 
         # confirm delete-process of the new multi column board
         When I click on the three dot menu in room board
-        When I click on delete in board menu
+        When I select the three dot menu action 'delete'
         Then I see the button to confirm the dialog
         Then I click on the button to confirm the deletion
         Then I do not see the board '<edited_board_title>' in the room
@@ -61,7 +61,7 @@ Feature: Room - Add, edit and delete board in room
 
         # teacher edits title of the new single column board
         When I click on the three dot menu in room board
-        When I click on edit in board menu
+        When I select the three dot menu action 'rename'
         Then I change the room board title to '<edited_board_title>'
         When I click on the page outside of the title of the board
         Then I see my room board is named '<edited_board_title>'

diff --git a/cypress/support/pages/course/pageCourses.js b/cypress/support/pages/course/pageCourses.js
@@ -27,13 +27,14 @@ class Courses {
 		'[data-testid="lesson-card-menu-action-remove-0"]';
 	static #editButtonInDotMenu = '[data-testid="room-task-card-menu-edit-0"]';
 	static #editButtonInDotMenuOfTopic = '[data-testid="lesson-card-menu-action-edit-0"]';
-	static #backToDraftButtonInDotMenuOfTopic = '[data-testid="lesson-card-menu-action-revert-0"]';
+	static #backToDraftButtonInDotMenuOfTopic =
+		'[data-testid="lesson-card-menu-action-revert-0"]';
 	static #taskCardTitleInCoursePageWithIndex = '[data-testid="task-title-0"]';
 	static #boardCardTitleInCoursePageWithIndex = '[data-testid="board-title-0"]';
 	static #taskCardThreeDotMenuInCoursePageWithIndex =
 		'[data-testid="task-card-menu-0"]';
 	static #taskCardInCoursePageWithIndex = '[data-testid="room-task-card-0"]';
-	static #topicCardPublishBtn = '[data-testid="lesson-card-action-publish-0"]'
+	static #topicCardPublishBtn = '[data-testid="lesson-card-action-publish-0"]';
 	static #dropDownCourse = '[data-testid="room-menu"]';
 	static #btnCourseEdit = '[data-testid="room-menu-edit-delete"]';
 	static #pageTitle = '[id="page-title"]';
@@ -103,7 +104,8 @@ class Courses {
 	static #studentGroupNameOnStudentGroupPage = '[data-testid="group-name-entry"]';
 	static #editGroupButton = '[data-testid="edit-group"]';
 	static #deleteCourseGroupButton = '[data-testid="delete-course-group"]';
-	static #deleteCourseGroupConfirmationButton = '[data-testid="delete-course-group-btn"]';
+	static #deleteCourseGroupConfirmationButton =
+		'[data-testid="delete-course-group-btn"]';
 	static #videoConferenceCheckBoxCourse = '[data-testid="videoconf_checkbox"]';
 	static #toolsTabInCourseDetail = '[data-testid="tools-tab"]';
 	static #bbbToolIconInToolsTabCourse = '[data-testid="vc-card-logo"]';
@@ -395,7 +397,7 @@ class Courses {
 
 	clickOnAddNewToolFAB() {
 		cy.get(Courses.#addToolButton)
-			.invoke('css', 'transform', 'translateY(5px)') // remove this invoke after the bug is fixed - Ticket:
+			.invoke("css", "transform", "translateY(5px)") // remove this invoke after the bug is fixed - Ticket:
 			.click();
 	}
 
@@ -658,7 +660,8 @@ class Courses {
 	deleteCoursesByName(courseLabel, courseName) {
 		cy.get(`[class="rooms-container"]`).then(($coursesContainer) => {
 			if (
-				$coursesContainer.find(`[aria-label="${courseLabel} ${courseName}"]`).length
+				$coursesContainer.find(`[aria-label="${courseLabel} ${courseName}"]`)
+					.length
 			) {
 				cy.get(`[aria-label="${courseLabel} ${courseName}"]`).then(($courses) => {
 					if ($courses) {
@@ -855,7 +858,9 @@ class Courses {
 	}
 
 	seeNumberOfTools(count) {
-		cy.get(Courses.#courseExternalToolSection).children().should("have.length", count);
+		cy.get(Courses.#courseExternalToolSection)
+			.children()
+			.should("have.length", count);
 	}
 
 	seeToolIsMarkedAsDeactivated(toolName) {
@@ -1167,25 +1172,25 @@ class Courses {
 	}
 
 	launchTool(toolName, toolURL) {
-		const launchedTool =  { toolName: toolName, isLaunched: false };
+		const launchedTool = { toolName: toolName, isLaunched: false };
 
 		cy.window().then((win) => {
-			cy.stub(win, "open").as("openStub").callsFake((url) => {
-				expect(url).to.contain(toolURL);
-				launchedTool.isLaunched = true;
-			});
+			cy.stub(win, "open")
+				.as("openStub")
+				.callsFake((url) => {
+					expect(url).to.contain(toolURL);
+					launchedTool.isLaunched = true;
+				});
 		});
 
 		cy.wrap(launchedTool).as("launchedTool");
 
-		cy.get(Courses.#courseExternalToolSection)
-            .contains(toolName)
-            .click();
+		cy.get(Courses.#courseExternalToolSection).contains(toolName).click();
 
-		cy.get("@openStub").invoke("restore")
+		cy.get("@openStub").invoke("restore");
 	}
 
-	toolWasLaunched(toolName){
+	toolWasLaunched(toolName) {
 		cy.get("@launchedTool").then((launchedTool) => {
 			expect(launchedTool.toolName).to.equal(toolName);
 			expect(launchedTool.isLaunched).to.be.true;

diff --git a/cypress/support/pages/course_board/pageBoard.js b/cypress/support/pages/course_board/pageBoard.js
@@ -9,20 +9,21 @@ class Board {
 	static #addColumnTitleInput = '[data-testid="column-title-0"]';
 	static #addNewCardButtonInColumn = '[data-testid="column-0-add-card-btn"]';
 	static #mainPageArea = '[id="main-content"]';
-	static #editOptionThreeDot = '[data-testid="board-menu-action-edit"]';
+	static #editOptionThreeDot = '[data-testid="kebab-menu-action-edit"]';
+	static #renameOptionThreeDot = '[data-testid="kebab-menu-action-rename"]';
 	static #threeDotMenuInColumn = '[data-testid="column-menu-btn-0"]';
 	static #threeDotMenuInCard = '[data-testid="card-menu-btn-0-0"]';
 	static #threeDotMenuOnDeletedElement = '[data-testid="deleted-element-menu-btn"]';
-	static #deleteOptionThreeDot = '[data-testid="board-menu-action-delete"]';
+	static #deleteOptionThreeDot = '[data-testid="kebab-menu-action-delete"]';
 	static #confirmButtonInModal = '[data-testid="dialog-confirm"]';
 	static #deleteDialogBox = '[data-testid="dialog-title"]';
 	static #drawingElement = '[data-testid="drawing-element"]';
 	static #textElement = '[data-testid="ckeditor"]';
 	static #columnPlaceholder = '[placeholder="Spalte 1"]';
 	static #newColumnBoardFABInCourseDetail = '[data-testid="fab_button_add_board"]';
 	static #threeDotInCourseBoardTitle = '[data-testid="board-menu-icon"]';
-	static #editOptionInThreeDotCourseBoardTitle =
-		'[data-testid="board-menu-action-edit"]';
+	static #renameOptionInThreeDotCourseBoardTitle =
+		'[data-testid="kebab-menu-action-rename"]';
 	static #draftChipInCourseBoardName = '[data-testid="board-draft-chip"]';
 	static #addCardInColumnButton = '[data-testid="column-0-add-card-btn"]';
 	static #addContentIntoCardButton = '[data-testid="add-element-btn"]';
@@ -31,13 +32,13 @@ class Board {
 		'[data-testid="create-element-external-tool-container"]';
 	static #externalToolElement = '[data-testid="board-external-tool-element"]';
 	static #deletedElement = '[data-testid="board-deleted-element"]';
-	static #boardMenuActionPublish = '[data-testid="board-menu-action-publish"]';
+	static #boardMenuActionPublish = '[data-testid="kebab-menu-action-publish"]';
 	static #boardLayoutDialogBoxTitle = '[data-testid="board-layout-dialog-title"]';
 	static #multiColumnBoardOptionInDialogBox =
 		'[data-testid="dialog-add-multi-column-board"]';
 	static #singleColumnBoardOptionInDialogBox =
 		'[data-testid="dialog-add-single-column-board"]';
-	static #editButtonInThreeDotMenu = '[data-testid="board-menu-action"]';
+	static #editButtonInThreeDotMenu = '[data-testid="kebab-menu-action"]';
 	static #externalToolElementAlert =
 		'[data-testid="board-external-tool-element-alert"]';
 
@@ -85,10 +86,11 @@ class Board {
 
 	clickOnThreeDotMenuInCourseBoardTitle() {
 		cy.get(Board.#threeDotInCourseBoardTitle).click();
+		cy.get(Board.#renameOptionThreeDot).should("be.visible");
 	}
 
-	clickOnEditInThreeDotCourseBoardTitle() {
-		cy.get(Board.#editOptionInThreeDotCourseBoardTitle).click();
+	clickOnRenameInThreeDotCourseBoardTitle() {
+		cy.get(Board.#renameOptionInThreeDotCourseBoardTitle).click();
 	}
 
 	clearAndType(selector, newTitle) {
@@ -162,9 +164,15 @@ class Board {
 		cy.get(Board.#deleteOptionThreeDot).click();
 	}
 
+	clickOnKebabMenuAction(kebabMenuAction) {
+		cy.get(
+			`[data-testid="kebab-menu-action-${kebabMenuAction.toLowerCase()}"]`
+		).click();
+	}
+
 	clickOnThreeDotOnColumn() {
 		cy.get(Board.#threeDotMenuInColumn).click();
-		cy.get(Board.#editOptionThreeDot).should("be.visible");
+		cy.get(Board.#renameOptionThreeDot).should("be.visible");
 	}
 
 	clickOnThreeDotOnCard() {
@@ -177,8 +185,8 @@ class Board {
 		cy.get(Board.#deleteOptionThreeDot).should("be.visible");
 	}
 
-	selectEditInThreeDotMenu() {
-		cy.get(Board.#editOptionThreeDot).click();
+	selectRenameInThreeDotMenu() {
+		cy.get(Board.#renameOptionThreeDot).click();
 	}
 
 	clickOnCourseContentTab() {
@@ -209,6 +217,7 @@ class Board {
 	}
 
 	clickOutsideTheColumnToSaveTheColumn() {
+		cy.wait(1000);
 		cy.get(Board.#mainPageArea).click("bottom");
 	}
 

diff --git a/cypress/support/pages/room/pageRooms.js b/cypress/support/pages/room/pageRooms.js
@@ -8,7 +8,7 @@ class Rooms {
 	// static #goToRoomOverviewButton = '[data-testid="Rooms"]';
 	static #roomDetailFAB = '[data-testid="room-menu"]';
 	static #roomDetailFABEdit = '[data-testid="room-action-edit"]';
-	static #roomDetailFABParticipants = '[data-testid="room-action-manage-participants"]';
+	static #roomDetailFABParticipants = '[data-testid="room-action-manage-members"]';
 	static #roomDetailFABDelete = '[data-testid="room-action-delete"]';
 	static #addContentButton = '[data-testid="add-content-button"]';
 	static #fabButtonAddBoard = '[data-testid="fab_button_add_board"]';
@@ -28,8 +28,6 @@ class Rooms {
 	static #inputSatrtdateForRoom = '[data-testid="room-start-date-input"]';
 	static #inputEndtdateForRoom = '[data-testid="room-end-date-input"]';
 
-
-
 	selectEndDateForRoom() {
 		const currentDate = new Date();
 		//set the date which is two days later than the current day
@@ -94,7 +92,7 @@ class Rooms {
 	}
 
 	seeRoomEditParticipantsPage() {
-		cy.get(Rooms.#roomTitle).contains("Raum-Teilnehmende");
+		cy.get(Rooms.#roomTitle).contains("Raum-Mitglieder");
 	}
 
 	navigateToRoom(roomName) {
@@ -181,7 +179,5 @@ class Rooms {
 	clickOnFabButtonToAddBoard() {
 		cy.get(Rooms.#fabButtonAddBoard).click();
 	}
-
-
 }
 export default Rooms;
diff --git a/cypress/support/pages/room_board/pageRoomBoards.js b/cypress/support/pages/room_board/pageRoomBoards.js
@@ -3,11 +3,10 @@
 class RoomBoards {
 	static #btnDialogCancel = '[data-testid="dialog-cancel"]';
 	static #btnDialogConfirm = '[data-testid="dialog-confirm"]';
-	static #boardMenuActionDelete = '[data-testid="board-menu-action-delete"]';
+	static #boardMenuActionDelete = '[data-testid="kebab-menu-action-delete"]';
 	static #mainPageArea = '[id="main-content"]';
 	static #roomBoardTitleOnPage = '[data-testid="board-title"]';
 	static #boardMenuIcon = '[data-testid="board-menu-icon"]';
-	static #btnBoardMenuActionEdit = '[data-testid="board-menu-action-edit"]';
 	static #dialogAddMultiColumnBoard = '[data-testid="dialog-add-multi-column-board"]';
 	static #dialogAddSingleColumnBoard = '[data-testid="dialog-add-single-column-board"]';
 	static #boardLayoutDialogTitle = '[data-testid="board-layout-dialog-title"]';
@@ -44,7 +43,9 @@ class RoomBoards {
 		});
 	}
 	seeGivenRoomBoardTitle(boardTitle) {
-		cy.get(RoomBoards.#roomBoardTitleOnPage).find('input').should('have.value', boardTitle);
+		cy.get(RoomBoards.#roomBoardTitleOnPage)
+			.find("input")
+			.should("have.value", boardTitle);
 	}
 	clickOutsideTheTitleToSaveTheModifiedTitle() {
 		cy.get(RoomBoards.#mainPageArea).click("bottom");
@@ -73,9 +74,6 @@ class RoomBoards {
 	clickOnThreeDotMenuInRoomBoardTitle() {
 		cy.get(RoomBoards.#boardMenuIcon).click();
 	}
-	clickOnEditInBoardMenu() {
-		cy.get(RoomBoards.#btnBoardMenuActionEdit).click();
-	}
 }
 
-export default RoomBoards;
+export default RoomBoards;
diff --git a/cypress/support/step_definition/course_board/createEditDeleteMultiColumnInBoardSteps.spec.js b/cypress/support/step_definition/course_board/createEditDeleteMultiColumnInBoardSteps.spec.js
@@ -11,10 +11,6 @@ Then("I see the page Course Board details", () => {
 	board.seeNewCourseBoardCreatePage();
 });
 
-When("I click on the option Edit in three dot menu in course board", () => {
-	board.clickOnEditInThreeDotCourseBoardTitle();
-});
-
 Then("I enter the course board title {string}", (boardTitle) => {
 	board.enterCourseBoardTitle(boardTitle);
 });
@@ -67,8 +63,8 @@ When("I click on three dot menu in the column", () => {
 	board.clickOnThreeDotOnColumn();
 });
 
-When("I select the option Edit in three dot menu in the column", () => {
-	board.selectEditInThreeDotMenu();
+When("I select the three dot menu action {string}", (kebabMenuAction) => {
+	board.clickOnKebabMenuAction(kebabMenuAction);
 });
 
 When("I select the option Delete in three dot menu in the column", () => {

diff --git a/cypress/support/step_definition/room_boards/roomBoardSteps.spec.js b/cypress/support/step_definition/room_boards/roomBoardSteps.spec.js
@@ -27,10 +27,6 @@ When("I click on the three dot menu in room board", () => {
 	roomBoards.clickOnThreeDotMenuInRoomBoardTitle();
 });
 
-When("I click on edit in board menu", () => {
-	roomBoards.clickOnEditInBoardMenu();
-});
-
 Then("I change the room board title to {string}", (boardTitle) => {
 	roomBoards.enterRoomBoardTitle(boardTitle);
 });
@@ -62,4 +58,3 @@ When("I click on the button to confirm the deletion", () => {
 Then("I do not see the board {string} in the room", (boardTitle) => {
 	roomBoards.doNotSeeBoardOnRoomDetailPage(boardTitle);
 });
-