@playpilot/tpi 6.3.0-beta.5 → 6.3.0

package/src/tests/routes/components/Playlinks/PlaylinkIcon.test.js

@@ -3,6 +3,10 @@ import { describe, expect, it, vi } from 'vitest'
 
 import PlaylinkIcon from '../../../../routes/components/Playlinks/PlaylinkIcon.svelte'
 
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
+
 describe('PlaylinkIcon.svelte', () => {
   const playlink = { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } }
 
@@ -24,4 +28,12 @@ describe('PlaylinkIcon.svelte', () => {
     expect(getByAltText(playlink.name).getAttribute('width')).toBe('20')
     expect(getByAltText(playlink.name).getAttribute('height')).toBe('20')
   })
+
+  it('Should render given tracking pixels', () => {
+    const playlink = { name: 'Some playlink', logo_url: 'logo', pixels: ['https://some-pixel.com/a.jpg'], extra_info: { category: 'SVOD' } }
+    // @ts-ignore
+    const { container } = render(PlaylinkIcon, { playlink })
+
+    expect(container.querySelector('img[src*="https://some-pixel.com/a.jpg"]')).toBeTruthy()
+  })
 })

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

@@ -1,4 +1,4 @@
-import { render  } from '@testing-library/svelte'
+import { render, waitFor  } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
 import TrackingPixels from '../../../routes/components/TrackingPixels.svelte'
@@ -26,4 +26,22 @@ describe('TrackingPixels.svelte', () => {
 
     expect(queryByRole('presentation')).not.toBeTruthy()
   })
+
+  it('Should re-render when updateconsent is fired', async () => {
+    vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+    const pixels = ['https://image.com/a.jpg']
+    const { queryByRole } = render(TrackingPixels, { pixels })
+
+    expect(queryByRole('presentation')).not.toBeTruthy()
+
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
+    window.dispatchEvent(new CustomEvent('updateconsent', {
+      bubbles: true,
+    }))
+
+    await waitFor(() => {
+      expect(queryByRole('presentation')).toBeTruthy()
+    })
+  })
 })

package/src/routes/components/PostersScrollReveal.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte'
-
-  const linksWithPosters = Array.from(document.querySelectorAll<HTMLElement>('[data-playpilot-poster-url]'))
-  const linksWithCurrentlyVisiblePosters = new Set<HTMLElement>()
-  const targetThreshold = 0.6
-  const posterSelector = '[data-playpilot-poster]'
-
-  let scrollTimeout: ReturnType<typeof setTimeout> | null = null
-
-  onMount(() => {
-    return destroyAllPosters
-  })
-
-  function onscroll(): void {
-    setScrollTimeout()
-
-    const windowHeight = window.innerHeight
-    const linksWithinTargetViewport = new Set<HTMLElement>()
-    const targetFromBottom = windowHeight * targetThreshold
-    const targetFromTop = windowHeight - targetFromBottom
-
-    for (const link of linksWithPosters) {
-      const { top } = link.getBoundingClientRect()
-
-      const isInsideTargetViewport = top < targetFromBottom && top > targetFromTop
-
-      if (!isInsideTargetViewport) continue
-
-      linksWithinTargetViewport.add(link)
-    }
-
-    for (const link of linksWithCurrentlyVisiblePosters) {
-      if (linksWithinTargetViewport.has(link)) continue
-
-      destroyPosterForLink(link)
-      linksWithCurrentlyVisiblePosters.delete(link)
-    }
-
-    for (const link of linksWithinTargetViewport) {
-      if (linksWithCurrentlyVisiblePosters.has(link)) continue
-
-      createPosterForLink(link)
-      linksWithCurrentlyVisiblePosters.add(link)
-    }
-  }
-
-  function createPosterForLink(link: HTMLElement): void {
-    const posterUrl = link.dataset.playpilotPosterUrl!
-
-    const element = document.createElement('img')
-    element.classList.add('playpilot-floating-poster')
-    element.dataset.playpilotPoster = ''
-    element.src = posterUrl
-    element.alt = ''
-    element.onload = () => element.classList.add('loaded')
-
-    link.insertAdjacentElement('afterbegin', element)
-  }
-
-  function destroyPosterForLink(link: HTMLElement): void {
-    const poster = link.querySelector(posterSelector)
-
-    if (!poster) return
-
-    poster.classList.add('animating-out')
-
-    setTimeout(() => poster.remove(), 500)
-  }
-
-  function destroyAllPosters(): void {
-    for (const poster of Array.from(document.querySelectorAll(posterSelector))) {
-      poster.remove()
-    }
-  }
-
-  function setScrollTimeout() {
-    if (scrollTimeout) clearTimeout(scrollTimeout)
-
-    scrollTimeout = setTimeout(() => {
-      for (const link of linksWithCurrentlyVisiblePosters) {
-        destroyPosterForLink(link)
-        linksWithCurrentlyVisiblePosters.delete(link)
-      }
-    }, 800)
-  }
-</script>
-
-<svelte:window {onscroll} />

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

