@playpilot/tpi 8.10.2 → 8.11.0-beta.1

package/src/routes/components/Rails/TitlesRail.svelte

@@ -16,7 +16,7 @@
     titles: Promise<TitleData[]> | TitleData[]
     minimumLength?: number,
     heading?: string,
-    size?: 'small' | 'large' | 'flexible'
+    size?: 'small' | 'large' | 'huge' | 'flexible'
     aside?: boolean,
     expandable?: boolean,
     expandedTitle?: TitleData | null,
@@ -64,7 +64,9 @@
       recentlyExpanded = true
       setTimeout(() => recentlyExpanded = false, 500)
 
-      if (elementOffsetInParent < activeElement.clientWidth * 2) slider?.setIndex(index - 2)
+      if (size === 'flexible' && elementOffsetInParent < activeElement.clientWidth * 2) {
+        slider?.setIndex(index - 2)
+      }
 
       expandTitleIntoTrailer(title)
 
@@ -206,7 +208,7 @@
   .titles {
     --width: #{theme(rail-size-default, margin(6))};
     --image-height: #{calc(var(--width) * 3 / 2)};
-    --expanded-width: #{calc(var(--image-height) / 9 * 16)};
+    --expanded-width: var(--width);
     --border-radius: #{theme(rail-border-radius, border-radius)};
 
     &.with-aside {
@@ -217,8 +219,13 @@
       --width: #{theme(rail-size-large, margin(7.5))};
     }
 
+    &.huge {
+      --width: #{theme(rail-size-large, min(explore-width(65), margin(15)))};
+    }
+
     &.flexible {
-      --width: #{theme(rail-size-flexible, clamp(margin(6), explore-width(18), margin(11.5)))};
+      --width: #{theme(rail-size-flexible, clamp(margin(8), explore-width(20), margin(11.5)))};
+      --expanded-width: #{calc(var(--image-height) / 9 * 16)};
     }
   }
 
