@playpilot/tpi 5.2.1 → 5.4.0-beta.topscroll-1

package/src/routes/components/TitlePopover.svelte

@@ -5,6 +5,7 @@
   import { onMount } from 'svelte'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
 
   interface Props {
     event: MouseEvent
@@ -18,7 +19,12 @@
 
   track(TrackingEvent.TitlePopoverView, title)
 
-  onMount(setOffset)
+  onMount(() => {
+    setOffset()
+
+    const openTimestamp = Date.now()
+    return () => track(TrackingEvent.TitlePopoverClose, title, { time_spent: Date.now() - openTimestamp })
+  })
 
   /**
    * An element can be split up over multiple lines, giving it multiple ClientRects.
@@ -45,6 +51,10 @@
 <div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
   <Popover bind:maxHeight>
     <Title {title} small compact={!!maxHeight && maxHeight < 250} />
+
+    {#snippet bubble()}
+      <TopScroll />
+    {/snippet}
   </Popover>
 </div>
 

package/src/tests/routes/components/Ads/TopScroll.test.js

@@ -0,0 +1,99 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import TopScroll from '../../../../routes/components/Ads/TopScroll.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+export const campaign = {
+  campaign_format: 'top_scroll',
+  campaign_type: 'video',
+  campaign_platforms: ['web', 'android_app', 'ios_app'],
+  campaign_name: 'some_campaign_NL',
+  campaign_start: '2025-04-24T00:00:00Z',
+  campaign_end: '2025-04-30T23:59:00Z',
+  campaign_region: 'nl',
+  content: {
+    header: 'Some top scroll header',
+    header_logo: 'https://example.com/',
+    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    subheader: null,
+    image: 'https://example.com/',
+    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    video: null,
+    format: null,
+  },
+  cta: {
+    header: 'Button Label',
+    subheader: null,
+    image: null,
+    image_uuid: null,
+    url: 'https://google.com/',
+  },
+  content_playlist: null,
+  provider: null,
+  impression_trackers: [],
+  target_title_uuid: null,
+  target_title_sid: null,
+  backfill_providers: [],
+  autogenerated: false,
+  enabled: true,
+  hide_imdb_score: false,
+  hide_sponsored_message: false,
+  disclaimer: 'Some disclaimer',
+}
+
+describe('TopScroll.svelte', () => {
+  it('Should render the given content', () => {
+    const { getByText, container } = render(TopScroll, { campaign })
+
+    expect(getByText(campaign.cta.header)).toBeTruthy()
+    expect(getByText(campaign.content.header)).toBeTruthy()
+    expect(container.querySelector('.tooltip')).toBeTruthy()
+  })
+
+  it('Should not show disclaimer when not given', async () => {
+    const { getByText, container } = render(TopScroll, {
+      campaign: { ...campaign, disclaimer: null },
+    })
+
+    await waitFor(() => getByText(campaign.cta.header))
+
+    expect(container.querySelector('.tooltip')).not.toBeTruthy()
+  })
+
+  it('Should toggle disclaimer on click', async () => {
+    const { getByText, container, queryByText } = render(TopScroll, { campaign })
+
+    await waitFor(() => getByText(campaign.cta.header))
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.tooltip')))
+    expect(getByText(campaign.disclaimer)).toBeTruthy()
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.tooltip')))
+    expect(queryByText(campaign.disclaimer)).not.toBeTruthy()
+  })
+
+  it('Should fire track even on click', async () => {
+    const { getByRole } = render(TopScroll, { campaign })
+
+    await fireEvent.click(getByRole('link'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TopScrollClick)
+  })
+
+  it('Should render as simple variant when content format is large', async () => {
+    const simpleCampaign = { ...campaign, content: { ...campaign.content, format: 'large' } }
+    const { queryByText, container } = render(TopScroll, { campaign: simpleCampaign })
+
+    expect(queryByText(simpleCampaign.content.header)).not.toBeTruthy()
+    expect(queryByText(simpleCampaign.cta.header)).not.toBeTruthy()
+    expect(container.querySelector('.background')).not.toBeTruthy()
+    expect(container.querySelector('.disclaimer')).not.toBeTruthy()
+    expect(container.querySelector('.content-image')).toBeTruthy()
+  })
+})

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

@@ -1,5 +1,5 @@
 import { fireEvent, render  } from '@testing-library/svelte'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
 import TitleModal from '../../../routes/components/TitleModal.svelte'
 import { title } from '$lib/fakeData'
@@ -15,6 +15,10 @@ describe('TitleModal.svelte', () => {
     vi.resetAllMocks()
   })
 
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   const onclose = vi.fn()
 
   it('Should call track function when rendered', () => {
@@ -30,4 +34,15 @@ describe('TitleModal.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalScroll, title)
   })
+
+  it('Should call track function with time_spent when destroyed', async () => {
+    vi.useFakeTimers()
+
+    const { unmount } = render(TitleModal, { onclose, title })
+
+    vi.advanceTimersByTime(200)
+    unmount()
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalClose, title, { time_spent: 200 })
+  })
 })

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

@@ -1,5 +1,5 @@
 import { render  } from '@testing-library/svelte'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
 import TitlePopover from '../../../routes/components/TitlePopover.svelte'
 import { title } from '$lib/fakeData'
@@ -15,10 +15,26 @@ describe('TitlePopover.svelte', () => {
     vi.resetAllMocks()
   })
 
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   it('Should call track function when rendered', () => {
     const event = new MouseEvent('mouseenter')
     render(TitlePopover, { event, title })
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverView, title)
   })
+
+  it('Should call track function with time_spent when destroyed', async () => {
+    vi.useFakeTimers()
+
+    const event = new MouseEvent('mouseenter')
+    const { unmount } = render(TitlePopover, { event, title })
+
+    vi.advanceTimersByTime(200)
+    unmount()
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverClose, title, { time_spent: 200 })
+  })
 })