@playpilot/tpi 8.30.0 → 8.32.0

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

@@ -1,10 +1,11 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { waitFor } from '@testing-library/svelte'
 
-import { fetchLinkInjections, pollLinkInjections, runAiBasedOnResponse } from '$lib/api/externalPages'
+import { fetchLinkInjections, pollLinkInjections, runAiBasedOnResponse, saveLinkInjections } from '$lib/api/externalPages'
 import { authorize, isEditorialModeEnabled } from '$lib/api/auth'
 import { Language } from '$lib/enums/Language'
 import { api } from '$lib/api/api'
+import { generateInjection } from '../../helpers'
 
 vi.mock('$lib/api/api', () => ({
   api: vi.fn(),
@@ -379,4 +380,136 @@ describe('$lib/api/externalPages', () => {
       expect(api).toHaveBeenCalled()
     })
   })
+
+  describe('saveLinkInjections', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a' }
+    })
+
+    const manualInjection = { ...generateInjection('Some injection', 'injection'), manual: true }
+    const aiInjection = generateInjection('Some other injection', 'other injection')
+
+    it('Should call api with POST method and only manual injections included', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      await saveLinkInjections([manualInjection, aiInjection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.stringContaining('api-token'),
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.objectContaining({
+            manual_injections: [
+              {
+                sid: manualInjection.sid,
+                title: manualInjection.title,
+                sentence: manualInjection.sentence,
+                phrase_before: manualInjection.phrase_before,
+                phrase_after: manualInjection.phrase_after,
+                playpilot_url: manualInjection.playpilot_url,
+                after_article: false,
+                after_article_style: null,
+                in_text: true,
+                inactive: false,
+                removed: false,
+                type: manualInjection.type,
+              },
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should apply given values for after_article, in_text, inactive and removed instead of defaults', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      const injection = {
+        ...manualInjection,
+        after_article: true,
+        after_article_style: 'modal_button',
+        in_text: false,
+        inactive: true,
+        removed: true,
+      }
+
+      // @ts-ignore
+      await saveLinkInjections([injection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            manual_injections: [
+              expect.objectContaining({
+                after_article: true,
+                after_article_style: 'modal_button',
+                in_text: false,
+                inactive: true,
+                removed: true,
+              }),
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should save with given type', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      await saveLinkInjections([{ ...manualInjection, type: 'participant' }])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            manual_injections: [
+              expect.objectContaining({
+                type: 'participant',
+              }),
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should include content_text_selector from window.PlayPilotLinkInjections.selector', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a', selector: '.some-element' }
+
+      // @ts-ignore
+      await saveLinkInjections([manualInjection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            content_text_selector: '.some-element',
+          }),
+        }),
+      )
+    })
+
+    it('Should return the original linkInjections array unchanged, including non-manual injections', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      const linkInjections = [manualInjection, aiInjection]
+
+      // @ts-ignore
+      const result = await saveLinkInjections(linkInjections)
+
+      expect(result).toEqual(linkInjections)
+    })
+
+    it('Should throw when the response is faulty', async () => {
+      vi.mocked(api).mockResolvedValueOnce(undefined)
+
+      // @ts-ignore
+      await expect(async () => await saveLinkInjections([manualInjection])).rejects.toThrowError('saveLinkInjections response was faulty')
+    })
+  })
 })

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

@@ -5,6 +5,7 @@ import { fetchTitlesForParticipant } from '$lib/api/participants'
 import { participants, title } from '$lib/fakeData'
 import { getApiToken } from '$lib/token'
 import { fakeFetch } from '../../helpers'
