@playpilot/tpi 5.6.0 → 5.7.0-beta.display.1

package/src/routes/components/Popover.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { isInSplitTestVariant } from '$lib/splitTest'
   import { onMount, setContext, tick, type Snippet } from 'svelte'
   import { prefersReducedMotion } from 'svelte/motion'
   import { fly } from 'svelte/transition'
 
   interface Props {
     children: Snippet
+    bubble?: Snippet | null
     maxHeight?: number
   }
 
-  let { children, maxHeight = $bindable() }: Props = $props()
+  let { children, bubble, maxHeight = $bindable() }: Props = $props()
 
   setContext('scope', 'popover')
 
+  const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
+
   let element: HTMLElement | null = $state(null)
   let flip = $state(false)
 
@@ -59,15 +64,24 @@
   }
 </script>
 
-<div class="popover" class:flip bind:this={element} style:--max-height={maxHeight ? maxHeight + 'px' : null} tabindex="-1" aria-hidden="true">
+<div class="popover" class:flip class:inline={inlineBubble} class:has-bubble={!!bubble && inlineBubble} bind:this={element} style:--max-height={maxHeight ? maxHeight + 'px' : null} tabindex="-1" aria-hidden="true">
   <div class="dialog" transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }} data-view-transition-old>
     {@render children()}
   </div>
+
+  {#if bubble}
+    <div transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }}>
+      {@render bubble()}
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
   .popover {
     --offset: #{margin(0.5)};
+    display: flex;
+    flex-direction: column-reverse;
+    gap: margin(0.5);
     position: absolute;
     top: calc((var(--offset) - 1px) * -1); /* Add 1 pixel to account for rounding errors */
     left: 0;
@@ -78,9 +92,18 @@
     z-index: 2147483647; // As high as she goes
 
     &.flip {
+      flex-direction: column;
       top: auto;
       bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */
       transform: translateY(calc(100% + var(--offset)));
+
+      &.inline {
+        flex-direction: column-reverse;
+      }
+    }
+
+    &.inline {
+      gap: 0;
     }
   }
 
@@ -96,5 +119,10 @@
     overflow-y: overlay;
     overflow-x: hidden;
     view-transition-name: playpilot-title-content;
+
+    .has-bubble & {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
   }
 </style>

package/src/routes/components/Title.svelte

@@ -183,6 +183,7 @@
     left: 0;
     width: 100%;
     height: margin(12);
+    border-radius: var(--playpilot-detail-background-border-radius);
     overflow: hidden;
     background: var(--playpilot-detail-background, var(--playpilot-lighter));
     z-index: 0;

package/src/routes/components/TitleModal.svelte

@@ -5,6 +5,11 @@
   import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
+  import Display from './Ads/Display.svelte'
+  import { getFirstAdOfType } from '$lib/ads'
+  import { isInSplitTestVariant } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
 
   interface Props {
     onclose: () => void,
@@ -13,6 +18,11 @@
 
   const { onclose, title }: Props = $props()
 
+  const topScrollAd = getFirstAdOfType('top_scroll')
+  const displayAd = getFirstAdOfType('display')
+
+  const isInDisplayAdFormatSplitTest = isInSplitTestVariant(SplitTest.DisplayAdPosition, 1) || isInSplitTestVariant(SplitTest.DisplayAdPosition, 2)
+
   track(TrackingEvent.TitleModalView, title)
 
   let hasTrackedScrolling = false
@@ -31,6 +41,18 @@
   }
 </script>
 
