@playpilot/tpi 5.17.0 → 5.18.0

package/src/lib/token.ts

@@ -0,0 +1,3 @@
+export function getApiToken(): string | undefined {
+  return window.PlayPilotLinkInjections?.token
+}

package/src/lib/tracking.ts

@@ -1,7 +1,7 @@
-import { hasConsentedTo } from "./consent"
-import { mobileBreakpoint } from "./constants"
-import type { TitleData } from "./types/title"
-import { getFullUrlPath } from "./url"
+import { hasConsentedTo } from './consent'
+import { mobileBreakpoint } from './constants'
+import type { TitleData } from './types/title'
+import { getFullUrlPath } from './url'
 
 const baseUrl = 'https://insights.playpilot.net'
 
@@ -53,7 +53,7 @@ export async function track(event: string, title: TitleData | null = null, paylo
 }
 
 /** Save this event to the window object. Used when calling .debug() */
-function pushEventToWindow(data: { event: string, payload: Record<string, any> }) {
+function pushEventToWindow(data: { event: string, payload: Record<string, any> }): void {
   if (!window.PlayPilotLinkInjections.tracked_events) window.PlayPilotLinkInjections.tracked_events = []
   window.PlayPilotLinkInjections.tracked_events?.push(data)
 }

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

@@ -1,4 +1,4 @@
-import type { ScriptConfig } from "./script"
+import type { ScriptConfig } from './script'
 
 declare global {
   interface Window {

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

@@ -1,4 +1,4 @@
-import type { TitleData } from "./title"
+import type { TitleData } from './title'
 
 export type LinkInjection = {
   sid: string

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

@@ -1,21 +1,36 @@
-import type { Campaign } from "./campaign"
-import type { ConsentOptions } from "./consent"
-import type { LinkInjection } from "./injection"
+import type { Campaign } from './campaign'
+import type { ConsentOptions } from './consent'
+import type { LinkInjection } from './injection'
 
 export type ScriptConfig = {
+  // The API token to authenticate with the backend.
   token: string
+  // Editiorial token as given by the Partner Portal, required to access and authenticate the Editor.
   editorial_token?: string
+  // The organization sid is returned from the external pages endpoint and is set by the script.
   organization_sid?: string | null,
+  // The domain sid is returned from the external pages endpoint and is set by the script.
   domain_sid?: string | null,
+  // Selector for the article content. Should be as narrow as possible. Will fall back to `article` > `main` > `body` if not provided. Can be set via config endpoint.
   selector?: string
+  // Selector for the after article playlinks. Will be placed _after_ the given selector.
   after_article_selector?: string
+  // Selector to change the insert position of the after article playlinks. Should only be used if no viable selector can be given with `after_article_selector`.
   after_article_insert_position?: InsertPosition | ''
+  // The language of the page will be inferred from the html `lang` attribute. Can be set manually using this option in the config object.
   language?: string | null
+  // Set to the last success external-pages fetch.
   last_successful_fetch?: LinkInjectionResponse | null
+  // Lists all tracked events through the `track()` function.
   tracked_events?: { event: string, payload: Record<string, any> }[]
+  // Lists all split test identifiers as created by each running split test. Identifiers are only created when a split test is fired.
   split_test_identifiers?: Record<string, number>
+  // All link injections as returned from external-pages, with AI and manual injections merged.
   evaluated_link_injections?: LinkInjection[]
+  // By default the script requires consent from the user through tcfapi. Can be disabled using this setting.
   require_consent?: boolean
+  // Used to check if a user has consented via tcfapi to various consent categories.
   consents?: ConsentOptions
+  // All ads as fetched from the ads endpoint. This is used as the primary store for ads, each individual ads gets it's data from here.
   ads?: Campaign[]
 }

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

@@ -1,4 +1,4 @@
-import type { LinkInjectionResponse } from "./injection"
+import type { LinkInjectionResponse } from './injection'
 
 export type SessionResponse = Omit<
   LinkInjectionResponse,

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

@@ -1,5 +1,5 @@
-import type { ParticipantData } from "./participant"
-import type { PlaylinkData } from "./playlink"
+import type { ParticipantData } from './participant'
+import type { PlaylinkData } from './playlink'
 
 export type TitleData = {
   sid: string

package/src/main.ts

@@ -1,6 +1,6 @@
 import { mount } from 'svelte'
 import App from './routes/+page.svelte'
-import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/linkInjection'
+import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injection'
 import { getPageMetaData } from '$lib/meta'
 import { setConsent } from '$lib/consent'
 import type { Campaign } from '$lib/types/campaign'
@@ -81,36 +81,36 @@ window.PlayPilotLinkInjections = {
     const elements = getLinkInjectionElements(parentElement)
 
     console.groupCollapsed('Config')
-      console.table(Object.entries(this))
+    console.table(Object.entries(this))
     console.groupEnd()
 
     console.groupCollapsed('Elements')
-      console.log('Parent element', parentElement)
-      console.log('Valid elements', elements)
+    console.log('Parent element', parentElement)
+    console.log('Valid elements', elements)
     console.groupEnd()
 
     console.groupCollapsed('Last fetch')
-      console.log(this.last_successful_fetch)
+    console.log(this.last_successful_fetch)
     console.groupEnd()
 
     console.groupCollapsed('Meta')
-      console.log(getPageMetaData())
+    console.log(getPageMetaData())
     console.groupEnd()
 
     console.groupCollapsed('Page text')
-      console.log(getPageText(elements))
+    console.log(getPageText(elements))
     console.groupEnd()
 
     console.groupCollapsed('Evaluated injections')
-      console.log(this.evaluated_link_injections)
+    console.log(this.evaluated_link_injections)
     console.groupEnd()
 
     console.groupCollapsed('Tracked events')
-      console.log(this.tracked_events)
+    console.log(this.tracked_events)
     console.groupEnd()
 
     console.groupCollapsed('Split tests')
-      console.log(this.split_test_identifiers)
+    console.log(this.split_test_identifiers)
     console.groupEnd()
   },
 
@@ -135,13 +135,13 @@ window.PlayPilotLinkInjections = {
         subheader: 'Some cta subheader',
         url: 'https://google.com/',
         image: null,
-        image_uuid: null
+        image_uuid: null,
       },
       disclaimer: 'Some disclaimer',
     }
 
     this.ads = [{ ...campaign, ...override }]
-  }
+  },
 }
 
 export default window.PlayPilotLinkInjections

package/src/routes/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
-  import { fetchConfig, pollLinkInjections } from '$lib/api'
-  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
+  import { pollLinkInjections } from '$lib/api/externalPages'
+  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/injection'
   import { setTrackingSids, track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/auth'
+  import { fetchAds } from '$lib/api/ads'
+  import { fetchConfig } from '$lib/api/config'
+  import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
@@ -14,7 +16,6 @@
   import TrackingPixels from './components/TrackingPixels.svelte'
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
-  import { fetchAds } from '$lib/ads'
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])