+import { Sorting } from '$lib/enums/Sorting'
 
 vi.mock('$lib/token', () => ({
   getApiToken: vi.fn(),
@@ -57,5 +58,21 @@ describe('$lib/api/participants', () => {
 
       expect(api).toHaveBeenCalledWith(`/titles/browse?api-token=some-token&language=en-US&region=nl&include_count=false&participant_sid=${participants[0].sid}&page=1`)
     })
+
+    it('Should use given sorting', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      await fetchTitlesForParticipant(participants[0], { page: 5, sorting: Sorting.New })
+
+      expect(api).toHaveBeenCalledWith(expect.stringContaining(`ordering=${Sorting.New}`))
+    })
+
+    it('Should not add ordering when not sorting is given', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      await fetchTitlesForParticipant(participants[0], { page: 5 })
+
+      expect(api).toHaveBeenCalledWith(expect.not.stringContaining('ordering'))
+    })
   })
 })

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -207,7 +207,6 @@ describe('EditorItem.svelte', () => {
 
     expect(queryByLabelText('Expand')).not.toBeTruthy()
     expect(getByText(fakeLinkInjections[4].participant_details?.name || '-')).toBeTruthy()
-    expect(container.querySelector('.poster')).not.toBeTruthy()
-    expect(container.querySelector('.placeholder-image')).toBeTruthy()
+    expect(container.querySelector('.participant')).toBeTruthy()
   })
 })

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -2,9 +2,10 @@ import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ManualInjection from '../../../../routes/components/Editorial/ManualInjection.svelte'
-import { searchTitles } from '$lib/api/search'
-import { title } from '$lib/fakeData'
+import { searchParticipants, searchTitles } from '$lib/api/search'
+import { participants, title } from '$lib/fakeData'
 import { getIndexOfSelection } from '$lib/selection'
