@playpilot/tpi 8.17.1 → 8.18.0

package/src/routes/components/ListTitle.svelte

@@ -8,15 +8,16 @@
 
   interface Props {
     title: TitleData
+    compact?: boolean
     onclick?: (event: MouseEvent) => void
   }
 
-  const { title, onclick = () => null }: Props = $props()
+  const { title, compact = false, onclick = () => null }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 </script>
 
-<button class="title" {onclick} data-testid="title">
+<button class="title" class:compact {onclick} data-testid="title">
   <div class="poster">
     <TitlePoster {title} width={30} height={43} lazy />
   </div>
@@ -38,12 +39,14 @@
       {/if}
     </div>
 
-    <div class="description" class:large={noAffiliate}>
-      {title.description}
-    </div>
+    {#if !compact}
+      <div class="description" class:large={noAffiliate}>
+        {title.description}
+      </div>
+    {/if}
 
     {#if !noAffiliate}
-      <PlaylinksCompact playlinks={title.providers} />
+      <PlaylinksCompact playlinks={title.providers} size={compact ? 24 : 30} />
     {/if}
   </div>
 
@@ -84,6 +87,10 @@
     border-radius: theme(detail-image-border-radius, border-radius);
     background: theme(detail-image-background, content);
     overflow: hidden;
+
+    .compact & {
+      width: margin(3.5);
+    }
   }
 
   .content {
@@ -97,11 +104,17 @@
     @include desktop() {
       padding-right: margin(1);
     }
+
+    .compact & {
+      padding-left: margin(0.75);
+      padding-right: 0;
+    }
   }
 
   .heading {
     color: theme(list-item-title-text-color, text-color);
     font-weight: theme(list-item-title-font-weight, font-bold);
+    line-height: 1.2;
   }
 
   .meta {
@@ -116,6 +129,10 @@
     > div {
       text-transform: capitalize;
     }
+
+    .compact & {
+      margin: margin(0.125) 0 margin(0.25) 0;
+    }
   }
 
   .imdb {
@@ -152,5 +169,9 @@
     &:active {
       color: theme(list-item-action-hover-color, text-color);
     }
+
+    .compact & {
+      display: none;
+    }
   }
 </style>

package/src/routes/components/Modals/Modal.svelte

@@ -240,6 +240,8 @@
     will-change: top;
     transition: top 200ms;
 
+    @include styled-scrollbar;
+
     @supports (height: 1dvh) {
       height: 80dvh;
     }

package/src/routes/components/Modals/RailModal.svelte

@@ -137,7 +137,9 @@
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);
 