-<Modal {onclose} {onscroll}>
+{#snippet bubble()}
+  {#if topScrollAd}
+    <TopScroll campaign={topScrollAd} />
+  {/if}
+{/snippet}
+
+{#snippet prepend()}
+  {#if displayAd}
+    <Display campaign={displayAd} />
+  {/if}
+{/snippet}
+
+<Modal {onclose} {onscroll} prepend={isInDisplayAdFormatSplitTest ? prepend : null} bubble={topScrollAd ? bubble : null}>
   <Title {title} />
 </Modal>

package/src/routes/components/TitlePopover.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
+  import { getFirstAdOfType } from '$lib/ads'
   import type { TitleData } from '$lib/types/title'
   import { onMount } from 'svelte'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
 
   interface Props {
     event: MouseEvent
@@ -13,6 +15,8 @@
 
   const { event, title }: Props = $props()
 
+  const topScroll = getFirstAdOfType('top_scroll')
+
   let maxHeight = $state(0)
   let element: HTMLElement | null = $state(null)
 
@@ -47,8 +51,14 @@
   }
 </script>
 
+{#snippet bubble()}
+  {#if topScroll}
+    <TopScroll campaign={topScroll} />
+  {/if}
+{/snippet}
+
 <div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
-  <Popover bind:maxHeight>
+  <Popover bind:maxHeight bubble={topScroll ? bubble : null}>
     <Title {title} small compact={!!maxHeight && maxHeight < 250} />
   </Popover>
 </div>

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

@@ -0,0 +1,55 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { fakeFetch } from '../helpers'
+
+import { fetchAds, getFirstAdOfType } from '$lib/ads'
+
+describe('$lib/api', () => {
+  afterEach(() => {
+    vi.resetAllMocks()
+    // @ts-ignore
+    window.PlayPilotLinkInjections = null
+  })
+
+  describe('fetchAds', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a' }
+    })
+
+    it('Should call fetch with given url', async () => {
+      fakeFetch({ response: 'Some response' })
+
+      const response = await fetchAds()
+
+      expect(response).toBe('Some response')
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining('api-token'),
+        expect.objectContaining({}),
+      )
+    })
+
+    it('Should not call fetch if no api token is present', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: '' }
+
+      await expect(async () => await fetchAds()).rejects.toThrowError('No token was provided')
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('getFirstAdOfType', () => {
+    it('Should return the first ad for the given type in the window object', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll' }] }
+
+      expect(getFirstAdOfType('top_scroll')).toEqual({ campaign_format: 'top_scroll' })
+    })
+
+    it('Should not return any ads if no valid ads are given', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'hero' }] }
+
+      expect(getFirstAdOfType('top_scroll')).toBe(null)
+    })
+  })
+})

package/src/tests/routes/+page.test.js

@@ -10,6 +10,7 @@ import { generateInjection } from '../helpers'
 import { injectLinksInDocument } from '$lib/linkInjection'
 import { isCrawler } from '$lib/crawler'
 import { getFullUrlPath } from '$lib/url'
