BC-6551 - Assign [data-testid] on Board Columns Element & Test Implem…

…entation (#3121) * added data test ids
hpi-schul-cloud · Feb 27, 2024 · 5e5f8de · 5e5f8de
1 parent 9ace252
commit 5e5f8de
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 9 deletions.
diff --git 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
@@ -14,14 +14,19 @@
 			<div class="d-flex align-center py-2 px-2">
 				<BoardAnyTitleInput
 					:value="title"
+					:data-testid="`column-title-${index}`"
 					scope="column"
 					:isEditMode="isEditMode"
 					:placeholder="titlePlaceholder"
 					@update:value="onUpdateTitle"
 					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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;