@playpilot/tpi 8.30.0 → 8.31.0

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/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>