package/src/routes/components/Debugger.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { SplitTest } from '$lib/enums/SplitTest'
   import { onDestroy } from 'svelte'
 
   const secrets = ['tpidebug', 'debugtpi']
@@ -12,7 +13,7 @@
     if (interval) clearInterval(interval)
   })
 
-  function dataToReadable() {
+  function dataToReadable(): Record<string, undefined | Record<string, any>[]> {
     const data = window.PlayPilotLinkInjections
 
     const succesfulInjections = data.evaluated_link_injections?.filter(injection => !injection.failed) || []
@@ -65,6 +66,16 @@
       disclaimer: 'Disclaimer',
     })
   }
+
+  function forceSplitTestVariant(variantIndex: number): void {
+    window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+    Object.values(SplitTest).forEach(({ key, numberOfVariants }) => {
+      const variantDivide = 1 / numberOfVariants
+
+      window.PlayPilotLinkInjections.split_test_identifiers![key] = Math.min(variantDivide * variantIndex, 1)
+    })
+  }
 </script>
 
 <svelte:window {onkeydown} />
@@ -98,6 +109,14 @@
 
     <button onclick={() => insertMockAd('card')}>Insert mock card ad</button>
     <button onclick={() => insertMockAd('top_scroll')}>Insert mock top scroll ad</button>
