Skip to content

Commit

Permalink
BC-3469 - Display audio elements (#2866)
Browse files Browse the repository at this point in the history
  • Loading branch information
bischofmax authored Oct 20, 2023
1 parent c271931 commit ba70ebc
Showing 15 changed files with 319 additions and 16 deletions.
Original file line number Diff line number Diff line change
@@ -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]);
Original file line number Diff line number Diff line change
@@ -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") }}
Original file line number Diff line number Diff line change
@@ -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);
});
});
});
});
Original file line number Diff line number Diff line change
@@ -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,
};
Original file line number Diff line number Diff line change
@@ -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();
});
});
});
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit ba70ebc

Please sign in to comment.