@playpilot/tpi 8.13.0-beta.2 → 8.14.0-beta.2

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

@@ -1,9 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import { titleUrl } from '$lib/routes'
+import { exploreTitleUrl, titleUrl } from '$lib/routes'
 import { playPilotBaseUrl } from '$lib/constants'
+import { title } from '$lib/fakeData'
 
 describe('$lib/routes', () => {
-  describe('mergePlaylinks', () => {
+  describe('titleUrl', () => {
     it('Should return url for given title', () => {
       // @ts-ignore
       expect(titleUrl({ type: 'series', slug: 'some-slug' })).toBe(`${playPilotBaseUrl}/series/some-slug/`)
@@ -12,4 +13,15 @@ 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/Explore/Routes/ExploreTitle.test.js

@@ -0,0 +1,87 @@
+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()
+  })
+})

package/src/lib/inTextWidgets.ts

@@ -1,43 +0,0 @@
-import { mount, unmount } from 'svelte'
-import type { LinkInjection } from './types/injection'
-import InjectionsWidgetRail from '../routes/components/Widgets/InjectionsWidgetRail.svelte'
-
-const widgets: Record<string, any> = {
-  'tpi-rail': InjectionsWidgetRail,
-}
-
-export const inTextWidgetSelector = '[data-playpilot-widget]'
-
-export let inTextWidgetInsertedComponents: any[] = []
-
-export function insertInTextWidgets(linkInjections: LinkInjection[]): void {
-  clearInTextWidgets()
-
-  if (!linkInjections.length) return
-
-  const targets = document.querySelectorAll<HTMLElement>(inTextWidgetSelector)
-
-  targets.forEach(target => {
-    const widget = target.dataset.playpilotWidget || ''
-
-    const component = widgets[widget]
-
-    if (!component) return
-
-    const insertedComponent = mount(component, {
-      target,
-      props: {
-        linkInjections,
-      },
-    })
-
-    inTextWidgetInsertedComponents.push(insertedComponent)
-  })
-}
-
-export function clearInTextWidgets(): void {
-  inTextWidgetInsertedComponents.forEach(component => unmount(component))
-  document.querySelectorAll('[data-playpilot-widget]').forEach(element => element.innerHTML = '')
-
-  inTextWidgetInsertedComponents = []
-}

package/src/routes/components/Widgets/InjectionsWidgetRail.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { t } from '$lib/localization'
-  import { track } from '$lib/tracking'
-  import type { LinkInjection } from '$lib/types/injection'
-  import type { TitleData } from '$lib/types/title'
-  import TitlesRail from '../Rails/TitlesRail.svelte'
-
-  interface Props {
-    linkInjections: LinkInjection[]
-  }
-
-  const { linkInjections }: Props = $props()
-
-  let element: HTMLElement | null = $state(null)
-
-  // @ts-ignore
-  const heading = $derived(element?.parentNode?.dataset.heading || t('Mentioned In This Article'))
-
-  const titles: TitleData[] = $derived.by(() => {
-    const uniqueTitles: TitleData[] = []
-
-    linkInjections.forEach(injection => {
-      const title = injection.title_details!
-
-      if (!title) return
-      if (uniqueTitles.some(t => t.sid === title.sid)) return
-
-      uniqueTitles.push(title)
-    })
-
-    return uniqueTitles
-  })
-</script>
-
-{#if titles.length}
-  <div class="widget" bind:this={element} data-testid="widget">
-    <TitlesRail {titles} {heading} onclick={(title) => track(TrackingEvent.WidgetArticleRailTitleClick, title)} />
-  </div>
-{/if}
-
-<style lang="scss">
-  .widget {
-    --rail-margin: 0;
-    --playpilot-rails-arrow-background: black;
-    --playpilot-detail-background-light: black;
-    --playpilot-rail-title-text-color: currentColor;
-    --playpilot-rail-text-color: currentColor;
-    margin: margin(1) 0;
-  }
-</style>

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

@@ -1,160 +0,0 @@
-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/routes/components/Widgets/InjectionsWidgetRail.test.js

@@ -1,28 +0,0 @@
-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()
-  })
-})