BC-3475 - As a user, I want to add/edit alternative text to images

src/components/data-board/BoardApi.composable.unit.ts

@@ -147,6 +147,7 @@ describe("BoardApi.composable", () => {
 				type: ContentElementType.File,
 				content: {
 					caption: "caption",
+					alternativeText: "alternative text",
 				},
 				timestamps: timestampsResponseFactory.build(),
 			};

src/components/feature-board-file-element/FileContentElement.unit.ts

@@ -152,6 +152,7 @@ describe("FileContentElement", () => {
 					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
 					size: fileRecordResponse.size,
 					previewStatus: fileRecordResponse.previewStatus,
+					element,
 				};
 
 				const { wrapper, deleteElementMock } = getWrapper({
@@ -600,6 +601,7 @@ describe("FileContentElement", () => {
 					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
 					size: fileRecordResponse.size,
 					previewStatus: fileRecordResponse.previewStatus,
+					element,
 				};
 
 				const { wrapper, deleteElementMock } = getWrapper({

src/components/feature-board-file-element/FileContentElement.vue

@@ -105,6 +105,7 @@ export default defineComponent({
 				isDownloadAllowed: isDownloadAllowed(
 					fileRecord.value.securityCheckStatus
 				),
+				element: props.element,
 			};
 		});
 

src/components/feature-board-file-element/content/FileContent.unit.ts

@@ -1,76 +1,205 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
+import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import FileAlert from "./alert/FileAlert.vue";
+import AlternativeText from "./alternative-text/AlternativeText.vue";
 import FileContent from "./FileContent.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 describe("FileContent", () => {
-	const setup = () => {
-		document.body.setAttribute("data-app", "true");
-
-		const fileProperties = {
-			name: "test",
-			size: 100,
-			url: "test",
-			previewUrl: "test",
-			previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
-			isDownloadAllowed: true,
-		};
-		const wrapper = shallowMount(FileContent, {
-			propsData: {
-				fileProperties,
-				isEditMode: true,
-			},
-			...createComponentMocks({}),
-		});
+	describe("When EditMode is true", () => {
+		describe("When PreviewUrl is defined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
 
-		return {
-			wrapper,
-			fileProperties,
-		};
-	};
+				const element = fileElementResponseFactory.build();
 
-	it("should pass props to FileContent", () => {
-		const { wrapper, fileProperties } = setup();
+				const fileProperties = {
+					name: "test",
+					size: 100,
+					url: "test",
+					previewUrl: "test",
+					previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
+					isDownloadAllowed: true,
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: true,
+					},
+					...createComponentMocks({}),
+				});
 
-		const fileContent = wrapper.findComponent(FileContent);
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
 
-		expect(fileContent.props()).toEqual({
-			fileProperties,
-			isEditMode: true,
-		});
-	});
+			it("should pass props to FileContent", () => {
+				const { wrapper, fileProperties } = setup();
 
-	it("should pass props to ContentElementFooter", () => {
-		const { wrapper, fileProperties } = setup();
+				const fileContent = wrapper.findComponent(FileContent);
 
-		const contentElementFooter = wrapper.findComponent(ContentElementFooter);
+				expect(fileContent.props()).toEqual({
+					fileProperties,
+					isEditMode: true,
+				});
+			});
 
-		expect(contentElementFooter.props()).toEqual({
-			fileProperties,
-		});
-	});
+			it("should pass props to ContentElementFooter", () => {
+				const { wrapper, fileProperties } = setup();
 
-	it("Should pass props to FileAlert", () => {
-		const { wrapper, fileProperties } = setup();
+				const contentElementFooter =
+					wrapper.findComponent(ContentElementFooter);
 
-		const fileAlert = wrapper.findComponent(FileAlert);
+				expect(contentElementFooter.props()).toEqual({
+					fileProperties,
+				});
+			});
 
-		expect(fileAlert.props()).toEqual({
-			previewStatus: fileProperties.previewStatus,
-		});
-	});
+			it("Should pass props to FileAlert", () => {
+				const { wrapper, fileProperties } = setup();
+
+				const fileAlert = wrapper.findComponent(FileAlert);
+
+				expect(fileAlert.props()).toEqual({
+					previewStatus: fileProperties.previewStatus,
+				});
+			});
+
+			it("Should AlternativeText component be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
 
-	describe("when alert emits on-status-reload", () => {
-		it("should emit delete event", async () => {
-			const { wrapper } = setup();
+				expect(alternativeText.exists()).toBe(true);
+			});
 
-			const fileAlert = wrapper.findComponent(FileAlert);
+			it("Should pass element to alternative text", () => {
+				const { wrapper, fileProperties } = setup();
 
-			await fileAlert.vm.$emit("on-status-reload");
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.props()).toEqual({
+					element: fileProperties.element,
+				});
+			});
+
+			describe("when alert emits on-status-reload", () => {
+				it("should emit delete event", async () => {
+					const { wrapper } = setup();
+
+					const fileAlert = wrapper.findComponent(FileAlert);
+
+					await fileAlert.vm.$emit("on-status-reload");
+
+					expect(wrapper.emitted("fetch:file")).toBeTruthy();
+				});
+			});
+		});
+
+		describe("When PreviewUrl is undefined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+
+				const fileProperties = {
+					previewUrl: undefined,
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: true,
+					},
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
+
+			it("Should AlternativeText component not be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.exists()).toBe(false);
+			});
+		});
+	});
+
+	describe("When EditMode is false", () => {
+		describe("When PreviewUrl is defined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+
+				const fileProperties = {
+					previewUrl: "test",
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: false,
+					},
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
+
+			it("Should AlternativeText component not be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.exists()).toBe(false);
+			});
+		});
 
-			expect(wrapper.emitted("fetch:file")).toBeTruthy();
+		describe("When PreviewUrl is undefined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+
+				const fileProperties = {
+					previewUrl: undefined,
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: false,
+					},
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
+
+			it("Should AlternativeText component not be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.exists()).toBe(false);
+			});
 		});
 	});
 });