@@ -286,6 +293,14 @@
     :global(iframe) {
       opacity: 0;
       animation: fade-iframe 500ms 500ms forwards;
+
+      @include mobile {
+        position: absolute;
+        width: 225%;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
     }
 
     :global(+ .poster) {

package/src/routes/components/Title.svelte

@@ -55,7 +55,7 @@
       <TitlePoster {title} onload={() => posterLoaded = true} lazy={false} />
     </div>
 
-    <div class="heading" use:heading={2} class:truncate={small} id="heading">{title.title}</div>
+    <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
     <div class="info">
       <div class="imdb">
@@ -154,7 +154,7 @@
   }
 
   .header {
-    padding: margin(10) 0 margin(1);
+    padding: min(margin(17), 70vw) 0 margin(1);
 
     @media (min-width: 390px) {
       display: grid;

package/src/routes/components/{InjectionPopover.svelte → TitlePopover.svelte}

@@ -3,48 +3,35 @@
   import { track } from '$lib/tracking'
   import { getFirstAdOfType } from '$lib/api/ads'
   import type { TitleData } from '$lib/types/title'
-  import type { ParticipantData } from '$lib/types/participant'
-  import type { LinkInjectionDataType } from '$lib/types/injection'
-  import { onMount, setContext } from 'svelte'
+  import { onMount } from 'svelte'
   import { isPixelAllowed } from '$lib/pixel'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
-  import Participant from './Participant.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
 
   interface Props {
     event: MouseEvent
-    data: TitleData | ParticipantData
-    type?: LinkInjectionDataType
+    title: TitleData
   }
 
-  const { event, data, type = 'title' }: Props = $props()
-
-  setContext('type', type)
+  const { event, title }: Props = $props()
 
   const topScroll = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
 
   let element: HTMLElement | null = $state(null)
 
-  if (type === 'title') track(TrackingEvent.InjectionPopoverView, data as TitleData, { type })
-  if (type === 'participant') track(TrackingEvent.InjectionPopoverView, null, { type, participant: (data as ParticipantData).name })
+  track(TrackingEvent.TitlePopoverView, title)
 
-  if (isPixelAllowed() && type === 'title') trackViaPixel(MetaEvent.TitleInterest, { title: (data as TitleData).title, source: MetaSource.Card })
+  if (isPixelAllowed()) trackViaPixel(MetaEvent.TitleInterest, { title: title.title, source: MetaSource.Card })
 
   onMount(() => {
     setOffset()
 
     const openTimestamp = Date.now()
-
-    return () => {
-      const endTimestamp = Date.now() - openTimestamp
-
-      if (type === 'title') track(TrackingEvent.InjectionPopoverClose, data as TitleData, { type, time_spent: endTimestamp })
-      if (type === 'participant') track(TrackingEvent.InjectionPopoverClose, null, { type, participant: (data as ParticipantData).name, time_spent: endTimestamp })
-    }
+    return () => track(TrackingEvent.TitlePopoverClose, title, { time_spent: Date.now() - openTimestamp })
   })
 
   /**
@@ -81,18 +68,14 @@
   {/if}
 {/snippet}
 
-<div class="injection-popover" bind:this={element} data-playpilot-injection-popover role="region" aria-labelledby="heading">
+<div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
   <Popover append={displayAd ? append : null} bubble={topScroll ? bubble : null}>
-    {#if type === 'title'}
-      <Title title={data as TitleData} small />
-    {:else if type === 'participant'}
-      <Participant participant={data as ParticipantData} small />
-    {/if}
+    <Title {title} small  />
   </Popover>
 </div>
 
 <style lang="scss">
-  .injection-popover {
+  .title-popover {
     position: absolute;
   }
 </style>

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

@@ -16,7 +16,7 @@
   import RoundButton from '../components/RoundButton.svelte'
   import SkeletonText from '../components/SkeletonText.svelte'
   import Title from '../components/Title.svelte'
-  import InjectionPopover from '../components/InjectionPopover.svelte'
+  import TitlePopover from '../components/TitlePopover.svelte'
   import Tooltip from '../components/Tooltip.svelte'
   import ExploreRouter from '../components/Explore/ExploreRouter.svelte'
   import TitlesRail from '../components/Rails/TitlesRail.svelte'
@@ -69,10 +69,10 @@
   </div>
 
   <div>
-    <h3>InjectionPopover.svelte</h3>
+    <h3>TitlePopover.svelte</h3>
     <div class="item">
       <div style:height="500px"></div>
-      <InjectionPopover data={title} event={{} as MouseEvent} />
+      <TitlePopover {title} event={{} as MouseEvent} />
     </div>
   </div>
 </div>

package/src/tests/helpers.js

@@ -44,6 +44,5 @@ export function generateInjection(sentence, title) {
     playpilot_url: 'https://some-link.com/',
     key: 'some-key-' + Math.random().toString(),
     title_details,
-    type: 'title',
   }
 }

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

@@ -1,12 +1,11 @@
 import { fireEvent } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
-import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks, hasValidTypeData } from '$lib/injection'
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks } from '$lib/injection'
 import { mount, unmount } from 'svelte'
 import { fakeFetch, generateInjection } from '../helpers'
 import { openModalForInjectedLink } from '$lib/modal'
 import { getLinkInjectionElements } from '$lib/injectionElements'
-import { participants } from '$lib/fakeData'
 
 vi.mock('svelte', () => ({
   mount: vi.fn(),
@@ -569,7 +568,7 @@ describe('injection.ts', () => {
     })
 
     it('Should remove all popovers that may not have been removed properly in previous destroy attempts', async () => {
-      document.body.innerHTML = '<div data-playpilot-injection-popover></div> <p>This is a sentence with an injection.</p>'
+      document.body.innerHTML = '<div data-playpilot-title-popover></div> <p>This is a sentence with an injection.</p>'
 
       const elements = Array.from(document.body.querySelectorAll('p'))
       const injection = generateInjection('This is a sentence with an injection.', 'an injection')
@@ -584,7 +583,7 @@ describe('injection.ts', () => {
       await fireEvent.mouseMove(document.body)
       vi.advanceTimersByTime(200)
 
-      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
     })
 
     it('Should inject links of the same phrase when multiple are present', () => {
@@ -947,20 +946,6 @@ describe('injection.ts', () => {
 
       expect(document.querySelector('a')?.closest('[data-playpilot-injection-key]')).toBeTruthy()
     })
-
-    describe('Participants', () => {
-      it('Should inject participants just as a title', () => {
-        document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
-
-        const elements = Array.from(document.body.querySelectorAll('p'))
-        const injection = { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: participants[0] }
-
-        // @ts-ignore
-        injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
-
-        expect(document.querySelector('[data-playpilot-injection-key]')).toBeTruthy()
-      })
-    })
   })
 
   describe('clearLinkInjections', () => {
@@ -1142,32 +1127,6 @@ describe('injection.ts', () => {
     })
   })
 
-  describe('hasValidTypeData', () => {
-    it('Should return true if injection has type title and has title_details', () => {
-      // @ts-ignore
-      expect(hasValidTypeData({ type: 'title', title_details: {} })).toBe(true)
-    })
-
-    it('Should return true if injection has type participant and has participant_details', () => {
-      // @ts-ignore
-      expect(hasValidTypeData({ type: 'participant', participant_details: {} })).toBe(true)
-    })
-
-    it('Should return false if injection has type title but has no title_details', () => {
-      // @ts-ignore
-      expect(hasValidTypeData({ type: 'title', title_details: null })).toBe(false)
-      // @ts-ignore
-      expect(hasValidTypeData({ type: 'title' })).toBe(false)
-    })
-
-    it('Should return false if injection has type participant but has no participant_details', () => {
-      // @ts-ignore
-      expect(hasValidTypeData({ type: 'participant', participant_details: null })).toBe(false)
-      // @ts-ignore
-      expect(hasValidTypeData({ type: 'participant' })).toBe(false)
-    })
-  })
-
   describe('removePlayPilotTitleLinks', () => {
     it('Should remove existing title links', () => {
       document.body.innerHTML = `

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

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { linkInjections } from '$lib/fakeData'
 import { mount, unmount } from 'svelte'
 import { clearCurrentlyHoveredInjection, currentlyHoveredInjection, destroyLinkPopover, isPopoverActive, openPopoverForInjectedLink } from '$lib/popover'
-import InjectionPopover from '../../routes/components/InjectionPopover.svelte'
+import TitlePopover from '../../routes/components/TitlePopover.svelte'
 import { waitFor } from '@testing-library/svelte'
 
 vi.mock('svelte', () => ({
@@ -22,17 +22,17 @@ describe('popover.js', () => {
   describe('openPopoverForInjectedLink', () => {
     it('Should mount popover', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
 
       await waitFor(() => {
-        expect(mount).toHaveBeenCalledWith(InjectionPopover, expect.any(Object))
+        expect(mount).toHaveBeenCalledWith(TitlePopover, expect.any(Object))
         expect(currentlyHoveredInjection).toBeTruthy()
       })
     })
 
     it('Should not mount popover if user is no longer hovering after delay', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
 
       await new Promise(res => setTimeout(res, 50))
 
@@ -46,19 +46,19 @@ describe('popover.js', () => {
 
   describe('destroyLinkPopover', () => {
     it('Should not call unmount but still remove potential popover elements if no active popover is set', async () => {
-      document.body.innerHTML = '<div data-playpilot-injection-popover></div> <div data-playpilot-injection-popover></div>'
+      document.body.innerHTML = '<div data-playpilot-title-popover></div> <div data-playpilot-title-popover></div>'
 
       destroyLinkPopover()
 
       expect(unmount).not.toHaveBeenCalled()
-      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
     })
   })
 
   describe('clearCurrentlyHoveredInjection', () => {
     it('Should clear currentlyHoveredInjection', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
 
       await waitFor(() => expect(currentlyHoveredInjection).toBeTruthy())
 

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -6,7 +6,6 @@ import { injectLinksInDocument } from '$lib/injection'
 import { track } from '$lib/tracking'
 import { generateInjection } from '../../../helpers'
 import { removeImageUrlPrefix } from '$lib/image'
-import { linkInjections as fakeLinkInjections } from '$lib/fakeData'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -201,13 +200,4 @@ describe('EditorItem.svelte', () => {
 
     expect(getByText('What would you like to report?')).toBeTruthy()
   })
-
-  it('Should render as participant when type is participant', () => {
-    const { container, queryByLabelText, getByText } = render(EditorItem, { linkInjection: fakeLinkInjections[4] })
-
-    expect(queryByLabelText('Expand')).not.toBeTruthy()
-    expect(getByText(fakeLinkInjections[4].participant_details?.name || '-')).toBeTruthy()
-    expect(container.querySelector('.poster')).not.toBeTruthy()
-    expect(container.querySelector('.placeholder-image')).toBeTruthy()
-  })
 })

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -99,7 +99,6 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: 'Some',
       phrase_after: 'in a',
-      type: 'title',
     })
   })
 
@@ -142,7 +141,6 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: '',
       phrase_after: '',
-      type: 'title',
     })
   })
 
@@ -185,7 +183,6 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: expect.any(String),
       phrase_after: expect.any(String),
-      type: 'title',
     })
   })
 
@@ -228,7 +225,6 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: expect.any(String),
       phrase_after: expect.any(String),
-      type: 'title',
     })
   })
 

package/src/tests/routes/components/Editorial/PlaylinkTypeSelect.test.js

@@ -11,8 +11,6 @@ describe('PlaylinkTypeSelect.svelte', () => {
     sentence: 'Some sentence',
     playpilot_url: 'https://playpilot.com/movie/example-3/',
     key: 'some-key',
-    /** @type {import('$lib/types/injection').LinkInjectionDataType} */
-    type: 'title',
   }
 
   beforeEach(() => {

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

@@ -50,13 +50,6 @@ describe('ListTitle.svelte', () => {
     expect(onclick).toHaveBeenCalled()
   })
 
-  it('Should render as small variant when given', () => {
-    const { container } = render(ListTitle, { title, compact: true })
-
-    expect(container.querySelector('.compact')).toBeTruthy()
-    expect(container.querySelector('.description')).not.toBeTruthy()
-  })
-
   describe('Playlinks', () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },

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

@@ -73,11 +73,4 @@ describe('Participant.svelte', () => {
 
     expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2 })
   })
-
-  it('Should render as small variant when given', () => {
-    const { container, queryByText } = render(Participant, { participant: participants[0], small: true })
-
-    expect(queryByText('Credits')).not.toBeTruthy()
-    expect(container.querySelector('.small')).toBeTruthy()
-  })
 })

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

