Merge branch 'main' into BC-3469-audio-files-playable

hpi-schul-cloud · Oct 18, 2023 · 7024fcd · 7024fcd
2 parents aded938 + c5373a9
commit 7024fcd
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 74 deletions.
diff --git a/src/components/feature-board-file-element/content/alert/FileAlerts.vue b/src/components/feature-board-file-element/content/alert/FileAlerts.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import { useI18n } from "@/composables/i18n.composable";
-import { ErrorAlert, InfoAlert, WarningAlert } from "@ui-alert";
 import { defineComponent, PropType } from "vue";
 import { FileAlert } from "../../shared/types/FileAlert.enum";
+import { InfoAlert, ErrorAlert, WarningAlert } from "@ui-alert";
+import { useI18n } from "@/composables/i18n.composable";
 
 export default defineComponent({
 	name: "FileAlerts",

diff --git a/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts b/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
@@ -42,6 +42,7 @@ describe("FileDisplay", () => {
 					wrapper,
 					fileNameProp: propsData.fileProperties.name,
 					previewUrlProp: propsData.fileProperties.previewUrl,
+					srcProp: propsData.fileProperties.url,
 				};
 			};
 
@@ -53,14 +54,15 @@ describe("FileDisplay", () => {
 				expect(fileDisplay.exists()).toBe(true);
 			});
 
-			it("should pass correct props to image display component", () => {
-				const { wrapper, fileNameProp, previewUrlProp } = setup();
+			it("should pass correct props to image display component", async () => {
+				const { wrapper, fileNameProp, previewUrlProp, srcProp } = setup();
 
 				const props = wrapper.findComponent(ImageDisplay).attributes();
-
 				expect(props.name).toBe(fileNameProp);
-				expect(props.previewurl).toBe(previewUrlProp);
+				expect(props.previewsrc).toBe(previewUrlProp);
+				expect(props.src).toBe(srcProp);
 				expect(props.iseditmode).toBe("true");
+				expect(props.element).toBeDefined();
 			});
 
 			it("should render file description display component", () => {
@@ -102,6 +104,7 @@ describe("FileDisplay", () => {
 					wrapper,
 					fileNameProp: propsData.fileProperties.name,
 					previewUrlProp: propsData.fileProperties.previewUrl,
+					srcProp: propsData.fileProperties.url,
 				};
 			};
 
@@ -114,13 +117,15 @@ describe("FileDisplay", () => {
 			});
 
 			it("should pass correct props to image display component", () => {
-				const { wrapper, fileNameProp, previewUrlProp } = setup();
+				const { wrapper, fileNameProp, previewUrlProp, srcProp } = setup();
 
 				const props = wrapper.findComponent(ImageDisplay).attributes();
 
 				expect(props.name).toBe(fileNameProp);
-				expect(props.previewurl).toBe(previewUrlProp);
+				expect(props.previewsrc).toBe(previewUrlProp);
+				expect(props.src).toBe(srcProp);
 				expect(props.iseditmode).toBe("true");
+				expect(props.element).toBeDefined();
 			});
 
 			it("should render file description display component", () => {
@@ -180,7 +185,6 @@ describe("FileDisplay", () => {
 				const { wrapper, fileNameProp, url } = setup();
 
 				const props = wrapper.findComponent(VideoDisplay).attributes();
-				console.log(wrapper.html());
 
 				expect(props.src).toBe(url);
 				expect(props.name).toBe(fileNameProp);

diff --git a/src/components/feature-board-file-element/content/display/FileDisplay.vue b/src/components/feature-board-file-element/content/display/FileDisplay.vue
@@ -2,8 +2,8 @@
 	<div>
 		<ImageDisplay
 			v-if="fileProperties.previewUrl"
-			:url="fileProperties.url"
-			:preview-url="fileProperties.previewUrl"
+			:src="fileProperties.url"
+			:preview-src="fileProperties.previewUrl"
 			:name="fileProperties.name"
 			:is-edit-mode="isEditMode"
 			:element="fileProperties.element"

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -23,8 +23,8 @@ describe("ImageDisplay", () => {
 			content: { alternativeText: props.alternativeText },
 		});
 		const propsData = {
-			url: "url/1/file-record #1.txt",
-			previewUrl: "preview/1/file-record #1.txt",
+			src: "url/1/file-record #1.txt",
+			previewSrc: "preview/1/file-record #1.txt",
 			name: "file-record #1.txt",
 			isEditMode: props.isEditMode,
 			element,
@@ -49,9 +49,9 @@ describe("ImageDisplay", () => {
 
 		return {
 			wrapper,
-			urlProp: propsData.url,
+			src: propsData.src,
 			nameProp: propsData.name,
-			previewUrlProp: propsData.previewUrl,
+			previewSrc: propsData.previewSrc,
 			element,
 			open,
 		};
@@ -95,11 +95,11 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should have set src correctly", () => {
-			const { wrapper, previewUrlProp } = setup({ isEditMode: false });
+			const { wrapper, previewSrc } = setup({ isEditMode: false });
 
 			const src = wrapper.find(imageSelektor).attributes("src");
 
-			expect(src).toBe(previewUrlProp);
+			expect(src).toBe(previewSrc);
 		});
 
 		it("should have set alt correctly", () => {
@@ -140,13 +140,13 @@ describe("ImageDisplay", () => {
 
 		it("should call open function, when the container is clicked", () => {
 			const alternativeText = "alternative text";
-			const { wrapper, urlProp, nameProp, open } = setup({
+			const { wrapper, src, nameProp, open } = setup({
 				isEditMode: false,
 				alternativeText,
 			});
 			const options: LightBoxOptions = {
-				downloadUrl: urlProp,
-				previewUrl: urlProp,
+				downloadUrl: src,
+				previewUrl: src,
 				alt: alternativeText,
 				name: nameProp,
 			};
@@ -160,13 +160,13 @@ describe("ImageDisplay", () => {
 
 		it("should call open function, when the image is clicked", () => {
 			const alternativeText = "alternative text";
-			const { wrapper, urlProp, nameProp, open } = setup({
+			const { wrapper, src, nameProp, open } = setup({
 				isEditMode: false,
 				alternativeText,
 			});
 			const options: LightBoxOptions = {
-				downloadUrl: urlProp,
-				previewUrl: urlProp,
+				downloadUrl: src,
+				previewUrl: src,
 				alt: alternativeText,
 				name: nameProp,
 			};
@@ -180,13 +180,13 @@ describe("ImageDisplay", () => {
 
 		it("should call open function, when the overlay is clicked", async () => {
 			const alternativeText = "alternative text";
-			const { wrapper, urlProp, nameProp, open } = setup({
+			const { wrapper, src, nameProp, open } = setup({
 				isEditMode: false,
 				alternativeText,
 			});
 			const options: LightBoxOptions = {
-				downloadUrl: urlProp,
-				previewUrl: urlProp,
+				downloadUrl: src,
+				previewUrl: src,
 				alt: alternativeText,
 				name: nameProp,
 			};
@@ -254,13 +254,13 @@ describe("ImageDisplay", () => {
 
 		it("should call open function, when Enter key is pressed", async () => {
 			const alternativeText = "alternative text";
-			const { wrapper, urlProp, nameProp, open } = setup({
+			const { wrapper, src, nameProp, open } = setup({
 				isEditMode: false,
 				alternativeText,
 			});
 			const options: LightBoxOptions = {
-				downloadUrl: urlProp,
-				previewUrl: urlProp,
+				downloadUrl: src,
+				previewUrl: src,
 				alt: alternativeText,
 				name: nameProp,
 			};
@@ -275,13 +275,13 @@ describe("ImageDisplay", () => {
 
 		it("should call open function, when Space key is pressed", async () => {
 			const alternativeText = "alternative text";
-			const { wrapper, urlProp, nameProp, open } = setup({
+			const { wrapper, src, nameProp, open } = setup({
 				isEditMode: false,
 				alternativeText,
 			});
 			const options: LightBoxOptions = {
-				downloadUrl: urlProp,
-				previewUrl: urlProp,
+				downloadUrl: src,
+				previewUrl: src,
 				alt: alternativeText,
 				name: nameProp,
 			};
@@ -332,11 +332,13 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should have set src correctly", () => {
-			const { wrapper, previewUrlProp } = setup({ isEditMode: true });
+			const { wrapper, previewSrc } = setup({
+				isEditMode: true,
+			});
 
 			const src = wrapper.find(imageSelektor).attributes("src");
 
-			expect(src).toBe(previewUrlProp);
+			expect(src).toBe(previewSrc);
 		});
 
 		describe("When alternative text is defined", () => {

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -16,7 +16,7 @@
 		<img
 			class="image-display-image rounded-t-sm"
 			loading="lazy"
-			:src="previewUrl"
+			:src="previewSrc"
 			:alt="alternativeText"
 		/>
 
@@ -37,8 +37,8 @@ import { ContentElementBar } from "@ui-board";
 export default defineComponent({
 	name: "ImageDisplay",
 	props: {
-		url: { type: String, required: true },
-		previewUrl: { type: String, required: true },
+		src: { type: String, required: true },
+		previewSrc: { type: String, required: true },
 		name: { type: String, required: true },
 		isEditMode: { type: Boolean, required: true },
 		element: { type: Object as PropType<FileElementResponse>, required: true },
@@ -107,10 +107,10 @@ export default defineComponent({
 		};
 
 		const openLightBox = () => {
-			const previewUrl = convertDownloadToPreviewUrl(props.url);
+			const previewUrl = convertDownloadToPreviewUrl(props.src);
 
 			const options: LightBoxOptions = {
-				downloadUrl: props.url,
+				downloadUrl: props.src,
 				previewUrl: previewUrl,
 				alt: alternativeText.value,
 				name: props.name,

diff --git a/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.vue b/src/components/feature-board-file-element/content/display/video-display/VideoDisplay.vue
@@ -7,6 +7,7 @@
 			loading="lazy"
 			:src="src"
 			:alt="name"
+			v-on:error="onError"
 		/>
 		<ContentElementBar class="menu">
 			<template #menu><slot></slot></template>
@@ -15,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+import { defineComponent } from "vue";
 import { ContentElementBar } from "@ui-board";
 import { FileAlert } from "../../../shared/types/FileAlert.enum";
 
@@ -28,16 +29,12 @@ export default defineComponent({
 	components: { ContentElementBar },
 	emits: ["error"],
 	setup(props, { emit }) {
-		const videoRef = ref<HTMLVideoElement | null>(null);
-
-		onMounted(() => {
-			videoRef.value?.addEventListener("error", () => {
-				emit("error", FileAlert.VIDEO_FORMAT_ERROR);
-			});
-		});
+		const onError = () => {
+			emit("error", FileAlert.VIDEO_FORMAT_ERROR);
+		};
 
 		return {
-			videoRef,
+			onError,
 		};
 	},
 });

diff --git a/src/components/topbar/StatusAlerts.unit.ts b/src/components/topbar/StatusAlerts.unit.ts
@@ -4,6 +4,8 @@ import setupStores from "@@/tests/test-utils/setupStores";
 import { mockStatusAlerts } from "@@/tests/test-utils/mockStatusAlerts";
 import Vue from "vue";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import dayjs from "dayjs";
+import { formatDateForAlerts } from "@/plugins/datetime";
 
 const testProps = {
 	statusAlerts: mockStatusAlerts,
@@ -59,18 +61,17 @@ describe("@/components/topbar/StatusAlerts", () => {
 	});
 });
 
-describe("getCreatedDate", () => {
-	it("should be getCreatedDate function on the template", () => {
-		const wrapper = getWrapper(testProps);
-		const expectedDate = "05.05.2023 12:34";
-		const alertElement = wrapper.find(".alert-date");
-		expect(alertElement.element.innerHTML).toContain(expectedDate);
+describe("formatDate", () => {
+	const wrapper = getWrapper(testProps);
+	it("returns 'vor ein paar Sekunden' for seconds difference", () => {
+		const fewSecondsAgo = dayjs().subtract(30, "seconds");
+		const expectedOutput = "vor ein paar Sekunden";
+		const result = formatDateForAlerts(fewSecondsAgo);
+		expect(result).toBe(expectedOutput);
 	});
-
-	it("should returns expected result", () => {
-		const wrapper = getWrapper(testProps);
-		const expectedDate = "05.05.2023 12:34";
-		const dateTime = "May 5, 2023 12:34 PM";
-		expect(wrapper.vm.getCreatedDate(dateTime)).toEqual(expectedDate);
+	it("returns European format after 7 days", () => {
+		const pastDate = dayjs.utc().subtract(8, "days").toISOString();
+		const expectedDate = dayjs.utc(pastDate).format("DD.MM.YYYY");
+		expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate);
 	});
 });
diff --git a/src/components/topbar/StatusAlerts.vue b/src/components/topbar/StatusAlerts.vue
@@ -34,10 +34,11 @@
 					class="text-left text-caption d-flex flex-row alert-date text--secondary mt-0 mt-2"
 					:data-testid="`alert-date-${index}`"
 				>
-					{{ $t("common.labels.updateAt") }}
-					{{ getDate(item.timestamp) }} |
-					{{ $t("common.labels.createAt") }}
-					{{ getCreatedDate(item.createdAt) }}
+					<template v-if="item.timestamp !== item.createdAt">
+						{{ $t("common.labels.updateAt") }}
+						{{ formatDate(item.timestamp) }} |
+					</template>
+					{{ $t("common.labels.createAt") }} {{ formatDate(item.createdAt) }}
 				</v-list-item-subtitle>
 			</v-list-item-content>
 		</v-list-item>
@@ -46,7 +47,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { printDateTime, fromNow } from "../../plugins/datetime";
+import { formatDateForAlerts } from "../../plugins/datetime";
 import { mdiAlertCircle, mdiInformation } from "@mdi/js";
 import { StatusAlert } from "@/store/types/status-alert";
 
@@ -65,14 +66,11 @@ export default defineComponent({
 				: { icon: mdiInformation, color: "info" };
 		};
 
-		const getDate = (date: string) => {
-			return fromNow(date, true);
-		};
-		const getCreatedDate = (dateTime: string) => {
-			return printDateTime(dateTime);
+		const formatDate = (dateTime: any) => {
+			return formatDateForAlerts(dateTime, true);
 		};
 
-		return { getIconTag, getDate, getCreatedDate };
+		return { getIconTag, formatDate };
 	},
 });
 </script>