diff --git a/frontend/src/components/VContentLink/VContentLink.vue b/frontend/src/components/VContentLink/VContentLink.vue index f8b3b1ae657..600bc337eaf 100644 --- a/frontend/src/components/VContentLink/VContentLink.vue +++ b/frontend/src/components/VContentLink/VContentLink.vue @@ -36,11 +36,12 @@ import { defineEvent } from "~/types/emits" import useSearchType from "~/composables/use-search-type" +import VIcon from "~/components/VIcon/VIcon.vue" import VLink from "~/components/VLink.vue" export default defineComponent({ name: "VContentLink", - components: { VLink }, + components: { VIcon, VLink }, props: { /** * One of the media types supported. diff --git a/frontend/test/unit/specs/components/v-content-link.spec.js b/frontend/test/unit/specs/components/v-content-link.spec.js index 47616219bdc..56f6ea8b9a9 100644 --- a/frontend/test/unit/specs/components/v-content-link.spec.js +++ b/frontend/test/unit/specs/components/v-content-link.spec.js @@ -1,19 +1,16 @@ -import { render, screen } from "@testing-library/vue" +import { fireEvent, render, screen } from "@testing-library/vue" import { createLocalVue } from "@vue/test-utils" -import VueI18n from "vue-i18n" - import { createPinia, PiniaVuePlugin } from "~~/test/unit/test-utils/pinia" +import i18n from "~~/test/unit/test-utils/i18n" + +import { useAnalytics } from "~/composables/use-analytics" import VContentLink from "~/components/VContentLink/VContentLink.vue" -const enMessages = require("~/locales/en.json") - -const i18n = new VueI18n({ - locale: "en", - fallbackLocale: "en", - messages: { en: enMessages }, -}) +jest.mock("~/composables/use-analytics", () => ({ + useAnalytics: jest.fn(), +})) describe("VContentLink", () => { let options = {} @@ -56,4 +53,21 @@ describe("VContentLink", () => { expect(btn).toHaveAttribute("aria-disabled") expect(btn.getAttribute("aria-disabled")).toBeTruthy() }) + + it("sends CHANGE_CONTENT_TYPE event when clicked", async () => { + const sendCustomEventMock = jest.fn() + + useAnalytics.mockImplementation(() => ({ + sendCustomEvent: sendCustomEventMock, + })) + render(VContentLink, options) + const btn = screen.getByRole("link") + + await fireEvent.click(btn) + expect(sendCustomEventMock).toHaveBeenCalledWith("CHANGE_CONTENT_TYPE", { + component: "VContentLink", + next: "image", + previous: "all", + }) + }) }) diff --git a/frontend/test/unit/specs/composables/use-search-type.spec.js b/frontend/test/unit/specs/composables/use-search-type.spec.js new file mode 100644 index 00000000000..1ef69cabee1 --- /dev/null +++ b/frontend/test/unit/specs/composables/use-search-type.spec.js @@ -0,0 +1,87 @@ +import { createPinia, setActivePinia } from "~~/test/unit/test-utils/pinia" + +import useSearchType from "~/composables/use-search-type" +import { useAnalytics } from "~/composables/use-analytics" + +jest.mock("~/composables/use-analytics") + +import { ALL_MEDIA, AUDIO, IMAGE } from "~/constants/media" + +jest.mock("~/composables/use-i18n", () => ({ + useI18n: jest.fn(() => ({ + t: (key) => key, + })), +})) + +describe("useSearchType", () => { + const sendCustomEventMock = jest.fn() + beforeEach(() => { + sendCustomEventMock.mockClear() + + setActivePinia(createPinia()) + useAnalytics.mockImplementation(() => ({ + sendCustomEvent: sendCustomEventMock, + })) + }) + + it("should have correct initial values", () => { + const { + activeType, + types: searchTypes, + icons, + labels, + additionalTypes, + } = useSearchType() + expect(activeType.value).toEqual(ALL_MEDIA) + expect(searchTypes).toEqual([ALL_MEDIA, IMAGE, AUDIO]) + expect(icons).toEqual({ + all: "all", + audio: "audio", + image: "image", + "model-3d": "model-3d", + video: "video", + }) + expect(labels).toEqual({ + all: "search-type.all", + audio: "search-type.audio", + image: "search-type.image", + "model-3d": "search-type.model-3d", + video: "search-type.video", + }) + expect(additionalTypes.value).toEqual([]) + }) + + it("should return correct props for active search type when type is not passed", () => { + const { getSearchTypeProps } = useSearchType() + + const { icon, label } = getSearchTypeProps() + expect(icon).toEqual(ALL_MEDIA) + expect(label).toEqual("search-type.all") + }) + + it("should return correct props when type is passed", () => { + const { getSearchTypeProps } = useSearchType() + + const { icon, label } = getSearchTypeProps(AUDIO) + expect(icon).toEqual(AUDIO) + expect(label).toEqual("search-type.audio") + }) + + it("should send the analytics event when setActiveType is called", () => { + const { setActiveType } = useSearchType() + + setActiveType(AUDIO) + expect(sendCustomEventMock).toHaveBeenCalledWith("CHANGE_CONTENT_TYPE", { + component: "Unknown", + next: AUDIO, + previous: ALL_MEDIA, + }) + }) + + it("should not send the analytics event when setActiveType is called with current type", () => { + const { setActiveType } = useSearchType() + + setActiveType(ALL_MEDIA) + expect(sendCustomEventMock).not.toHaveBeenCalled() + }) +})