@playpilot/tpi 7.1.0 → 8.0.0-beta.explore-home.2

package/src/routes/components/YouTubeEmbed.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getVideoId } from '$lib/trailer'
+
+  interface Props {
+    embeddable_url: string
+    controls?: ('play' | 'mute' | 'fullscreen' | 'progress' | 'current-time')[]
+    muted?: boolean
+  }
+
+  const { embeddable_url = '', controls = [], muted = false }: Props = $props()
+
+  const videoId = $derived(getVideoId(embeddable_url))
+  const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
+</script>
+
+{#if videoId}
+  <iframe
+    width="600"
+    height="338"
+    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&controls={controls.join(',')}&autoplay=true&playsinline=true"
+    title="YouTube video player"
+    frameborder="0"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen>
+  </iframe>
+{:else}
+  Something went wrong
+{/if}
+
+<style lang="scss">
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -1,32 +1,18 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
+  import YouTubeEmbed from './YouTubeEmbed.svelte'
 
   interface Props {
-    embeddable_url?: string,
+    embeddable_url: string,
     onclose: () => void
   }
 
   const { embeddable_url = '', onclose }: Props = $props()
-
-  const videoId = $derived(getVideoId(embeddable_url))
-
-  // Gets the YouTube ID from a url, can be a large number of different formats
-  // https://stackoverflow.com/a/54200105/1665157
-  function getVideoId(url: string): string | null {
-    const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
-    const match = url.match(regExp)
-
-    return match?.[7] || null
-  }
 </script>
 
 <div class="overlay" transition:fade={{ duration: 100 }}>
-  {#if videoId}
-    <iframe width="600" height="338" src="https://www.youtube.com/embed/{videoId}?autoplay=true" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-  {:else}
-    Something went wrong
-  {/if}
+  <YouTubeEmbed {embeddable_url} controls={['current-time', 'fullscreen', 'mute', 'play', 'progress']} />
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -38,17 +24,6 @@
 </div>
 
 <style lang="scss">
-  iframe {
-    z-index: 1;
-    position: relative;
-    display: block;
-    width: 95vmin;
-    height: auto;
-    aspect-ratio: 16/9;
-    box-shadow: 0 0 margin(4) rgba(255, 255, 255, 0.15);
-    background: black;
-  }
-
   .overlay {
     z-index: 2147483647; // As high as she goes
     box-sizing: border-box;
@@ -61,6 +36,17 @@
     bottom: 0;
     left: 0;
     background: theme(detail-backdrop, rgba(0, 0, 0, 0.95));
+
+    :global(iframe) {
+      z-index: 1;
+      position: relative;
+      display: block;
+      width: 95vmin;
+      height: auto;
+      aspect-ratio: 16/9;
+      box-shadow: 0 0 margin(4) rgba(255, 255, 255, 0.15);
+      background: black;
+    }
   }
 
   .backdrop {

package/src/routes/elements/+page.svelte

@@ -3,6 +3,7 @@
   import { title, linkInjections, campaign, participants } from '$lib/fakeData'
   import { openModal } from '$lib/modal'
   import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
+  import { fetchSimilarTitles } from '$lib/api/titles'
   import Disclaimer from '../components/Ads/Disclaimer.svelte'
   import Display from '../components/Ads/Display.svelte'
   import TopScroll from '../components/Ads/TopScroll.svelte'
@@ -17,7 +18,8 @@
   import Title from '../components/Title.svelte'
   import TitlePopover from '../components/TitlePopover.svelte'
   import Tooltip from '../components/Tooltip.svelte'
-  import Explore from '../components/Explore/Explore.svelte'
+  import ExploreRouter from '../components/Explore/ExploreRouter.svelte'
+  import TitlesRail from '../components/Rails/TitlesRail.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -121,6 +123,14 @@
   </div>
 </div>
 
+<h2>Rails</h2>
+
+<button onclick={() => renderKey = Math.random()}>Rerender</button>
+
+{#key renderKey}
+  <TitlesRail titles={fetchSimilarTitles(title)} expandable />
+{/key}
+
 <h2>Ads</h2>
 
 <div class="group">
@@ -174,7 +184,7 @@
     <button onclick={() => renderKey = Math.random()}>Rerender</button>
 
     {#key renderKey}
-      <Explore />
+      <ExploreRouter />
     {/key}
   </div>
 

package/src/routes/explore/+page.svelte

@@ -22,7 +22,7 @@
 
   insertExploreIntoNavigation()
   // Pretend there is some loading time, as there would be on a real page
-  setTimeout(insertExplore, 1500)
+  setTimeout(insertExplore, 100)
 </script>
 
 <main>

package/src/tests/lib/api/youtubeAvailability.test.js

@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
+import { fakeFetch } from '../../helpers'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$env/static/public', () => ({
+  PUBLIC_YOUTUBE_AVAILABILITY_URL: 'https://some-path.com',
+}))
+
+describe('youtubeAvailability', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    fakeFetch()
+
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { region: 'nl' }
+  })
+
+  describe('isYouTubeVideoAvailableInRegion', () => {
+    it('Should return true if no region is set', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+
+    it('Should return false if region is in blocked list', async () => {
+      fakeFetch({ response: { blocked: { NL: true } } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
+    })
+
+    it('Should return true if region is not in blocked list', async () => {
+      fakeFetch({ response: { blocked: { US: true } } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+    })
+
+    it('Should return false if allowed list exists but region is not in it', async () => {
+      fakeFetch({ response: { allowed: ['US', 'GB'] } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
+    })
+
+    it('Should return true if allowed list exists and region is in it', async () => {
+      fakeFetch({ response: { allowed: ['US', 'NL'] } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+    })
+
+    it('Should return true if no restrictions are returned', async () => {
+      fakeFetch({ response: {} })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+    })
+
+    it('Should return false and track event if fetch throws', async () => {
+      fakeFetch({ ok: false, status: 500 })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
+      expect(track).toHaveBeenCalledWith(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: expect.any(String) })
+    })
+  })
+})

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,11 +4,17 @@ 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
@@ -44,4 +50,49 @@ 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, 2000))
+
+    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, 2000))
+
+    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, 2000))
+
+    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, 2000))
+
+    expect(getAllByTestId('title')[1].classList).toContain('expanded')
+  })
 })