@playpilot/tpi 5.2.1 → 5.3.1

package/events.md

@@ -0,0 +1,60 @@
+This document highlights the purpose of each tracking event.
+
+## Payload
+
+All events share a common payload:
+
+- `url`: The URL of the related article. This is a URL with only the protocol, base url, and pathname. No parameters are included
+- `organization_sid`: The sid for the related organization
+- `domain_sid`: The sid for the related domain
+
+Events related to titles share an additional set of data (referred to below as `Title`):
+
+- `original_title`
+- `title_sid`
+- `title_type`: "movie" or "series"
+- `providers`: An array of provider names
+
+Events may have additional data in their payload.
+
+### General
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_article_page_view` | _Fires any time an article is visited_ | This event will fire right after all data is fetched and will fire regardless of if there are injections or not | It will fire even on pages where injections are disabled. | -
+`ali_links_injected` | _Fires as long as any injections are injected into the article_ | Includes an object with the number of injections for this article with `manual` and `ai` as two separate numbers. | `manual` (number of manual injection), `ai` (number of ai injections)
+
+### Modal
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_title_modal_view` | _Fires any time a title modal is viewed_ | The title modal opens when clicking an injection both on desktop and mobile | `Title`
+`ali_title_modal_scroll` | _Fires the first time a user scrolls inside of a titel modal._ | | `Title`
+`ali_title_modal_playlink_click` | _Fires any time a playlink is clicked inside of a title modal_ | Includes data on which playlink was clicked. | `Title`, `playlink` (name of the clicked playlink)
+`ali_title_modal_save_click` | _Currently unused, there is no save functionality._ | | `Title`
+
+### Popover
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_title_popover_view` | _Fires any time a title popover is viewed_ | The title popover opens when hovering an injection. This will only occur on desktop. | `Title`
+`ali_title_popover_save_click` | _Currently unused, there is no save functionality._ | | `Title`
+`ali_title_popover_playlink_click` | _Fires any time a playlink is clicked inside of a title popover_ | Includes data on which playlink was clicked. | `Title`, `playlink` (name of the clicked playlink)
+
+### After Article
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_after_article_playlink_click` | _Fires any time a playlink is clicked inside of an after article block_ | This block will only appear injections are configured for after article, which no one is currently using. Includes data on which playlink was clicked. | `Title`, `playlink` (name of the clicked playlink)
+`ali_after_article_modal_button_click` | _Fires any time an after article modal button is clicked_ | This button will only appear in after article blocks when configured, which, which no one is currently using | `Title`
+
+### Data
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_injection_failed` | _Fires only inside of the Editor for each injection that failed_ | Only includes visible failures, for instance, it will ignore failures because of already existing links. If a user is shown a message about a failed injection, this event will fire. Includes data on the phrase and sentence for the injection. | `Title`, `phrase`, `sentence`
+`ali_injection_count` | _Fires the first time the Editor is shown_ | This logs the total amount of injections, the total amount of failed and manual injections, and the total amount of successful injections. | `total` (number of failed + successsful injections), `failed_automatic`, `failed_manual`, `final_injected` (number of successful injections)
+`ali_fetch_config_failed` | _Fires whenever the config object failed to fetch_ | When this happens, injections are aborted.
+`ali_auth_failed` | _Fires whenever authentication for the Editor fails._
+
+### Reporting
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_manual_report` | _Fires only through manual action when reporting issues with an injection via the Editor._ | | `Title`, `report_reason`, `sid` (of injection), `title` (of injection), `sentence`, `failed` (true or false), `failed_message` (reason for failure as given in the editor), `manual` (true or false)
+`ali_editor_error` | _Fires whenever an error occurs within the Editor._ | | `Title`, `phrase`, `sentence`
+`ali_injection_error` | _Fires whenever an error occurs during injection_ | This includes fetching the injections as well as actually injecting itself. Does not include fetching of the config object. | `message` (error message as given by the browser)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.2.1",
+	"version": "5.3.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api.ts

@@ -51,6 +51,9 @@ export async function fetchLinkInjections(
 
   const parsed = await response.json()
 
+  // This is used when debugging (using window.PlayPilotLinkInjections.debug())
+  window.PlayPilotLinkInjections.last_successful_fetch = parsed
+
   return parsed
 }
 

package/src/lib/array.ts

@@ -11,3 +11,14 @@ export function getLargestValueInArray(array: number[]): number {
 
   return largest
 }