@@ -23,8 +23,6 @@ const linkInjections = [{
   poster: 'some-poster',
   key: 'some-key-1',
   title_details: title,
-  /** @type {import('$lib/types/injection').LinkInjectionDataType} */
-  type: 'title',
 }, {
   sid: '2',
   title: 'a sentence',
@@ -33,8 +31,6 @@ const linkInjections = [{
   poster: 'some-poster',
   key: 'some-key-1',
   title_details: title,
-  /** @type {import('$lib/types/injection').LinkInjectionDataType} */
-  type: 'title',
 }]
 
 describe('AfterArticlePlaylinks.svelte', () => {

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

@@ -85,7 +85,7 @@ describe('Playlinks.svelte', () => {
 
     await fireEvent.click(getByText(playlinks[0].name))
 
-    expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverPlaylinkClick, title, { playlink: playlinks[0].name })
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink: playlinks[0].name })
   })
 
   it('Should call track function for modal when clicked inside of modal scope', async () => {

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

@@ -0,0 +1,78 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+
+import TitlePopover from '../../../routes/components/TitlePopover.svelte'
+import { title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { hasConsentedTo } from '$lib/consent'
+
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/pixel', () => ({
+  isPixelAllowed: vi.fn(),
+}))
+
+vi.mock('$lib/api/participants', () => ({
+  fetchParticipantsForTitle: vi.fn(),
+}))
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
+describe('TitlePopover.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
+  })
+
+  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, expect.objectContaining({ 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()
+  })
+})

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

