word break

hpi-schul-cloud · Oct 16, 2023 · 1caaed2 · 1caaed2
1 parent 1f1a2fc
commit 1caaed2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts b/src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts
@@ -451,9 +451,9 @@ describe("ExternalToolElement", () => {
 				card.vm.$emit("click");
 				await Vue.nextTick();
 
-				const dialog = wrapper.findComponent({
-					ref: "board-external-tool-element-configuration-dialog",
-				});
+				const dialog = wrapper.find(
+					'[data-testid="board-external-tool-element-configuration-dialog"]'
+				);
 
 				expect(dialog.props("isOpen")).toEqual(true);
 			});
@@ -478,9 +478,9 @@ describe("ExternalToolElement", () => {
 			it("should update the elements content", async () => {
 				const { wrapper, savedTool } = setup();
 
-				const dialog = wrapper.findComponent({
-					ref: "board-external-tool-element-configuration-dialog",
-				});
+				const dialog = wrapper.find(
+					'[data-testid="board-external-tool-element-configuration-dialog"]'
+				);
 
 				dialog.vm.$emit("save", savedTool);
 				await Vue.nextTick();
@@ -493,9 +493,9 @@ describe("ExternalToolElement", () => {
 			it("should fetch the display data", async () => {
 				const { wrapper, savedTool } = setup();
 
-				const dialog = wrapper.findComponent({
-					ref: "board-external-tool-element-configuration-dialog",
-				});
+				const dialog = wrapper.find(
+					'[data-testid="board-external-tool-element-configuration-dialog"]'
+				);
 
 				dialog.vm.$emit("save", savedTool);
 				await Vue.nextTick();

diff --git a/src/components/feature-board-external-tool-element/ExternalToolElement.vue b/src/components/feature-board-external-tool-element/ExternalToolElement.vue
@@ -26,7 +26,7 @@
 				></v-img>
 			</div>
 			<v-icon v-else>{{ mdiPuzzleOutline }}</v-icon>
-			<span class="align-self-center title flex-1">
+			<span class="align-self-center title flex-1 break-word">
 				{{
 					hasLinkedTool
 						? toolDisplayName
@@ -48,7 +48,7 @@
 			:config-id="element.content.contextExternalToolId"
 			@close="onConfigurationDialogClose"
 			@save="onConfigurationDialogSave"
-			ref="board-external-tool-element-configuration-dialog"
+			data-testid="board-external-tool-element-configuration-dialog"
 		>
 		</ExternalToolElementConfigurationDialog>
 	</v-card>
@@ -217,4 +217,8 @@ $logo-size: 24px;
 .flex-1 {
 	flex: 1;
 }
+
+.break-word {
+	word-break: break-word;
+}
 </style>
diff --git a/...components/feature-board-external-tool-element/ExternalToolElementConfigurationDialog.vue b/...components/feature-board-external-tool-element/ExternalToolElementConfigurationDialog.vue
@@ -2,7 +2,6 @@
 	<v-custom-dialog
 		:is-open="isOpen"
 		:has-buttons="false"
-		data-testId="tool-element-configuration-dialog"
 		@dialog-closed="onCancel"
 	>
 		<h2 slot="title" class="text-h4 my-2">