BC-5595 - Show progress bar

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

@@ -109,7 +109,7 @@ describe("FileContentElement", () => {
 				await wrapper.vm.$nextTick();
 
 				const fileUpload = wrapper.findComponent(FileUpload);
-				expect(fileUpload.exists()).toBe(false);
+				expect(fileUpload.exists()).toBe(true);
 			});
 
 			it("should not render slot menu component", async () => {
@@ -388,6 +388,7 @@ describe("FileContentElement", () => {
 					const props = wrapper.findComponent(FileUpload).props();
 
 					expect(props.elementId).toEqual(element.id);
+					expect(props.isEditMode).toBe(true);
 				});
 
 				describe("when FileUpload emits upload:file event", () => {

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

@@ -27,8 +27,9 @@
 			</BoardMenu>
 		</FileContent>
 		<FileUpload
-			v-else-if="isEditMode"
+			v-else
 			:elementId="element.id"
+			:isEditMode="isEditMode"
 			@upload:file="onUploadFile"
 		>
 			<BoardMenu scope="element">

src/components/feature-board-file-element/content/alert/useFileAlerts.composable.ts

@@ -33,7 +33,6 @@ export const useFileAlerts = (
 function mapPreviewStatusToFileAlert(
 	previewStatus?: PreviewStatus
 ): FileAlert | undefined {
-	console.log(previewStatus);
 	if (previewStatus === PreviewStatus.AWAITING_SCAN_STATUS)
 		return FileAlert.AWAITING_SCAN_STATUS;
 	if (previewStatus === PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED)

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

@@ -260,7 +260,7 @@ describe("FileDisplay", () => {
 
 			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);

src/components/feature-board-file-element/upload/FileUpload.unit.ts

@@ -14,61 +14,123 @@ const useSharedLastCreatedElementMock = jest.mocked(
 useSharedLastCreatedElementMock.mockReturnValue(mockedUse);
 
 describe(FileUpload.name, () => {
-	const setupProps = (fileName: string) => ({
-		fileName,
-		elementId: "element 123",
-		url: "1/file-record #1.txt",
-	});
+	describe("when isEditMode is true", () => {
+		const setup = (fileName = "") => {
+			document.body.setAttribute("data-app", "true");
+
+			const propsData = {
+				fileName,
+				elementId: "element 123",
+				url: "1/file-record #1.txt",
+				isEditMode: true,
+			};
+			const testSlot = "testSlot";
+			const wrapper = shallowMount(FileUpload, {
+				...createComponentMocks({ i18n: true }),
+				propsData,
+				slots: {
+					default: testSlot,
+				},
+			});
+
+			return {
+				wrapper,
+				fileNameProp: propsData.fileName,
+				urlProp: propsData.url,
+				elementId: propsData.elementId,
+				testSlot,
+			};
+		};
 
-	const setup = (fileName = "") => {
-		document.body.setAttribute("data-app", "true");
+		describe("when file is not picked", () => {
+			it("should render FilePicker component", () => {
+				const { wrapper } = setup();
 
-		const propsData = setupProps(fileName);
+				const filePicker = wrapper.findComponent(FilePicker);
+				expect(filePicker.exists()).toBe(true);
+			});
 
-		const wrapper = shallowMount(FileUpload, {
-			...createComponentMocks({ i18n: true }),
-			propsData,
+			it("should render default slot", () => {
+				const { wrapper, testSlot } = setup();
+
+				expect(wrapper.text()).toContain(testSlot);
+			});
 		});
 
-		return {
-			wrapper,
-			fileNameProp: propsData.fileName,
-			urlProp: propsData.url,
-			elementId: propsData.elementId,
-		};
-	};
+		describe("when file gets picked", () => {
+			it("should be emitted as an upload:file event", async () => {
+				const { wrapper } = setup();
 
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
+				const filePicker = wrapper.findComponent(FilePicker);
+				expect(filePicker.exists()).toBe(true);
 
-		const component = wrapper.findComponent(FileUpload);
-		expect(component.exists()).toBe(true);
-	});
+				filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
 
-	describe("when file gets picked", () => {
-		it("should be emitted as an upload:file event", async () => {
-			const { wrapper } = setup();
+				expect(wrapper.emitted("upload:file")).toHaveLength(1);
+			});
 
-			const filePicker = wrapper.findComponent(FilePicker);
-			expect(filePicker.exists()).toBe(true);
+			it("should render v-progress-linear component", async () => {
+				const { wrapper } = setup();
+
+				const filePicker = wrapper.findComponent(FilePicker);
+				expect(filePicker.exists()).toBe(true);
 
-			filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
+				filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
 
-			expect(wrapper.emitted("upload:file")).toHaveLength(1);
+				await nextTick();
+
+				const progressLinear = wrapper.find("v-progress-linear-stub");
+				expect(progressLinear.exists()).toBe(true);
+			});
 		});
+	});
+
+	describe("when isEditMode is false", () => {
+		const setup = (fileName = "") => {
+			document.body.setAttribute("data-app", "true");
+
+			const propsData = {
+				fileName,
+				elementId: "element 123",
+				url: "1/file-record #1.txt",
+				isEditMode: false,
+			};
+			const testSlot = "testSlot";
+			const wrapper = shallowMount(FileUpload, {
+				...createComponentMocks({ i18n: true }),
+				propsData,
+				slots: {
+					default: testSlot,
+				},
+			});
+
+			return {
+				wrapper,
+				fileNameProp: propsData.fileName,
+				urlProp: propsData.url,
+				elementId: propsData.elementId,
+				testSlot,
+			};
+		};
 
-		it("should render v-progress-linear component", async () => {
+		it("should not render FilePicker component", () => {
 			const { wrapper } = setup();
 
 			const filePicker = wrapper.findComponent(FilePicker);
-			expect(filePicker.exists()).toBe(true);
+			expect(filePicker.exists()).toBe(false);
+		});
+
+		it("should not render default slot", () => {
+			const { wrapper, testSlot } = setup();
 
-			filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
+			expect(wrapper.text()).not.toContain(testSlot);
+		});
 
-			await nextTick();
+		it("should not render progress bar", () => {
+			const { wrapper } = setup();
 
 			const progressLinear = wrapper.find("v-progress-linear-stub");
-			expect(progressLinear.exists()).toBe(true);
+			expect(progressLinear.exists()).toBe(false);
 		});
 	});
 });

src/components/feature-board-file-element/upload/FileUpload.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-app-bar flat color="transparent">
+	<v-app-bar v-if="isEditMode" flat color="transparent">
 		<FilePicker
 			v-if="!fileWasPicked"
 			@update:file="onFileSelect"
@@ -24,6 +24,7 @@ export default defineComponent({
 	name: "FileUpload",
 	props: {
 		elementId: { type: String, required: true },
+		isEditMode: { type: Boolean },
 	},
 	components: { FilePicker },
 	emits: ["upload:file"],

src/components/ui-alert/SuccessAlert.unit.ts

@@ -22,7 +22,7 @@ describe("SuccessAlert", () => {
 
 	it("should pass correct color to filealert", () => {
 		const { wrapper } = setup();
-		console.log(wrapper.html());
+
 		const color = wrapper.findComponent(BaseAlert).attributes("color");
 
 		expect(color).toBe("success");