+
+/**
+ * Get the number of previous occurances in an array of objects based on a set of matching keys.
+ * For instance, in an array [{ id: 1, key: value }, { id: 2, key: value }], you might only want
+ * to match on the "key" key, rather than on the full object. An array is passed as keys to match
+ * on multiple keys.
+ */
+export function getNumberOfOccurrencesInArray<T>(array: T[], item: T, keys: string[]): number {
+  // @ts-ignore The key here used is a bit ambiguous
+  return array.filter(i => keys.every(key => i[key] === item[key])).length
+}

package/src/lib/enums/TrackingEvent.ts

@@ -1,13 +1,16 @@
+/** @see /events.md */
 export const TrackingEvent = Object.freeze({
   ArticlePageView: 'ali_article_page_view',
   ArticleInjected: 'ali_links_injected',
 
   TitleModalView: 'ali_title_modal_view',
+  TitleModalClose: 'ali_title_modal_close',
   TitleModalScroll: 'ali_title_modal_scroll',
   TitleModalPlaylinkClick: 'ali_title_modal_playlink_click',
   TitleModalSaveClick: 'ali_title_modal_save_click',
 
   TitlePopoverView: 'ali_title_popover_view',
+  TitlePopoverClose: 'ali_title_popover_close',
   TitlePopoverSaveClick: 'ali_title_popover_save_click',
   TitlePopoverPlaylinkClick: 'ali_title_popover_playlink_click',
 

package/src/lib/linkInjection.ts

@@ -2,11 +2,12 @@ import { mount, unmount } from 'svelte'
 import TitleModal from '../routes/components/TitleModal.svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
-import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
+import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseWithSentenceBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { isHoldingSpecialKey } from './event'
 import { playFallbackViewTransition } from './viewTransition'
 import { prefersReducedMotion } from 'svelte/motion'
+import { getNumberOfOccurrencesInArray } from './array'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -103,6 +104,10 @@ export function getLinkInjectionsParentElement(): HTMLElement {
   return document.querySelector('article') || document.querySelector('main') || document.body
 }
 
+export function getPageText(elements: HTMLElement[]): string {
+  return elements.map(element => element.innerText).join('\n\n')
+}
+
 /**
  * Replace all found injections within all given elements on the page
  * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.
@@ -124,7 +129,12 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
   const failedMessages: Record<string, string> = {}
 
+  // Start at -1 so that we can add +1 right at the top of the loop, making it start at 0.
+  // This index is used in Option 3 below.
+  let injectionIndex = -1
   for (const injection of foundInjections) {
+    injectionIndex++
+
     const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
     const element = elements[elementIndex]
 
@@ -155,7 +165,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     if (numberOfMatches === 1) replacementIndex = element.innerHTML.indexOf(injection.title)
 
     // !! Option 2 - Replace by phrase_before and phrase_after
-    // If multiple or no occurances were found, we use phrase_before and phrase_after to refine the search
+    // If multiple or no occurences were found, we use phrase_before and phrase_after to refine the search
     if (replacementIndex === -1 && (phrase_before || phrase_after)) {
       // The before and after phrase are combined to see if the sentence contains the match exactly.
       // This is a fairly simple comparison that will fail on special characters, html tags, or inconsistencies
@@ -185,15 +195,23 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     }
 
     // !! Option 3 - Replace by title only, taking previous injections into account
-    // If no occurances were found previously, we check the element from start to finish only checking for the title,
+    // If no occurences were found previously, we check the element from start to finish only checking for the title,
     // without considering phrase_before and phrase_after
     if (replacementIndex === -1 && nodeContainingText?.nodeValue) {
-      // Start searching for injection from either the value or the sentence. This prevents injecting into
+      // Start searching for injection from either the value, the sentence, or the occurrence. This prevents injecting into
       // text in an element earlier than the sentence started. A element might contain many sentences, after all.
       const valueIndex = element.innerHTML.indexOf(nodeContainingText.nodeValue)
       const sentenceIndex = element.innerHTML.indexOf(injection.sentence)
 
-      replacementIndex = Math.max(valueIndex, sentenceIndex, 0)
+      // Starting from occurence happens when a sentence might include multiple occurences of the same phrase.
+      // We might still prefer the valueIndex if that is higher than this value.
+
+      // A sentence might include multiple matches for the same phrase. We get the number of previous occurences in order to get the index
+      // of the match we actually want to get.
+      const indexOfOccurrence = getNumberOfOccurrencesInArray<LinkInjection>(foundInjections.slice(0, injectionIndex + 1), injection, ['title', 'sentence']) - 1
+      const indexInSentence = getIndexOfPhraseWithSentenceBoundary(nodeContainingText.nodeValue, element.innerHTML, indexOfOccurrence)
+
+      replacementIndex = Math.max(valueIndex, indexInSentence, sentenceIndex, 0)
     }
 
     if (replacementIndex === -1) continue

package/src/lib/text.ts

@@ -131,7 +131,7 @@ export function findNumberOfMatchesInString(text: string, phrase: string): numbe
 
 /**
  * Finds all matches between two phrases. For example "A sentence with a start and end phrase". Is "start" and "end" are given
- * as the `start` and `end` properties, this will match on ` and `. This does not currently account for multiple occurences
+ * as the `start` and `end` properties, this will match on ` and `. This does not currently account for multiple occurrences
  * of the end phrase. For example "A sentence with a start and end phrase and another end" will only return 1 value, despite
  * there being 2 end phrases with content between. While that might make sense, we don't currently need that as we always
  * filter by the shortest length anyway.
@@ -178,3 +178,29 @@ export function getNumberOfLeadingAndTrailingSpaces(text: string): { leadingSpac
     trailingSpaces: text.match(/\s*$/)?.[0].length || 0
   }
 }
+
+/**
+ * Get the index of a phrase inside of text based on a specific word boundary. Returns either the first match
+ * or the index of the given occurrence.
+ */
+export function getIndexOfPhraseWithSentenceBoundary(phrase: string, sentence: string, occurrence = 0): number {
+  const disallowedBoundaryCharacters = ['-', '_', '/']
+  const matches = []
+
+  let index = sentence.indexOf(phrase)
+  while (index !== -1) {
+    const leadingCharacter = sentence[index - 1]
+    const disallowedLeadingCharacter = disallowedBoundaryCharacters.includes(leadingCharacter)
+
+    const trailingCharacter = sentence[index + phrase.length]
+    const disallowedTrailingCharacter = disallowedBoundaryCharacters.includes(trailingCharacter)
+
+    if (!disallowedLeadingCharacter && !disallowedTrailingCharacter) {
+      matches.push(index)
+    }
+
+    index = sentence.indexOf(phrase, index + 1)
+  }
+
+  return matches[occurrence] ?? -1
+}

package/src/lib/tracking.ts

@@ -36,6 +36,14 @@ export async function track(event: string, title: TitleData | null = null, paylo
       source: 'ali',
     })),
   })
