@playpilot/tpi 8.14.0-beta.4 → 8.14.0

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

@@ -0,0 +1,160 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import { generateInjection } from '../helpers'
+import { insertInTextWidgets, clearInTextWidgets, inTextWidgetInsertedComponents } from '$lib/inTextWidgets'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+describe('inTextWidgets.ts', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    document.body.innerHTML = ''
+
+    clearInTextWidgets()
+  })
+
+  describe('insertInTextWidgets', () => {
+    it('Should not mount any component if no linkInjections are given', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      insertInTextWidgets([])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should not mount any component if no widget targets exist', () => {
+      document.body.innerHTML = '<div>No widgets here</div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should mount a component for a known widget type', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledOnce()
+      expect(mount).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          target: document.querySelector('[data-playpilot-widget="tpi-rail"]'),
+          props: { linkInjections: [injection] },
+        }),
+      )
+    })
+
+    it('Should not mount a component for an unknown widget type', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="unknown-widget"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should mount components for multiple widget targets on the same page', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledTimes(2)
+    })
+
+    it('Should skip unknown widget targets and mount known ones', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="unknown-widget"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledOnce()
+    })
+
+    it('Should track inserted components', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(inTextWidgetInsertedComponents).toHaveLength(2)
+    })
+
+    it('Should clear previously inserted widgets before inserting new ones', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+      insertInTextWidgets([injection])
+
+      expect(unmount).toHaveBeenCalled()
+    })
+  })
+
+  describe('clearInTextWidgets', () => {
+    it('Should unmount all inserted components', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      insertInTextWidgets([injection])
+
+      clearInTextWidgets()
+
+      expect(unmount).toHaveBeenCalled()
+    })
+
+    it('Should clear innerHTML of all widget elements', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"><span>leftover content</span></div>
+      `
+
+      clearInTextWidgets()
+
+      expect(/** @type {HTMLElement} */ (document.querySelector('[data-playpilot-widget]')).innerHTML).toBe('')
+    })
+
+    it('Should reset inTextWidgetInsertedComponents to empty array', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      insertInTextWidgets([injection])
+
+      expect(inTextWidgetInsertedComponents.length).toBe(1)
+
+      clearInTextWidgets()
+
+      expect(inTextWidgetInsertedComponents.length).toBe(0)
+    })
+
+    it('Should do nothing if no components are present', () => {
+      clearInTextWidgets()
+
+      expect(unmount).not.toHaveBeenCalled()
+    })
+  })
+})

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

@@ -6,7 +6,6 @@ import { mount, unmount } from 'svelte'
 import { fakeFetch, generateInjection } from '../helpers'
 import { openModalForInjectedLink } from '$lib/modal'
 import { getLinkInjectionElements } from '$lib/injectionElements'
-import { titleUrl } from '$lib/routes'
 
 vi.mock('svelte', () => ({
   mount: vi.fn(),
@@ -65,9 +64,8 @@ describe('injection.ts', () => {
 
       const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
 
-      // @ts-ignore
-      expect(link.href).toBe(titleUrl(injection.title_details))
       expect(link.innerText).toBe(injection.title)
+      expect(link.href).toBe(injection.playpilot_url)
     })
 
     it('Should replace given words as expected when more than 1 injection per sentence is present', () => {
@@ -85,13 +83,11 @@ describe('injection.ts', () => {
 
       const links = /** @type {HTMLAnchorElement[]} */ (Array.from(document.querySelectorAll('a')))
 
-      // @ts-ignore
-      expect(links[0].href).toBe(titleUrl(linkInjections[0].title_details))
       expect(links[0].innerText).toBe(linkInjections[0].title)
+      expect(links[0].href).toBe(linkInjections[0].playpilot_url)
 
-      // @ts-ignore
-      expect(links[1].href).toBe(titleUrl(linkInjections[1].title_details))
       expect(links[1].innerText).toBe(linkInjections[1].title)
+      expect(links[1].href).toBe(linkInjections[1].playpilot_url)
     })
 
     it('Should ignore injections that are marked as inactive', () => {
@@ -950,43 +946,6 @@ describe('injection.ts', () => {
 
       expect(document.querySelector('a')?.closest('[data-playpilot-injection-key]')).toBeTruthy()
     })
-
-    describe('config.open_tpi_links_in_explore', () => {
-      beforeEach(() => {
-        window.PlayPilotLinkInjections.config = {
-          open_tpi_links_in_explore: true,
-          explore_navigation_path: 'https://some-path.com/explore',
-        }
-      })
-
-      it('Should use href with explore links if open_tpi_links_in_explore is true', () => {
-        const injection = generateInjection('This is a sentence with an injection.', 'an injection')
-
-        document.body.innerHTML = `<p>${injection.sentence}</p>`
-
-        const elements = Array.from(document.querySelectorAll('p'))
-
-        injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
-
-        const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
-        expect(link.href).toBe(window.PlayPilotLinkInjections.config.explore_navigation_path + `?route=title&sid=${injection.title_details?.sid}`)
-        expect(link.target).not.toBeTruthy()
-      })
-
-      it('Should not open modal when link is clicked when open_tpi_links_in_explore is true', 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')
-
-        injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
-
-        const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
-        await fireEvent.click(link)
-
-        expect(openModalForInjectedLink).not.toHaveBeenCalled()
-      })
-    })
   })
 
   describe('clearLinkInjections', () => {

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

@@ -1,10 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { exploreTitleUrl, titleUrl } from '$lib/routes'
+import { titleUrl } from '$lib/routes'
 import { playPilotBaseUrl } from '$lib/constants'
-import { title } from '$lib/fakeData'
 
 describe('$lib/routes', () => {
-  describe('titleUrl', () => {
+  describe('mergePlaylinks', () => {
     it('Should return url for given title', () => {
       // @ts-ignore
       expect(titleUrl({ type: 'series', slug: 'some-slug' })).toBe(`${playPilotBaseUrl}/series/some-slug/`)
@@ -13,15 +12,4 @@ describe('$lib/routes', () => {
       expect(titleUrl({ type: 'movie', slug: 'some-other-slug' })).toBe(`${playPilotBaseUrl}/movie/some-other-slug/`)
     })
   })
-
-  describe('exploreTitleUrl', () => {
-    it('Should return url for given title', () => {
-      window.PlayPilotLinkInjections.config = {
-        open_tpi_links_in_explore: true,
-        explore_navigation_path: 'https://some-path.com/explore',
-      }
-
-      expect(exploreTitleUrl(title)).toBe(`https://some-path.com/explore?route=title&sid=${title.sid}`)
-    })
-  })
 })

