Bc-8296 - Add data test ids to board components (#3456)

hpi-schul-cloud · Nov 22, 2024 · ab393d6 · ab393d6
1 parent c2c5c62
commit ab393d6
Show file tree

Hide file tree

Showing 26 changed files with 253 additions and 13 deletions.
diff --git a/...es/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.unit.ts b/...es/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.unit.ts
@@ -68,7 +68,13 @@ describe("CollaborativeTextEditorElement", () => {
 					[BOARD_IS_LIST_LAYOUT as symbol]: isListBoard,
 				},
 			},
-			propsData: { isEditMode, element },
+			propsData: {
+				isEditMode,
+				element,
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
+			},
 		});
 
 		const windowMock = createMock<Window>();

diff --git a/...odules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue b/...odules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue
@@ -27,6 +27,9 @@
 			<template #menu>
 				<CollaborativeTextEditorElementMenu
 					v-if="isEditMode"
+					:column-index="columnIndex"
+					:row-index="rowIndex"
+					:element-index="elementIndex"
 					@move-down:element="onMoveDown"
 					@move-up:element="onMoveUp"
 					@delete:element="onDelete"
@@ -59,6 +62,9 @@ const props = defineProps({
 		required: true,
 	},
 	isEditMode: { type: Boolean, required: true },
+	columnIndex: { type: Number, required: true },
+	rowIndex: { type: Number, required: true },
+	elementIndex: { type: Number, required: true },
 });
 
 const emit = defineEmits([

diff --git a/...d-collaborative-text-editor-element/components/CollaborativeTextEditorElementMenu.unit.ts b/...d-collaborative-text-editor-element/components/CollaborativeTextEditorElementMenu.unit.ts
@@ -25,6 +25,9 @@ describe("CollaborativeTextEditorElementMenu", () => {
 		isFirstElement: boolean;
 		isLastElement: boolean;
 		hasMultipleElements: boolean;
+		columnIndex: number;
+		rowIndex: number;
+		elementIndex: number;
 	}) => {
 		document.body.setAttribute("data-app", "true");
 
@@ -60,6 +63,9 @@ describe("CollaborativeTextEditorElementMenu", () => {
 			hasMultipleElements: true,
 			isFirstElement: false,
 			isLastElement: false,
+			columnIndex: 0,
+			rowIndex: 1,
+			elementIndex: 2,
 		});
 
 		return {

diff --git a/...board-collaborative-text-editor-element/components/CollaborativeTextEditorElementMenu.vue b/...board-collaborative-text-editor-element/components/CollaborativeTextEditorElementMenu.vue
@@ -2,6 +2,7 @@
 	<BoardMenu
 		:scope="BoardMenuScope.COLLABORATIVE_TEXT_EDITOR_ELEMENT"
 		has-background
+		:data-testid="`element-menu-button-${columnIndex}-${rowIndex}-${elementIndex}`"
 	>
 		<BoardMenuActionMoveUp @click="onMoveUp" />
 		<BoardMenuActionMoveDown @click="onMoveDown" />
@@ -18,6 +19,12 @@ import {
 	BoardMenuScope,
 } from "@ui-board";
 
+defineProps({
+	columnIndex: { type: Number, required: true },
+	rowIndex: { type: Number, required: true },
+	elementIndex: { type: Number, required: true },
+});
+
 const emit = defineEmits<{
 	(e: "delete:element"): void;
 	(e: "move-down:element"): void;

diff --git a/src/modules/feature/board-deleted-element/DeletedElement.unit.ts b/src/modules/feature/board-deleted-element/DeletedElement.unit.ts
@@ -41,6 +41,9 @@ describe("DeletedElement", () => {
 		props: ComponentProps<typeof DeletedElement> = {
 			element: deletedElementResponseFactory.build(),
 			isEditMode: false,
+			columnIndex: 0,
+			rowIndex: 1,
+			elementIndex: 2,
 		}
 	) => {
 		const wrapper = mount(DeletedElement, {
@@ -66,6 +69,9 @@ describe("DeletedElement", () => {
 			const { wrapper } = getWrapper({
 				element: deletedElementResponseFactory.build(),
 				isEditMode: true,
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
 			});
 
 			return {
@@ -88,6 +94,9 @@ describe("DeletedElement", () => {
 				const { wrapper } = getWrapper({
 					element: deletedElementResponseFactory.build(),
 					isEditMode: true,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				return {
@@ -109,6 +118,9 @@ describe("DeletedElement", () => {
 				const { wrapper } = getWrapper({
 					element: deletedElementResponseFactory.build(),
 					isEditMode: false,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				return {
@@ -131,6 +143,9 @@ describe("DeletedElement", () => {
 				const { wrapper } = getWrapper({
 					element: deletedElement,
 					isEditMode: true,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				return {
@@ -158,6 +173,9 @@ describe("DeletedElement", () => {
 				const { wrapper } = getWrapper({
 					element: deletedElementResponseFactory.build(),
 					isEditMode: true,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				return {

diff --git a/src/modules/feature/board-deleted-element/DeletedElement.vue b/src/modules/feature/board-deleted-element/DeletedElement.vue
@@ -29,6 +29,9 @@
 			<template #menu>
 				<DeletedElementMenu
 					v-if="isEditMode"
+					:column-index="columnIndex"
+					:row-index="rowIndex"
+					:element-index="elementIndex"
 					@delete:element="onDeleteElement"
 				/>
 			</template>
@@ -51,6 +54,9 @@ const props = defineProps({
 		required: true,
 	},
 	isEditMode: { type: Boolean, required: true },
+	columnIndex: { type: Number, required: true },
+	rowIndex: { type: Number, required: true },
+	elementIndex: { type: Number, required: true },
 });
 
 const emit = defineEmits<{

diff --git a/src/modules/feature/board-deleted-element/DeletedElementMenu.vue b/src/modules/feature/board-deleted-element/DeletedElementMenu.vue
@@ -2,7 +2,7 @@
 	<BoardMenu
 		:scope="BoardMenuScope.DELETED_ELEMENT"
 		has-background
-		data-testid="deleted-element-menu-btn"
+		:data-testid="`element-menu-button-${columnIndex}-${rowIndex}-${elementIndex}`"
 	>
 		<BoardMenuActionDelete @click="onDelete" />
 	</BoardMenu>
@@ -11,6 +11,12 @@
 <script setup lang="ts">
 import { BoardMenu, BoardMenuActionDelete, BoardMenuScope } from "@ui-board";
 
+defineProps({
+	columnIndex: { type: Number, required: true },
+	rowIndex: { type: Number, required: true },
+	elementIndex: { type: Number, required: true },
+});
+
 const emit = defineEmits<{
 	(e: "delete:element"): void;
 }>();

diff --git a/src/modules/feature/board-drawing-element/DrawingContentElement.unit.ts b/src/modules/feature/board-drawing-element/DrawingContentElement.unit.ts
@@ -42,6 +42,9 @@ describe("DrawingContentElement", () => {
 	const setup = (props: {
 		element: DrawingElementResponse;
 		isEditMode: boolean;
+		columnIndex: number;
+		rowIndex: number;
+		elementIndex: number;
 	}) => {
 		const wrapper = shallowMount(DrawingContentElement, {
 			global: {
@@ -66,6 +69,9 @@ describe("DrawingContentElement", () => {
 			const { wrapper } = setup({
 				element: DRAWING_ELEMENT,
 				isEditMode: false,
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
 			});
 			expect(wrapper.findComponent(InnerContent).exists()).toBe(true);
 		});
@@ -74,6 +80,9 @@ describe("DrawingContentElement", () => {
 			const { wrapper } = setup({
 				element: DRAWING_ELEMENT,
 				isEditMode: false,
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
 			});
 
 			const elementCard = wrapper.findComponent({
@@ -90,6 +99,9 @@ describe("DrawingContentElement", () => {
 			const { wrapper } = setup({
 				element: DRAWING_ELEMENT,
 				isEditMode: false,
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
 			});
 
 			const elementCard = wrapper.findComponent({
@@ -108,6 +120,9 @@ describe("DrawingContentElement", () => {
 					const { wrapper } = setup({
 						element: DRAWING_ELEMENT,
 						isEditMode: false,
+						columnIndex: 0,
+						rowIndex: 1,
+						elementIndex: 2,
 					});
 
 					const elementCard = wrapper.findComponent({
@@ -124,6 +139,9 @@ describe("DrawingContentElement", () => {
 				const { wrapper } = setup({
 					element: DRAWING_ELEMENT,
 					isEditMode: false,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				const elementMenu = wrapper.findComponent(BoardMenu);
@@ -139,6 +157,9 @@ describe("DrawingContentElement", () => {
 					const { wrapper } = setup({
 						element: DRAWING_ELEMENT,
 						isEditMode: true,
+						columnIndex: 0,
+						rowIndex: 1,
+						elementIndex: 2,
 					});
 
 					const elementCard = wrapper.findComponent({
@@ -155,6 +176,9 @@ describe("DrawingContentElement", () => {
 				const { wrapper } = setup({
 					element: DRAWING_ELEMENT,
 					isEditMode: true,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				const elementMenu = wrapper.findComponent(BoardMenu);
@@ -166,6 +190,9 @@ describe("DrawingContentElement", () => {
 				const { wrapper } = setup({
 					element: DRAWING_ELEMENT,
 					isEditMode: true,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				const menuItem = wrapper.findComponent(BoardMenuActionDelete);
@@ -179,6 +206,9 @@ describe("DrawingContentElement", () => {
 				const { wrapper } = setup({
 					element: DRAWING_ELEMENT,
 					isEditMode: true,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				const menuItem = wrapper.findComponent(BoardMenuActionMoveUp);
@@ -192,6 +222,9 @@ describe("DrawingContentElement", () => {
 				const { wrapper } = setup({
 					element: DRAWING_ELEMENT,
 					isEditMode: true,
+					columnIndex: 0,
+					rowIndex: 1,
+					elementIndex: 2,
 				});
 
 				const menuItem = wrapper.findComponent(BoardMenuActionMoveDown);

diff --git a/src/modules/feature/board-drawing-element/DrawingContentElement.vue b/src/modules/feature/board-drawing-element/DrawingContentElement.vue
@@ -14,7 +14,11 @@
 		<div class="drawing-element-content">
 			<InnerContent :docName="element.id">
 				<template v-if="isEditMode">
-					<BoardMenu :scope="BoardMenuScope.DRAWING_ELEMENT" has-background>
+					<BoardMenu
+						:scope="BoardMenuScope.DRAWING_ELEMENT"
+						has-background
+						:data-testid="`element-menu-button-${columnIndex}-${rowIndex}-${elementIndex}`"
+					>
 						<BoardMenuActionMoveUp @click="onMoveDrawingElementEditUp" />
 						<BoardMenuActionMoveDown @click="onMoveDrawingElementEditDown" />
 						<BoardMenuActionDelete @click="onDeleteElement" />
@@ -46,6 +50,9 @@ const props = defineProps({
 		required: true,
 	},
 	isEditMode: { type: Boolean, required: true },
+	columnIndex: { type: Number, required: true },
+	rowIndex: { type: Number, required: true },
+	elementIndex: { type: Number, required: true },
 });
 const emit = defineEmits([
 	"delete:element",

diff --git a/src/modules/feature/board-external-tool-element/ExternalToolElement.unit.ts b/src/modules/feature/board-external-tool-element/ExternalToolElement.unit.ts
@@ -126,6 +126,9 @@ describe("ExternalToolElement", () => {
 				isLastElement: false,
 				hasMultipleElements: false,
 				cardId: "cardId",
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
 				...propsData,
 			},
 		});

diff --git a/src/modules/feature/board-external-tool-element/ExternalToolElement.vue b/src/modules/feature/board-external-tool-element/ExternalToolElement.vue
@@ -28,6 +28,9 @@
 					v-if="isEditMode"
 					ref="externalToolElementMenu"
 					:display-name="displayData?.name"
+					:column-index="columnIndex"
+					:row-index="rowIndex"
+					:element-index="elementIndex"
 					@move-down:element="onMoveElementDown"
 					@move-up:element="onMoveElementUp"
 					@delete:element="onDeleteElement"
@@ -86,6 +89,9 @@ const props = defineProps({
 		required: true,
 	},
 	isEditMode: { type: Boolean, required: true },
+	columnIndex: { type: Number, required: true },
+	rowIndex: { type: Number, required: true },
+	elementIndex: { type: Number, required: true },
 });
 
 const emit = defineEmits<{

diff --git a/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.unit.ts b/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.unit.ts
@@ -11,6 +11,9 @@ describe("ExternalToolElementMenu", () => {
 		isFirstElement: boolean;
 		isLastElement: boolean;
 		hasMultipleElements: boolean;
+		columnIndex: number;
+		rowIndex: number;
+		elementIndex: number;
 	}) => {
 		document.body.setAttribute("data-app", "true");
 
@@ -36,6 +39,9 @@ describe("ExternalToolElementMenu", () => {
 				hasMultipleElements: true,
 				isFirstElement: false,
 				isLastElement: false,
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
 			});
 
 			return {
@@ -68,6 +74,9 @@ describe("ExternalToolElementMenu", () => {
 				hasMultipleElements: true,
 				isFirstElement: false,
 				isLastElement: false,
+				columnIndex: 0,
+				rowIndex: 1,
+				elementIndex: 2,
 			});
 
 			return {

diff --git a/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.vue b/src/modules/feature/board-external-tool-element/ExternalToolElementMenu.vue
@@ -1,5 +1,9 @@
 <template>
-	<BoardMenu :scope="BoardMenuScope.EXTERNAL_TOOL_ELEMENT" has-background>
+	<BoardMenu
+		:scope="BoardMenuScope.EXTERNAL_TOOL_ELEMENT"
+		has-background
+		:data-testid="`element-menu-button-${columnIndex}-${rowIndex}-${elementIndex}`"
+	>
 		<BoardMenuActionMoveUp @click="onMoveUp" />
 		<BoardMenuActionMoveDown @click="onMoveDown" />
 		<BoardMenuAction :icon="mdiCogOutline" @click="onEdit">
@@ -43,6 +47,9 @@ export default defineComponent({
 		displayName: {
 			type: String,
 		},
+		columnIndex: { type: Number, required: true },
+		rowIndex: { type: Number, required: true },
+		elementIndex: { type: Number, required: true },
 	},
 	emits: [
 		"edit:element",