From 5e5f8deb760b2d9bcc13561b908df45e223deeca Mon Sep 17 00:00:00 2001
From: Martin Schuhmacher <55735359+MartinSchuhmacher@users.noreply.github.com>
Date: Tue, 27 Feb 2024 16:49:52 +0100
Subject: [PATCH] BC-6551 - Assign [data-testid] on Board Columns Element &
 Test Implementation (#3121)

* added data test ids
---
 src/components/feature-board/board/BoardColumn.vue     |  1 +
 .../feature-board/board/BoardColumnHeader.vue          | 10 +++++++++-
 src/components/ui-board/BoardMenu.vue                  |  4 ++++
 src/components/ui-board/BoardMenuActionDelete.vue      |  6 +++++-
 src/components/ui-board/BoardMenuActionEdit.vue        |  6 +++++-
 src/components/ui-board/BoardMenuActionMoveDown.vue    |  7 ++++++-
 src/components/ui-board/BoardMenuActionMoveLeft.vue    |  7 ++++++-
 src/components/ui-board/BoardMenuActionMoveRight.vue   |  7 ++++++-
 src/components/ui-board/BoardMenuActionMoveUp.vue      |  7 ++++++-
 src/pages/rooms/RoomDetails.page.vue                   |  4 ++--
 10 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/components/feature-board/board/BoardColumn.vue b/src/components/feature-board/board/BoardColumn.vue
index a406aefc97..f6587eadca 100644
--- a/src/components/feature-board/board/BoardColumn.vue
+++ b/src/components/feature-board/board/BoardColumn.vue
@@ -7,6 +7,7 @@
 			:columnId="column.id"
 			:title="column.title"
 			:titlePlaceholder="titlePlaceholder"
+			:index="index"
 			@delete:column="onColumnDelete"
 			@move:column-left="onMoveColumnLeft"
 			@move:column-right="onMoveColumnRight"
diff --git a/src/components/feature-board/board/BoardColumnHeader.vue b/src/components/feature-board/board/BoardColumnHeader.vue
index 56a0d1b0f6..efb6e8abc4 100644
--- a/src/components/feature-board/board/BoardColumnHeader.vue
+++ b/src/components/feature-board/board/BoardColumnHeader.vue
@@ -14,6 +14,7 @@
 			<div class="d-flex align-center py-2 px-2">
 				<BoardAnyTitleInput
 					:value="title"
+					:data-testid="`column-title-${index}`"
 					scope="column"
 					:isEditMode="isEditMode"
 					:placeholder="titlePlaceholder"
@@ -21,7 +22,11 @@
 					class="w-100"
 					:isFocused="isFocusedById"
 				/>
-				<BoardMenu v-if="hasDeletePermission" scope="column">
+				<BoardMenu
+					v-if="hasDeletePermission"
+					scope="column"
+					:data-testid="`column-menu-btn-${index}`"
+				>
 					<BoardMenuActionEdit v-if="!isEditMode" @click="onStartEditMode" />
 					<BoardMenuActionMoveLeft @click="onMoveColumnLeft" />
 					<BoardMenuActionMoveRight @click="onMoveColumnRight" />
@@ -75,6 +80,9 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		index: {
+			type: Number,
+		},
 	},
 	emits: [
 		"delete:column",
diff --git a/src/components/ui-board/BoardMenu.vue b/src/components/ui-board/BoardMenu.vue
index dbbf62c0ed..ff008755f1 100644
--- a/src/components/ui-board/BoardMenu.vue
+++ b/src/components/ui-board/BoardMenu.vue
@@ -53,6 +53,10 @@ export default defineComponent({
 			type: String as PropType<BoardMenuScope>,
 			required: true,
 		},
+		dataTestid: {
+			type: String,
+			default: "board-menu-button",
+		},
 	},
 	setup(props) {
 		const scope = toRef(props, "scope");
diff --git a/src/components/ui-board/BoardMenuActionDelete.vue b/src/components/ui-board/BoardMenuActionDelete.vue
index 338a5b6a25..ed12314eb1 100644
--- a/src/components/ui-board/BoardMenuActionDelete.vue
+++ b/src/components/ui-board/BoardMenuActionDelete.vue
@@ -1,5 +1,9 @@
 <template>
-	<BoardMenuAction :icon="mdiTrashCanOutline" @click="onClick">
+	<BoardMenuAction
+		:icon="mdiTrashCanOutline"
+		@click="onClick"
+		data-testid="board-menu-action-delete"
+	>
 		{{ $t("components.board.action.delete") }}
 	</BoardMenuAction>
 </template>
diff --git a/src/components/ui-board/BoardMenuActionEdit.vue b/src/components/ui-board/BoardMenuActionEdit.vue
index c2eec44a85..348d6506e0 100644
--- a/src/components/ui-board/BoardMenuActionEdit.vue
+++ b/src/components/ui-board/BoardMenuActionEdit.vue
@@ -1,5 +1,9 @@
 <template>
-	<BoardMenuAction :icon="mdiPencilOutline" @click="onClick">
+	<BoardMenuAction
+		:icon="mdiPencilOutline"
+		@click="onClick"
+		data-testid="board-menu-action-edit"
+	>
 		{{ $t("common.actions.edit") }}
 	</BoardMenuAction>
 </template>
diff --git a/src/components/ui-board/BoardMenuActionMoveDown.vue b/src/components/ui-board/BoardMenuActionMoveDown.vue
index a0b56f75eb..0648b1b673 100644
--- a/src/components/ui-board/BoardMenuActionMoveDown.vue
+++ b/src/components/ui-board/BoardMenuActionMoveDown.vue
@@ -1,5 +1,10 @@
 <template>
-	<BoardMenuAction :icon="mdiArrowDown" @click="onClick" v-if="isVisible">
+	<BoardMenuAction
+		:icon="mdiArrowDown"
+		@click="onClick"
+		v-if="isVisible"
+		data-testid="board-menu-action-move-down"
+	>
 		{{ $t("components.board.action.moveDown") }}
 	</BoardMenuAction>
 </template>
diff --git a/src/components/ui-board/BoardMenuActionMoveLeft.vue b/src/components/ui-board/BoardMenuActionMoveLeft.vue
index dccefd81e9..ab0019e3ae 100644
--- a/src/components/ui-board/BoardMenuActionMoveLeft.vue
+++ b/src/components/ui-board/BoardMenuActionMoveLeft.vue
@@ -1,5 +1,10 @@
 <template>
-	<BoardMenuAction :icon="mdiArrowLeft" @click="onClick" v-if="isVisible">
+	<BoardMenuAction
+		:icon="mdiArrowLeft"
+		@click="onClick"
+		v-if="isVisible"
+		data-testid="board-menu-action-move-left"
+	>
 		{{ $t("components.board.action.moveLeft") }}
 	</BoardMenuAction>
 </template>
diff --git a/src/components/ui-board/BoardMenuActionMoveRight.vue b/src/components/ui-board/BoardMenuActionMoveRight.vue
index e9e7cd89c7..de18bfe579 100644
--- a/src/components/ui-board/BoardMenuActionMoveRight.vue
+++ b/src/components/ui-board/BoardMenuActionMoveRight.vue
@@ -1,5 +1,10 @@
 <template>
-	<BoardMenuAction :icon="mdiArrowRight" @click="onClick" v-if="isVisible">
+	<BoardMenuAction
+		:icon="mdiArrowRight"
+		@click="onClick"
+		v-if="isVisible"
+		data-testid="board-menu-action-move-right"
+	>
 		{{ $t("components.board.action.moveRight") }}
 	</BoardMenuAction>
 </template>
diff --git a/src/components/ui-board/BoardMenuActionMoveUp.vue b/src/components/ui-board/BoardMenuActionMoveUp.vue
index 6ad12b30fe..794c85c001 100644
--- a/src/components/ui-board/BoardMenuActionMoveUp.vue
+++ b/src/components/ui-board/BoardMenuActionMoveUp.vue
@@ -1,5 +1,10 @@
 <template>
-	<BoardMenuAction :icon="mdiArrowUp" @click="onClick" v-if="isVisible">
+	<BoardMenuAction
+		:icon="mdiArrowUp"
+		@click="onClick"
+		v-if="isVisible"
+		data-testid="board-menu-action-move-up"
+	>
 		{{ $t("components.board.action.moveUp") }}
 	</BoardMenuAction>
 </template>
diff --git a/src/pages/rooms/RoomDetails.page.vue b/src/pages/rooms/RoomDetails.page.vue
index 724386ae4e..9ba4899c5d 100644
--- a/src/pages/rooms/RoomDetails.page.vue
+++ b/src/pages/rooms/RoomDetails.page.vue
@@ -187,7 +187,7 @@ export default defineComponent({
 					icon: mdiPlus,
 					title: this.$t("common.actions.add"),
 					ariaLabel: this.$t("common.actions.add"),
-					testId: "add-tool-button",
+					dataTestId: "add-tool-button",
 					href: `/tools/context/tool-configuration?contextId=${this.courseId}&contextType=course`,
 				};
 
@@ -263,7 +263,7 @@ export default defineComponent({
 				icon: mdiPlus,
 				title: this.$t("common.actions.create"),
 				ariaLabel: this.$t("common.actions.create"),
-				testId: "add-content-button",
+				dataTestId: "add-content-button",
 				actions: actions,
 			};
 			return items;