@@ -1,107 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import PostersScrollReveal from '../../../routes/components/PostersScrollReveal.svelte'
-
-function createPosterLink(top = 0, url = 'poster.jpg') {
-  const link = document.createElement('a')
-  link.dataset.playpilotPosterUrl = url
-
-  // @ts-ignore
-  link.getBoundingClientRect = () => ({ top })
-
-  document.body.appendChild(link)
-  return link
-}
-
-describe('FloatingPoster', () => {
-  beforeEach(() => {
-    document.body.innerHTML = ''
-
-    Object.defineProperty(window, 'innerHeight', {
-      value: 1000,
-      writable: true,
-    })
-
-    vi.useFakeTimers()
-    vi.resetAllMocks()
-  })
-
-  it('Should create poster when link is in viewport', async () => {
-    createPosterLink(500)
-
-    render(PostersScrollReveal)
-
-    window.dispatchEvent(new Event('scroll'))
-
-    const poster = document.querySelector('[data-playpilot-poster]')
-    expect(poster).toBeTruthy()
-    expect(poster?.getAttribute('src')).toBe('poster.jpg')
-  })
-
-  it('Should not create poster when link is below in viewport', async () => {
-    createPosterLink(2000)
-
-    render(PostersScrollReveal)
-
-    window.dispatchEvent(new Event('scroll'))
-
-    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
-  })
-
-  it('Should not create poster when link is above in viewport', async () => {
-    createPosterLink(-100)
-
-    render(PostersScrollReveal)
-
-    window.dispatchEvent(new Event('scroll'))
-
-    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
-  })
-
-  it('Should not create poster when link is in viewport but before threshold', async () => {
-    createPosterLink(50)
-    createPosterLink(900)
-
-    render(PostersScrollReveal)
-
-    window.dispatchEvent(new Event('scroll'))
-
-    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
-  })
-
-  it('Should create poster for each link in viewport', async () => {
-    createPosterLink(10)
-    createPosterLink(500)
-    createPosterLink(500)
-    createPosterLink(510)
-    createPosterLink(520)
-    createPosterLink(2000)
-
-    render(PostersScrollReveal)
-
-    window.dispatchEvent(new Event('scroll'))
-
-    expect(document.querySelectorAll('[data-playpilot-poster]')).toHaveLength(4)
-  })
-
-  it('Should hide poster after not scrolling for given timeout', async () => {
-    createPosterLink(500)
-
-    render(PostersScrollReveal)
-
-    window.dispatchEvent(new Event('scroll'))
-    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
-
-    vi.advanceTimersByTime(200)
-    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
-
-    vi.advanceTimersByTime(400)
-    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
-
-    vi.advanceTimersByTime(1000)
-    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
-
-    window.dispatchEvent(new Event('scroll'))
-    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
-  })
-})