+import { fetchAds } from '$lib/ads'
 
 vi.mock('$lib/api', () => ({
   fetchLinkInjections: vi.fn(() => {}),
@@ -61,6 +62,10 @@ vi.mock('$lib/splitTest', () => ({
   trackSplitTestView: vi.fn(),
 }))
 
+vi.mock('$lib/ads', () => ({
+  fetchAds: vi.fn(),
+}))
+
 describe('$routes/+page.svelte', () => {
   beforeEach(() => {
     document.body.innerHTML = ''
@@ -373,6 +378,34 @@ describe('$routes/+page.svelte', () => {
     })
   })
 
+  it('Should fetch ads if any injections are given', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [{}], manual_injections: [] })
+    render(page)
+    await waitFor(() => expect(fetchAds).toHaveBeenCalled())
+
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [], manual_injections: [{}] })
+    render(page)
+    await waitFor(() => expect(fetchAds).toHaveBeenCalledTimes(2))
+
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [{}], manual_injections: [{}] })
+    render(page)
+    await waitFor(() => expect(fetchAds).toHaveBeenCalledTimes(3))
+  })
+
+  it('Should not fetch ads if any no injections are given', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [], manual_injections: [] })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 100)) // Await possible fetches
+
+    expect(fetchAds).not.toHaveBeenCalled()
+  })
+
   describe('Config', () => {
     describe('exclude_urls_pattern', () => {
       it('Should not inject if config exclude_urls_pattern matches current url', async () => {

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

@@ -0,0 +1,59 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Display from '../../../../routes/components/Ads/Display.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+export const campaign = {
+  campaign_format: 'display',
+  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('Display.svelte', () => {
+  it('Should fire track even on click', async () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign })
+
+    await fireEvent.click(getByRole('link'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
+  })
+})

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

@@ -0,0 +1,104 @@
+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', () => {
+    /** @ts-ignore */
+    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, {
+      /** @ts-ignore */
+      campaign: { ...campaign, disclaimer: null },
+    })
+
+    await waitFor(() => getByText(campaign.cta.header))
+
+    expect(container.querySelector('.tooltip')).not.toBeTruthy()
+  })
+
+  it('Should toggle disclaimer on click', async () => {
+    /** @ts-ignore */
+    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 () => {
+    /** @ts-ignore */
+    const { getByRole } = render(TopScroll, { campaign })
+
+    await fireEvent.click(getByRole('link'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TopScrollClick, null, { campaign_name: campaign.campaign_name })
+  })
+
+  it('Should render as simple variant when content format is large', async () => {
+    const simpleCampaign = { ...campaign, content: { ...campaign.content, format: 'large' } }
+    /** @ts-ignore */
+    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/Playlink.test.js

@@ -0,0 +1,88 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Playlink from '../../../routes/components/Playlink.svelte'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('svelte', async (importActual) => ({
+  ...(await importActual()),
+  getContext: vi.fn(),
+}))
+
+describe('Playlink.svelte', () => {
+  const playlink = { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } }
+
+  it('Should render category as words', () => {
+    // @ts-ignore
+    let { unmount, getByText } = render(Playlink, { playlink })
+    expect(getByText('Stream')).toBeTruthy()
+    unmount()
+
+    // @ts-ignore
+    ;({ unmount, getByText } = render(Playlink, { playlink: { name: 'Some buy playlink', logo_url: 'logo', extra_info: { category: 'BUY' } } }))
+    expect(getByText('Buy')).toBeTruthy()
+    unmount()
+
+    // @ts-ignore
+    ;({ unmount, getByText } = render(Playlink, { playlink: { name: 'Some rent playlink', logo_url: 'logo', extra_info: { category: 'RENT' } } }))
+    expect(getByText('Rent')).toBeTruthy()
+    unmount()
+
+    // @ts-ignore
+    ;({ unmount, getByText } = render(Playlink, { playlink: { name: 'Some rent playlink', logo_url: 'logo', extra_info: { category: 'other' } } }))
+    expect(getByText('Stream')).toBeTruthy()
+    unmount()
+  })
+
+  it('Should render the category when hideCategory is false', () => {
+    // @ts-ignore
+    const { queryByTestId } = render(Playlink, { playlink, hideCategory: false })
+
+    expect(queryByTestId('category')).toBeTruthy()
+  })
+
+  it('Should not render the category when hideCategory is given', () => {
+    // @ts-ignore
+    const { queryByTestId } = render(Playlink, { playlink, hideCategory: true })
+
+    expect(queryByTestId('category')).not.toBeTruthy()
+  })
+
+  it('Should call given onclick function', async () => {
+    const onclick = vi.fn()
+
+    // @ts-ignore
+    const { getByText } = render(Playlink, { playlink, onclick })
+
+    await fireEvent.click(getByText(playlink.name))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+
+  it('Should highlight and show category text for playlinks that have highlighted as true', () => {
+    // @ts-ignore
+    const { getByText } = render(Playlink, { playlink: { name: 'Some highlighted playlink', logo_url: 'logo', highlighted: true, cta_text: 'Some CTA', extra_info: { category: 'BUY' } } })
+
+    expect(getByText('Some highlighted playlink').closest('.playlink')?.classList).toContain('highlighted')
+    expect(getByText('Some CTA')).toBeTruthy()
+  })
+
+  it('Should not highlight or show category text for playlinks that have highlighted as true but have no cta_text', () => {
+    // @ts-ignore
+    const { getByText, queryByText } = render(Playlink, { playlink: { name: 'Some playlink', logo_url: 'logo', highlighted: true, cta_text: '', extra_info: { category: 'BUY' } } })
+
+    expect(getByText('Some playlink').closest('.playlink')?.classList).not.toContain('highlighted')
+    expect(queryByText('Some CTA')).not.toBeTruthy()
+  })
+
+  it('Should not highlight playlinks that do not have highlighted set to true', () => {
+    // @ts-ignore
+    const { getByText, queryByText } = render(Playlink, { playlink })
+
+    expect(getByText('Some playlink').closest('.playlink')?.classList).not.toContain('highlighted')
+    expect(queryByText('Some CTA')).not.toBeTruthy()
+  })
+})

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

@@ -49,21 +49,6 @@ describe('Playlinks.svelte', () => {
     expect(queryByTestId('commission-disclaimer')).not.toBeTruthy()
   })
 
-  it('Should render category as words', () => {
-    const playlinks = [
-      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
-      { name: 'Some buy playlink', logo_url: 'logo', extra_info: { category: 'BUY' } },
-      { name: 'Some rent playlink', logo_url: 'logo', extra_info: { category: 'RENT' } },
-      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'other' } },
-    ]
-    // @ts-ignore
-    const { getByText, getAllByText } = render(Playlinks, { playlinks, title })
-
-    expect(getAllByText('Stream')).toHaveLength(2)
-    expect(getByText('Buy')).toBeTruthy()
-    expect(getByText('Rent')).toBeTruthy()
-  })
-
   it('Should call track function when clicked', async () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
@@ -103,19 +88,4 @@ describe('Playlinks.svelte', () => {
 
     expect(getAllByText('Some playlink')).toHaveLength(1)
   })
-
-  it('Should highlight and show category text for playlinks that have highlighted as true', () => {
-    const playlinks = [
-      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
-      { name: 'Some other playlink', logo_url: 'logo', highlighted: true, cta_text: '', extra_info: { category: 'BUY' } },
-      { name: 'Some highlighted playlink', logo_url: 'logo', highlighted: true, cta_text: 'Some CTA', extra_info: { category: 'BUY' } },
-    ]
-    // @ts-ignore
-    const { getByText } = render(Playlinks, { playlinks, title })
-
-    expect(getByText('Some playlink').closest('.playlink')?.classList).not.toContain('highlighted')
-    expect(getByText('Some other playlink').closest('.playlink')?.classList).not.toContain('highlighted')
-    expect(getByText('Some highlighted playlink').closest('.playlink')?.classList).toContain('highlighted')
-    expect(getByText('Some CTA')).toBeTruthy()
-  })
 })

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

@@ -45,4 +45,40 @@ describe('TitleModal.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalClose, title, { time_spent: 200 })
   })
+
+  it('Should render top scroll ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll', content: {}, cta: {} }] }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.top-scroll')).toBeTruthy()
+  })
+
+  it('Should not render top scroll ad when not given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: null }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.top-scroll')).not.toBeTruthy()
+  })
+
+  it('Should render display ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'display', content: {}, cta: {} }] }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.display')).toBeTruthy()
+  })
+
+  it('Should not render top scroll ad when not given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: null }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.display')).not.toBeTruthy()
+  })
 })

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

@@ -37,4 +37,24 @@ describe('TitlePopover.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverClose, title, { time_spent: 200 })
   })
+
+  it('Should render top scroll ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll', content: {}, cta: {} }] }
+
+    const event = new MouseEvent('mouseenter')
+    const { container } = render(TitlePopover, { event, title })
+
+    expect(container.querySelector('.top-scroll')).toBeTruthy()
+  })
+
+  it('Should not render top scroll ad when not given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: null }
+
+    const event = new MouseEvent('mouseenter')
+    const { container } = render(TitlePopover, { event, title })
+
+    expect(container.querySelector('.top-scroll')).not.toBeTruthy()
+  })
 })