Add unit tests

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.

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",
+    })
+  })
 })

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()
+  })
+})