@playpilot/tpi 5.23.4 → 5.24.0

package/events.md

@@ -37,6 +37,7 @@ Event | Action | Info | Payload
 `ali_participant_modal_view` | _Fires any time a title modal is viewed_ | The title modal opens when viewing a participant modal both on desktop and mobile | `participant` (name of the participant)
 `ali_participant_modal_close` | _Fires any time a title modal is closed_ | | `participant` (name of the participant) `time_spent` (time between modal_view and modal_close milliseconds)
 'ali_similar_title_click' | _Fires any time a similar titles rail item is clicked_ | Title | `title_source` (original name of the title the rail item was clicked in)
+'ali_participant_click' | _Fires any time a participants rail item is clicked_ | null | `title_source` (original name of the title the rail item was clicked in), `participant` (name of the clicked participant)
 
 ### Popover
 Event | Action | Info | Payload

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.23.4",
+	"version": "5.24.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/participants.ts

@@ -0,0 +1,16 @@
+import { getApiToken } from '$lib/token'
+import type { ParticipantData } from '$lib/types/participant'
+import type { TitleData } from '../types/title'
+import { api } from './api'
+
+export async function fetchTitlesForParticipant(participant: ParticipantData, { page = 1 }: { page?: number } = {}): Promise<TitleData[]> {
+  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&participant_sid=${participant.sid}&page=${page}`)
+
+  return response.results
+}
+
+export async function fetchParticipantsForTitle(title: TitleData): Promise<ParticipantData[]> {
+  const response = await api<{ results: ParticipantData[] }>(`/participants/browse?api-token=${getApiToken()}&title_sid=${title.sid}`)
+
+  return response.results
+}

package/src/lib/api/titles.ts

@@ -0,0 +1,9 @@
+import { getApiToken } from '$lib/token'
+import type { TitleData } from '../types/title'
+import { api } from './api'
+
+export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]> {
+  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&related_to_sid=${title.sid}`)
+
+  return response.results
+}

package/src/lib/data/translations.ts

@@ -116,6 +116,11 @@ export const translations = {
     [Language.Swedish]: 'E-post',
     [Language.Danish]: 'E-mail',
   },
