Tests

Signed-off-by: Olga Bulat <obulat@gmail.com>

.eslintignore

@@ -1,5 +1,7 @@
 coverage
 
+frontend/test/unit/test-utils/render-suspended.ts
+
 frontend/test/tapes
 frontend/nuxt-template-overrides
 frontend/storybook-static

frontend/test/unit/specs/components/AudioTrack/v-audio-track.spec.js

@@ -1,7 +1,9 @@
-import { fireEvent, render } from "@testing-library/vue"
+import { fireEvent } from "@testing-library/vue"
 
 import { createApp } from "vue"
 
+import { render } from "~~/test/unit/test-utils/render"
+
 import { i18n } from "~~/test/unit/test-utils/i18n"
 import { getAudioObj } from "~~/test/unit/fixtures/audio"
 
@@ -58,32 +60,32 @@ describe("AudioTrack", () => {
     }
   })
 
-  it("should render the full audio track component even without duration", () => {
+  it("should render the full audio track component even without duration", async () => {
     options.props.layout = "full"
-    const { getByText } = render(VAudioTrack, options)
+    const { getByText } = await render(VAudioTrack, options)
     const creator = getByText(props.audio.creator)
     expect(creator).toBeInstanceOf(HTMLAnchorElement)
   })
 
-  it("should show audio title as main page title in full layout", () => {
+  it("should show audio title as main page title in full layout", async () => {
     options.props.layout = "full"
-    const { getByText } = render(VAudioTrack, options)
+    const { getByText } = await render(VAudioTrack, options)
     // Title text appears multiple times in the track, so need to specify selector
     const element = getByText(props.audio.title, { selector: "H1" })
     expect(element).toBeInTheDocument()
   })
 
-  it("should show audio creator in a full layout with link", () => {
+  it("should show audio creator in a full layout with link", async () => {
     options.props.layout = "full"
-    const { getByText } = render(VAudioTrack, options)
+    const { getByText } = await render(VAudioTrack, options)
     const element = getByText(props.audio.creator)
     expect(element).toBeInstanceOf(HTMLAnchorElement)
     expect(element).toHaveAttribute("href", props.audio.creator_url)
   })
 
-  it("should render the row audio track component even without duration", () => {
+  it("should render the row audio track component even without duration", async () => {
     options.props.layout = "row"
-    const { getByText } = render(VAudioTrack, options)
+    const { getByText } = await render(VAudioTrack, options)
     const creator = getByText("by " + props.audio.creator)
     expect(creator).toBeTruthy()
   })
@@ -115,7 +117,7 @@ describe("AudioTrack", () => {
         .spyOn(window.HTMLMediaElement.prototype, "play")
         .mockImplementation(() => Promise.reject(playError))
 
-      const { getByRole, getByText } = render(VAudioTrack, options)
+      const { getByRole, getByText } = await render(VAudioTrack, options)
 
       await fireEvent.click(getByRole("button"))
       expect(playStub).toHaveBeenCalledTimes(1)
@@ -137,15 +139,15 @@ describe("AudioTrack", () => {
     options.props.audio.isSensitive = true
     options.props.layout = "box"
     options.props.size = "large"
-    const { getByText } = render(VAudioTrack, options)
+    const { getByText } = await render(VAudioTrack, options)
     const h2 = getByText("This audio track may contain sensitive content.")
     expect(h2).toHaveClass("blur-text")
   })
 
   it("has blurred info in row layout when audio is sensitive", async () => {
     options.props.audio.isSensitive = true
     options.props.layout = "row"
-    const { getByText } = render(VAudioTrack, options)
+    const { getByText } = await render(VAudioTrack, options)
 
     const h2 = getByText("This audio track may contain sensitive content.")
     expect(h2).toHaveClass("blur-text")
@@ -157,7 +159,7 @@ describe("AudioTrack", () => {
   it("is does not contain title or creator anywhere when the audio is sensitive", async () => {
     options.props.audio.isSensitive = true
     options.props.layout = "row"
-    const screen = render(VAudioTrack, options)
+    const screen = await render(VAudioTrack, options)
     let { title, creator } = options.props.audio
     let match = RegExp(`(${title}|${creator})`)
     expect(screen.queryAllByText(match)).toEqual([])

frontend/test/unit/specs/components/AudioTrack/v-box-layout.spec.js

@@ -1,8 +1,7 @@
-import { render, screen } from "@testing-library/vue"
+import { screen } from "@testing-library/vue"
 
 import { getAudioObj } from "~~/test/unit/fixtures/audio"
-
-import { i18n } from "~~/test/unit/test-utils/i18n"
+import { render } from "~~/test/unit/test-utils/render"
 
 import VBoxLayout from "~/components/VAudioTrack/layouts/VBoxLayout.vue"
 
@@ -14,15 +13,12 @@ describe("VBoxLayout", () => {
   }
 
   beforeEach(() => {
-    options = {
-      propsData: props,
-      global: { plugins: [i18n] },
-    }
+    options = { props }
   })
 
-  it("renders audio title, license and category in v-box-layout", () => {
+  it("renders audio title, license and category in v-box-layout", async () => {
     props.audio.category = "music"
-    render(VBoxLayout, options)
+    await render(VBoxLayout, options)
     const title = screen.getByText(props.audio.title)
     expect(title).toBeVisible()
     const license = screen.getByLabelText(
@@ -33,9 +29,9 @@ describe("VBoxLayout", () => {
     expect(category).toBeVisible()
   })
 
-  it("should not render category string if category is null", () => {
+  it("should not render category string if category is null", async () => {
     props.audio.category = null
-    render(VBoxLayout, options)
+    await render(VBoxLayout, options)
     const categoryLabel = screen.queryByText("Music")
     expect(categoryLabel).toBeNull()
   })

frontend/test/unit/specs/components/AudioTrack/v-full-layout.spec.js

@@ -1,18 +1,14 @@
-import { render } from "@testing-library/vue"
-
 import { getAudioObj } from "~~/test/unit/fixtures/audio"
-
-import { i18n } from "~~/test/unit/test-utils/i18n"
+import { render } from "~~/test/unit/test-utils/render"
 
 import VFullLayout from "~/components/VAudioTrack/layouts/VFullLayout.vue"
 
 describe("VFullLayout", () => {
-  it("should render the weblink button with the foreign landing url", () => {
+  it("should render the weblink button with the foreign landing url", async () => {
     const audio = getAudioObj()
 
-    const { getByText } = render(VFullLayout, {
-      global: { plugins: [i18n] },
-      propsData: {
+    const { getByText } = await render(VFullLayout, {
+      props: {
         audio,
         size: "s",
         status: "playing",

frontend/test/unit/specs/components/AudioTrack/waveform.spec.js

@@ -1,7 +1,5 @@
 // vitest-environment jsdom
-import { render } from "@testing-library/vue"
-
-import { i18n } from "~~/test/unit/test-utils/i18n"
+import { render } from "~~/test/unit/test-utils/render"
 
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
 
@@ -22,32 +20,27 @@ describe("VWaveform", () => {
       audioId: "test",
     }
 
-    options = {
-      propsData: props,
-      global: {
-        plugins: [i18n],
-      },
-    }
+    options = { props }
   })
 
-  it("should use given peaks when peaks array is provided", () => {
+  it("should use given peaks when peaks array is provided", async () => {
     const peaksCount = 5
     props.peaks = Array.from({ length: peaksCount }, () => 0)
-    const { container } = render(VWaveform, options)
+    const { container } = await render(VWaveform, options)
     // There is also a yellow "played" rectangle
     expect(container.querySelectorAll("rect").length).toBe(peaksCount + 1)
   })
 
-  it("should use random peaks when peaks not set", () => {
+  it("should use random peaks when peaks not set", async () => {
     const peaksCount = 100
-    const { container } = render(VWaveform, options)
+    const { container } = await render(VWaveform, options)
     expect(container.querySelectorAll("rect")).toHaveLength(peaksCount + 1)
   })
 
-  it("should use random peaks when peaks array is blank", () => {
+  it("should use random peaks when peaks array is blank", async () => {
     const peaksCount = 100
     props.peaks = null
-    const { container } = render(VWaveform, options)
+    const { container } = await render(VWaveform, options)
     expect(container.querySelectorAll("rect")).toHaveLength(peaksCount + 1)
   })
 })

frontend/test/unit/specs/components/ImageDetails/v-copy-license.spec.js

@@ -1,6 +1,4 @@
-import { render } from "@testing-library/vue"
-
-import { i18n } from "~~/test/unit/test-utils/i18n"
+import { render } from "~~/test/unit/test-utils/render"
 
 import VCopyLicense from "~/components/VMediaInfo/VCopyLicense.vue"
 
@@ -26,16 +24,11 @@ describe("VCopyLicense", () => {
       },
       fullLicenseName: "LICENSE",
     }
-    options = {
-      propsData: props,
-      global: {
-        plugins: [i18n],
-      },
-    }
+    options = { props }
   })
 
-  it("should contain the correct contents", () => {
-    const { queryAllByText } = render(VCopyLicense, options)
+  it("should contain the correct contents", async () => {
+    const { queryAllByText } = await render(VCopyLicense, options)
     expect(queryAllByText(/Copy text/i)).toHaveLength(3)
   })
 })

frontend/test/unit/specs/components/InputField/input-field.spec.js

@@ -1,7 +1,9 @@
-import { screen, render } from "@testing-library/vue"
+import { screen } from "@testing-library/vue"
 
 import { describe, expect, it } from "vitest"
 
+import { render } from "~~/test/unit/test-utils/render"
+
 import VInputField from "~/components/VInputField/VInputField.vue"
 
 const props = {
@@ -12,7 +14,7 @@ const props = {
 
 describe("VInputField", () => {
   it('should render an `input` element with type="text"', async () => {
-    render(VInputField, {
+    await render(VInputField, {
       attrs: {
         placeholder: "Enter some text",
       },
@@ -25,7 +27,7 @@ describe("VInputField", () => {
   })
 
   it("should allow changing the type", async () => {
-    render(VInputField, {
+    await render(VInputField, {
       attrs: {
         placeholder: "Enter some number",
         type: "number",
@@ -39,7 +41,7 @@ describe("VInputField", () => {
   })
 
   it("should set the ID on the `input` to allow attaching labels", async () => {
-    render(VInputField, {
+    await render(VInputField, {
       attrs: {
         placeholder: "Enter some text",
       },
@@ -52,7 +54,7 @@ describe("VInputField", () => {
   })
 
   it("should render the label text connected to the input field if specified", async () => {
-    render(VInputField, {
+    await render(VInputField, {
       props: props,
     })
 

frontend/test/unit/specs/components/VHeader/SearchBar/search-bar.spec.js

@@ -1,8 +1,8 @@
-import { render, screen } from "@testing-library/vue"
+import { screen } from "@testing-library/vue"
 
 import { beforeEach, describe, expect, it, vi } from "vitest"
 
-import { i18n } from "~~/test/unit/test-utils/i18n"
+import { render } from "~~/test/unit/test-utils/render"
 
 import { useMatchHomeRoute } from "~/composables/use-match-routes"
 
@@ -22,7 +22,6 @@ describe("VSearchBar", () => {
     options = {
       props: { placeholder: defaultPlaceholder, size: "medium" },
       stubs: { ClientOnly: true },
-      global: { plugins: [i18n] },
     }
   })
 
@@ -31,7 +30,7 @@ describe("VSearchBar", () => {
     async (size) => {
       useMatchHomeRoute.mockImplementation(() => false)
       options.props.size = size
-      render(VSearchBar, options)
+      await render(VSearchBar, options)
 
       const inputElement = screen.getByPlaceholderText(defaultPlaceholder)
 
@@ -46,7 +45,7 @@ describe("VSearchBar", () => {
     async (size) => {
       useMatchHomeRoute.mockImplementation(() => false)
       options.props.size = size
-      render(VSearchBar, options)
+      await render(VSearchBar, options)
 
       const btnElement = screen.getByRole("button", { name: /search/i })
 
@@ -60,7 +59,7 @@ describe("VSearchBar", () => {
     it("should default to hero.search.placeholder", async () => {
       delete options.props.placeholder
 
-      render(VSearchBar, options)
+      await render(VSearchBar, options)
       expect(
         screen.queryByPlaceholderText(/Search for content/i)
       ).not.toBeNull()
@@ -69,7 +68,7 @@ describe("VSearchBar", () => {
     it("should use the prop when provided", async () => {
       const placeholder = "This is a different placeholder from the default"
       options.props.placeholder = placeholder
-      render(VSearchBar, options)
+      await render(VSearchBar, options)
       expect(screen.queryByPlaceholderText(placeholder)).not.toBeNull()
     })
   })