@playpilot/tpi 7.3.0 → 8.0.0-beta.explore-home.3

package/src/tests/lib/trailer.test.js

@@ -1,13 +1,18 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { title } from '$lib/fakeData'
 import { mount, unmount } from 'svelte'
-import { closeTrailerOverlay, openTrailerOverlay } from '$lib/trailer'
+import { closeTrailerOverlay, getFirstTitleWithAvailableTrailer, getVideoId, openTrailerOverlay } from '$lib/trailer'
+import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
 
 vi.mock('svelte', () => ({
   mount: vi.fn(),
   unmount: vi.fn(),
 }))
 
+vi.mock('$lib/api/youtubeAvailability', () => ({
+  isYouTubeVideoAvailableInRegion: vi.fn(),
+}))
+
 const titleWithTrailer = { ...title, embeddable_url: 'abc' }
 
 describe('modal.js', () => {
@@ -50,4 +55,55 @@ describe('modal.js', () => {
       expect(unmount).not.toHaveBeenCalled()
     })
   })
+
+  describe('getVideoId', () => {
+    it('Should return video id for various youtube formats', () => {
+      expect(getVideoId('youtube.com/watch?v=a')).toBe('a')
+      expect(getVideoId('youtu.be/b')).toBe('b')
+      expect(getVideoId('youtube.com/embed/c')).toBe('c')
+      expect(getVideoId('not')).toBe(null)
+    })
+  })
+
+  describe('getFirstTitleWithAvailableTrailer', () => {
+    it('Should return null if no titles are given', async () => {
+      expect(await getFirstTitleWithAvailableTrailer([])).toBe(null)
+    })
+
+    it('Should return first title if it has a valid video id and video is available', async () => {
+      vi.mocked(isYouTubeVideoAvailableInRegion).mockResolvedValueOnce(true)
+
+      const titles = [{ ...title, embeddable_url: 'youtu.be/a' }]
+
+      expect(await getFirstTitleWithAvailableTrailer(titles)).toBe(titles[0])
+    })
+
+    it('Should not return first title if it has a valid video id and but video is not available', async () => {
+      vi.mocked(isYouTubeVideoAvailableInRegion).mockResolvedValueOnce(false)
+
+      expect(await getFirstTitleWithAvailableTrailer([{ ...title, embeddable_url: 'youtu.be/a' }])).toBe(null)
+    })
+
+    it('Should not return first title if it has no valid video id', async () => {
+      vi.mocked(isYouTubeVideoAvailableInRegion).mockResolvedValueOnce(false)
+
+      expect(await getFirstTitleWithAvailableTrailer([title])).toBe(null)
+    })
+
+    it('Should return second title if first is not valid', async () => {
+      vi.mocked(isYouTubeVideoAvailableInRegion).mockResolvedValueOnce(false).mockResolvedValueOnce(true)
+
+      const titles = [{ ...title, embeddable_url: 'youtu.be/a' }, { ...title, embeddable_url: 'youtu.be/b' }]
+
+      expect(await getFirstTitleWithAvailableTrailer(titles)).toBe(titles[1])
+    })
+
+    it('Should return second title if first rejects', async () => {
+      vi.mocked(isYouTubeVideoAvailableInRegion).mockRejectedValueOnce(null).mockResolvedValueOnce(true)
+
+      const titles = [{ ...title, embeddable_url: 'youtu.be/a' }, { ...title, embeddable_url: 'youtu.be/b' }]
+
+      expect(await getFirstTitleWithAvailableTrailer(titles)).toBe(titles[1])
+    })
+  })
 })

package/src/tests/routes/components/Explore/ExploreLayout.test.js

@@ -0,0 +1,52 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { expect, describe, it, vi } from 'vitest'
+
+import ExploreLayout from '../../../../routes/components/Explore/ExploreLayout.svelte'
+import { createRawSnippet } from 'svelte'
+import { exploreParentSelector } from '$lib/explore'
+
+const children = createRawSnippet(() => ({ render: () => '<div></div>' }))
+
+const routes = [
+  {
+    key: 'route-1',
+    label: 'Route 1',
+    component: {},
+  }, {
+    key: 'route-2',
+    label: 'Route 2',
+    component: {},
+  },
+]
+
+describe('ExploreLayout.svelte', () => {
+  it('Should render each given route', () => {
+    const { getByText } = render(ExploreLayout, { routes, currentRoute: routes[0], children })
+
+    expect(getByText('Route 1')).toBeTruthy()
+    expect(getByText('Route 2')).toBeTruthy()
+  })
+
+  it('Should call navigate when route is clicked', async () => {
+    const navigate = vi.fn()
+    const { getByText } = render(ExploreLayout, { routes, currentRoute: routes[0], navigate, children })
+
+    await fireEvent.click(getByText('Route 2'))
+
+    expect(navigate).toHaveBeenCalledWith(routes[1])
+  })
+
+  it('Should should set its height if parent has height', async () => {
+    document.body.innerHTML = '<div data-playpilot-explore style="height: 500px"></div>'
+
+    const { container } = render(
+      ExploreLayout,
+      { routes, currentRoute: routes[0], children },
+      { baseElement: /** @type {HTMLElement} */ (document.querySelector(exploreParentSelector)),
+      })
+
+    await waitFor(() => {
+      expect(container.querySelector('.explore')?.getAttribute('style')).toBe('height: 500px;')
+    })
+  })
+})