+import { participantUrl, titleUrl } from '$lib/routes'
 
 function createSelectionMock() {
   const container = document.querySelector('div')
@@ -26,6 +27,7 @@ function createSelectionMock() {
 
 vi.mock('$lib/api/search', () => ({
   searchTitles: vi.fn(),
+  searchParticipants: vi.fn(),
 }))
 
 vi.mock('$lib/selection', () => ({
@@ -93,7 +95,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'text',
       sentence: 'Some text in a sentence',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -136,7 +138,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'text',
       sentence: 'Some text in a sentence',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -179,7 +181,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'Some title',
       sentence: 'Some title',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -222,7 +224,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'Some other paragraph',
       sentence: 'Some other paragraph',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -285,4 +287,39 @@ describe('ManualInjection.svelte', () => {
 
     await waitFor(() => expect(searchTitles).toHaveBeenCalled())
   })
+
+  it('Should save participants when selected', async () => {
+    createSelectionMock()
+
+    const participant = participants[0]
+
+    vi.mocked(searchParticipants).mockResolvedValueOnce([participant])
+    vi.mocked(getIndexOfSelection).mockReturnValueOnce({ start: 5, end: 10 })
+
+    const onsave = vi.fn()
+    const { getByText, getByLabelText } = render(ManualInjection, { onsave })
+
+    await fireEvent.mouseUp(window)
+    await fireEvent.click(getByText('Cast & Crew'))
+
+    await waitFor(async () => {
+      await fireEvent.input(getByLabelText('Search...'), { target: { value: 'test' } })
+      await fireEvent.click(getByText(participants[0].name))
+    })
+
+    await fireEvent.click(getByText('Add playlink'))
+
+    expect(onsave).toHaveBeenCalledWith({
+      sid: participants[0].sid,
+      title: 'text',
+      sentence: 'Some text in a sentence',
+      playpilot_url: participantUrl(participant),
+      key: expect.any(String),
+      participant_details: participant,
+      manual: true,
+      phrase_before: 'Some',
+      phrase_after: 'in a',
+      type: 'participant',
+    })
+  })
 })

package/src/tests/routes/components/Editorial/Search/{TitleSearch.test.js → TypeSearch.test.js}

@@ -1,21 +1,22 @@
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import TitleSearch from '../../../../../routes/components/Editorial/Search/TitleSearch.svelte'
-import { searchTitles } from '$lib/api/search'
+import TypeSearch from '../../../../../routes/components/Editorial/Search/TypeSearch.svelte'
+import { searchTitles, searchParticipants } from '$lib/api/search'
 import { title } from '$lib/fakeData'
 
 vi.mock('$lib/api/search', () => ({
   searchTitles: vi.fn(),
+  searchParticipants: vi.fn(),
 }))
 
-describe('TitleSearch.svelte', () => {
+describe('TypeSearch.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
   })
 
   it('Should search for titles when inputting text', async () => {
-    const { getByRole } = render(TitleSearch)
+    const { getByRole } = render(TypeSearch)
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
@@ -25,7 +26,7 @@ describe('TitleSearch.svelte', () => {
   it('Should show empty state when no results are returned', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([])
 
-    const { getByRole, getByText } = render(TitleSearch)
+    const { getByRole, getByText } = render(TypeSearch)
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
@@ -37,7 +38,7 @@ describe('TitleSearch.svelte', () => {
   it('Should show results when given', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
-    const { getByRole, getByText, getByTestId } = render(TitleSearch)
+    const { getByRole, getByText, getByTestId } = render(TypeSearch)
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
@@ -52,15 +53,26 @@ describe('TitleSearch.svelte', () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
     const onselect = vi.fn()
-    const { getByRole, getByText, queryByTestId } = render(TitleSearch, { onselect, query: '' })
+    const { getByRole, getByText, queryByTestId } = render(TypeSearch, { onselect, query: '' })
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
     await waitFor(async () => {
-      await fireEvent.click(getByRole('button'))
-      expect(onselect).toHaveBeenCalledWith(title)
+      await fireEvent.click(getByText(title.title))
+
+      expect(onselect).toHaveBeenCalledWith(title, 'title')
       expect(queryByTestId('search-results')).not.toBeTruthy()
       expect(getByText(title.title)).toBeTruthy()
     })
   })
+
+  it('Should search for participants after changing tab when inputting text', async () => {
+    const { getByRole, getByText } = render(TypeSearch)
+
+    await fireEvent.click(getByText('Cast & Crew'))
+    await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
+
+    expect(searchTitles).not.toHaveBeenCalled()
+    expect(searchParticipants).toHaveBeenCalled()
+  })
 })

package/src/tests/routes/components/Participants/Participant.test.js

@@ -4,6 +4,7 @@ import { describe, expect, it, vi, beforeEach } from 'vitest'
 import Participant from '../../../../routes/components/Participants/Participant.svelte'
 import { participants, title } from '$lib/fakeData'
 import { fetchTitlesForParticipant } from '$lib/api/participants'
+import { Sorting } from '$lib/enums/Sorting'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -21,7 +22,7 @@ describe('Participant.svelte', () => {
   it('Should call fetchTitlesForParticipant on mount', () => {
     render(Participant, { participant: participants[0] })
 
-    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 1 })
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 1, sorting: Sorting.Popular })
   })
 
   it('Should render fetched titles after showing skeletons', async () => {
@@ -71,7 +72,7 @@ describe('Participant.svelte', () => {
 
     await fireEvent.click(getByText('Show more'))
 
-    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2 })
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2, sorting: Sorting.Popular })
   })
 
   it('Should render as small variant when given', () => {

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

@@ -1,96 +0,0 @@
-<script lang="ts">
-  import { searchTitles } from '$lib/api/search'
-  import type { TitleData } from '$lib/types/title'
-  import TextInput from '../TextInput.svelte'
-  import TitleSearchItem from './TitleSearchItem.svelte'
-
-  interface Props {
-    onselect?: (title: TitleData) => void
-    query: string
-  }
-
-  let { onselect = () => null, query = $bindable() }: Props = $props()
-
-  let results: TitleData[] = $state([])
-  let selectedResult: TitleData | null = $state(null)
-  let loading = $state(false)
-
-  $effect(() => {
-    if (query) search(query)
-  })
-
-  async function search(query: string): Promise<void> {
-    loading = true
-
-    try {
-      results = await searchTitles(query)
-    } finally {
-      loading = false
-    }
-  }
-
-  function select(title: TitleData): void {
-    query = title.title
-    selectedResult = title
-
-    onselect(title)
-  }
-</script>
-
-<div class="search">
-  <TextInput
-    bind:value={query}
-    oninput={() => selectedResult = null}
-    name="search"
-    label="Search..." />
-
-  {#if query && !selectedResult}
-    <div class="results" data-testid="search-results">
-      {#each results as title (title.sid)}
-        <TitleSearchItem {title} onclick={() => select(title)} />
-      {:else}
-        {#if !loading}
-          <em class="empty">No results found</em>
-        {/if}
-      {/each}
-    </div>
-  {/if}
-
-  {#if selectedResult}
-    <div class="selected">
-      <TitleSearchItem title={selectedResult} hoverable={false} />
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  .search {
-    position: relative;
-  }
-
-  .results {
-    z-index: 1;
-    position: absolute;
-    top: calc(100% + margin(0.5));
-    left: 0;
-    right: 0;
-    height: 30vh;
-    max-height: margin(10);
-    border-radius: margin(0.5);
-    background: theme(lighter);
-    scrollbar-width: thin;
-    overflow: auto;
-  }
-
-  .empty {
-    padding: margin(0.5);
-    font-size: margin(0.75);
-    color: theme(text-color-alt);
-  }
-
-  .selected {
-    margin: margin(0.5) 0;
-    border-radius: 0.5rem;
-    border: 2px solid theme(green);
-  }
-</style>