+  'Show More': {
+    [Language.English]: 'Show more',
+    [Language.Swedish]: 'Visa mer',
+    [Language.Danish]: 'Vis mere',
+  },
 
   // Genres
   'All': {

package/src/lib/enums/TrackingEvent.ts

@@ -22,6 +22,7 @@ export const TrackingEvent = Object.freeze({
 
   // Rails
   SimilarTitleClick: 'ali_similar_title_click',
+  ParticipantClick: 'ali_title_participant_click',
 
   // After article
   AfterArticlePlaylinkClick: 'ali_after_article_playlink_click',

package/src/lib/modal.ts

@@ -12,7 +12,7 @@ type ModalType = 'title' | 'participant'
 
 type Modal = {
   injection?: LinkInjection | null
-  component: object
+  component?: object
   type: ModalType
   data: TitleData | ParticipantData | null
   scrollPosition?: number
@@ -25,8 +25,8 @@ const modals: Modal[] = []
  * Ignore clicks that used modifier keys or that were not left click.
  */
 export function openModal(
-  { type = 'title', event = null, injection = null, data = null, scrollPosition = 0 }:
-  { type?: ModalType, event?: MouseEvent | null, injection?: LinkInjection | null, data?: TitleData | ParticipantData | null, scrollPosition?: number } = {}): void {
+  { type = 'title', event = null, injection = null, data = null, scrollPosition = 0, returnToTitle = null }:
+  { type?: ModalType, event?: MouseEvent | null, injection?: LinkInjection | null, data?: TitleData | ParticipantData | null, scrollPosition?: number, returnToTitle?: TitleData | null } = {}): void {
   if (event && isHoldingSpecialKey(event)) return
 
   event?.preventDefault()
@@ -35,10 +35,23 @@ export function openModal(
 
   const target = getPlayPilotWrapperElement()
   const sharedProps = { initialScrollPosition: scrollPosition }
-  const component = type === 'title' ?
-    mount(TitleModal, { target, props: { title: data as TitleData, ...sharedProps } }) :
-    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...sharedProps  } })
+  const component = getModalComponentByType({ type, target, data, props: sharedProps })
 
+  // When a return title is given it is added to the list of modals but is not actually opened.
+  // This is only so that the user can return the title they opened another modal from. This will be from the popover.
+  // For example title in popover -> open similar title -> go back to title from popover, but in modal
+  if (returnToTitle) addModalToList({ type, injection, data: returnToTitle })
+
+  addModalToList({ type, injection, data, scrollPosition, component })
+}
+
+function getModalComponentByType({ type = 'title', target, data, props = {} }: { type: ModalType, target: Element, data: TitleData | ParticipantData | null, props?: Record<string, any> }) {
+  return type === 'title' ?
+    mount(TitleModal, { target, props: { title: data as TitleData, ...props } }) :
+    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
+}
+
+function addModalToList({ type = 'title', injection = null, data, scrollPosition = 0, component }: Modal) {
   modals.push({ type, injection, data, scrollPosition, component })
 }
 
@@ -48,7 +61,7 @@ export function closeCurrentModal(outro: boolean = true): void {
 
   saveCurrentModalScrollPosition()
 
-  unmount(modals[modals.length - 1].component, { outro })
+  unmount(modals[modals.length - 1].component!, { outro })
 }
 
 /** Unmount the last modal is the list of modals and remove it from the list */

package/src/routes/components/ListTitle.svelte

@@ -29,9 +29,9 @@
   }
 </script>
 
-<a class="title" href={titleUrl(title)} {onclick}>
+<a class="title" href={titleUrl(title)} {onclick} data-testid="title">
   <div class="poster">
-    <TitlePoster {title} width={30} height={43} />
+    <TitlePoster {title} width={30} height={43} lazy />
   </div>
 
   <div class="content">
@@ -89,7 +89,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    background: var(--playpilot-list-item-background, var(--playpilot-lighter));
+    background: var(--playpilot-list-item-background, var(--playpilot-playlink-background, var(--playpilot-lighter)));
     padding: margin(0.5);
     border: 0;
     border-radius: var(--playpilot-list-item-border-radius, margin(0.5));
@@ -97,7 +97,7 @@
     font-style: normal !important;
 
     &:hover {
-      background: var(--playpilot-list-item-hover-background, var(--playpilot-content));
+      filter: var(--playpilot-list-item-hover-filter, var(--playpilot-playlink-hover-filter, brightness(1.1)));
     }
 
     &:last-child {
@@ -112,7 +112,7 @@
     width: margin(4.125);
     aspect-ratio: 2/3;
     border-radius: var(--playpilot-detail-image-border-radius, margin(0.5));
-    background: var(--playpilot-detail-image-background, var(--playpilot-content));
+    background: var(--playpilot-detail-image-background, var(--playpilot-genre-background, var(--playpilot-content)));
     overflow: hidden;
   }
 

package/src/routes/components/Modal.svelte

@@ -213,7 +213,7 @@
 
   .backdrop {
     z-index: 0;
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
     bottom: 0;

package/src/routes/components/Participant.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
+  import { onMount } from 'svelte'
   import { heading } from '$lib/actions/heading'
+  import { fetchTitlesForParticipant } from '$lib/api/participants'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { openModal } from '$lib/modal'
   import { trackSplitTestView } from '$lib/splitTest'
   import type { ParticipantData } from '$lib/types/participant'
+  import type { TitleData } from '$lib/types/title'
   import ListTitle from './ListTitle.svelte'
+  import { t } from '$lib/localization'
 
   interface Props {
     participant: ParticipantData
@@ -14,12 +18,37 @@
 
   const { name, birth_date, death_date } = $derived(participant)
 
+  const pageSize = 30
+
   trackSplitTestView(SplitTest.ParticipantPlaylinkFormat)
 
+  let titles: TitleData[] = $state([])
+  let page = $state(1)
+  let hasMorePages = $state(true)
+  let loading = $state(true)
+
+  onMount(loadMore)
+
   function formatDate(dateString: string): string {
     const date = new Date(dateString)
     return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
   }
+
+  async function loadMore() {
+    loading = true
+
+    try {
+      const results = await fetchTitlesForParticipant(participant, { page })
+
+      titles = [...titles, ...results]
+      hasMorePages = results?.length >= pageSize
+    } catch {
+      hasMorePages = false
+    } finally {
+      loading = false
+      page += 1
+    }
+  }
 </script>
 
 <div class="header">
@@ -36,11 +65,17 @@
   <div class="heading small" use:heading={3} id="credits">Credits</div>
 
   <div class="list">
-    {#each window.PlayPilotLinkInjections?.evaluated_link_injections?.map(i => i.title_details) || [] as title}
-      {#if title}
-        <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
-      {/if}
+    {#each titles as title}
+      <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
     {/each}
+
+    {#if loading}
+      {#each { length: 6 }}
+        <div class="skeleton" data-testid="skeleton"></div>
+      {/each}
+    {:else if hasMorePages}
+      <button class="more" onclick={loadMore}>{t('Show More')}</button>
+    {/if}
   </div>
 </div>
 
@@ -89,4 +124,26 @@
     flex-direction: column;
     gap: margin(0.5);
   }
+
+  .skeleton {
+    min-height: margin(7.25);
+    border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
+    background: var(--playpilot-list-item-background, var(--playpilot-lighter));
+  }
+
+  .more {
+    cursor: pointer;
+    appearance: none;
+    padding: margin(0.5) margin(1);
+    border: 0;
+    border-radius: var(--playpilot-participants-load-more-border-radius, var(--playpilot-list-item-border-radius, margin(0.5)));
+    background: var(--playpilot-participants-load-more-background, var(--playpilot-button-background, var(--playpilot-content)));
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+
+    &:hover {
+      filter: brightness(1.2);
+    }
+  }
 </style>

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

@@ -1,18 +1,25 @@
 <script lang="ts">
-  import { participants } from '$lib/fakeData'
+  import { fetchParticipantsForTitle } from '$lib/api/participants'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { openModal } from '$lib/modal'
+  import { track } from '$lib/tracking'
   import type { ParticipantData } from '$lib/types/participant'
+  import type { TitleData } from '$lib/types/title'
   import Rail from './Rail.svelte'
 
-  async function fetchParticipants(): Promise<ParticipantData[]> {
-    // This is just a fake loading state for now
-    await new Promise(res => setTimeout(res, 500))
+  interface Props {
+    title: TitleData
+  }
+
+  const { title }: Props = $props()
 
-    return participants
+  function onclick(event: MouseEvent, participant: ParticipantData): void {
+    openModal({ event, type: 'participant', data: participant })
+    track(TrackingEvent.ParticipantClick, null, { title_source: title.original_title, participant: participant.name })
   }
 </script>
 
-{#await fetchParticipants()}
+{#await fetchParticipantsForTitle(title)}
   <Rail heading="Cast">
     {#each { length: 5 }}
       <div class="participant"></div>
@@ -22,10 +29,12 @@
   {#if participants?.length}
     <Rail heading="Cast">
       {#each participants.slice(0, 15) as participant}
-        <button class="participant" data-testid="participant" onclick={event => openModal({ event, type: 'participant', data: participant })}>
+        <button class="participant" data-testid="participant" onclick={event => onclick(event, participant)}>
           <span class="truncate">{participant.name}</span>
 
-          <div class="character truncate">{participant.character}</div>
+          {#if participant.character}
+            <div class="character truncate">{participant.character}</div>
+          {/if}
         </button>
       {/each}
     </Rail>
@@ -34,7 +43,8 @@
 
 <style lang="scss">
   .participant {
-    display: block;
+    display: flex;
+    flex-direction: column;
     flex: 0 0 10rem;
     width: 10rem;
     min-height: margin(3.375); // Matches 54 pixels, the height of a card with both name and character

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { fetchSimilarTitles } from '$lib/api/titles'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
@@ -10,15 +11,7 @@
 
   const { title }: Props = $props()
 
-  const titles = fetchTitles()
-
-  async function fetchTitles(): Promise<TitleData[]> {
-    // This is just a fake loading state for now
-    await new Promise(res => setTimeout(res, 500))
-
-    // Imagine this being a fetch request that returns titles instead.
-    return (window.PlayPilotLinkInjections?.evaluated_link_injections?.map(i => i.title_details) || []) as TitleData[]
-  }
+  const titles = fetchSimilarTitles(title)
 </script>
 
 <TitlesRail {titles} heading="Similar movies & shows" onclick={(targetTitle) => track(TrackingEvent.SimilarTitleClick, targetTitle, { title_source: title.original_title })} />

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

@@ -4,6 +4,7 @@
   import type { TitleData } from '$lib/types/title'
   import { openModal } from '$lib/modal'
   import { titleUrl } from '$lib/routes'
+  import { getContext } from 'svelte'
 
   interface Props {
     titles: Promise<TitleData[]> | TitleData[]
@@ -13,8 +14,11 @@
 
   const { titles, heading = '', onclick = () => null }: Props = $props()
 
+  const isPopover = getContext('scope') === 'popover'
+  const returnToTitle: TitleData | null = isPopover ? getContext('title') : null
+
   function openTitle(event: MouseEvent, title: TitleData): void {
-    openModal({ event, data: title })
+    openModal({ event, data: title, returnToTitle })
     onclick(title)
   }
 </script>

package/src/routes/components/Title.svelte

@@ -12,6 +12,7 @@
   import { heading } from '$lib/actions/heading'
   import { removeImageUrlPrefix } from '$lib/image'
   import { titleUrl } from '$lib/routes'
+  import { setContext } from 'svelte'
 
   interface Props {
     title: TitleData
@@ -20,15 +21,17 @@
 
   const { title, small = false }: Props = $props()
 
+  setContext('title', title)
+
   let posterLoaded = $state(false)
   let backgroundLoaded = $state(false)
   let useBackgroundFallback = $state(false)
 </script>
 
-<div class="content" class:small data-playpilot-link-injections-title>
+<div class="content" class:small>
   <div class="header">
     <div class="poster" class:loaded={posterLoaded}>
-      <TitlePoster {title} onload={() => posterLoaded = true} />
+      <TitlePoster {title} onload={() => posterLoaded = true} lazy={false} />
     </div>
 
     <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
@@ -63,11 +66,8 @@
       <Description text={title.description} blurb={title.blurb} />
     {/if}
 
-    <!-- Temporarily not available on production as there is not yet an API endpoint for either -->
-    {#if process.env.NODE_ENV !== 'production'}
-      <ParticipantsRail />
-      <SimilarRail {title} />
-    {/if}
+    <ParticipantsRail {title} />
+    <SimilarRail {title} />
   </div>
 </div>
 

package/src/routes/components/TitlePoster.svelte

@@ -7,10 +7,11 @@
     title: TitleData
     width?: number
     height?: number
+    lazy?: boolean
     onload?: () => void
   }
 
-  const { title, width = 96, height = 144, onload = () => null }: Props = $props()
+  const { title, width = 96, height = 144, lazy = true, onload = () => null }: Props = $props()
 </script>
 
 <img
@@ -19,6 +20,7 @@
   {width}
   {height}
   onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl}
+  loading={lazy ? 'lazy' : null}
   {onload} />
 
 <style lang="scss">
@@ -26,5 +28,6 @@
     display: block;
     width: 100%;
     height: auto;
+    color: var(--playpilot-detail-text-color, var(--playpilot-text-color-alt));
   }
 </style>

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

@@ -43,6 +43,13 @@ describe('modal.js', () => {
 
       expect(mount).not.toHaveBeenCalled()
     })
+
+    it('Should add additional modal to the stack when returnToTitle is given', () => {
+      // @ts-ignore
+      openModal({ ...modal, returnToTitle: title })
+
+      expect(getAllModals()).toHaveLength(2)
+    })
   })
 
   describe('closeCurrentModal', () => {

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

@@ -0,0 +1,76 @@
+import { fireEvent, render, waitFor  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import Participant from '../../../routes/components/Participant.svelte'
+import { participants, title } from '$lib/fakeData'
+import { fetchTitlesForParticipant } from '$lib/api/participants'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/api/participants', () => ({
+  fetchTitlesForParticipant: vi.fn(),
+}))
+
+describe('Participant.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should call fetchTitlesForParticipant on mount', () => {
+    render(Participant, { participant: participants[0] })
+
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 1 })
+  })
+
+  it('Should render fetched titles after showing skeletons', async () => {
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce([title, title])
+
+    const { getAllByTestId } = render(Participant, { participant: participants[0] })
+
+    expect(getAllByTestId('skeleton')).toHaveLength(6)
+
+    await waitFor(() => {
+      expect(getAllByTestId('title')).toHaveLength(2)
+    })
+  })
+
+  it('Should not show load more button while loading and when fewer than page size of titles are fetched', async () => {
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce([title, title])
+
+    const { queryByText, getAllByTestId } = render(Participant, { participant: participants[0] })
+
+    expect(queryByText('Show More')).not.toBeTruthy()
+
+    await waitFor(() => {
+      expect(getAllByTestId('title')).toHaveLength(2)
+    })
+
+    expect(queryByText('Show More')).not.toBeTruthy()
+  })
+
+  it('Should show load more button after loading and if more than page size of titles are fetched', async () => {
+    const resolved = Array(30).fill(title)
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce(resolved)
+
+    const { getByText } = render(Participant, { participant: participants[0] })
+
+    await waitFor(() => {
+      expect(getByText('Show more')).toBeTruthy()
+    })
+  })
+
+  it('Should fetch more titles when load more button is clicked', async () => {
+    const resolved = Array(30).fill(title)
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce(resolved)
+
+    const { getByText } = render(Participant, { participant: participants[0] })
+
+    await waitFor(() => getByText('Show more'))
+
+    await fireEvent.click(getByText('Show more'))
+
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2 })
+  })
+})

package/src/tests/routes/components/ParticipantModal.test.js

@@ -14,6 +14,10 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
+vi.mock('$lib/api/participants', () => ({
+  fetchTitlesForParticipant: vi.fn(),
+}))
+
 describe('ParticipantModal.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()

package/src/tests/routes/components/Rails/ParticipantsRail.test.js

@@ -1,18 +1,31 @@
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ParticipantsRail from '../../../../routes/components/Rails/ParticipantsRail.svelte'
 import { openModal } from '$lib/modal'
-import { participants } from '$lib/fakeData'
+import { participants, title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { fetchParticipantsForTitle } from '$lib/api/participants'
 
 vi.mock('$lib/modal', () => ({
   openModal: vi.fn(),
 }))
 
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/api/participants', () => ({
+  fetchParticipantsForTitle: vi.fn(),
+}))
+
 describe('ParticipantsRail.svelte', () => {
   it('Should render each given participant', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
     // @ts-ignore
-    const { getByText } = render(ParticipantsRail)
+    const { getByText } = render(ParticipantsRail, { title })
 
     await waitFor(() => {
       expect(getByText(participants[0].name)).toBeTruthy()
@@ -20,15 +33,20 @@ describe('ParticipantsRail.svelte', () => {
     })
   })
 
-  // TODO: Re-enable when participants are actually fetched
-  // it('Should not render when no participants are returned', () => {
-  //   const { container } = render(ParticipantsRail)
+  it('Should not render when no participants are returned', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce([])
 
-  //   expect(container.querySelectorAll('.participant').length).toBe(0)
-  // })
+    const { container } = render(ParticipantsRail)
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('.participant').length).toBe(0)
+    })
+  })
 
   it('Should open modal on click of participant', async () => {
-    const { getAllByTestId } = render(ParticipantsRail)
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
+    const { getAllByTestId } = render(ParticipantsRail, { title })
 
     await waitFor(async () => {
       await fireEvent.click(getAllByTestId('participant')[0])
@@ -36,4 +54,16 @@ describe('ParticipantsRail.svelte', () => {
 
     expect(openModal).toHaveBeenCalledWith({ event: expect.any(Object), type: 'participant', data: participants[0] })
   })
+
+  it('Should fire track event on click of participant', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
+    const { getAllByTestId } = render(ParticipantsRail, { title })
+
+    await waitFor(async () => {
+      await fireEvent.click(getAllByTestId('participant')[0])
+    })
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ParticipantClick, null, { title_source: title.original_title, participant: participants[0].name })
+  })
 })

package/src/tests/routes/components/Rails/SimilarRail.test.js

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import { title } from '$lib/fakeData'
+import SimilarRail from '../../../../routes/components/Rails/SimilarRail.svelte'
+import { fetchSimilarTitles } from '$lib/api/titles'
+
+vi.mock('$lib/modal', () => ({
+  openModal: vi.fn(),
+}))
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
+describe('ParticipantsRail.svelte', () => {
+  it('Should fetch titles', async () => {
+    render(SimilarRail, { title })
+
+    expect(fetchSimilarTitles).toHaveBeenCalledWith(title)
+  })
+})

package/src/tests/routes/components/Rails/TitlesRail.test.js

@@ -33,7 +33,7 @@ describe('TitlesRail.svelte', () => {
 
     await fireEvent.click(getAllByRole('link')[0])
 
-    expect(openModal).toHaveBeenCalledWith({ event: expect.any(Object), data: title })
+    expect(openModal).toHaveBeenCalledWith({ event: expect.any(Object), data: title, returnToTitle: null })
   })
 
   it('Should fire given onclick function when title is clicked', async () => {