src/components/feature-board-file-element/content/FileContent.vue

@@ -1,6 +1,10 @@
 <template>
 	<div>
 		<FileDisplay :file-properties="fileProperties" :is-edit-mode="isEditMode" />
+		<AlternativeText
+			v-if="isEditMode && fileProperties.previewUrl"
+			:element="fileProperties.element"
+		/>
 		<ContentElementFooter :fileProperties="fileProperties" />
 		<FileAlert :previewStatus="previewStatus" @on-status-reload="onFetchFile" />
 	</div>
@@ -11,6 +15,7 @@ import { computed, defineComponent, PropType } from "vue";
 import FileAlert from "../content/alert/FileAlert.vue";
 import FileDisplay from "../content/display/FileDisplay.vue";
 import { FileProperties } from "../shared/types/file-properties";
+import AlternativeText from "./alternative-text/AlternativeText.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 export default defineComponent({
@@ -19,6 +24,7 @@ export default defineComponent({
 		FileDisplay,
 		ContentElementFooter,
 		FileAlert,
+		AlternativeText,
 	},
 	props: {
 		fileProperties: {

src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts

@@ -0,0 +1,76 @@
+import { fileElementResponseFactory } from "@@/tests/test-utils";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { shallowMount } from "@vue/test-utils";
+import AlternativeText from "./AlternativeText.vue";
+
+const alternativeText = "alt text";
+jest.mock("@data-board", () => {
+	return {
+		useContentElementState: jest.fn(() => ({
+			modelValue: { alternativeText },
+		})),
+	};
+});
+
+describe("AlternativeText", () => {
+	const setup = () => {
+		document.body.setAttribute("data-app", "true");
+
+		const propsData = { element: fileElementResponseFactory.build() };
+
+		const wrapper = shallowMount(AlternativeText, {
+			propsData,
+			...createComponentMocks({}),
+		});
+
+		return {
+			wrapper,
+		};
+	};
+
+	it("should be found in dom", () => {
+		const { wrapper } = setup();
+
+		const fileContentElement = wrapper.findComponent(AlternativeText);
+
+		expect(fileContentElement.exists()).toBe(true);
+	});
+
+	it("should have the modelValue as value", async () => {
+		const { wrapper } = setup();
+
+		const textarea = wrapper.find("v-textarea-stub");
+
+		const valueAttribute = textarea.attributes("value");
+
+		expect(valueAttribute).toBe(alternativeText);
+	});
+
+	it("should have a hint translation", async () => {
+		const { wrapper } = setup();
+
+		const textarea = wrapper.find("v-textarea-stub");
+
+		const hint = textarea.attributes("hint");
+
+		expect(hint).toBe(
+			wrapper.vm.$i18n
+				.t("components.cardElement.fileElement.altDescription")
+				.toString()
+		);
+	});
+
+	it("should have a label translation", async () => {
+		const { wrapper } = setup();
+
+		const textarea = wrapper.find("v-textarea-stub");
+
+		const label = textarea.attributes("label");
+
+		expect(label).toBe(
+			wrapper.vm.$i18n
+				.t("components.cardElement.fileElement.alternativeText")
+				.toString()
+		);
+	});
+});