package/src/tests/routes/components/Explore/ExploreRouter.test.js

@@ -0,0 +1,20 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { expect, describe, it } from 'vitest'
+
+import ExploreRouter from '../../../../routes/components/Explore/ExploreRouter.svelte'
+
+describe('ExploreRouter.svelte', () => {
+  it('Should render home by default', () => {
+    const { getByTestId } = render(ExploreRouter)
+
+    expect(getByTestId('explore-home')).toBeTruthy()
+  })
+
+  it('Should render results on click of button', async () => {
+    const { getByText, getByTestId } = render(ExploreRouter)
+
+    await fireEvent.click(getByText('Explore'))
+
+    expect(getByTestId('explore-results')).toBeTruthy()
+  })
+})

package/src/tests/routes/components/Explore/Routes/ExploreHome.test.js

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/svelte'
+import { beforeEach, describe, it, vi } from 'vitest'
+
+import ExploreHome from '../../../../../routes/components/Explore/Routes/ExploreHome.svelte'
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
+describe('ExploreResults.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should do nothing yet, this is a placeholder', () => {
+    render(ExploreHome)
+  })
+})

package/src/tests/routes/components/Explore/{Explore.test.js → Routes/ExploreResults.test.js}

@@ -1,7 +1,7 @@
 import { render, fireEvent, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import Explore from '../../../../routes/components/Explore/Explore.svelte'
+import ExploreResults from '../../../../../routes/components/Explore/Routes/ExploreResults.svelte'
 import { fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -24,7 +24,7 @@ vi.mock('$lib/api/ads', () => ({
   fetchAds: vi.fn(),
 }))
 
-describe('Explore.svelte', () => {
+describe('ExploreResults.svelte', () => {
   beforeEach(() => {
     // @ts-ignore
     window.PlayPilotLinkInjections = {}
@@ -33,13 +33,13 @@ describe('Explore.svelte', () => {
   })
 
   it('Should call fetchTitles on mount', () => {
-    render(Explore)
+    render(ExploreResults)
 
     expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 1 })
   })
 
   it('Should call tracking event and fetchAds on mount', () => {
-    render(Explore)
+    render(ExploreResults)
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ExplorePageView)
     expect(fetchAds).toHaveBeenCalled()
@@ -52,7 +52,7 @@ describe('Explore.svelte', () => {
       ads: ['a'],
     }
 
-    render(Explore)
+    render(ExploreResults)
 
     expect(fetchAds).not.toHaveBeenCalled()
   })
@@ -60,7 +60,7 @@ describe('Explore.svelte', () => {
   it('Should render all returned titles', async () => {
     vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title, title], next: null, previous: null })
 
-    const { getAllByText } = render(Explore)
+    const { getAllByText } = render(ExploreResults)
 
     await waitFor(() => {
       expect(getAllByText(title.title)).toHaveLength(3)
@@ -70,7 +70,7 @@ describe('Explore.svelte', () => {
   it('Should not render Show more button when no next value is given', async () => {
     vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: null, previous: null })
 
-    const { getByText, queryByText } = render(Explore)
+    const { getByText, queryByText } = render(ExploreResults)
 
     await waitFor(() => getByText(title.title))
 
@@ -80,7 +80,7 @@ describe('Explore.svelte', () => {
   it('Should render Show more button when next value is given', async () => {
     vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText } = render(Explore)
+    const { getByText } = render(ExploreResults)
 
     await waitFor(() => {
       expect(getByText('Show more')).toBeTruthy()
@@ -90,7 +90,7 @@ describe('Explore.svelte', () => {
   it('Should fire fetchTitles again with incremented page number when show more is clicked and render the given titles', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText, getAllByText } = render(Explore)
+    const { getByText, getAllByText } = render(ExploreResults)
 
     await waitFor(() => fireEvent.click(getByText('Show more')))
 
@@ -104,7 +104,7 @@ describe('Explore.svelte', () => {
   it('Should fire tracking event when show more is clicked', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText } = render(Explore)
+    const { getByText } = render(ExploreResults)
 
     await waitFor(() => fireEvent.click(getByText('Show more')))
 
@@ -114,7 +114,7 @@ describe('Explore.svelte', () => {
   it('Should render skeletons while loading', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getAllByTestId, queryByTestId, getByText } = render(Explore)
+    const { getAllByTestId, queryByTestId, getByText } = render(ExploreResults)
 
     expect(getAllByTestId('skeleton')).toHaveLength(24)
 
@@ -126,7 +126,7 @@ describe('Explore.svelte', () => {
   it('Should call fetchTitles with string of comma separated values when filtering with array value', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText } = render(Explore)
+    const { getByText } = render(ExploreResults)
 
     await fireEvent.click(getByText('Genres'))
     await fireEvent.click(getByText('Action'))
@@ -137,16 +137,23 @@ describe('Explore.svelte', () => {
   })
 
   it('Should include search param when query is given', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: 'truthy', previous: null })
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
+
+    const { getAllByTestId } = render(ExploreResults, { searchQuery: 'some query' })
 
-    const { getByRole, getAllByTestId } = render(Explore)
+    await waitFor(() => {
+      expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, search: 'some query' })
+      expect(getAllByTestId('title')).toHaveLength(1)
+    })
+  })
 
+  it('Should include search param when query is empty', async () => {
     vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
 
-    fireEvent.input(getByRole('searchbox'), { target: { value: 'some query' } })
+    const { getAllByTestId } = render(ExploreResults, { searchQuery: '' })
 
     await waitFor(() => {
-      expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, search: 'some query' })
+      expect(fetchTitles).toHaveBeenCalledWith(expect.not.stringContaining('search'))
       expect(getAllByTestId('title')).toHaveLength(1)
     })
   })
@@ -154,7 +161,7 @@ describe('Explore.svelte', () => {
   it('Should call fetchTitles with min and max values when filtering with range value', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { container, getByText } = render(Explore)
+    const { container, getByText } = render(ExploreResults)
 
     await fireEvent.click(getByText('IMDb'))
     // @ts-ignore
@@ -168,7 +175,7 @@ describe('Explore.svelte', () => {
   it('Should call fetchTitles with multiple values when given', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { container, getByText } = render(Explore)
+    const { container, getByText } = render(ExploreResults)
 
     await fireEvent.click(getByText('Genres'))
     await fireEvent.click(getByText('Action'))
@@ -186,7 +193,7 @@ describe('Explore.svelte', () => {
   it('Should call fetchTitles with string for sorting when sorting is used', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText } = render(Explore)
+    const { getByText } = render(ExploreResults)
 
     await fireEvent.click(getByText('Sort by'))
     await fireEvent.click(getByText('New'))
@@ -197,7 +204,7 @@ describe('Explore.svelte', () => {
   it('Should show empty message if no titles are returned for first page', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [], next: null, previous: null })
 
-    const { getByText } = render(Explore)
+    const { getByText } = render(ExploreResults)
 
     await waitFor(() => {
       expect(getByText('No results were found')).toBeTruthy()
@@ -207,7 +214,7 @@ describe('Explore.svelte', () => {
   it('Should not show empty message if no titles are returned for pages past the first page', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText, queryByText } = render(Explore)
+    const { getByText, queryByText } = render(ExploreResults)
 
     await waitFor(() => getByText('Show more'))
 
@@ -223,7 +230,7 @@ describe('Explore.svelte', () => {
   it('Should show error message if api responded with error', async () => {
     vi.mocked(fetchTitles).mockRejectedValueOnce(null)
 
-    const { getByText } = render(Explore)
+    const { getByText } = render(ExploreResults)
 
     await waitFor(() => {
       expect(getByText('Something went wrong')).toBeTruthy()

package/src/tests/routes/components/Rails/TitlesRail.test.js

@@ -4,17 +4,23 @@ import { describe, expect, it, vi } from 'vitest'
 import TitlesRail from '../../../../routes/components/Rails/TitlesRail.svelte'
 import { title } from '$lib/fakeData'
 import { openModal } from '$lib/modal'
+import { getFirstTitleWithAvailableTrailer } from '$lib/trailer'
 
 vi.mock('$lib/modal', () => ({
   openModal: vi.fn(),
 }))
 
+vi.mock('$lib/trailer', () => ({
+  getFirstTitleWithAvailableTrailer: vi.fn(),
+  getVideoId: vi.fn(),
+}))
+
 describe('TitlesRail.svelte', () => {
   it('Should show loading state while promise is resolving', async () => {
     // @ts-ignore
     const { queryAllByTestId } = render(TitlesRail, { titles: new Promise(res => setTimeout(res, 100)) })
 
-    expect(queryAllByTestId('skeleton')).toHaveLength(8)
+    expect(queryAllByTestId('skeleton')).toHaveLength(12)
 
     await waitFor(() => {
       expect(queryAllByTestId('skeleton')).toHaveLength(0)
@@ -33,7 +39,7 @@ describe('TitlesRail.svelte', () => {
 
     await fireEvent.click(getAllByRole('link')[0])
 
-    expect(openModal).toHaveBeenCalledWith({ event: expect.any(Object), data: title, returnToTitle: null })
+    expect(openModal).toHaveBeenCalledWith({ event: expect.any(Object), data: title, returnToTitle: null, props: { useVideoBackground: false } })
   })
 
   it('Should fire given onclick function when title is clicked', async () => {
@@ -44,4 +50,75 @@ describe('TitlesRail.svelte', () => {
 
     expect(onclick).toHaveBeenCalledWith(title)
   })
+
+  it('Should expand first title if expandable is true', async () => {
+    vi.mocked(getFirstTitleWithAvailableTrailer).mockResolvedValueOnce(title)
+
+    const { getByTestId } = render(TitlesRail, { titles: [{ ...title, embeddable_url: 'some-url' }], expandable: true })
+
+    expect(getByTestId('title').classList).not.toContain('expanded')
+
+    await new Promise(res => setTimeout(res, 1000))
+
+    expect(getByTestId('title').classList).toContain('expanded')
+  })
+
+  it('Should not expand first title if expandable is not true', async () => {
+    const { getByTestId } = render(TitlesRail, { titles: [{ ...title, embeddable_url: 'some-url' }] })
+
+    expect(getByTestId('title').classList).not.toContain('expanded')
+
+    await new Promise(res => setTimeout(res, 1000))
+
+    expect(getByTestId('title').classList).not.toContain('expanded')
+  })
+
+  it('Should not expand first title if it has no embeddable_url', async () => {
+    const { getByTestId } = render(TitlesRail, { titles: [title] })
+
+    expect(getByTestId('title').classList).not.toContain('expanded')
+
+    await new Promise(res => setTimeout(res, 1000))
+
+    expect(getByTestId('title').classList).not.toContain('expanded')
+  })
+
+  it('Should expand second title if expandable is true but first title has no trailer', async () => {
+    const titles = [{ ...title }, { ...title, sid: 'some-other-sid', embeddable_url: 'some-url' }]
+    vi.mocked(getFirstTitleWithAvailableTrailer).mockResolvedValueOnce(titles[1])
+
+    const { getAllByTestId } = render(TitlesRail, { titles, expandable: true })
+
+    expect(getAllByTestId('title')[1].classList).not.toContain('expanded')
+
+    await new Promise(res => setTimeout(res, 1000))
+
+    expect(getAllByTestId('title')[1].classList).toContain('expanded')
+  })
+
+  it('Should expand second title and contract first when clicked', async () => {
+    const titles = [{ ...title }, { ...title, sid: 'some-other-sid' }]
+
+    const { getAllByTestId } = render(TitlesRail, { titles, expandable: true })
+
+    await fireEvent.click(getAllByTestId('heading')[1])
+
+    expect(getAllByTestId('title')[1].classList).toContain('expanded')
+    expect(getAllByTestId('title')[0].classList).not.toContain('expanded')
+  })
+
+  it('Should only open title when clicked while expanded', async () => {
+    const titles = [{ ...title }, { ...title, sid: 'some-other-sid' }]
+
+    const onclick = vi.fn()
+    const { getAllByTestId } = render(TitlesRail, { titles, expandable: true, onclick })
+
+    await fireEvent.click(getAllByTestId('heading')[1])
+    expect(onclick).not.toHaveBeenCalled()
+
+    await fireEvent.click(getAllByTestId('heading')[1])
+    expect(onclick).toHaveBeenCalled()
+
+    expect(openModal).toHaveBeenCalledWith(expect.objectContaining({ props: { useVideoBackground: false } }))
+  })
 })

package/src/tests/routes/components/Title.test.js

@@ -5,6 +5,7 @@ import Title from '../../../routes/components/Title.svelte'
 import { title } from '$lib/fakeData'
 import { fetchParticipantsForTitle } from '$lib/api/participants'
 import { fetchSimilarTitles } from '$lib/api/titles'
+import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -19,6 +20,10 @@ vi.mock('$lib/api/titles', () => ({
   fetchSimilarTitles: vi.fn(),
 }))
 
+vi.mock('$lib/api/youtubeAvailability', () => ({
+  isYouTubeVideoAvailableInRegion: vi.fn(),
+}))
+
 vi.mock('svelte', async (importActual) => ({
   ...(await importActual()),
   getContext: vi.fn(),
@@ -128,4 +133,34 @@ describe('Title.svelte', () => {
 
     expect(getByText('Some description')).toBeTruthy()
   })
+
+  it('Should render video background when useVideoBackground is true', async () => {
+    vi.mocked(isYouTubeVideoAvailableInRegion).mockResolvedValueOnce(true)
+
+    const { getByTestId } = render(Title, { title: { ...title, embeddable_url: 'https://youtu.be/abc' }, useVideoBackground: true })
+
+    await new Promise(res => setTimeout(res, 100))
+
+    expect(getByTestId('video-background')).toBeTruthy()
+  })
+
+  it('Should not render video background when useVideoBackground is true but title has no embeddable_url', async () => {
+    vi.mocked(isYouTubeVideoAvailableInRegion).mockResolvedValueOnce(true)
+
+    const { queryByTestId } = render(Title, { title, useVideoBackground: true })
+
+    await new Promise(res => setTimeout(res, 100))
+
+    expect(queryByTestId('video-background')).not.toBeTruthy()
+  })
+
+  it('Should not render video background when useVideoBackground is true but youtube url is not available', async () => {
+    vi.mocked(isYouTubeVideoAvailableInRegion).mockResolvedValueOnce(false)
+
+    const { queryByTestId } = render(Title, { title: { ...title, embeddable_url: 'https://youtu.be/abc' }, useVideoBackground: true })
+
+    await new Promise(res => setTimeout(res, 100))
+
+    expect(queryByTestId('video-background')).not.toBeTruthy()
+  })
 })

package/src/tests/routes/components/YouTubeEmbed.test.js

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import YouTubeEmbed from '../../../routes/components/YouTubeEmbed.svelte'
+
+describe('YouTubeEmbed.svelte', () => {
+  it('Should render embed iframe with given video url and default options', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc' })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&controls=&autoplay=true&playsinline=true')
+  })
+
+  it('Should render embed iframe with given controls', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', controls: ['fullscreen', 'mute'] })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&controls=fullscreen,mute')
+  })
+
+  it('Should render embed iframe with muted if given', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', muted: true })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&muted=true')
+  })
+
+  it('Should render embed iframe with loop if given', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', loop: true })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&loop=true')
+  })
+
+
+  it('Should render error message if embeddable_url is invalid', () => {
+    const { container, getByText } = render(YouTubeEmbed, { embeddable_url: '-' })
+
+    expect(container.querySelector('iframe')).not.toBeTruthy()
+    expect(getByText('Something went wrong')).toBeTruthy()
+  })
+})

package/src/tests/routes/components/YouTubeEmbedBackground.test.js

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import YouTubeEmbedBackground from '../../../routes/components/YouTubeEmbedBackground.svelte'
+
+describe('YouTubeEmbedBackground.svelte', () => {
+  it('Should render embed iframe with given video url', () => {
+    const { container } = render(YouTubeEmbedBackground, { embeddable_url: 'youtube.com/watch?v=abc' })
+
+    // @ts-ignore
+    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=true&loop=false&controls=&autoplay=true&playsinline=true')
+  })
+})

package/src/tests/routes/components/YouTubeEmbedOverlay.test.js

@@ -8,14 +8,7 @@ describe('YouTubeEmbedOverlay.svelte', () => {
     const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
 
     // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&autoplay=true&playsinline=true&controls=play,mute,fullscreen,progress,current-time')
-  })
-
-  it('Should render error message if embeddable_url is invalid', () => {
-    const { container, getByText } = render(YouTubeEmbedOverlay, { embeddable_url: '-', onclose: () => null })
-
-    expect(container.querySelector('iframe')).not.toBeTruthy()
-    expect(getByText('Something went wrong')).toBeTruthy()
+    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&controls=current-time,fullscreen,mute,play,progress&autoplay=true&playsinline=true')
   })
 
   it('Should fire given onclose function on click of close button and backdrop', async () => {

package/vite._main.config.js

@@ -14,7 +14,6 @@ export default defineConfig(() => ({
         entryFileNames: 'link-injections.js',
       },
     },
-    chunkSizeWarningLimit: 10,
   },
 
   resolve: {