+
+    <hr />
+
+    <small>Force split test variant</small>
+
+    {#each { length: 4 }, i}
+      <button onclick={() => forceSplitTestVariant(i)}>{i}</button>
+    {/each}
   </div>
 {/if}
 
@@ -119,6 +138,11 @@
     color: var(--playpilot-primary);
     font-family: inherit;
     font-weight: bold;
+
+    &:hover {
+      color: black;
+      background: var(--playpilot-primary);
+    }
   }
 
   .debugger {
@@ -134,6 +158,7 @@
     overflow: auto;
     color: white;
     font-family: "Consolas", monospace;
+    color: var(--playpilot-primary);
   }
 
   .item {

package/src/routes/components/Editorial/Editor.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+  import type { Position } from '$lib/types/position'
+  import type { LinkInjection } from '$lib/types/injection'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { heading } from '$lib/actions/heading'
+  import { separateLinkInjectionTypes } from '$lib/injection'
+  import { saveLinkInjections } from '$lib/api/externalPages'
   import { fade, fly, slide } from 'svelte/transition'
   import EditorItem from './EditorItem.svelte'
   import DragHandle from './DragHandle.svelte'
@@ -7,15 +14,8 @@
   import ManualInjection from './ManualInjection.svelte'
   import RoundButton from '../RoundButton.svelte'
   import Session from './Session.svelte'
-  import { saveLinkInjections } from '$lib/api'
   import { untrack } from 'svelte'
   import AIIndicator from './AIIndicator.svelte'
-  import type { Position } from '$lib/types/position'
-  import type { LinkInjection } from '$lib/types/injection'
-  import { track } from '$lib/tracking'
-  import { TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { heading } from '$lib/actions/heading'
-  import { separateLinkInjectionTypes } from '$lib/linkInjection'
 
   interface Props {
     linkInjections: LinkInjection[],

package/src/routes/components/Editorial/EditorItem.svelte

@@ -13,7 +13,7 @@
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
   import { cleanPhrase, truncateAroundPhrase } from '$lib/text'
-  import { getLinkInjectionElements, getLinkInjectionsParentElement, isValidPlaylinkType } from '$lib/linkInjection'
+  import { getLinkInjectionElements, getLinkInjectionsParentElement, isValidPlaylinkType } from '$lib/injection'
   import { imagePlaceholderDataUrl } from '$lib/constants'
   import { removeImageUrlPrefix } from '$lib/image'
   import ReportIssueModal from './ReportIssueModal.svelte'

package/src/routes/components/Editorial/ManualInjection.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
+  import type { LinkInjection } from '$lib/types/injection'
+  import type { TitleData } from '$lib/types/title'
   import { onMount } from 'svelte'
+  import { playPilotBaseUrl } from '$lib/constants'
+  import { generateInjectionKey } from '$lib/api/externalPages'
+  import { getLinkInjectionsParentElement } from '$lib/injection'
+  import { heading } from '$lib/actions/heading'
+  import { findSurroundingPhrases, cleanPhrase } from '$lib/text'
+  import { getIndexOfSelection } from '$lib/selection'
   import IconBack from '../Icons/IconBack.svelte'
   import RoundButton from '../RoundButton.svelte'
   import Alert from './Alert.svelte'
   import TextInput from './TextInput.svelte'
   import TitleSearch from './Search/TitleSearch.svelte'
-  import { playPilotBaseUrl } from '$lib/constants'
-  import { generateInjectionKey } from '$lib/api'
-  import { getLinkInjectionsParentElement } from '$lib/linkInjection'
-  import type { LinkInjection } from '$lib/types/injection'
-  import type { TitleData } from '$lib/types/title'
-  import { heading } from '$lib/actions/heading'
-  import { findSurroundingPhrases, cleanPhrase } from '$lib/text'
-  import { getIndexOfSelection } from '$lib/selection'
 
   interface Props {
     pageText: string

package/src/routes/components/Editorial/PlaylinkTypeSelect.svelte

@@ -3,7 +3,7 @@
   import IconAlign from '../Icons/IconAlign.svelte'
   import Switch from './Switch.svelte'
   import type { LinkInjection } from '$lib/types/injection'
-  import { isValidPlaylinkType } from '$lib/linkInjection'
+  import { isValidPlaylinkType } from '$lib/injection'
   import Alert from './Alert.svelte'
 
   interface Props {

package/src/routes/components/Editorial/Search/TitleSearch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { searchTitles } from '$lib/search'
+  import { searchTitles } from '$lib/api/search'
   import type { TitleData } from '$lib/types/title'
   import TextInput from '../TextInput.svelte'
   import TitleSearchItem from './TitleSearchItem.svelte'

package/src/routes/components/Editorial/Search/TitleSearchItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { imagePlaceholderDataUrl, playPilotBaseUrl } from '$lib/constants'
+  import { imagePlaceholderDataUrl } from '$lib/constants'
   import { removeImageUrlPrefix } from '$lib/image'
+  import { titleUrl } from '$lib/routes'
   import type { TitleData } from '$lib/types/title'
   import IconIMDb from '../../Icons/IconIMDb.svelte'
   import IconNewTab from '../../Icons/IconNewTab.svelte'
@@ -36,7 +37,7 @@
   </div>
 
   <a
-    href="{playPilotBaseUrl}/{title.type}/{title.slug}"
+    href={titleUrl(title)}
     target="_blank"
     class="open-in-new-tab"
     onclick={event => event.stopImmediatePropagation()}>

package/src/routes/components/Editorial/Session.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fetchAsSession, isAllowedToEdit, saveCurrentSession, sessionPollPeriodMilliseconds } from '$lib/session'
+  import { fetchAsSession, isAllowedToEdit, saveCurrentSession, sessionPollPeriodMilliseconds } from '$lib/api/session'
   import { onMount } from 'svelte'
   import Alert from './Alert.svelte'
 

package/src/routes/components/ListTitle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { playPilotBaseUrl } from '$lib/constants'
+  import { titleUrl } from '$lib/routes'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { t } from '$lib/localization'
   import { mergePlaylinks } from '$lib/playlink'
@@ -29,7 +29,7 @@
   }
 </script>
 
-<a class="title" href="{playPilotBaseUrl}/{title.type}/{title.slug}" {onclick}>
+<a class="title" href={titleUrl(title)} {onclick}>
   <div class="poster">
     <TitlePoster {title} width={30} height={43} />
   </div>

package/src/routes/components/ParticipantModal.svelte

@@ -3,6 +3,9 @@
   import Modal from './Modal.svelte'
   import Participant from './Participant.svelte'
   import type { ParticipantData } from '$lib/types/participant'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+  import { onMount } from 'svelte'
 
   interface Props {
     participant: ParticipantData
@@ -22,6 +25,14 @@
   }, initialScrollPosition = 0 }: Props = $props()
 
   let windowWidth = $state(0)
+
+  track(TrackingEvent.ParticipantModalView, null, { participant: participant.name })
+
+  onMount(() => {
+    const openTimestamp = Date.now()
+
+    return () => track(TrackingEvent.ParticipantModalClose, null, { participant: participant.name, time_spent: Date.now() - openTimestamp })
+  })
 </script>
 
 <svelte:window bind:innerWidth={windowWidth} />

package/src/routes/components/Playlinks.svelte

@@ -6,9 +6,9 @@
   import type { PlaylinkData } from '$lib/types/playlink'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
+  import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
-  import { campaignToPlaylink, getFirstAdOfType } from '$lib/ads'
 
   interface Props {
     playlinks: PlaylinkData[]

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

@@ -1,7 +1,15 @@
 <script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
   import TitlesRail from './TitlesRail.svelte'
 
+  interface Props {
+    title: TitleData
+  }
+
+  const { title }: Props = $props()
+
   const titles = fetchTitles()
 
   async function fetchTitles(): Promise<TitleData[]> {
@@ -13,4 +21,4 @@
   }
 </script>
 
-<TitlesRail {titles} heading="Similar movies & shows" />
+<TitlesRail {titles} heading="Similar movies & shows" onclick={(targetTitle) => track(TrackingEvent.SimilarTitleClick, targetTitle, { title_source: title.original_title })} />

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

@@ -1,16 +1,22 @@
 <script lang="ts">
   import TitlePoster from '../TitlePoster.svelte'
   import Rail from './Rail.svelte'
-  import { playPilotBaseUrl } from '$lib/constants'
   import type { TitleData } from '$lib/types/title'
   import { openModal } from '$lib/modal'
+  import { titleUrl } from '$lib/routes'
 
   interface Props {
     titles: Promise<TitleData[]> | TitleData[]
-    heading?: string
+    heading?: string,
+    onclick?: (title: TitleData) => void
   }
 
-  const { titles, heading = '' }: Props = $props()
+  const { titles, heading = '', onclick = () => null }: Props = $props()
+
+  function openTitle(event: MouseEvent, title: TitleData): void {
+    openModal({ event, data: title })
+    onclick(title)
+  }
 </script>
 
 <div class="titles">
@@ -28,14 +34,12 @@
       {/each}
     {:then titles}
       {#each titles as title}
-        {@const href = `${playPilotBaseUrl}/${title.type}/${title.slug}`}
-
         <div class="title" data-testid="title">
-          <a class="poster" {href} onclick={(event) => openModal({ event, data: title })}>
+          <a class="poster" href={titleUrl(title)} onclick={(event) => openTitle(event, title)}>
             <TitlePoster {title} width={96} height={144} />
           </a>
 
-          <a {href} class="heading" onclick={(event) => openModal({ event, data: title })}>
+          <a href={titleUrl(title)} class="heading" onclick={(event) => openTitle(event, title)}>
             {title.title}
           </a>
         </div>

package/src/routes/components/TitleModal.svelte

@@ -2,12 +2,12 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
+  import { getFirstAdOfType } from '$lib/api/ads'
   import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
-  import { getFirstAdOfType } from '$lib/ads'
 
   interface Props {
     title: TitleData
@@ -19,10 +19,10 @@
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
 
-  track(TrackingEvent.TitleModalView, title)
-
   let hasTrackedScrolling = false
 
+  track(TrackingEvent.TitleModalView, title)
+
   onMount(() => {
     const openTimestamp = Date.now()
 

package/src/routes/components/TitlePopover.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
-  import { getFirstAdOfType } from '$lib/ads'
+  import { getFirstAdOfType } from '$lib/api/ads'
   import type { TitleData } from '$lib/types/title'
   import { onMount } from 'svelte'
   import Popover from './Popover.svelte'

package/src/tests/lib/{ads.test.js → api/ads.test.js}

@@ -1,10 +1,15 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
-import { fakeFetch } from '../helpers'
 
-import { fetchAds, getFirstAdOfType } from '$lib/ads'
+import { fetchAds, getFirstAdOfType } from '$lib/api/ads'
 import { hasConsentedTo } from '$lib/consent'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { api } from '$lib/api/api'
+
+vi.mock('$lib/api/api', () => ({
+  api: vi.fn(),
+}))
+
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -14,9 +19,10 @@ vi.mock('$lib/consent', () => ({
   hasConsentedTo: vi.fn(() => true),
 }))
 
-describe('$lib/ads', () => {
+describe('$lib/api/ads', () => {
   afterEach(() => {
     vi.resetAllMocks()
+
     // @ts-ignore
     window.PlayPilotLinkInjections = null
 
@@ -29,35 +35,32 @@ describe('$lib/ads', () => {
       window.PlayPilotLinkInjections = { token: 'a' }
     })
 
-    it('Should call fetch with given url', async () => {
-      fakeFetch({ response: 'Some response' })
+    it('Should call api with given url', async () => {
+      vi.mocked(api).mockResolvedValueOnce('Some response')
 
       const response = await fetchAds()
 
       expect(response).toBe('Some response')
-      expect(global.fetch).toHaveBeenCalledWith(
-        expect.stringContaining('api-token'),
-        expect.objectContaining({}),
-      )
+      expect(api).toHaveBeenCalledWith(expect.stringContaining('api-token'))
     })
 
-    it('Should not call fetch if no api token is present', async () => {
+    it('Should not call api 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()
+      expect(api).not.toHaveBeenCalled()
     })
 
-    it('Should not call fetch if user did not consent to ads', async () => {
+    it('Should not call api if user did not consent to ads', async () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => false)
 
       await fetchAds()
-      expect(global.fetch).not.toHaveBeenCalled()
+      expect(api).not.toHaveBeenCalled()
     })
 
     it('Should fire track event when ads failed to fetch', async () => {
-      fakeFetch({ ok: false, status: 505 })
+      vi.mocked(api).mockRejectedValueOnce({ ok: false, status: 505 })
 
       await expect(async () => await fetchAds()).rejects.toThrowError()
       expect(track).toHaveBeenCalledWith(TrackingEvent.AdsFetchFailed, null, { status: 505 })

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

@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { fakeFetch } from '../../helpers'
+import { api } from '$lib/api/api'
+
+describe('$lib/api/api', () => {
+  beforeEach(() => {
+    fakeFetch()
+  })
+
+  describe('$lib/api', () => {
+    describe('api', () => {
+      it('Should fetch and return result', async () => {
+        fakeFetch({ response: 'Some response' })
+
+        const result = await api('/some-path')
+
+        expect(global.fetch).toHaveBeenCalledWith(
+          expect.stringContaining('/some-path'),
+          expect.objectContaining({
+            headers: expect.any(Object),
+            body: null,
+            method: 'GET',
+          }),
+        )
+        expect(result).toBe('Some response')
+      })
+
+      it('Should fetch with POST and given stringified body', async () => {
+        fakeFetch({ response: 'Some response' })
+
+        await api('/some-path', { method: 'POST', body: { key: 'some value' } })
+
+        expect(global.fetch).toHaveBeenCalledWith(
+          expect.stringContaining('/some-path'),
+          expect.objectContaining({
+            method: 'POST',
+            body: '{"key":"some value"}',
+          }),
+        )
+      })
+
+      it('Should return error when response was not ok', async () => {
+        fakeFetch({ ok: false })
+
+        await expect(async () => await api('/some-path')).rejects.toThrow()
+      })
+    })
+  })
+})