package/src/tests/routes/components/Widgets/InjectionsWidgetRail.test.js

@@ -0,0 +1,28 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import InjectionsWidgetRail from '../../../../routes/components/Widgets/InjectionsWidgetRail.svelte'
+import { linkInjections } from '$lib/fakeData'
+
+describe('InjectionsWidgetRail.svelte', () => {
+  it('Should render unique titles for given injections', () => {
+    const injections = [linkInjections[0], linkInjections[0], linkInjections[1], linkInjections[2], linkInjections[2]]
+
+    const { getAllByTestId } = render(InjectionsWidgetRail, { linkInjections: injections })
+
+    expect(getAllByTestId('title')).toHaveLength(3)
+  })
+
+  it('Should not render if no injections were given', () => {
+    const { queryByTestId } = render(InjectionsWidgetRail, { linkInjections: [] })
+
+    expect(queryByTestId('widget')).not.toBeTruthy()
+  })
+
+  it('Should not render if injections contained no valid titles', () => {
+    // @ts-ignore
+    const { queryByTestId } = render(InjectionsWidgetRail, { linkInjections: [{ ...linkInjections, title_details: null }] })
+
+    expect(queryByTestId('widget')).not.toBeTruthy()
+  })
+})

package/src/routes/components/Explore/Routes/ExploreTitle.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-  import { fetchTitleBySid } from '$lib/api/titles'
-  import { mobileBreakpoint } from '$lib/constants'
-  import { t } from '$lib/localization'
-  import Button from '../../Button.svelte'
-  import IconArrow from '../../Icons/IconArrow.svelte'
-  import Title from '../../Title.svelte'
-
-  interface Props {
-    navigate?: (key: string) => void
-  }
-
-  const { navigate = () => null }: Props = $props()
-
-  let screenWidth = $state(window.innerWidth)
-
-  const isMobile = $derived(screenWidth < mobileBreakpoint)
-  const sid = new URL(document.location.toString()).searchParams.get('sid')
-</script>
-
-<svelte:window bind:innerWidth={screenWidth} />
-
-{#snippet empty()}
-  {@render back()}
-
-  <p class="empty">{t('Page Not Found')}</p>
-{/snippet}
-
-{#snippet back(offset = false)}
-  <div class="back" class:offset>
-    <Button variant="link" onclick={() => { navigate('home') }}>
-      <IconArrow direction="left" />
-      {t('Home')}
-    </Button>
-  </div>
-{/snippet}
-
-{#if sid}
-  {#await fetchTitleBySid(sid)}
-    {@render back()}
-
-    Loading...
-  {:then title}
-    {@render back(true)}
-
-    <div class="title" data-testid="title">
-      <Title {title} useVideoBackground={isMobile} />
-    </div>
-  {:catch}
-    {@render empty()}
-  {/await}
-{:else}
-  {@render empty()}
-{/if}
-
-<style lang="scss">
-  .title {
-    --playpilot-description-max-width: 600px;
-    --playpilot-playlinks-max-width: 600px;
-    position: relative;
-    border-radius: theme(border-radius);
-    overflow: hidden;
-    margin-top: margin(1);
-
-    @include desktop() {
-      --playpilot-detail-header-offset: #{margin(5)};
-      --playpilot-detail-background-height: #{margin(35)};
-      --playpilot-detail-background-opacity: 0.5;
-    }
-  }
-
-  .back {
-    --playpilot-button-text-color: white;
-    font-weight: theme(font-bold);
-
-    &.offset {
-      z-index: 1;
-      position: absolute;
-      margin-left: margin(1);
-      margin-top: margin(1);
-    }
-  }
-
-  .empty {
-    margin-top: margin(1);
-    padding: margin(1);
-    border: 1px solid theme(content);
-    max-width: margin(20);
-    border-radius: theme(border-radius);
-    font-size: theme(font-size-large);
-    font-weight: theme(font-bold);
-    color: theme(text-color);
-  }
-</style>

package/src/tests/routes/components/Explore/Routes/ExploreTitle.test.js

@@ -1,87 +0,0 @@
-import { render, waitFor, fireEvent } from '@testing-library/svelte'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import TitleDetail from '../../../../../routes/components/Explore/Routes/ExploreTitle.svelte'
-import { fetchTitleBySid } from '$lib/api/titles'
-import { title } from '$lib/fakeData'
-
-vi.mock('$lib/api/titles', () => ({
-  fetchTitleBySid: vi.fn(),
-}))
-
-vi.mock('/src/routes/components/Title.svelte', () => ({
-  default: vi.fn(),
-}))
-
-describe('ExploreTitle.svelte', () => {
-  beforeEach(() => {
-    vi.resetAllMocks()
-    vi.mocked(fetchTitleBySid).mockResolvedValue(title)
-
-    history.pushState({}, '', '/')
-  })
-
-  it('Should render empty state when no sid is in the URL', async () => {
-    const { getByText } = render(TitleDetail)
-
-    await waitFor(() => {
-      expect(getByText('Page not found')).toBeTruthy()
-    })
-  })
-
-  it('Should call fetchTitleBySid with sid from URL', async () => {
-    history.pushState({}, '', '?sid=some-sid')
-
-    render(TitleDetail)
-
-    expect(fetchTitleBySid).toHaveBeenCalledWith('some-sid')
-  })
-
-  it('Should render loading state while fetching', async () => {
-    history.pushState({}, '', '?sid=some-sid')
-    vi.mocked(fetchTitleBySid).mockReturnValue(new Promise(() => {}))
-
-    const { getByText } = render(TitleDetail)
-
-    expect(getByText('Loading...')).toBeTruthy()
-  })
-
-  it('Should render the title when fetchTitleBySid resolves', async () => {
-    history.pushState({}, '', '?sid=some-sid')
-
-    const { getByTestId } = render(TitleDetail)
-
-    await waitFor(() => {
-      expect(getByTestId('title')).toBeTruthy()
-    })
-  })
-
-  it('Should render empty state when fetchTitleBySid rejects', async () => {
-    history.pushState({}, '', '?sid=some-sid')
-    vi.mocked(fetchTitleBySid).mockRejectedValue(new Error('Not found'))
-
-    const { getByText } = render(TitleDetail)
-
-    await waitFor(() => {
-      expect(getByText('Page not found')).toBeTruthy()
-    })
-  })
-
-  it('Should call navigate with "home" when back button is clicked', async () => {
-    history.pushState({}, '', '?sid=some-sid')
-
-    const navigate = vi.fn()
-
-    const { getByText } = render(TitleDetail, { navigate })
-
-    await fireEvent.click(getByText('Home'))
-
-    expect(navigate).toHaveBeenCalledWith('home')
-  })
-
-  it('Should not call fetchTitleBySid when no sid is in the URL', async () => {
-    render(TitleDetail)
-
-    expect(fetchTitleBySid).not.toHaveBeenCalled()
-  })
-})