BC-5414 - Add content element bar (#2843)

hpi-schul-cloud · Oct 10, 2023 · c5e38d3 · c5e38d3
1 parent 81cd33e
commit c5e38d3
Show file tree

Hide file tree

Showing 11 changed files with 405 additions and 80 deletions.
diff --git a/...nents/feature-board-file-element/content/display/file-description/FileDescription.unit.ts b/...nents/feature-board-file-element/content/display/file-description/FileDescription.unit.ts
@@ -1,10 +1,10 @@
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { mdiFileDocumentOutline } from "@mdi/js";
-import { shallowMount } from "@vue/test-utils";
+import { mount, shallowMount } from "@vue/test-utils";
 import FileDescription from "./FileDescription.vue";
 
 describe("FileDescription", () => {
-	const setup = (props: {
+	const shallowMountSetup = (props: {
 		isEditMode: boolean;
 		showTitle: boolean;
 		name?: string;
@@ -14,7 +14,7 @@ describe("FileDescription", () => {
 
 		const propsData = {
 			name: props.name ?? "testName",
-			caption: props.caption ?? "testCaption",
+			caption: props.caption,
 			isEditMode: props.isEditMode,
 			showTitle: props.showTitle,
 		};
@@ -30,56 +30,93 @@ describe("FileDescription", () => {
 		};
 	};
 
+	const mountSetup = (props: {
+		isEditMode: boolean;
+		showTitle: boolean;
+		name?: string;
+		caption?: string;
+	}) => {
+		document.body.setAttribute("data-app", "true");
+
+		const propsData = {
+			name: props.name ?? "testName",
+			caption: props.caption ?? "testCaption",
+			isEditMode: props.isEditMode,
+			showTitle: props.showTitle,
+		};
+		const wrapper = mount(FileDescription, {
+			propsData,
+			...createComponentMocks({}),
+		});
+
+		return {
+			wrapper,
+			name: propsData.name,
+			caption: propsData.caption,
+		};
+	};
+
 	describe("when isEditMode is true", () => {
 		describe("when showTitle is true", () => {
-			it("should render title", () => {
-				const { wrapper, name } = setup({
+			it("should render content element bar", () => {
+				const { wrapper } = shallowMountSetup({
+					isEditMode: true,
+					showTitle: true,
+				});
+
+				const contentElementBar = wrapper.find("contentelementbar-stub");
+
+				expect(contentElementBar.exists()).toBe(true);
+			});
+
+			it("should not render caption", () => {
+				const { wrapper, caption } = mountSetup({
 					isEditMode: true,
 					showTitle: true,
 				});
 
 				const text = wrapper.text();
 
-				expect(text).toContain(name);
+				expect(text).not.toContain(caption);
 			});
 
-			it("should render icon", () => {
-				const { wrapper } = setup({
+			it("should pass false to hasGreyBackground prop", () => {
+				const { wrapper } = shallowMountSetup({
 					isEditMode: true,
 					showTitle: true,
 				});
 
-				const icon = wrapper.find("v-icon-stub").text();
+				const contentElementBar = wrapper.find("contentelementbar-stub");
 
-				expect(icon).toBe(mdiFileDocumentOutline);
+				expect(contentElementBar.props("hasGreyBackground")).toBe(false);
 			});
 
-			it("should not render caption", () => {
-				const { wrapper, caption } = setup({
+			it("should pass mdiFileDocumentOutline to icon prop", () => {
+				const { wrapper } = shallowMountSetup({
 					isEditMode: true,
 					showTitle: true,
 				});
 
-				const text = wrapper.text();
+				const contentElementBar = wrapper.find("contentelementbar-stub");
 
-				expect(text).not.toContain(caption);
+				expect(contentElementBar.props("icon")).toBe(mdiFileDocumentOutline);
 			});
 		});
 
 		describe("when showTitle is false", () => {
-			it("should not render title", () => {
-				const { wrapper, name } = setup({
+			it("should not render content element bar", () => {
+				const { wrapper } = shallowMountSetup({
 					isEditMode: true,
 					showTitle: false,
 				});
 
-				const text = wrapper.text();
+				const contentElementBar = wrapper.find("contentelementbar-stub");
 
-				expect(text).not.toContain(name);
+				expect(contentElementBar.exists()).toBe(false);
 			});
 
 			it("should not render caption", () => {
-				const { wrapper, caption } = setup({
+				const { wrapper, caption } = mountSetup({
 					isEditMode: true,
 					showTitle: false,
 				});
@@ -93,43 +130,43 @@ describe("FileDescription", () => {
 
 	describe("when isEditMode is false", () => {
 		describe("when showTitle is true", () => {
-			it("should render title", () => {
-				const { wrapper, name } = setup({
+			it("should render content element bar", () => {
+				const { wrapper } = shallowMountSetup({
 					isEditMode: false,
 					showTitle: true,
 				});
 
-				const text = wrapper.text();
+				const contentElementBar = wrapper.find("contentelementbar-stub");
 
-				expect(text).toContain(name);
+				expect(contentElementBar.exists()).toBe(true);
 			});
 
-			it("should render icon", () => {
-				const { wrapper } = setup({
+			it("should render caption", () => {
+				const { wrapper, caption } = mountSetup({
 					isEditMode: false,
 					showTitle: true,
 				});
 
-				const icon = wrapper.find("v-icon-stub").text();
+				const text = wrapper.text();
 
-				expect(icon).toBe(mdiFileDocumentOutline);
+				expect(text).toContain(caption);
 			});
 
-			it("should render caption", () => {
-				const { wrapper, caption } = setup({
+			it("should pass true to hasGreyBackground prop", () => {
+				const { wrapper } = shallowMountSetup({
 					isEditMode: false,
 					showTitle: true,
 				});
 
-				const text = wrapper.text();
+				const contentElementBar = wrapper.find("contentelementbar-stub");
 
-				expect(text).toContain(caption);
+				expect(contentElementBar.props("hasGreyBackground")).toBe(true);
 			});
 		});
 
 		describe("when showTitle is false", () => {
 			it("should not render title", () => {
-				const { wrapper, name } = setup({
+				const { wrapper, name } = shallowMountSetup({
 					isEditMode: false,
 					showTitle: false,
 				});
@@ -139,15 +176,32 @@ describe("FileDescription", () => {
 				expect(text).not.toContain(name);
 			});
 
-			it("should render caption", () => {
-				const { wrapper, caption } = setup({
-					isEditMode: false,
-					showTitle: false,
+			describe("when caption is defined", () => {
+				it("should render caption", () => {
+					const caption = "testCaption";
+					const { wrapper } = shallowMountSetup({
+						isEditMode: false,
+						showTitle: false,
+						caption,
+					});
+
+					const text = wrapper.text();
+
+					expect(text).toContain(caption);
 				});
+			});
 
-				const text = wrapper.text();
+			describe("when caption is undefined", () => {
+				it("should not render caption div", () => {
+					const { wrapper } = shallowMountSetup({
+						isEditMode: false,
+						showTitle: false,
+					});
 
-				expect(text).toContain(caption);
+					const captionDiv = wrapper.find(".pa-4.grey.lighten-4");
+
+					expect(captionDiv.exists()).toBeFalsy();
+				});
 			});
 		});
 	});

diff --git a/...omponents/feature-board-file-element/content/display/file-description/FileDescription.vue b/...omponents/feature-board-file-element/content/display/file-description/FileDescription.vue
@@ -1,35 +1,32 @@
 <template>
-	<div class="grey lighten-4">
-		<v-app-bar v-if="showTitle" flat color="transparent">
-			<v-toolbar-title data-testid="file-description-toolbar" inactive>
-				<v-icon
-					color="black"
-					class="mr-2"
-					size="18"
-					data-testid="file-description-icon"
-					>{{ mdiFileDocumentOutline }}</v-icon
-				>
+	<div>
+		<ContentElementBar
+			v-if="showTitle"
+			:hasGreyBackground="!isEditMode"
+			:icon="mdiFileDocumentOutline"
+		>
+			<template #title>
+				<ContentElementTitle>{{ name }}</ContentElementTitle>
+			</template>
 
-				<span
-					class="subtitle-1 font-weight-bold"
-					data-testid="file-description-name"
-					>{{ name }}</span
-				>
-			</v-toolbar-title>
+			<template #menu>
+				<slot></slot>
+			</template>
 
-			<v-spacer></v-spacer>
+			<template #subtitle v-if="caption && !isEditMode">
+				{{ caption }}
+			</template>
+		</ContentElementBar>
 
-			<slot></slot>
-		</v-app-bar>
-
-		<v-card-subtitle v-if="caption && !isEditMode">
+		<div v-else-if="caption && !isEditMode" class="pa-4 grey lighten-4">
 			{{ caption }}
-		</v-card-subtitle>
+		</div>
 	</div>
 </template>
 
 <script lang="ts">
 import { mdiFileDocumentOutline } from "@mdi/js";
+import { ContentElementBar, ContentElementTitle } from "@ui-board";
 import { defineComponent } from "vue";
 
 export default defineComponent({
@@ -45,5 +42,6 @@ export default defineComponent({
 			mdiFileDocumentOutline,
 		};
 	},
+	components: { ContentElementBar, ContentElementTitle },
 });
 </script>