@@ -1,117 +0,0 @@
-import { render  } from '@testing-library/svelte'
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
-
-import InjectionPopover from '../../../routes/components/InjectionPopover.svelte'
-import { participants, title } from '$lib/fakeData'
-import { track } from '$lib/tracking'
-import { TrackingEvent } from '$lib/enums/TrackingEvent'
-import { hasConsentedTo } from '$lib/consent'
-
-vi.mock('$lib/consent', () => ({
-  hasConsentedTo: vi.fn(() => true),
-}))
-
-vi.mock('$lib/tracking', () => ({
-  track: vi.fn(),
-}))
-
-vi.mock('$lib/pixel', () => ({
-  isPixelAllowed: vi.fn(),
-}))
-
-vi.mock('$lib/api/participants', () => ({
-  fetchParticipantsForTitle: vi.fn(),
-}))
-
-vi.mock('$lib/api/titles', () => ({
-  fetchSimilarTitles: vi.fn(),
-}))
-
-describe('InjectionPopover.svelte', () => {
-  beforeEach(() => {
-    vi.resetAllMocks()
-    vi.mocked(hasConsentedTo).mockImplementation(() => true)
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  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(InjectionPopover, { event, type: 'title', data: 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(InjectionPopover, { event, type: 'title', data: title })
-
-    expect(container.querySelector('.top-scroll')).not.toBeTruthy()
-  })
-
-  describe('Title type', () => {
-    it('Should render the given title', () => {
-      const event = new MouseEvent('mouseenter')
-      const { getByText } = render(InjectionPopover, { event, type: 'title', data: title })
-
-      expect(getByText(title.title)).toBeTruthy()
-    })
-
-    it('Should call track function when rendered', () => {
-      const event = new MouseEvent('mouseenter')
-      render(InjectionPopover, { event, type: 'title', data: title })
-
-      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverView, title, { type: 'title' })
-    })
-
-    it('Should call track function with time_spent when destroyed', async () => {
-      vi.useFakeTimers()
-
-      const event = new MouseEvent('mouseenter')
-      const { unmount } = render(InjectionPopover, { event, type: 'title', data: title })
-
-      vi.advanceTimersByTime(200)
-      unmount()
-
-      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverClose, title, expect.objectContaining({ time_spent: 200, type: 'title' }))
-    })
-  })
-
-  describe('Participant type', () => {
-    const participant = participants[0]
-
-    it('Should render the given participant', () => {
-      const event = new MouseEvent('mouseenter')
-      const { getByText } = render(InjectionPopover, { event, type: 'participant', data: participant })
-
-      expect(getByText(participant.name)).toBeTruthy()
-    })
-
-    it('Should call track function when rendered', () => {
-      const event = new MouseEvent('mouseenter')
-      render(InjectionPopover, { event, type: 'participant', data: participant })
-
-      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverView, null, { type: 'participant', participant: participant.name })
-    })
-
-    it('Should call track function with time_spent when destroyed', async () => {
-      vi.useFakeTimers()
-
-      const event = new MouseEvent('mouseenter')
-      const { unmount } = render(InjectionPopover, { event, type: 'participant', data: participant })
-
-      vi.advanceTimersByTime(200)
-      unmount()
-
-      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverClose, null, expect.objectContaining({ type: 'participant', time_spent: 200, participant: participant.name }))
-    })
-  })
-})