-    @include desktop() {
+    @include styled-scrollbar;
+
+    @include desktop {
       height: auto;
       max-height: 90vh;
       border-radius: theme(rail-modal-item-border-radius, border-radius-huge);

package/src/routes/components/Participant.svelte

@@ -13,9 +13,10 @@
 
   interface Props {
     participant: ParticipantData
+    small?: boolean
   }
 
-  const { participant }: Props = $props()
+  const { participant, small = false }: Props = $props()
 
   const { name, birth_date, death_date } = $derived(participant)
 
@@ -52,8 +53,8 @@
   }
 </script>
 
-<div class="header">
-  <div class="heading" use:heading={2} id="name">{name}</div>
+<div class="header" class:small>
+  <div class="heading" use:heading={2} id="heading">{name}</div>
 
   {#if birth_date}
     <p class="dates">
@@ -63,11 +64,13 @@
 </div>
 
 <div class="content">
-  <div class="heading small" use:heading={3} id="credits">{t('Credits')}</div>
+  {#if !small}
+    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+  {/if}
 
   <div class="list">
     {#each titles as title}
-      <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
+      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
     {/each}
 
     {#if loading}
@@ -88,6 +91,10 @@
     font-size: theme(detail-font-size, font-size-base);
     line-height: theme(participant-description-line-height, normal);
     color: theme(detail-text-color, text-color);
+
+    &.small {
+      padding: margin(1);
+    }
   }
 
   .heading {
@@ -98,7 +105,7 @@
     line-height: normal;
     font-style: theme(detail-title-font-style, normal);
 
-    &.small {
+    &.subheading {
       margin: 0 0 margin(0.5);
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
@@ -116,6 +123,11 @@
     font-size: theme(detail-font-size, font-size-base);
     line-height: normal;
     font-style: normal;
+
+    ::view-transition-old(content),
+    ::view-transition-new(content) {
+      height: 100%;
+    }
   }
 
   .list {

package/src/routes/components/Playlinks/Playlinks.svelte

@@ -22,6 +22,7 @@
   const { playlinks, title }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
+  const type = getContext('type')
   const displayAd = getFirstAdOfType('card')
   const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
 
@@ -37,7 +38,7 @@
   const list = $derived(outerWidth < 500 || !!displayAd || mergedPlaylinks.length === 1)
 
   function onclick(playlink: string): void {
-    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
+    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.InjectionPopoverPlaylinkClick, title, { playlink, type })
   }
 
   function categorizePlaylinks(playlinks: PlaylinkData[]): CategorizedPlaylinks {

package/src/routes/components/Popover.svelte

@@ -194,11 +194,12 @@
     background: theme(popover-background, light);
     box-shadow: theme(popover-shadow, shadow-large);
     max-height: min(var(--max-height, 100vh), margin(36)); // --max-height defaults to 100vh to make it unused while it's not defined
-    scrollbar-width: thin;
     overflow-y: overlay;
     overflow-x: hidden;
     view-transition-name: playpilot-title-content;
 
+    @include styled-scrollbar;
+
     .has-bubble & {
       border-top-left-radius: 0;
       border-top-right-radius: 0;

package/src/routes/components/Title.svelte

@@ -56,7 +56,7 @@
       <TitlePoster {title} onload={() => posterLoaded = true} lazy={false} />
     </div>
 
-    <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
+    <div class="heading" use:heading={2} class:truncate={small} id="heading">{title.title}</div>
 
     <div class="info">
       <div class="imdb">

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 TitlePopover from '../components/TitlePopover.svelte'
+  import InjectionPopover from '../components/InjectionPopover.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>TitlePopover.svelte</h3>
+    <h3>InjectionPopover.svelte</h3>
     <div class="item">
       <div style:height="500px"></div>
-      <TitlePopover {title} event={{} as MouseEvent} />
+      <InjectionPopover data={title} event={{} as MouseEvent} />
     </div>
   </div>
 </div>

package/src/tests/helpers.js

@@ -44,5 +44,6 @@ 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/api/titles.test.js

@@ -67,20 +67,20 @@ describe('$lib/api/titles', () => {
       expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&region=be&language=en-US&include_count=false')
     })
 
-    it('Should not fetch and return empty results if region is not supported', async () => {
+    it('Should fetch for global region if user region is not supported', async () => {
       vi.mocked(isUserRegionSupported).mockResolvedValue(false)
 
       await fetchTitles()
 
-      expect(api).not.toHaveBeenCalled()
+      expect(api).toHaveBeenCalledWith(expect.stringContaining('region=gl'))
     })
 
-    it('Should fetch if region is unsupported but region was given as null', async () => {
+    it('Should fetch without region if region is unsupported but region was given as null', async () => {
       vi.mocked(isUserRegionSupported).mockResolvedValue(false)
 
       await fetchTitles({ region: null })
 
-      expect(api).toHaveBeenCalled()
+      expect(api).not.toHaveBeenCalledWith(expect.stringContaining('region=gl'))
     })
   })
 

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

@@ -1,11 +1,12 @@
 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 } from '$lib/injection'
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks, hasValidTypeData } 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'
 import { titleUrl } from '$lib/routes'
 
 vi.mock('svelte', () => ({
@@ -572,7 +573,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-title-popover></div> <p>This is a sentence with an injection.</p>'
+      document.body.innerHTML = '<div data-playpilot-injection-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')
@@ -587,7 +588,7 @@ describe('injection.ts', () => {
       await fireEvent.mouseMove(document.body)
       vi.advanceTimersByTime(200)
 
-      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
     })
 
     it('Should inject links of the same phrase when multiple are present', () => {
@@ -951,6 +952,20 @@ 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('config.open_tpi_links_in_explore', () => {
       beforeEach(() => {
         window.PlayPilotLinkInjections.config = {
@@ -1168,6 +1183,32 @@ 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 TitlePopover from '../../routes/components/TitlePopover.svelte'
+import InjectionPopover from '../../routes/components/InjectionPopover.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)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await waitFor(() => {
-        expect(mount).toHaveBeenCalledWith(TitlePopover, expect.any(Object))
+        expect(mount).toHaveBeenCalledWith(InjectionPopover, 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)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       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-title-popover></div> <div data-playpilot-title-popover></div>'
+      document.body.innerHTML = '<div data-playpilot-injection-popover></div> <div data-playpilot-injection-popover></div>'
 
       destroyLinkPopover()
 
       expect(unmount).not.toHaveBeenCalled()
-      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
     })
   })
 
   describe('clearCurrentlyHoveredInjection', () => {
     it('Should clear currentlyHoveredInjection', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await waitFor(() => expect(currentlyHoveredInjection).toBeTruthy())
 

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

@@ -233,6 +233,14 @@ describe('$lib/tracking', () => {
         }),
       )
     })
+
+    it('Should not track when a very large amount of events have already been fired', () => {
+      window.PlayPilotLinkInjections.tracked_events = new Array(600).fill(1)
+
+      track('Some event')
+
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
   })
 
   describe('setTrackingSids', () => {

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

@@ -6,6 +6,7 @@ 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(),
@@ -200,4 +201,13 @@ 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,6 +99,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: 'Some',
       phrase_after: 'in a',
+      type: 'title',
     })
   })
 
@@ -141,6 +142,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: '',
       phrase_after: '',
+      type: 'title',
     })
   })
 
@@ -183,6 +185,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: expect.any(String),
       phrase_after: expect.any(String),
+      type: 'title',
     })
   })
 
@@ -225,6 +228,7 @@ 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,6 +11,8 @@ 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/InjectionPopover.test.js

@@ -0,0 +1,117 @@
+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 }))
+    })
+  })
+})

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

@@ -50,6 +50,13 @@ 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,4 +73,11 @@ 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,6 +23,8 @@ 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',
@@ -31,6 +33,8 @@ 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.TitlePopoverPlaylinkClick, title, { playlink: playlinks[0].name })
+    expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverPlaylinkClick, title, { playlink: playlinks[0].name })
   })
 
   it('Should call track function for modal when clicked inside of modal scope', async () => {