+
+  pushEventToWindow({ event, payload })
+}
+
+/** Save this event to the window object. Used when calling .debug() */
+function pushEventToWindow(data: { event: string, payload: Record<string, any> }) {
+  if (!window.PlayPilotLinkInjections.tracked_events) window.PlayPilotLinkInjections.tracked_events = []
+  window.PlayPilotLinkInjections.tracked_events?.push(data)
 }
 
 /**

package/src/lib/types/global.d.ts

@@ -6,6 +6,7 @@ declare global {
       app: any | null
       initialize(config: ScriptConfig): void
       destroy(): void
+      debug(): void
     }
   }
 }

package/src/lib/types/script.d.ts

@@ -7,4 +7,6 @@ export type ScriptConfig = {
   after_article_selector?: string
   after_article_insert_position?: InsertPosition | ''
   language?: string | null
+  last_successful_fetch?: LinkInjectionResponse | null
+  tracked_events?: { event: string, payload: Record<string, any> }[]
 }

package/src/lib/types/title.d.ts

@@ -8,7 +8,7 @@ export type TitleData = {
   genres: string[]
   year: number
   imdb_score: number
-  type: string
+  type: 'movie' | 'series'
   providers: PlaylinkData[]
   description: string
   small_poster: string

package/src/main.ts

@@ -1,6 +1,7 @@
 import { mount } from 'svelte'
 import App from './routes/+page.svelte'
-import { clearLinkInjections } from '$lib/linkInjection'
+import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/linkInjection'
+import { getPageMetaData } from '$lib/meta'
 
 window.PlayPilotLinkInjections = {
   token: '',
@@ -11,6 +12,8 @@ window.PlayPilotLinkInjections = {
   language: null,
   organization_sid: null,
   domain_sid: null,
+  last_successful_fetch: null,
+  tracked_events: [],
   app: null,
 
   initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }): void {
@@ -48,6 +51,38 @@ window.PlayPilotLinkInjections = {
 
     clearLinkInjections()
   },
+
+  debug(): void {
+    const parentElement = getLinkInjectionsParentElement()
+    const elements = getLinkInjectionElements(parentElement)
+
+    console.group('PlayPilot Link Injection Debug')
+      console.groupCollapsed('Config')
+        console.table(Object.entries(this))
+      console.groupEnd()
+
+      console.groupCollapsed('Elements')
+        console.log('Parent element', parentElement)
+        console.log('Valid elements', elements)
+      console.groupEnd()
+
+      console.groupCollapsed('Last fetch')
+        console.log(this.last_successful_fetch)
+      console.groupEnd()
+
+      console.groupCollapsed('Meta')
+        console.log(getPageMetaData())
+      console.groupEnd()
+
+      console.groupCollapsed('Page text')
+        console.log(getPageText(elements))
+      console.groupEnd()
+
+      console.groupCollapsed('Tracked events')
+        console.log(this.tracked_events)
+      console.groupEnd()
+    console.groupEnd()
+  }
 }
 
 export default window.PlayPilotLinkInjections

package/src/routes/+layout.svelte

@@ -49,6 +49,9 @@
         <h2>A matching link is already present</h2>
         <p>Following their post-credits scene in <a href="/">John Wick</a>, in a new John Wick spinoff.</p>
 
+        <h2>Repeat injections <small>(Exact example from DigitalSpy)</small></h2>
+        <p>Season 2 is set to star <em>Taskmaster</em> season 2 runner-up Romesh Ranganathan, season 4's Mel Giedroyc, season 16 winner Sam Campbell, and future <em>Taskmaster</em> season 20 star Maisie Adam.</p>
+
         <h2>Mixed and breaking elements <small>(DigitalSpy.com tends to do this)</small></h2>
         <p>The following bold word is broken by <strong>multi</strong><strong>ple</strong> elements, but visually looks like one. An element might also only be par<em>tially</em> styled. Or a full title like "The Lord of the Rings: <em>The Two Towers</em>" might only have part styled.</p>
 

package/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { fetchConfig, pollLinkInjections } from '$lib/api'
-  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
+  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
   import { setTrackingSids, track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
@@ -26,7 +26,7 @@
   // @ts-ignore It's ok if the response is empty
   const { ai_injections: aiInjections = [], manual_injections: manualInjections = [] } = $derived(response || {})
 
-  const pageText = $derived(elements.map(element => element.innerText).join('\n\n'))
+  const pageText = $derived(getPageText(elements))
 
   // Rerender link injections when linkInjections change. This is only relevant for editiorial mode.
   $effect(() => {

package/src/routes/components/TitleModal.svelte

@@ -2,6 +2,7 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
+  import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
 
@@ -16,6 +17,11 @@
 
   let hasTrackedScrolling = false
 
+  onMount(() => {
+    const openTimestamp = Date.now()
+    return () => track(TrackingEvent.TitleModalClose, title, { time_spent: Date.now() - openTimestamp })
+  })
+
   function onscroll(): void {
     if (hasTrackedScrolling) return
 

package/src/routes/components/TitlePopover.svelte

@@ -18,7 +18,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.

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { getLargestValueInArray } from '$lib/array'
+import { getLargestValueInArray, getNumberOfOccurrencesInArray } from '$lib/array'
 
 describe('array.js', () => {
   describe('getLargestValueInArray', () => {
@@ -11,4 +11,54 @@ describe('array.js', () => {
       expect(getLargestValueInArray([])).toBe(0)
     })
   })
+
+  describe('getNumberOfOccurrencesInArray', () => {
+    it('Should return 0 if array is empty', () => {
+      const item = { id: 1, key: 'value' }
+
+      expect(getNumberOfOccurrencesInArray([], item, ['key'])).toBe(0)
+    })
+
+    it('Should counts occurrences based on a single key', () => {
+      const array = [
+        { id: 1, key: 'value' },
+        { id: 2, key: 'value' },
+        { id: 3, key: 'other' },
+      ]
+      const item = { id: 0, key: 'value' }
+
+      expect(getNumberOfOccurrencesInArray(array, item, ['key'])).toBe(2)
+    })
+
+    it('Should count occurrences based on multiple keys', () => {
+      const array = [
+        { id: 1, key: 'value', thing: 'A' },
+        { id: 2, key: 'value', thing: 'B' },
+        { id: 3, key: 'value', thing: 'A' },
+      ]
+      const item = { id: 0, key: 'value', thing: 'A' }
+
+      expect(getNumberOfOccurrencesInArray(array, item, ['key', 'thing'])).toBe(2)
+    })
+
+    it('Should return 0 if no items match on given keys', () => {
+      const array = [
+        { id: 1, key: 'value', thing: 'A' },
+        { id: 2, key: 'value', thing: 'B' },
+      ]
+      const item = { id: 0, key: 'value', thing: 'C' }
+
+      expect(getNumberOfOccurrencesInArray(array, item, ['key', 'thing'])).toBe(0)
+    })
+
+    it('Should ignore keys not listed in the keys array', () => {
+      const array = [
+        { id: 1, key: 'value', thing: 'A' },
+        { id: 1, key: 'value', thing: 'B' },
+      ]
+      const item = { id: 1, key: 'value', thing: 'C' }
+
+      expect(getNumberOfOccurrencesInArray(array, item, ['id', 'key'])).toBe(2)
+    })
+  })
 })

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

@@ -505,6 +505,24 @@ describe('linkInjection.js', () => {
       expect(links[1].dataset.playpilotInjectionKey).toBe(linkInjections[1].key)
     })
 
+    it('Should inject links of the same phrase when multiple are present, but ignore injectios into links that contain the same phrase', () => {
+      document.body.innerHTML = '<p>First phrase, <a href="/phrase">second</a> phrase</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+
+      const sentence = 'First phrase, second phrase'
+      const linkInjections = [
+        generateInjection(sentence, 'phrase'),
+        generateInjection(sentence, 'phrase'),
+      ]
+
+      injectLinksInDocument(elements, { aiInjections: linkInjections, manualInjections: [] })
+
+      const links = /** @type {HTMLAnchorElement[]} */ (Array.from(document.querySelectorAll('a')))
+
+      expect(links).toHaveLength(3)
+    })
+
     it('Should not inject injections with in_text set to false', () => {
       document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { cleanPhrase, findAllMatchesBetweenPhrases, findShortestMatchBetweenPhrases, findSurroundingPhrases, findTextNodeContaining, getFirstNumberOfWordsInString, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceStartingFrom, reverseString, truncateAroundPhrase } from '$lib/text'
+import { cleanPhrase, findAllMatchesBetweenPhrases, findShortestMatchBetweenPhrases, findSurroundingPhrases, findTextNodeContaining, getFirstNumberOfWordsInString, getIndexOfPhraseWithSentenceBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceStartingFrom, reverseString, truncateAroundPhrase } from '$lib/text'
 
 describe('text.js', () => {
   beforeEach(() => {
@@ -346,4 +346,49 @@ describe('text.js', () => {
       expect(reverseString('')).toBe('')
     })
   })
+
+  describe('getIndexOfPhraseWithSentenceBoundary', () => {
+    it('Should return index of a single phrase occurrence', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'Some phrase in a sentence')).toBe(5)
+    })
+
+    it('Should return -1 if phrase is not found', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'Some sentence without a match')).toBe(-1)
+    })
+
+    it('Should return the index of the given occurrence', () => {
+      const sentence = 'Some phrase, another phrase, and one more phrase'
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', sentence, 0)).toBe(5)
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', sentence, 1)).toBe(21)
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', sentence, 2)).toBe(42)
+    })
+
+    it('Should not match when phrase is preceded by a disallowed boundary character', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'pre-phrase test')).toBe(-1)
+    })
+
+    it('Should not match when phrase is followed by a disallowed boundary character', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'This is phrase_test')).toBe(-1)
+    })
+
+    it('Should match when phrase is at the start of the sentence', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'phrase at the start')).toBe(0)
+    })
+
+    it('Should match when phrase is at the end of the sentence', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'This is a phrase')).toBe(10)
+    })
+
+    it('Should match when phrase is surrounded by spaces', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'A phrase inside')).toBe(2)
+    })
+
+    it('Should handle multiple disallowed boundary characters correctly', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'phrase/phrase_phrase-phrase phrase')).toBe(28)
+    })
+
+    it('Should return -1 when occurrence index is out of range', () => {
+      expect(getIndexOfPhraseWithSentenceBoundary('phrase', 'phrase phrase phrase', 5)).toBe(-1)
+    })
+  })
 })

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 })
+  })
 })