Merge branch 'main' into N21-1207-show-group-members

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

@@ -32,6 +32,18 @@ describe("FileAlerts", () => {
 		});
 	});
 
+	describe("when alerts contains FileAlert.AUDIO_FORMAT_ERROR", () => {
+		it("should render FileAlert.AUDIO_FORMAT_ERROR", () => {
+			const { wrapper } = setup([FileAlert.AUDIO_FORMAT_ERROR]);
+
+			const infoAlert = wrapper.findComponent(InfoAlert);
+
+			expect(infoAlert.text()).toBe(
+				"components.cardElement.fileElement.audioFormatError"
+			);
+		});
+	});
+
 	describe("when alerts contains FileAlert.AWAITING_SCAN_STATUS", () => {
 		it("should render FileAlert.AWAITING_SCAN_STATUS", () => {
 			const { wrapper } = setup([FileAlert.AWAITING_SCAN_STATUS]);

src/components/feature-board-file-element/content/alert/FileAlerts.vue

@@ -4,6 +4,10 @@
 			{{ t("components.cardElement.fileElement.videoFormatError") }}
 		</InfoAlert>
 
+		<InfoAlert v-if="alerts.includes(FileAlert.AUDIO_FORMAT_ERROR)">
+			{{ t("components.cardElement.fileElement.audioFormatError") }}
+		</InfoAlert>
+
 		<InfoAlert v-if="alerts.includes(FileAlert.AWAITING_SCAN_STATUS)">
 			<div>
 				{{ t("components.cardElement.fileElement.awaitingScan") }}

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

@@ -1,14 +1,16 @@
-import { isVideoMimeType } from "@/utils/fileHelper";
+import { isAudioMimeType, isVideoMimeType } from "@/utils/fileHelper";
 import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
+import AudioDisplay from "./audio-display/AudioDisplay.vue";
 import FileDescription from "./file-description/FileDescription.vue";
 import FileDisplay from "./FileDisplay.vue";
 import ImageDisplay from "./image-display/ImageDisplay.vue";
 import VideoDisplay from "./video-display/VideoDisplay.vue";
 
 jest.mock("@/utils/fileHelper");
 const isVideoMimeTypeMock = jest.mocked(isVideoMimeType);
+const isAudioMimeTypeMock = jest.mocked(isAudioMimeType);
 
 describe("FileDisplay", () => {
 	describe("when previewUrl is defined", () => {
@@ -65,12 +67,12 @@ describe("FileDisplay", () => {
 				expect(props.element).toBeDefined();
 			});
 
-			it("should render file description display component", () => {
+			it("should pass showTitle true to file description", () => {
 				const { wrapper } = setup();
 
-				const fileDescription = wrapper.findComponent(FileDescription);
+				const props = wrapper.findComponent(FileDescription).attributes();
 
-				expect(fileDescription.exists()).toBe(true);
+				expect(props.showtitle).toBeFalsy();
 			});
 		});
 
@@ -95,6 +97,9 @@ describe("FileDisplay", () => {
 				isVideoMimeTypeMock.mockReset();
 				isVideoMimeTypeMock.mockReturnValueOnce(true);
 
+				isAudioMimeTypeMock.mockReset();
+				isAudioMimeTypeMock.mockReturnValueOnce(false);
+
 				const wrapper = shallowMount(FileDisplay, {
 					propsData,
 					...createComponentMocks({}),
@@ -135,6 +140,14 @@ describe("FileDisplay", () => {
 
 				expect(fileDescription.exists()).toBe(true);
 			});
+
+			it("should pass showTitle true to file description", () => {
+				const { wrapper } = setup();
+
+				const props = wrapper.findComponent(FileDescription).attributes();
+
+				expect(props.showtitle).toBeFalsy();
+			});
 		});
 	});
 
@@ -160,6 +173,9 @@ describe("FileDisplay", () => {
 				isVideoMimeTypeMock.mockReset();
 				isVideoMimeTypeMock.mockReturnValueOnce(true);
 
+				isAudioMimeTypeMock.mockReset();
+				isAudioMimeTypeMock.mockReturnValueOnce(false);
+
 				const wrapper = shallowMount(FileDisplay, {
 					propsData,
 					...createComponentMocks({}),
@@ -189,9 +205,17 @@ describe("FileDisplay", () => {
 				expect(props.src).toBe(url);
 				expect(props.name).toBe(fileNameProp);
 			});
+
+			it("should pass showTitle false to file description", () => {
+				const { wrapper } = setup();
+
+				const props = wrapper.findComponent(FileDescription).attributes();
+
+				expect(props.showtitle).toBeFalsy();
+			});
 		});
 
-		describe("when mimeType is not a video type", () => {
+		describe("when mimeType is a audio type", () => {
 			const setup = () => {
 				document.body.setAttribute("data-app", "true");
 
@@ -201,7 +225,6 @@ describe("FileDisplay", () => {
 						name: "test",
 						size: 100,
 						url: "test",
-						previewUrl: undefined,
 						previewStatus: "test",
 						isDownloadAllowed: true,
 						element,
@@ -212,6 +235,9 @@ describe("FileDisplay", () => {
 				isVideoMimeTypeMock.mockReset();
 				isVideoMimeTypeMock.mockReturnValueOnce(false);
 
+				isAudioMimeTypeMock.mockReset();
+				isAudioMimeTypeMock.mockReturnValueOnce(true);
+
 				const wrapper = shallowMount(FileDisplay, {
 					propsData,
 					...createComponentMocks({}),
@@ -220,16 +246,75 @@ describe("FileDisplay", () => {
 				return {
 					wrapper,
 					fileNameProp: propsData.fileProperties.name,
-					previewUrlProp: propsData.fileProperties.previewUrl,
+					srcProp: propsData.fileProperties.url,
 				};
 			};
 
-			it("should render file description display component", () => {
+			it("should be found in dom", () => {
 				const { wrapper } = setup();
 
-				const fileDescription = wrapper.findComponent(FileDescription);
+				const fileDisplay = wrapper.findComponent(FileDisplay);
 
-				expect(fileDescription.exists()).toBe(true);
+				expect(fileDisplay.exists()).toBe(true);
+			});
+
+			it("should pass correct props to audio display component", () => {
+				const { wrapper, srcProp } = setup();
+				console.log(wrapper.html());
+				const props = wrapper.findComponent(AudioDisplay).attributes();
+
+				expect(props.src).toBe(srcProp);
+			});
+
+			it("should pass showTitle false to file description", () => {
+				const { wrapper } = setup();
+
+				const props = wrapper.findComponent(FileDescription).attributes();
+
+				expect(props.showtitle).toBeFalsy();
+			});
+		});
+
+		describe("when mimeType is not a video or audio type", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+				const propsData = {
+					fileProperties: {
+						name: "test",
+						size: 100,
+						url: "test",
+						previewUrl: undefined,
+						previewStatus: "test",
+						isDownloadAllowed: true,
+						element,
+					},
+					isEditMode: true,
+				};
+
+				isVideoMimeTypeMock.mockReset();
+				isVideoMimeTypeMock.mockReturnValueOnce(false);
+
+				isAudioMimeTypeMock.mockReset();
+				isAudioMimeTypeMock.mockReturnValueOnce(false);
+
+				const wrapper = shallowMount(FileDisplay, {
+					propsData,
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should pass showTitle true to file description", () => {
+				const { wrapper } = setup();
+
+				const props = wrapper.findComponent(FileDescription).attributes();
+
+				expect(props.showtitle).toBeTruthy();
 			});
 
 			it("should not render image display component", () => {
@@ -239,6 +324,22 @@ describe("FileDisplay", () => {
 
 				expect(imageDisplay.exists()).toBe(false);
 			});
+
+			it("should not render audio display component", () => {
+				const { wrapper } = setup();
+
+				const audioDisplay = wrapper.findComponent(AudioDisplay);
+
+				expect(audioDisplay.exists()).toBe(false);
+			});
+
+			it("should not render video display component", () => {
+				const { wrapper } = setup();
+
+				const videoDisplay = wrapper.findComponent(VideoDisplay);
+
+				expect(videoDisplay.exists()).toBe(false);
+			});
 		});
 	});
 });

src/components/feature-board-file-element/content/display/FileDisplay.vue

@@ -18,6 +18,13 @@
 		>
 			<slot />
 		</VideoDisplay>
+		<AudioDisplay
+			v-else-if="hasAudioMimeType"
+			:src="fileProperties.url"
+			@error="onAddAlert"
+		>
+			<slot />
+		</AudioDisplay>
 		<FileDescription
 			:name="fileProperties.name"
 			:caption="fileProperties.element.content.caption"
@@ -30,17 +37,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed } from "vue";
+import { isAudioMimeType, isVideoMimeType } from "@/utils/fileHelper";
+import { computed, defineComponent, PropType } from "vue";
 import { FileProperties } from "../../shared/types/file-properties";
+import { FileAlert } from "../../shared/types/FileAlert.enum";
+import AudioDisplay from "./audio-display/AudioDisplay.vue";
 import FileDescription from "./file-description/FileDescription.vue";
 import ImageDisplay from "./image-display/ImageDisplay.vue";
 import VideoDisplay from "./video-display/VideoDisplay.vue";
-import { isVideoMimeType } from "@/utils/fileHelper";
-import { FileAlert } from "../../shared/types/FileAlert.enum";
 
 export default defineComponent({
 	name: "FileDisplay",
-	components: { ImageDisplay, FileDescription, VideoDisplay },
+	components: { ImageDisplay, FileDescription, VideoDisplay, AudioDisplay },
 	props: {
 		fileProperties: {
 			type: Object as PropType<FileProperties>,
@@ -54,8 +62,16 @@ export default defineComponent({
 			return isVideoMimeType(props.fileProperties.mimeType);
 		});
 
+		const hasAudioMimeType = computed(() => {
+			return isAudioMimeType(props.fileProperties.mimeType);
+		});
+
 		const showTitle = computed(() => {
-			return !props.fileProperties.previewUrl && !hasVideoMimeType.value;
+			return (
+				!props.fileProperties.previewUrl &&
+				!hasVideoMimeType.value &&
+				!hasAudioMimeType.value
+			);
 		});
 
 		const onAddAlert = (alert: FileAlert) => {
@@ -64,6 +80,7 @@ export default defineComponent({
 
 		return {
 			hasVideoMimeType,
+			hasAudioMimeType,
 			showTitle,
 			onAddAlert,
 		};

src/components/feature-board-file-element/content/display/audio-display/AudioDisplay.unit.ts

@@ -0,0 +1,51 @@
+import { mount } from "@vue/test-utils";
+import AudioDisplay from "./AudioDisplay.vue";
+
+describe("AudioDisplay", () => {
+	const setup = () => {
+		document.body.setAttribute("data-app", "true");
+
+		const src = "test-source";
+		const slotContent = "test-slot-content";
+		const propsData = {
+			src,
+		};
+
+		const wrapper = mount(AudioDisplay, {
+			attachTo: document.body,
+			propsData,
+			slots: {
+				default: slotContent,
+			},
+		});
+
+		return {
+			wrapper,
+			src,
+		};
+	};
+
+	it("should render audio element with src", () => {
+		const { wrapper, src } = setup();
+
+		const audio = wrapper.find("audio");
+		expect(audio.attributes("src")).toBe(src);
+	});
+
+	it("should render slot content", () => {
+		const { wrapper } = setup();
+
+		expect(wrapper.text()).toContain("test-slot-content");
+	});
+
+	describe("when audio dispatches error event", () => {
+		it("should emit error event", () => {
+			const { wrapper } = setup();
+
+			const audio = wrapper.find("audio");
+			audio.trigger("error");
+
+			expect(wrapper.emitted("error")).toBeTruthy();
+		});
+	});
+});

src/components/feature-board-file-element/content/display/audio-display/AudioDisplay.vue

@@ -0,0 +1,41 @@
+<template>
+	<ContentElementBar class="my-2">
+		<template #element>
+			<audio
+				controls
+				controlsList="nodownload noplaybackrate"
+				loading="lazy"
+				:src="src"
+				v-on:error="onError"
+				class="audio mr-2"
+			/>
+		</template>
+		<template #menu><slot /></template>
+	</ContentElementBar>
+</template>
+
+<script lang="ts">
+import { ContentElementBar } from "@ui-board";
+import { defineComponent } from "vue";
+import { FileAlert } from "../../../shared/types/FileAlert.enum";
+
+export default defineComponent({
+	name: "AudioDisplay",
+	components: { ContentElementBar },
+	props: {
+		src: { type: String, required: true },
+	},
+	emits: ["error"],
+	setup(props, { emit }) {
+		const onError = () => {
+			emit("error", FileAlert.AUDIO_FORMAT_ERROR);
+		};
+		return { onError };
+	},
+});
+</script>
+<style scoped>
+.audio {
+	width: 100%;
+}
+</style>