Skip to content

Commit

Permalink
Merge branch 'main' into BC-3844-vue3-webpack
Browse files Browse the repository at this point in the history
  • Loading branch information
@bischofmax
bischofmax committed Jan 17, 2024
2 parents 10d0f21 + 0588193 commit 5a703f1
Show file tree
Hide file tree
Showing 14 changed files with 668 additions and 334 deletions.
102 changes: 73 additions & 29 deletions src/components/feature-board-file-element/FileContentElement.unit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import createComponentMocks from "@@/tests/test-utils/componentMocks";
import { fileElementResponseFactory } from "@@/tests/test-utils/factory/fileElementResponseFactory";
import { fileRecordResponseFactory } from "@@/tests/test-utils/factory/filerecordResponse.factory";
import { MountOptions, shallowMount } from "@vue/test-utils";
import Vue, { computed } from "vue";
import Vue, { computed, ref } from "vue";
import { useFileAlerts } from "./content/alert/useFileAlerts.composable";
import FileContent from "./content/FileContent.vue";
import FileContentElement from "./FileContentElement.vue";
Expand Down Expand Up @@ -60,7 +60,7 @@ describe("FileContentElement", () => {
return { wrapper, menu, addAlertMock };
};

describe("when component is not in edit mode", () => {
describe("when component is in view mode", () => {
describe("when file record is not available", () => {
const setup = () => {
const element = fileElementResponseFactory.build();
Expand Down Expand Up @@ -125,6 +125,7 @@ describe("FileContentElement", () => {
const setup = (props?: {
scanStatus?: FileRecordScanStatus;
previewStatus?: PreviewStatus;
isUploading?: boolean;
}) => {
const element = fileElementResponseFactory.build();
document.body.setAttribute("data-app", "true");
Expand All @@ -133,12 +134,14 @@ describe("FileContentElement", () => {
securityCheckStatus:
props?.scanStatus ?? FileRecordScanStatus.PENDING,
previewStatus: props?.previewStatus ?? PreviewStatus.PREVIEW_POSSIBLE,
isUploading: props?.isUploading,
});
const fetchFileMock = jest.fn().mockImplementationOnce(() => {
fileRecord.value = fileRecordResponse;

const getFileRecordMock = jest.fn().mockImplementationOnce(() => {
return ref(fileRecordResponse);
});
const { fetchFile, fileRecord } = setupFileStorageApiMock({
fetchFileMock,
const { fetchFile } = setupFileStorageApiMock({
getFileRecordMock,
});

const expectedFileProperties: FileProperties = {
Expand Down Expand Up @@ -171,12 +174,28 @@ describe("FileContentElement", () => {
};
};

it("should pass isOutlined prop to v-card", () => {
const { wrapper } = setup();
describe("when file is uploaded", () => {
it("should pass isOutlined prop to v-card", async () => {
const { wrapper } = setup();

const card = wrapper.findComponent({ ref: "fileContentElement" });
await wrapper.vm.$nextTick();

expect(card.props("outlined")).toBe(false);
const card = wrapper.findComponent({ ref: "fileContentElement" });

expect(card.props("outlined")).toBe(true);
});
});

describe("when file is uploading", () => {
it("should pass isOutlined prop to v-card", async () => {
const { wrapper } = setup({ isUploading: true });

await wrapper.vm.$nextTick();

const card = wrapper.findComponent({ ref: "fileContentElement" });

expect(card.props("outlined")).toBe(false);
});
});

describe("when file content emits add:alert event", () => {
Expand Down Expand Up @@ -455,6 +474,7 @@ describe("FileContentElement", () => {
const setup = (props?: {
scanStatus?: FileRecordScanStatus;
previewStatus?: PreviewStatus;
isUploading?: boolean;
}) => {
const element = fileElementResponseFactory.build();
document.body.setAttribute("data-app", "true");
Expand All @@ -463,12 +483,13 @@ describe("FileContentElement", () => {
securityCheckStatus:
props?.scanStatus ?? FileRecordScanStatus.PENDING,
previewStatus: props?.previewStatus ?? PreviewStatus.PREVIEW_POSSIBLE,
isUploading: props?.isUploading,
});
const fetchFileMock = jest.fn().mockImplementationOnce(() => {
fileRecord.value = fileRecordResponse;
const getFileRecordMock = jest.fn().mockImplementation(() => {
return ref(fileRecordResponse);
});
const { fetchFile, fileRecord } = setupFileStorageApiMock({
fetchFileMock,
const { fetchFile } = setupFileStorageApiMock({
getFileRecordMock,
});

const expectedFileProperties: FileProperties = {
Expand Down Expand Up @@ -553,27 +574,18 @@ describe("FileContentElement", () => {
const { wrapper } = setup();

const fileContentElement = wrapper.findComponent(FileContentElement);

expect(fileContentElement.exists()).toBe(true);
});

it("should call fetchFile", async () => {
const { wrapper, fetchFile } = setup();

await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();

expect(fetchFile).toHaveBeenCalledTimes(1);
});

it("should render FileContent component", async () => {
const { wrapper } = setup();
await wrapper.vm.$nextTick();

const fileContent = wrapper.findComponent(FileContent);

expect(fileContent.exists()).toBe(true);
});

it("should pass correct fileProperties to FileContent", async () => {
const { wrapper, expectedFileProperties } = setup();
await wrapper.vm.$nextTick();
Expand All @@ -600,12 +612,44 @@ describe("FileContentElement", () => {
expect(fetchFile).toHaveBeenCalledTimes(2);
});

it("should not render File Upload component", async () => {
const { wrapper } = setup();
await wrapper.vm.$nextTick();
describe("when file is uploaded", () => {
it("should render FileContent component", async () => {
const { wrapper } = setup();

const fileUpload = wrapper.findComponent(FileUpload);
expect(fileUpload.exists()).toBe(false);
await wrapper.vm.$nextTick();

const fileContent = wrapper.findComponent(FileContent);

expect(fileContent.exists()).toBe(true);
});

it("should not render File Upload component", async () => {
const { wrapper } = setup();
await wrapper.vm.$nextTick();

const fileUpload = wrapper.findComponent(FileUpload);
expect(fileUpload.exists()).toBe(false);
});
});

describe("when file is uploading", () => {
it("should render File Upload component", async () => {
const { wrapper } = setup({ isUploading: true });
await wrapper.vm.$nextTick();

const fileUpload = wrapper.findComponent(FileUpload);
expect(fileUpload.exists()).toBe(true);
});

it("should not render FileContent component", async () => {
const { wrapper } = setup({ isUploading: true });

await wrapper.vm.$nextTick();

const fileContent = wrapper.findComponent(FileContent);

expect(fileContent.exists()).toBe(false);
});
});
});

Expand Down
30 changes: 20 additions & 10 deletions src/components/feature-board-file-element/FileContentElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
@keydown.up.down="onKeydownArrow"
>
<FileContent
v-if="fileProperties"
v-if="fileProperties && isUploading !== true"
:file-properties="fileProperties"
:alerts="alerts"
:is-edit-mode="isEditMode"
Expand All @@ -31,6 +31,7 @@
:elementId="element.id"
:isEditMode="isEditMode"
@upload:file="onUploadFile"
:isUploading="isUploading"
>
<BoardMenu scope="element">
<BoardMenuActionMoveUp @click="onMoveUp" />
Expand Down Expand Up @@ -97,19 +98,22 @@ export default defineComponent({
useBoardFocusHandler(element.value.id, fileContentElement);
const { modelValue } = useContentElementState(props);
const { fetchFile, upload, fileRecord } = useFileStorageApi(
element.value.id,
FileRecordParentType.BOARDNODES
);
const { fetchFile, upload, getFileRecord } = useFileStorageApi();
const fileRecord = getFileRecord(element.value.id);
const { alerts, addAlert } = useFileAlerts(fileRecord);
const isUploading = computed(() => {
return fileRecord.value?.isUploading;
});
const fileProperties = computed(() => {
if (fileRecord.value === undefined) {
return;
}
const previewUrl = isPreviewPossible(fileRecord.value?.previewStatus)
const previewUrl = isPreviewPossible(fileRecord.value.previewStatus)
? convertDownloadToPreviewUrl(fileRecord.value.url, PreviewWidth._500)
: undefined;
Expand All @@ -132,12 +136,17 @@ export default defineComponent({
});
const isOutlined = computed(() => {
return fileRecord.value !== undefined || props.isEditMode === true;
const { isEditMode } = props;
const isUploadingInViewMode =
fileRecord.value?.id !== undefined && !isEditMode && !isUploading.value;
return isUploadingInViewMode || isEditMode;
});
onMounted(() => {
(async () => {
await fetchFile();
await fetchFile(element.value.id, FileRecordParentType.BOARDNODES);
isLoadingFileRecord.value = false;
})();
});
Expand All @@ -151,14 +160,14 @@ export default defineComponent({
const onUploadFile = async (file: File): Promise<void> => {
try {
await upload(file);
await upload(file, element.value.id, FileRecordParentType.BOARDNODES);
} catch (error) {
emit("delete:element", element.value.id);
}
};
const onFetchFile = async (): Promise<void> => {
await fetchFile();
await fetchFile(element.value.id, FileRecordParentType.BOARDNODES);
};
const onUpdateAlternativeText = (value: string) => {
Expand Down Expand Up @@ -191,6 +200,7 @@ export default defineComponent({
isOutlined,
modelValue,
alerts,
isUploading,
onKeydownArrow,
onUploadFile,
onFetchFile,
Expand Down
Loading

0 comments on commit 5a703f1

Please sign in to comment.