@playpilot/tpi 2.0.0 → 2.0.2

package/jsconfig.json

@@ -1,19 +1,19 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler"
-	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-}
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/package.json

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

package/src/lib/api.js

@@ -1,6 +1,5 @@
 import { authorize, getAuthToken, isEditorialModeEnabled } from './auth'
 import { apiBaseUrl } from './constants'
-import { linkInjections } from './fakeData'
 import { stringToHash } from './hash'
 import { getPageMetaData } from './meta'
 import { getFullUrlPath } from './url'
@@ -81,7 +80,7 @@ export async function pollLinkInjections(url, html, { requireCompletedResult = f
       currentTry++
 
       if (currentTry >= maxTries) {
-        console.error('Max poll limit exceeded. Please return later.')
+        if (maxTries > 1) console.error('Max poll limit exceeded. Please return later.')
         resolve()
         return
       }

package/src/lib/data/translations.js

@@ -4,235 +4,293 @@ export const translations = {
   'Where To Stream Online': {
     [Language.English]: 'Where to stream online',
     [Language.Swedish]: 'Var kan man streama online',
+    [Language.Danish]: 'Hvor kan man streame online',
   },
   'Affiliate Disclaimer': {
     [Language.English]: 'We may earn a commission if you make a purchase through these links. In collaboration with',
     [Language.Swedish]: 'Vi kan få provision om du gör ett köp via dessa länkar. I samarbete med',
+    [Language.Danish]: 'Vi kan modtage en kommission, hvis du foretager et køb via disse links. I samarbejde med',
   },
   'An Error Occurred': {
     [Language.English]: 'An error occurred',
     [Language.Swedish]: 'Ett fel inträffade',
+    [Language.Danish]: 'Der opstod en fejl',
   },
   'Title Unavailable': {
     [Language.English]: 'This title is not currently available to stream.',
     [Language.Swedish]: 'Den här titeln går inte att streama just nu.',
+    [Language.Danish]: 'Denne titel er i øjeblikket ikke tilgængelig for streaming.',
   },
   'Title Unavailable Suffix': {
     [Language.English]: 'is not currently available to stream.',
     [Language.Swedish]: 'går inte att streama just nu.',
+    [Language.Danish]: 'er i øjeblikket ikke tilgængelig for streaming.',
   },
   'Is Available To Stream On': {
     [Language.English]: 'is available to stream on',
     [Language.Swedish]: 'finns att streama på',
+    [Language.Danish]: 'kan streames på',
   },
   'Is Available To Stream': {
     [Language.English]: 'is available to stream.',
     [Language.Swedish]: 'finns att streama.',
+    [Language.Danish]: 'kan streames.',
   },
   'View Streaming Options': {
     [Language.English]: 'View streaming options',
     [Language.Swedish]: 'Se streamingalternativ',
+    [Language.Danish]: 'Se streamingmuligheder',
   },
   'And': {
     [Language.English]: 'and',
     [Language.Swedish]: 'och',
+    [Language.Danish]: 'og',
   },
   'Minutes': {
     [Language.English]: 'minutes',
     [Language.Swedish]: 'minuter',
+    [Language.Danish]: 'minutter',
   },
   'Type: movie': {
     [Language.English]: 'Movie',
     [Language.Swedish]: 'Film',
+    [Language.Danish]: 'Film',
   },
   'Type: series': {
     [Language.English]: 'Series',
     [Language.Swedish]: 'Serie',
+    [Language.Danish]: 'Serie',
   },
   'Stream': {
     [Language.English]: 'Stream',
-    [Language.Swedish]: 'Strömma',
+    [Language.Swedish]: 'Streama',
+    [Language.Danish]: 'Stream',
   },
   'Buy': {
     [Language.English]: 'Buy',
     [Language.Swedish]: 'Köp',
+    [Language.Danish]: 'Køb',
   },
   'Rent': {
     [Language.English]: 'Rent',
     [Language.Swedish]: 'Hyra',
+    [Language.Danish]: 'Lej',
   },
   'Rent Or Buy': {
     [Language.English]: 'Rent or Buy',
     [Language.Swedish]: 'Hyra',
+    [Language.Danish]: 'Lej eller køb',
   },
 
   // Genres
   'All': {
     [Language.English]: 'All',
     [Language.Swedish]: 'Alla',
+    [Language.Danish]: 'Alle',
   },
   'Unscripted': {
     [Language.English]: 'Unscripted',
     [Language.Swedish]: 'Oscripterat',
+    [Language.Danish]: 'Umanuskriptet',
   },
   'Independent': {
     [Language.English]: 'Independent',
     [Language.Swedish]: 'Indie',
+    [Language.Danish]: 'Indie',
   },
   'Game Show': {
     [Language.English]: 'Game Show',
     [Language.Swedish]: 'Gameshow',
+    [Language.Danish]: 'Quizshow',
   },
   'Film Noir': {
     [Language.English]: 'Film Noir',
     [Language.Swedish]: 'Film noir',
+    [Language.Danish]: 'Film noir',
   },
   'Entertainment': {
     [Language.English]: 'Entertainment',
     [Language.Swedish]: 'Underhållning',
+    [Language.Danish]: 'Underholdning',
   },
   'News': {
     [Language.English]: 'News',
     [Language.Swedish]: 'Nyheter',
+    [Language.Danish]: 'Nyheder',
   },
   'Short': {
     [Language.English]: 'Short',
     [Language.Swedish]: 'Kortfilm',
+    [Language.Danish]: 'Kortfilm',
   },
   'Bollywood': {
     [Language.English]: 'Bollywood',
     [Language.Swedish]: 'Bollywood',
+    [Language.Danish]: 'Bollywood',
   },
   'Concert': {
     [Language.English]: 'Concert',
     [Language.Swedish]: 'Konsert',
+    [Language.Danish]: 'Koncert',
   },
   'Arthouse': {
     [Language.English]: 'Arthouse',
     [Language.Swedish]: 'Arthouse',
+    [Language.Danish]: 'Arthouse',
   },
   'Alternate Version': {
     [Language.English]: 'Alternate Version',
     [Language.Swedish]: 'Alternativ version',
+    [Language.Danish]: 'Alternativ version',
   },
   'Reality TV': {
     [Language.English]: 'Reality TV',
     [Language.Swedish]: 'Reality-TV',
+    [Language.Danish]: 'Reality-TV',
   },
   'Culture': {
     [Language.English]: 'Culture',
     [Language.Swedish]: 'Kultur',
+    [Language.Danish]: 'Kultur',
   },
   'Drama': {
     [Language.English]: 'Drama',
     [Language.Swedish]: 'Drama',
+    [Language.Danish]: 'Drama',
   },
   'Crime': {
     [Language.English]: 'Crime',
     [Language.Swedish]: 'Kriminal',
+    [Language.Danish]: 'Krimi',
   },
   'Western': {
     [Language.English]: 'Western',
     [Language.Swedish]: 'Western',
+    [Language.Danish]: 'Western',
   },
   'Thriller': {
     [Language.English]: 'Thriller',
     [Language.Swedish]: 'Thriller',
+    [Language.Danish]: 'Thriller',
   },
   'Animation': {
     [Language.English]: 'Animation',
     [Language.Swedish]: 'Animerat',
+    [Language.Danish]: 'Animation',
   },
   'Mystery': {
     [Language.English]: 'Mystery',
     [Language.Swedish]: 'Mysterium',
+    [Language.Danish]: 'Mysterium',
   },
   'Science': {
     [Language.English]: 'Science',
     [Language.Swedish]: 'Vetenskap',
+    [Language.Danish]: 'Videnskab',
   },
   'Nature': {
     [Language.English]: 'Nature',
     [Language.Swedish]: 'Natur',
+    [Language.Danish]: 'Natur',
   },
   'War': {
     [Language.English]: 'War',
     [Language.Swedish]: 'Krig',
+    [Language.Danish]: 'Krig',
   },
   'Sci-Fi': {
     [Language.English]: 'Sci-Fi',
     [Language.Swedish]: 'Sci-fi',
+    [Language.Danish]: 'Sci-fi',
   },
   'Documentary': {
     [Language.English]: 'Documentary',
     [Language.Swedish]: 'Dokumentär',
+    [Language.Danish]: 'Dokumentar',
   },
   'Stand-up': {
     [Language.English]: 'Stand-up',
     [Language.Swedish]: 'Standup',
+    [Language.Danish]: 'Stand-up',
   },
   'Talk Show': {
     [Language.English]: 'Talk Show',
     [Language.Swedish]: 'Talkshow',
+    [Language.Danish]: 'Talkshow',
   },
   'Fantasy': {
     [Language.English]: 'Fantasy',
     [Language.Swedish]: 'Fantasy',
+    [Language.Danish]: 'Fantasy',
   },
   'History': {
     [Language.English]: 'History',
     [Language.Swedish]: 'Historia',
+    [Language.Danish]: 'Historie',
   },
   'Adventure': {
     [Language.English]: 'Adventure',
     [Language.Swedish]: 'Äventyr',
+    [Language.Danish]: 'Eventyr',
   },
   'Action': {
     [Language.English]: 'Action',
     [Language.Swedish]: 'Action',
+    [Language.Danish]: 'Action',
   },
   'Horror': {
     [Language.English]: 'Horror',
     [Language.Swedish]: 'Skräck',
+    [Language.Danish]: 'Gyser',
   },
   'Comedy': {
     [Language.English]: 'Comedy',
     [Language.Swedish]: 'Komedi',
+    [Language.Danish]: 'Komedie',
   },
   'Biography': {
     [Language.English]: 'Biography',
     [Language.Swedish]: 'Biografi',
+    [Language.Danish]: 'Biografi',
   },
   'Music': {
     [Language.English]: 'Music',
     [Language.Swedish]: 'Musik',
+    [Language.Danish]: 'Musik',
   },
   'Sport': {
     [Language.English]: 'Sport',
     [Language.Swedish]: 'Sport',
+    [Language.Danish]: 'Sport',
   },
   'Romance': {
     [Language.English]: 'Romance',
     [Language.Swedish]: 'Romantik',
+    [Language.Danish]: 'Romantik',
   },
   'Kids': {
     [Language.English]: 'Kids',
     [Language.Swedish]: 'Barn',
+    [Language.Danish]: 'Børn',
   },
   'Lifestyle': {
     [Language.English]: 'Lifestyle',
     [Language.Swedish]: 'Livsstil',
+    [Language.Danish]: 'Livsstil',
   },
   'Musical': {
     [Language.English]: 'Musical',
     [Language.Swedish]: 'Musikal',
+    [Language.Danish]: 'Musical',
   },
   'Anime': {
     [Language.English]: 'Anime',
     [Language.Swedish]: 'Anime',
+    [Language.Danish]: 'Anime',
   },
   'Family': {
     [Language.English]: 'Family',
     [Language.Swedish]: 'Familj',
+    [Language.Danish]: 'Familie',
   },
 }

package/src/lib/enums/Language.js

@@ -1,4 +1,5 @@
 export const Language = Object.freeze({
   English: 'en-US',
   Swedish: 'sv-SE',
+  Danish: 'da-DK',
 })

package/src/lib/index.js

@@ -1 +1 @@
-// place files you want to import through the `$lib` alias in this folder.
+// place files you want to import through the `$lib` alias in this folder.

package/src/lib/linkInjection.js

@@ -1,9 +1,8 @@
 import { mount, unmount } from 'svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
-import { findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
+import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
 import { getLargestValueInArray } from './array'
-import { decodeHtmlEntities } from './html'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -88,14 +87,14 @@ export function injectLinksInDocument(elements, onclick, injections = { aiInject
 
   const validInjections = filterInvalidInTextInjections(mergedInjections)
   const foundInjections = validInjections.filter(i => {
-    return decodeHtmlEntities(fullText).includes(decodeHtmlEntities(i.sentence))
+    return cleanPhrase(fullText).includes(cleanPhrase(i.sentence))
   })
 
   /** @type {LinkInjectionRanges} */
   const ranges = {}
 
   for (const injection of foundInjections) {
-    const elementIndex = elements.findIndex(element => element.innerText.includes(decodeHtmlEntities(injection.sentence)))
+    const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
     const element = elements[elementIndex]
 
     if (!element) continue
@@ -243,6 +242,9 @@ function openLinkModal(event, injection, onclick) {
  * @param {LinkInjection} injection
  */
 function openLinkPopover(event, injection) {
+  // Popover for this link was already open and was called again... for some reason
+  if (activePopovers[injection.key]) return
+
   // Skip touch devices
   if (window.matchMedia('(pointer: coarse)').matches) return
 
@@ -416,5 +418,5 @@ export function isAvailableAsManualInjection(injection, injectionIndex, injectio
  * @returns {boolean}
  */
 export function isEquivalentInjection(injection1, injection2) {
-  return injection1.title === injection2.title && injection1.sentence === injection2.sentence
+  return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }

package/src/lib/text.js

@@ -58,3 +58,12 @@ export function replaceStartingFrom(text, search, replacement, startIndex) {
 
   return before + updatedAfter
 }
+
+/**
+ * Returns a string for most consistent string comparisons, decoding Html symbols and removing spaces.
+ * @param {string} phrase
+ * @returns {string}
+ */
+export function cleanPhrase(phrase) {
+  return decodeHtmlEntities(phrase).toLowerCase().replace(/\s+/g, '')
+}

package/src/routes/+layout.svelte

@@ -19,7 +19,7 @@
   if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article' }
 </script>
 
-<meta property="article:modified_time" content="2025-05-15T20:00:00+00:00" />
+<meta property="article:modified_time" content="2025-05-16T20:00:00+00:00" />
 
 <div>
   {#key Math.random()}
@@ -28,6 +28,7 @@
       <time datetime="14:00">1 hour ago</time>
       <p use:noClass>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
       <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
+      <p use:noClass><strong use:noClass>Jason Momoa</strong> (”Aquaman”), <strong use:noClass>Jack Black</strong> (”Nacho Libre”) och <strong use:noClass>Jennifer Coolidge</strong> (”The White Lotus”) medverkar i den <strong use:noClass>Jared Hess</strong>-regisserade (”Napolen Dynamite”) filmen. Filmen följer fyra utbölingar som via en magisk portal sugs in i en värld där allt är kubformat. För att komma hem igen måste de övervinna den färgstarka världen.</p>
     </article>
 
     {#if browser}

package/src/routes/+page.svelte

@@ -44,7 +44,10 @@
   async function initialize() {
     if (isEditorialMode) authorized = await authorize()
 
-    response = await pollLinkInjections(getFullUrlPath(), htmlString)
+    // Only trying once when not in editorial mode to prevent late injections (as well as a ton of requests)
+    // by users who are not in the editorial view.
+    // [TODO] TEMP: Only try once for editorial as well
+    response = await pollLinkInjections(getFullUrlPath(), htmlString, { maxTries: 1 })
 
     inject({ aiInjections, manualInjections })
 

package/src/routes/components/Title.svelte

@@ -18,7 +18,7 @@
       </div>
     {/if}
 
-    <h1>{title.title}</h1>
+    <h1 class:truncate={small}>{title.title}</h1>
 
     <div class="info">
       <div class="imdb">
@@ -31,7 +31,7 @@
       <div>{title.year}</div>
       <div class="capitalize">{t(`Type: ${title.type}`)}</div>
 
-      {#if title.length}
+      {#if !small && title.length}
         <div>{title.length} {t('Minutes')}</div>
       {/if}
     </div>
@@ -183,4 +183,10 @@
   .capitalize {
     text-transform: capitalize;
   }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>

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

@@ -2,7 +2,6 @@ import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { fetchLinkInjections, pollLinkInjections } from '$lib/api'
 import { fakeFetch } from '../helpers'
 import { authorize, isEditorialModeEnabled } from '$lib/auth'
-import { linkInjections } from '$lib/fakeData'
 
 vi.mock('$lib/auth', async importActual => {
   const actual = await importActual()

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

@@ -324,6 +324,24 @@ describe('linkInjection.js', () => {
       expect(unmount).toHaveBeenCalled()
     })
 
+    it('Should mount popover component only once when the same popover is already open', async () => {
+      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')
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, mock, { aiInjections: [injection], manualInjections: [] })
+
+      const link = /** @type {HTMLAnchorElement} */ (document.querySelector('[data-playpilot-injection-key]'))
+
+      await fireEvent.mouseEnter(link)
+      expect(mount).toHaveBeenCalled()
+
+      await fireEvent.mouseEnter(link)
+      expect(mount).toHaveBeenCalledTimes(1)
+    })
+
     it('Should inject links of the same phrase when multiple are present', () => {
       document.body.innerHTML = '<p>This is a sentence with an injection and another injection</p>'
 
@@ -389,6 +407,54 @@ describe('linkInjection.js', () => {
       expect(mount).not.toHaveBeenCalled()
       expect(document.querySelector('[data-playpilot-after-article-playlinks]')).not.toBeTruthy()
     })
+
+    it('Should treat sentences the same regardless of differences spaces', () => {
+      document.body.innerHTML = `<section>
+          <div>Some text</div>
+          <div>Someothertext</div>
+          <div>Some thirdtext</div>
+          <div>Some fourth text  </div>
+        </section>
+      `
+
+      const elements = Array.from(document.body.querySelectorAll('div'))
+      const injections = [
+        generateInjection('Sometext', 'Some'),
+        generateInjection('Some other text ', 'Some'),
+        generateInjection('Somethird text', 'Some'),
+        generateInjection('Some fourthtext', 'Some'),
+      ]
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, mock, { aiInjections: [], manualInjections: injections })
+
+      console.log(document.body.innerHTML)
+
+      expect(document.querySelectorAll('a')).toHaveLength(4)
+    })
+
+    it('Should treat sentences the same regardless of casings', () => {
+      document.body.innerHTML = `<section>
+          <div>Some text</div>
+          <div>Some OTHER TEXT</div>
+          <div>Some ThIrD tExT</div>
+        </section>
+      `
+
+      const elements = Array.from(document.body.querySelectorAll('div'))
+      const injections = [
+        generateInjection('Some text', 'Some'),
+        generateInjection('Some OTHER Text ', 'Some'),
+        generateInjection('Somethird text', 'Some'),
+      ]
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, mock, { aiInjections: [], manualInjections: injections })
+
+      console.log(document.body.innerHTML)
+
+      expect(document.querySelectorAll('a')).toHaveLength(3)
+    })
   })
 
   describe('clearLinkInjections', () => {

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { findTextNodeContaining, isNodeInLink, replaceStartingFrom } from '$lib/text'
+import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from '$lib/text'
 
 describe('text.js', () => {
   beforeEach(() => {
@@ -91,4 +91,18 @@ describe('text.js', () => {
       expect(replaceStartingFrom('Some text & more', 'text & more', 'word', 0)).toBe('Some word')
     })
   })
+
+  describe('cleanPhrase', () => {
+    it('Should return the given text without spaces', () => {
+      expect(cleanPhrase('Some phrase  with spaces  ')).toBe('somephrasewithspaces')
+    })
+
+    it('Should return the given text in lowercase', () => {
+      expect(cleanPhrase('SomE PhrASE')).toBe('somephrase')
+    })
+
+    it('Should return the given phrase with decoded characters', () => {
+      expect(cleanPhrase('{&}')).toBe('{&}')
+    })
+  })
 })

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

@@ -53,8 +53,8 @@ describe('$routes/+page.svelte', () => {
     render(page)
 
     await waitFor(() => {
-      expect(pollLinkInjections).toHaveBeenCalled()
-      expect(pollLinkInjections).toHaveBeenCalledTimes(2)
+      expect(pollLinkInjections).toHaveBeenCalledWith(expect.any(String), expect.any(String), { maxTries: 1 })
+      expect(pollLinkInjections).toHaveBeenCalledWith(expect.any(String), expect.any(String), { requireCompletedResult: true })
     })
   })
 
@@ -65,7 +65,7 @@ describe('$routes/+page.svelte', () => {
     window.PlayPilotLinkInjections = { selector: '.some-element' }
 
     render(page)
-    expect(pollLinkInjections).toHaveBeenCalledWith(expect.anything(), '<p>Here</p>')
+    expect(pollLinkInjections).toHaveBeenCalledWith(expect.any(String), '<p>Here</p>', { maxTries: 1 })
   })
 
   it('Should render editor if correct url param is given', async () => {

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

@@ -60,6 +60,12 @@ describe('Title.svelte', () => {
     expect(container.querySelector('.small')).toBeTruthy()
   })
 
+  it('Should truncate title when small prop is given', () => {
+    const { container } = render(Title, { title, small: true })
+
+    expect(container.querySelector('h1.truncate')).toBeTruthy()
+  })
+
   it('Should render given description', () => {
     const { getByText } = render(Title, { title: { ...title, description: 'Some description' } })