@playpilot/tpi 5.6.0-beta.video.7 → 5.7.0-beta.display-2

package/src/routes/components/TitlePopover.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
+  import { getFirstAdOfType } from '$lib/ads'
   import type { TitleData } from '$lib/types/title'
   import { onMount } from 'svelte'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
 
   interface Props {
     event: MouseEvent
@@ -13,13 +15,11 @@
 
   const { event, title }: Props = $props()
 
+  const topScroll = getFirstAdOfType('top_scroll')
+
   let maxHeight = $state(0)
   let element: HTMLElement | null = $state(null)
 
-  // This is all placeholder stuff that hardcodes a video ad for Apple TV+.
-  const useVideoBackground = title.providers.some(p => p.name === 'Apple TV+')
-  const backgroundFormat = useVideoBackground ? 'landscape' : ''
-
   track(TrackingEvent.TitlePopoverView, title)
 
   onMount(() => {
@@ -51,9 +51,15 @@
   }
 </script>
 
+{#snippet bubble()}
+  {#if topScroll}
+    <TopScroll campaign={topScroll} />
+  {/if}
+{/snippet}
+
 <div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
-  <Popover bind:maxHeight>
-    <Title {title} {useVideoBackground} {backgroundFormat} small compact={!!maxHeight && maxHeight < 250} />
+  <Popover bind:maxHeight bubble={topScroll ? bubble : null}>
+    <Title {title} small compact={!!maxHeight && maxHeight < 250} />
   </Popover>
 </div>
 

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

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

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import { getSplitTestIdentifier, isInSplitTest, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
+import { getSplitTestIdentifier, getSplitTestVariantIndex, isInSplitTestVariant, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
@@ -8,6 +8,11 @@ vi.mock('$lib/tracking', () => ({
 }))
 
 describe('$lib/splitTest', () => {
+  const splitTest = {
+    key: 'Some key',
+    numberOfVariants: 2,
+  }
+
   describe('getSplitTestIdentifier', () => {
     afterEach(() => {
       // @ts-ignore
@@ -20,11 +25,11 @@ describe('$lib/splitTest', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections = {}
 
-      const value = getSplitTestIdentifier('Some key')
+      const value = getSplitTestIdentifier(splitTest)
 
-      expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({ 'Some key': value })
+      expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({ [splitTest.key]: value })
       // @ts-ignore
-      expect(value).toBe(window.PlayPilotLinkInjections.split_test_identifiers['Some key'])
+      expect(value).toBe(window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key])
     })
 
     it('Should return value as stored in the window object', () => {
@@ -32,46 +37,69 @@ describe('$lib/splitTest', () => {
       window.PlayPilotLinkInjections.split_test_identifiers = {}
       window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.5
 
-      expect(getSplitTestIdentifier('Some key')).toBe(0.5)
+      expect(getSplitTestIdentifier(splitTest)).toBe(0.5)
     })
 
     it('Should set separate value for different keys', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections.split_test_identifiers = {}
 
-      getSplitTestIdentifier('Some key')
-      getSplitTestIdentifier('Some other key')
+      getSplitTestIdentifier(splitTest)
+      getSplitTestIdentifier({ key: 'Some other key', numberOfVariants: 2 })
 
       expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({
-        'Some key': expect.any(Number),
+        [splitTest.key]: expect.any(Number),
         'Some other key': expect.any(Number),
       })
     })
   })
 
-  describe('isInSplitTest', () => {
+  describe('isInSplitTestVariant', () => {
     it('Should return true if stored value is higher than 0.5', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections.split_test_identifiers = {}
-      window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.75
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.75
 
-      expect(isInSplitTest('Some key')).toBe(true)
+      expect(isInSplitTestVariant(splitTest)).toBe(true)
     })
 
     it('Should return false if stored value is lower than 0.5', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections.split_test_identifiers = {}
-      window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.25
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.25
+
+      expect(isInSplitTestVariant(splitTest)).toBe(false)
+    })
+
+    it('Should return correct values when numberOfVariants is given based on the stored value', () => {
+      const multiple = { key: 'multiple', numberOfVariants: 3 }
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.25
+
+
+      expect(isInSplitTestVariant(multiple, 0)).toBe(true)
+      expect(isInSplitTestVariant(multiple, 1)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 2)).toBe(false)
 
-      expect(isInSplitTest('Some key')).toBe(false)
+      window.PlayPilotLinkInjections.split_test_identifiers['multiple'] = 0.5
+      expect(isInSplitTestVariant(multiple, 0)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 1)).toBe(true)
+      expect(isInSplitTestVariant(multiple, 2)).toBe(false)
+
+      window.PlayPilotLinkInjections.split_test_identifiers['multiple'] = 0.75
+      expect(isInSplitTestVariant(multiple, 0)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 1)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 2)).toBe(true)
     })
   })
 
   describe('trackSplitTestView', () => {
     it('Should track view event with the given key', () => {
-      trackSplitTestView('Some key')
+      trackSplitTestView(splitTest)
 
-      const variant = isInSplitTest('Some key') ? 1 : 0
+      const variant = isInSplitTestVariant(splitTest) ? 1 : 0
 
       expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestView, null, { key: 'Some key', variant })
     })
@@ -79,10 +107,61 @@ describe('$lib/splitTest', () => {
 
   describe('trackSplitTestAction', () => {
     it('Should track action event with the given key and action', () => {
-      trackSplitTestAction('Some key', 'Some action')
-      const variant = isInSplitTest('Some key') ? 1 : 0
+      trackSplitTestAction(splitTest, 'Some action')
+      const variant = isInSplitTestVariant(splitTest) ? 1 : 0
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestAction, null, { key: splitTest.key, variant, action: 'Some action' })
+    })
+  })
+
+  describe('getSplitTestVariantIndex', () => {
+    it('Should return the expected index split test consists of 2 variants', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.25
+      expect(getSplitTestVariantIndex(splitTest)).toBe(0)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.75
+      expect(getSplitTestVariantIndex(splitTest)).toBe(1)
+    })
+
+    it('Should return the expected index when split test includes more than 2 variants', () => {
+      const multiple = { key: 'multiple', numberOfVariants: 3 }
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.25
+      expect(getSplitTestVariantIndex(multiple)).toBe(0)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.5
+      expect(getSplitTestVariantIndex(multiple)).toBe(1)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.75
+      expect(getSplitTestVariantIndex(multiple)).toBe(2)
+    })
+
+    it('Should return the expected index when split test includes a large amount of variants', () => {
+      const many = { key: 'many', numberOfVariants: 10 }
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.05
+      expect(getSplitTestVariantIndex(many)).toBe(0)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.35
+      expect(getSplitTestVariantIndex(many)).toBe(3)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.65
+      expect(getSplitTestVariantIndex(many)).toBe(6)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.78
+      expect(getSplitTestVariantIndex(many)).toBe(7)
 
-      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestAction, null, { key: 'Some key', variant, action: 'Some action' })
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.98
+      expect(getSplitTestVariantIndex(many)).toBe(9)
     })
   })
 })

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

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

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

@@ -0,0 +1,109 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Display from '../../../../routes/components/Ads/Display.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+export const campaign = {
+  campaign_format: 'display',
+  campaign_type: 'video',
+  campaign_platforms: ['web', 'android_app', 'ios_app'],
+  campaign_name: 'some_campaign_NL',
+  campaign_start: '2025-04-24T00:00:00Z',
+  campaign_end: '2025-04-30T23:59:00Z',
+  campaign_region: 'nl',
+  content: {
+    header: 'Some top scroll header',
+    header_logo: 'https://example.com/',
+    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    subheader: null,
+    image: 'https://example.com/',
+    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    video: null,
+    format: null,
+  },
+  cta: {
+    header: 'Button Label',
+    subheader: null,
+    image: null,
+    image_uuid: null,
+    url: 'https://google.com/',
+  },
+  content_playlist: null,
+  provider: null,
+  impression_trackers: [],
+  target_title_uuid: null,
+  target_title_sid: null,
+  backfill_providers: [],
+  autogenerated: false,
+  enabled: true,
+  hide_imdb_score: false,
+  hide_sponsored_message: false,
+  disclaimer: 'Some disclaimer',
+}
+
+describe('Display.svelte', () => {
+  it('Should fire track even on click', async () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign })
+
+    await fireEvent.click(getByRole('link'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
+  })
+
+  it('Should render link without any content by default', () => {
+    /** @ts-ignore */
+    const { container } = render(Display, { campaign: { cta: {}, content: {} } })
+
+    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a'))).toBeTruthy()
+    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a')).children).toHaveLength(0)
+  })
+
+  it('Should render disclaimer when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
+
+    expect(getByText('Some disclaimer')).toBeTruthy()
+  })
+
+  it('Should render logo when given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign: { cta: {}, content: { header_logo: 'test' } } })
+
+    expect(getByRole('presentation').getAttribute('src')).toBe('test')
+  })
+
+  it('Should render background image when given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign: { cta: {}, content: { image: 'test' } } })
+
+    expect(getByRole('presentation').getAttribute('src')).toBe('test')
+  })
+
+  it('Should render header when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some header' } } })
+
+    expect(getByText('Some header')).toBeTruthy()
+  })
+
+  it('Should render subheader when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some subheader' } } })
+
+    expect(getByText('Some subheader')).toBeTruthy()
+  })
+
+  it('Should render button when cta header is given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: { header: 'Some button label' }, content: {} } })
+
+    expect(getByText('Some button label')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,104 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import TopScroll from '../../../../routes/components/Ads/TopScroll.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+export const campaign = {
+  campaign_format: 'top_scroll',
+  campaign_type: 'video',
+  campaign_platforms: ['web', 'android_app', 'ios_app'],
+  campaign_name: 'some_campaign_NL',
+  campaign_start: '2025-04-24T00:00:00Z',
+  campaign_end: '2025-04-30T23:59:00Z',
+  campaign_region: 'nl',
+  content: {
+    header: 'Some top scroll header',
+    header_logo: 'https://example.com/',
+    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    subheader: null,
+    image: 'https://example.com/',
+    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    video: null,
+    format: null,
+  },
+  cta: {
+    header: 'Button Label',
+    subheader: null,
+    image: null,
+    image_uuid: null,
+    url: 'https://google.com/',
+  },
+  content_playlist: null,
+  provider: null,
+  impression_trackers: [],
+  target_title_uuid: null,
+  target_title_sid: null,
+  backfill_providers: [],
+  autogenerated: false,
+  enabled: true,
+  hide_imdb_score: false,
+  hide_sponsored_message: false,
+  disclaimer: 'Some disclaimer',
+}
+
+describe('TopScroll.svelte', () => {
+  it('Should render the given content', () => {
+    /** @ts-ignore */
+    const { getByText, container } = render(TopScroll, { campaign })
+
+    expect(getByText(campaign.cta.header)).toBeTruthy()
+    expect(getByText(campaign.content.header)).toBeTruthy()
+    expect(container.querySelector('.tooltip')).toBeTruthy()
+  })
+
+  it('Should not show disclaimer when not given', async () => {
+    const { getByText, container } = render(TopScroll, {
+      /** @ts-ignore */
+      campaign: { ...campaign, disclaimer: null },
+    })
+
+    await waitFor(() => getByText(campaign.cta.header))
+
+    expect(container.querySelector('.tooltip')).not.toBeTruthy()
+  })
+
+  it('Should toggle disclaimer on click', async () => {
+    /** @ts-ignore */
+    const { getByText, container, queryByText } = render(TopScroll, { campaign })
+
+    await waitFor(() => getByText(campaign.cta.header))
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.tooltip')))
+    expect(getByText(campaign.disclaimer)).toBeTruthy()
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.tooltip')))
+    expect(queryByText(campaign.disclaimer)).not.toBeTruthy()
+  })
+
+  it('Should fire track even on click', async () => {
+    /** @ts-ignore */
+    const { getByRole } = render(TopScroll, { campaign })
+
+    await fireEvent.click(getByRole('link'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TopScrollClick, null, { campaign_name: campaign.campaign_name })
+  })
+
+  it('Should render as simple variant when content format is large', async () => {
+    const simpleCampaign = { ...campaign, content: { ...campaign.content, format: 'large' } }
+    /** @ts-ignore */
+    const { queryByText, container } = render(TopScroll, { campaign: simpleCampaign })
+
+    expect(queryByText(simpleCampaign.content.header)).not.toBeTruthy()
+    expect(queryByText(simpleCampaign.cta.header)).not.toBeTruthy()
+    expect(container.querySelector('.background')).not.toBeTruthy()
+    expect(container.querySelector('.disclaimer')).not.toBeTruthy()
+    expect(container.querySelector('.content-image')).toBeTruthy()
+  })
+})

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

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