@playpilot/tpi 5.32.0-beta.3 → 5.32.0-beta.youtube.1

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

@@ -714,6 +714,17 @@ describe('linkInjection.js', () => {
       expect(document.querySelectorAll('a')).toHaveLength(1)
     })
 
+    it('Should not inject injections into already existing links when multiple injections are present for the same phrase in the same sentence that only contain the phrase once and the phrase is broken up by HTML', () => {
+      document.body.innerHTML = '<p>This is a <strong>phr</strong>ase.</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+      const injection = generateInjection('This is a phrase.', 'phrase')
+
+      injectLinksInDocument(elements, { aiInjections: [injection, injection], manualInjections: [] })
+
+      expect(document.querySelectorAll('a')).toHaveLength(1)
+    })
+
     it('Should not mount popover if user uses touch', async () => {
       mockMatchMedia(true)
 

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

@@ -364,6 +364,16 @@ describe('text.js', () => {
         after: 'matched',
       })
     })
+
+    it('Should return after phrase properly if element contains odd spacing in elements', () => {
+      document.body.innerHTML = '<p>Text with a <em>phrase </em><em>that</em> can be matched</p>'
+      const node = /** @type {Element} */ (document.querySelector('body')).childNodes[0]
+
+      expect(findSurroundingPhrases(node, 12, 23)).toEqual({
+        before: 'with a',
+        after: 'can be',
+      })
+    })
   })
 
   describe('reverseString', () => {

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

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { closeCurrentModal, destroyAllModals, destroyCurrentModal, getAllModals, getPreviousModal, goBackToPreviousModal, openModal } from '$lib/modal'
+import { linkInjections, title } from '$lib/fakeData'
+import { mount, unmount } from 'svelte'
+import ParticipantModal from '../../routes/components/ParticipantModal.svelte'
+import TitleModal from '../../routes/components/TitleModal.svelte'
+import { closeTrailerOverlay, openTrailerOverlay } from '$lib/trailer'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+const titleWithTrailer = { ...title, embeddable_url: 'abc' }
+
+describe('modal.js', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('openTrailerOverlay', () => {
+    it('Should call mount with given title embeddable_url', () => {
+      openTrailerOverlay(titleWithTrailer)
+
+      expect(mount).toHaveBeenCalledWith(
+        expect.any(Function),
+        expect.objectContaining({
+          target: expect.anything(),
+          props: expect.objectContaining({
+            onclose: expect.any(Function),
+            embeddable_url: titleWithTrailer.embeddable_url,
+          }),
+        }),
+      )
+    })
+  })
+
+  describe('closeTrailerOverlay', () => {
+    it('Should call unmount if component was previously mounted', () => {
+      vi.mocked(mount).mockReturnValueOnce({})
+
+      openTrailerOverlay(titleWithTrailer)
+      closeTrailerOverlay()
+
+      expect(unmount).toHaveBeenCalled()
+    })
+
+    it('Should not call unmount if component was not previously mounted', () => {
+      vi.mocked(mount).mockReturnValueOnce({})
+
+      closeTrailerOverlay()
+
+      expect(unmount).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/tests/routes/+page.test.js

@@ -13,7 +13,6 @@ import { getFullUrlPath } from '$lib/url'
 import { fetchAds } from '$lib/api/ads'
 import { fetchConfig } from '$lib/api/config'
 import { hasConsentedTo } from '$lib/consent'
-import { getSplitTestVariantName } from '$lib/splitTest'
 
 vi.mock('$lib/api/externalPages', () => ({
   fetchLinkInjections: vi.fn(() => {}),
@@ -67,7 +66,6 @@ vi.mock('$lib/url', () => ({
 
 vi.mock('$lib/splitTest', () => ({
   trackSplitTestView: vi.fn(),
-  getSplitTestVariantName: vi.fn(),
 }))
 
 vi.mock('$lib/api/ads', () => ({

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

@@ -0,0 +1,28 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Button from '../../../routes/components/Button.svelte'
+
+describe('Button.svelte', () => {
+  it('Should use filled class by default', () => {
+    const { getByRole } = render(Button)
+
+    expect(getByRole('button').classList).toContain('filled')
+  })
+
+  it('Should use border class when border variant is given', () => {
+    const { getByRole } = render(Button, { variant: 'border' })
+
+    expect(getByRole('button').classList).not.toContain('filled')
+    expect(getByRole('button').classList).toContain('border')
+  })
+
+  it('Should fire given onclick function on click', async () => {
+    const onclick = vi.fn()
+    const { getByRole } = render(Button, { onclick })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+})

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

@@ -16,57 +16,57 @@ vi.mock('$lib/tracking', () => ({
 
 describe('Share.svelte', () => {
   it('Should open context menu on click', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
     expect(queryByText('Email')).not.toBeTruthy()
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
 
     expect(queryByText('Copy URL')).toBeTruthy()
     expect(queryByText('Email')).toBeTruthy()
   })
 
   it('Should close context menu on click of items', async () => {
-    const { getByLabelText, getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should close context menu on click of body', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(document.body)
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should fire copyToClipboard on click of button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(copyToClipboard).toHaveBeenCalledWith('some-url?utm_source=tpi')
   })
 
   it('Should fire track function on click of copy URL button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'copy' })
   })
 
   it('Should fire track function on click of email button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Email'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'email' })

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

@@ -91,4 +91,17 @@ describe('Title.svelte', () => {
     expect(fetchParticipantsForTitle).toHaveBeenCalled()
     expect(fetchSimilarTitles).toHaveBeenCalled()
   })
+
+  it('Should show trailer button when embeddable_url is given', () => {
+    const { getByText } = render(Title, { title: { ...title, embeddable_url: 'some-url' } })
+
+    expect(getByText('Watch trailer')).toBeTruthy()
+  })
+
+  // Temporarily disabled while button is always visible
+  // it('Should not show trailer button when embeddable_url is not given', () => {
+  //   const { queryByText } = render(Title, { title })
+
+  //   expect(queryByText('Watch Trailer')).not.toBeTruthy()
+  // })
 })

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

@@ -0,0 +1,20 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Trailer from '../../../routes/components/Trailer.svelte'
+import { title } from '$lib/fakeData'
+import { openTrailerOverlay } from '$lib/trailer'
+
+vi.mock('$lib/trailer', () => ({
+  openTrailerOverlay: vi.fn(),
+}))
+
+describe('Trailer.svelte', () => {
+  it('Should fire given onclick function with given title on click', async () => {
+    const { getByRole } = render(Trailer, { title })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(openTrailerOverlay).toHaveBeenCalledWith(title)
+  })
+})

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

@@ -0,0 +1,31 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import YouTubeEmbedOverlay from '../../../routes/components/YouTubeEmbedOverlay.svelte'
+
+describe('YouTubeEmbedOverlay.svelte', () => {
+  it('Should render embed iframe with given video url', () => {
+    const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
+
+    // @ts-ignore
+    expect(container.querySelector('iframe').src).toBe('https://www.youtube.com/embed/abc?autoplay=true')
+  })
+
+  it('Should render error message if embeddable_url is invalid', () => {
+    const { container, getByText } = render(YouTubeEmbedOverlay, { embeddable_url: '-', onclose: () => null })
+
+    expect(container.querySelector('iframe')).not.toBeTruthy()
+    expect(getByText('Something went wrong')).toBeTruthy()
+  })
+
+  it('Should fire given onclose function on click of close button and backdrop', async () => {
+    const onclose = vi.fn()
+    const { getByLabelText, getByTestId } = render(YouTubeEmbedOverlay, { embeddable_url: '-', onclose })
+
+    await fireEvent.click(getByLabelText('Close'))
+    expect(onclose).toHaveBeenCalledTimes(1)
+
+    await fireEvent.click(getByTestId('backdrop'))
+    expect(onclose).toHaveBeenCalledTimes(2)
+  })
+})

package/src/routes/components/HighlightedInjection.svelte

@@ -1,230 +0,0 @@
-<script lang="ts">
-  import { filterRemovedAndInactiveInjections, sortInjections } from '$lib/injection'
-  import { t } from '$lib/localization'
-  import { titleUrl } from '$lib/routes'
-  import { cleanPhrase } from '$lib/text'
-  import type { LinkInjection } from '$lib/types/injection'
-  import { openModal } from '$lib/modal'
-  import { trackSplitTestAction } from '$lib/splitTest'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { scale } from 'svelte/transition'
-  import IconIMDb from './Icons/IconIMDb.svelte'
-  import TitlePoster from './TitlePoster.svelte'
-  import RoundButton from './RoundButton.svelte'
-  import IconClose from './Icons/IconClose.svelte'
-
-  interface Props {
-    linkInjections: LinkInjection[]
-  }
-
-  const { linkInjections }: Props = $props()
-
-  const scrollThreshold = Math.min(window.innerHeight, 800)
-
-  const filteredInjections = $derived(filterRemovedAndInactiveInjections(linkInjections))
-  const sortedInjections: LinkInjection[] = $derived(sortInjections(filteredInjections))
-
-  // Get title injection that might relate the most the overall article.
-  // If any is found it is used as the primary display, highlighting that injection over others.
-  // If none are found we simply use the first active injection and hope for the best.
-  const primaryInjection = $derived.by(() => {
-    const pageTitle = cleanPhrase(document.querySelector('h1')?.innerText || document.title || '')
-    return sortedInjections.find(injection => pageTitle.includes(cleanPhrase(injection.title))) || filteredInjections[0]
-  })
-
-  let shown = $state(false)
-  let closed = $state(false)
-  let offsetBottom = $state(0)
-
-  // Only show the element once the user has scroll past a threshold. From here we check the offset from the bottom of
-  // the page to make sure we don't overlay the element on top of other elements on the page, such as ads or menus
-  function onscroll(): void {
-    if (shown || closed) return
-    if (window.scrollY < scrollThreshold) return
-
-    const bottomFixedElementOffsets = getBottomFixedElementOffsets()
-    const largestOffset = Math.max(...bottomFixedElementOffsets, 0)
-
-    offsetBottom = largestOffset + parseFloat(getComputedStyle(document.documentElement).fontSize) // 1 rem
-    shown = true
-
-    trackSplitTestAction(SplitTest.InTextEngagement, 'shown')
-  }
-
-  // Get all elements that are seemingly fixed to the bottom. This is used to determine the position of the element to try
-  // and make sure it does not overlap ads or other elements at the bottom of the screen.
-  // This is determined by them being fixed (duh) and being close to the bottom of the screen. This might turn out to be unreliable.
-  // It does not account for elements that are added after this function is called, which is often the case for ads.
-  function getBottomFixedElementOffsets(): number[] {
-    const fixedElements = Array.from(document.querySelectorAll('*')).filter((element) => {
-      const style = getComputedStyle(element)
-      const isFixed = style.position === 'fixed'
-      const isVisible = style.display !== 'none' && style.visibility !== 'hidden'
-
-      const rect = element.getBoundingClientRect()
-      const isCloseToBottom = rect.bottom < 50
-      const hasSize = rect.width > 0 && rect.height > 0
-
-      return isFixed && isVisible && isCloseToBottom && hasSize
-    })
-
-    return fixedElements.map((element) => element.clientHeight + (window.innerHeight - element.getBoundingClientRect().bottom))
-  }
-
-  function onclick(event: MouseEvent): void {
-    event.preventDefault()
-
-    closed = true
-
-    openModal({ event, injection: primaryInjection, data: primaryInjection.title_details })
-    trackSplitTestAction(SplitTest.InTextEngagement, 'click-highlight')
-  }
-
-  function close(event: MouseEvent): void {
-    event.preventDefault()
-
-    closed = true
-
-    trackSplitTestAction(SplitTest.InTextEngagement, 'close')
-  }
-</script>
-
-<svelte:window {onscroll} />
-
-{#if primaryInjection && shown && !closed}
-  {@const title = primaryInjection.title_details!}
-
-  <div class="highlighted-injection" style:bottom="{offsetBottom}px" in:scale={{ start: 0.85, duration: 100 }}>
-    <a {onclick} class="link" href={titleUrl(title)} target="_blank" aria-label="{title.title} (opens in a new tab)">
-      <div class="poster">
-        <TitlePoster {title} width={30} height={43} />
-      </div>
-
-      <div class="content">
-        <div class="details">
-          <div class="heading">{title.title}</div>
-
-          <div class="meta">
-            <div class="imdb">
-              <IconIMDb />
-              {title.imdb_score || '-'}
-            </div>
-
-            <div>{title.year}</div>
-
-            <div class="capitalize">{t(`Type: ${title.type}`)}</div>
-
-            {#if title.length}
-              <div>{title.length} {t('Minutes Short')}</div>
-            {/if}
-          </div>
-        </div>
-
-        <div class="action">
-          {t('Watch')}
-        </div>
-      </div>
-    </a>
-
-    <div class="close">
-      <RoundButton onclick={close} aria-label="Close">
-        <IconClose />
-      </RoundButton>
-    </div>
-  </div>
-{/if}
-
-<style lang="scss">
-  .highlighted-injection {
-    position: fixed;
-    bottom: margin(1);
-    left: margin(1);
-    width: calc(100% - margin(2));
-
-    @include desktop {
-      max-width: 400px;
-    }
-  }
-
-  .link {
-    display: flex;
-    gap: margin(1);
-    align-items: flex-start;
-    border-radius: theme(border-radius);
-    padding: margin(0.5) margin(1) margin(0.5) margin(0.5);
-    background: theme(dark);
-    box-shadow: theme(shadow-large);
-    text-decoration: none;
-
-    &:hover,
-    &:active {
-      transform: scale(1.025);
-      transition: transform 50ms;
-      filter: brightness(theme(hover-filter-brightness));
-    }
-
-    &:active {
-      transform: scale(0.975);
-    }
-  }
-
-  .poster {
-    flex: 0 0 margin(2);
-    width: margin(2);
-    box-shadow: 0 0 2px 1px theme(content);
-    border-radius: theme(border-radius-small);
-    background: theme(content);
-    overflow: hidden;
-  }
-
-  .content {
-    display: flex;
-    align-items: center;
-    gap: margin(0.5);
-    width: 100%;
-    margin: auto 0;
-    color: theme(text-color-alt);
-    font-family: theme(font-family);
-    font-size: 12px;
-    line-height: 1.5;
-    font-style: normal;
-  }
-
-  .heading {
-    margin-bottom: margin(0.25);
-    font-size: theme(font-size-base);
-    font-weight: theme(font-bold);
-    color: theme(text-color);
-  }
-
-  .meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0 margin(0.5);
-    white-space: nowrap;
-    color: theme(text-color-alt);
-  }
-
-  .imdb {
-    display: flex;
-    align-items: center;
-    gap: margin(0.25);
-  }
-
-  .action {
-    grid-area: action;
-    margin-left: auto;
-    padding: margin(0.5);
-    border: theme(playlinks-action-border, 1px solid currentColor);
-    border-radius: theme(playlinks-action-border-radius, margin(2));
-    font-weight: theme(playlinks-action-font-weight, 500);
-    color: theme(playlinks-action-text-color, text-color);
-    line-height: 1;
-  }
-
-  .close {
-    position: absolute;
-    top: margin(-0.75);
-    right: margin(-0.75);
-  }
-</style>

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

@@ -1,98 +0,0 @@
-import { render, fireEvent, waitFor } from '@testing-library/svelte'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import HighlightedInjection from '../../../routes/components/HighlightedInjection.svelte'
-import { generateInjection } from '../../helpers'
-import { title } from '$lib/fakeData'
-import { openModal } from '$lib/modal'
-
-vi.mock('$lib/modal', () => ({
-  openModal: vi.fn(),
-}))
-
-/**
- * @param {number} value
- */
-async function mockScroll(value) {
-  Object.defineProperty(window, 'scrollY', { value, configurable: true })
-  window.dispatchEvent(new Event('scroll'))
-
-  return new Promise(res => setTimeout(res))
-}
-
-describe('HighlightedInjection.svelte', () => {
-  beforeEach(() => {
-    vi.resetAllMocks()
-  })
-
-  const linkInjections = [
-    generateInjection('Some sentence', 'Some title'),
-    { ...generateInjection('Some sentence', 'Some title'), title_details: { ...title, title: 'Some second injection' } },
-  ]
-
-  it('Should show after scrolling the required distance', async () => {
-    const { queryByRole } = render(HighlightedInjection, { linkInjections })
-
-    await mockScroll(0)
-    expect(queryByRole('link')).not.toBeTruthy()
-
-    await mockScroll(200)
-    expect(queryByRole('link')).not.toBeTruthy()
-
-    await mockScroll(1000)
-    expect(queryByRole('link')).toBeTruthy()
-  })
-
-  it('Should not hide after being shown by scrolling', async () => {
-    const { queryByRole } = render(HighlightedInjection, { linkInjections })
-
-    await mockScroll(1000)
-    expect(queryByRole('link')).toBeTruthy()
-
-    await mockScroll(0)
-    expect(queryByRole('link')).toBeTruthy()
-  })
-
-  it('Should render the first injection in the list', async () => {
-    const { getByText } = render(HighlightedInjection, { linkInjections })
-
-    await mockScroll(1000)
-
-    // @ts-ignore
-    expect(getByText(linkInjections[0].title_details.title)).toBeTruthy()
-  })
-
-  it('Should render the injection most relevant to the document title', async () => {
-    // @ts-ignore
-    document.body.innerHTML = `<h1>${linkInjections[1].title_details.title}</h1>`
-
-    const { getByText } = render(HighlightedInjection, { linkInjections })
-
-    await mockScroll(1000)
-
-    // @ts-ignore
-    expect(getByText(linkInjections[1].title_details.title)).toBeTruthy()
-  })
-
-  it('Should open modal on click', async () => {
-    const { getByRole } = render(HighlightedInjection, { linkInjections })
-
-    await mockScroll(1000)
-    await fireEvent.click(getByRole('link'))
-
-    expect(openModal).toHaveBeenCalled()
-  })
-
-  it('Should close elements when close button is closed', async () => {
-    const { getByLabelText, queryByRole } = render(HighlightedInjection, { linkInjections })
-
-    await mockScroll(1000)
-    await fireEvent.click(getByLabelText('Close'))
-
-    await waitFor(() => {
-      expect(queryByRole('link')).not.toBeTruthy()
-    })
-
-    expect(openModal).not.toHaveBeenCalled()
-  })
-})