@playpilot/tpi 4.0.0-beta.1 → 4.0.1

package/src/routes/components/Playlinks.svelte

@@ -36,16 +36,16 @@
   }
 </script>
 
-<div class="heading" use:heading={2}>{t('Where To Stream Online')}</div>
+<div class="heading" use:heading={3}>{t('Where To Stream Online')}</div>
 
 <div class="playlinks" class:list>
-  {#each mergedPlaylink as { name, url, logo_url, extra_info: { category } }}
-    <a href={url} target="_blank" class="playlink" onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
+  {#each mergedPlaylink as { name, url, logo_url, highlighted, cta_text, extra_info: { category } }}
+    <a href={url} target="_blank" class="playlink" class:highlighted={highlighted && cta_text} onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
       <img src={removeImageUrlPrefix(logo_url)} alt="" height="32" width="32" />
 
       <div>
         <span class="name">{name}</span>
-        <div class="category">{categoryStrings[category] || t('Stream')}</div>
+        <div class="category">{cta_text || categoryStrings[category] || t('Stream')}</div>
       </div>
 
       {#if list}
@@ -112,6 +112,7 @@
   }
 
   .playlink {
+    position: relative;
     display: flex;
     align-items: center;
     gap: margin(0.75);
@@ -121,7 +122,7 @@
     border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
     color: var(--playpilot-playlink-text-color, var(--playpilot-text-color-alt)) !important;
     font-weight: var(--playpilot-playlink-font-weight, inherit);
-    font-style: var(--playpilot-playlink-font-style, normal);
+    font-style: var(--playpilot-playlink-font-style, normal) !important;
     text-decoration: none !important;
     white-space: nowrap;
     font-size: var(--playpilot-playlinks-font-size, margin(0.75));
@@ -134,6 +135,23 @@
       text-decoration: none !important;
     }
 
+    &.highlighted {
+      &::before {
+        content: "";
+        z-index: 1;
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: inherit;
+        box-shadow: inset 0 0 0 2px currentColor;
+        opacity: 0.35;
+        pointer-events: none;
+      }
+    }
+
     img {
       margin: 0;
     }
@@ -163,6 +181,7 @@
   }
 
   .arrow {
+    display: flex;
     margin-left: auto;
     padding: 0 margin(0.5);
   }

package/src/routes/components/Popover.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, setContext, tick, type Snippet } from 'svelte'
+  import { prefersReducedMotion } from 'svelte/motion'
   import { fly } from 'svelte/transition'
 
   interface Props {
@@ -59,7 +60,7 @@
 </script>
 
 <div class="popover" class:flip bind:this={element} style:--max-height={maxHeight ? maxHeight + 'px' : null} tabindex="-1" aria-hidden="true">
-  <div class="dialog" transition:fly|global={{ duration: 100, y: 10 }} data-view-transition-old>
+  <div class="dialog" transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }} data-view-transition-old>
     {@render children()}
   </div>
 </div>

package/src/routes/components/Title.svelte

@@ -34,7 +34,7 @@
       </div>
     {/if}
 
-    <div class="heading" use:heading class:truncate={small}>{title.title}</div>
+    <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
     <div class="info">
       <div class="imdb">

package/src/routes/components/TitlePopover.svelte

@@ -42,7 +42,7 @@
   }
 </script>
 
-<div class="title-popover" bind:this={element} data-playpilot-title-popover>
+<div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
   <Popover bind:maxHeight>
     <Title {title} small compact={!!maxHeight && maxHeight < 250} />
   </Popover>

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

@@ -70,7 +70,7 @@ describe('$lib/auth', () => {
 
     it('Should not authorize is fetch response was negative', async () => {
       fakeFetch({ response: '', ok: false, status: 403 })
-      let authorized = await authorize('https://example.com/some-path?articleReplacementEditToken=some-token')
+      const authorized = await authorize('https://example.com/some-path?articleReplacementEditToken=some-token')
 
       expect(authorized).not.toBeTruthy()
       expect(track).toHaveBeenCalled()

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

@@ -850,7 +850,7 @@ describe('linkInjection.js', () => {
       const result = getLinkInjectionElements(parent, '[data-exclude]')
       expect(result).toHaveLength(1)
       expect(result[0].innerText).toBe('I am a regular element')
-    });
+    })
 
     it('Should return paragraphs fully even if they contain no direct text nodes, skipping empty paragraphs', () => {
       document.body.innerHTML = `<section>

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

@@ -9,6 +9,7 @@ import { authorize, getAuthToken, removeAuthCookie } from '$lib/auth'
 import { generateInjection } from '../helpers'
 import { injectLinksInDocument } from '$lib/linkInjection'
 import { isCrawler } from '$lib/crawler'
+import { getFullUrlPath } from '$lib/url'
 
 vi.mock('$lib/api', () => ({
   fetchLinkInjections: vi.fn(() => {}),
@@ -53,7 +54,7 @@ vi.mock('$lib/crawler', () => ({
 }))
 
 vi.mock('$lib/url', () => ({
-  getFullUrlPath: () => '/test',
+  getFullUrlPath: vi.fn(),
 }))
 
 describe('$routes/+page.svelte', () => {
@@ -61,6 +62,7 @@ describe('$routes/+page.svelte', () => {
     document.body.innerHTML = ''
     vi.resetAllMocks()
     vi.mocked(injectLinksInDocument).mockReturnValue([])
+    vi.mocked(getFullUrlPath).mockReturnValue('/test')
   })
 
   afterEach(() => {
@@ -340,6 +342,22 @@ describe('$routes/+page.svelte', () => {
     expect(pollLinkInjections).not.toHaveBeenCalled()
   })
 
+  it('Should log error if error occurs during injection', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [], link_injections: [] })
+    vi.mocked(injectLinksInDocument).mockImplementationOnce(() => {
+      throw new Error('Some error')
+    })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res)) // Await potential fetches
+
+    await waitFor(() => {
+      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionError, null, { message: 'Some error' })
+    })
+  })
+
   describe('Config', () => {
     describe('exclude_urls_pattern', () => {
       it('Should not inject if config exclude_urls_pattern matches current url', async () => {
@@ -351,7 +369,7 @@ describe('$routes/+page.svelte', () => {
         expect(pollLinkInjections).not.toHaveBeenCalled()
       })
 
-      it('Should not inject if config exclude_urls_pattern matches current url with more complex regex pattern', async () => {
+      it('Should not inject if config exclude_urls_pattern matches current url with regex pattern', async () => {
         vi.mocked(fetchConfig).mockResolvedValueOnce({ exclude_urls_pattern: '^/test$' })
 
         render(page)
@@ -360,6 +378,17 @@ describe('$routes/+page.svelte', () => {
         expect(pollLinkInjections).not.toHaveBeenCalled()
       })
 
+      // Real example from DigitalSpy
+      it('Should not inject if config exclude_urls_pattern matches current url with more complex regex pattern', async () => {
+        vi.mocked(getFullUrlPath).mockReturnValueOnce('https://www.digitalspy.com/soaps/coronation-street/a65476444/coronation-street-james-bailey-exit-dee-dee')
+        vi.mocked(fetchConfig).mockResolvedValueOnce({ exclude_urls_pattern: 'preview/|^(?!.*/(movies|tv)/).*' })
+
+        render(page)
+
+        await waitFor(() => expect(fetchConfig).toHaveBeenCalled())
+        expect(pollLinkInjections).not.toHaveBeenCalled()
+      })
+
       it('Should not inject if config returns an error', async () => {
         vi.mocked(fetchConfig).mockRejectedValueOnce('null')
 

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

@@ -38,6 +38,13 @@ describe('AIIndicator.svelte', () => {
     expect(getByText('25%')).toBeTruthy()
   })
 
+  it('Should floor the percentage label if a decimal is given', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 25.55 })
+
+    expect(getByTestId('loading-bar').style.width).toBe('25.55%')
+    expect(getByText('25%')).toBeTruthy()
+  })
+
   it('Should limit progress to minimum value in loading bar style only', () => {
     const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 0 })
 

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

@@ -21,4 +21,16 @@ describe('Alert.svelte', () => {
 
     expect(container.querySelector('.alert')?.classList).toContain('warning')
   })
+
+  it('Should include fixed class if prop is given', () => {
+    const { container } = render(Alert, { children, fixed: true })
+
+    expect(container.querySelector('.alert')?.classList).toContain('fixed')
+  })
+
+  it('Should not include fixed class if prop is not given', () => {
+    const { container } = render(Alert, { children })
+
+    expect(container.querySelector('.alert')?.classList).not.toContain('fixed')
+  })
 })

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

@@ -165,14 +165,14 @@ describe('EditorItem.svelte', () => {
     expect(onremove).toHaveBeenCalled()
   })
 
-  it('Should display an inactive injection as being so with text and classname', async () => {
+  it('Should display an inactive injection as being so with text and classname', () => {
     const { getByText, container } = render(EditorItem, { linkInjection: { ...linkInjection, inactive: true  } })
 
     expect(getByText('Inactive')).toBeTruthy()
     expect(container.querySelector('.inactive')).toBeTruthy()
   })
 
-  it('Should not display an active injection as being inactive', async () => {
+  it('Should not display an active injection as being inactive', () => {
     const { queryByText, container } = render(EditorItem, { linkInjection })
 
     expect(queryByText('Inactive')).not.toBeTruthy()
@@ -180,15 +180,24 @@ describe('EditorItem.svelte', () => {
     expect(container.querySelector('.inactive')).not.toBeTruthy()
   })
 
-  it('Should display an icon when playlink types are invalid', async () => {
+  it('Should display an icon when playlink types are invalid', () => {
     const { getByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, in_text: false  } })
 
     expect(getByLabelText('Invalid playlink settings')).toBeTruthy()
   })
 
-  it('Should not display an icon when playlink types are valid', async () => {
+  it('Should not display an icon when playlink types are valid', () => {
     const { queryByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, in_text: true  } })
 
     expect(queryByLabelText('Invalid playlink settings')).not.toBeTruthy()
   })
+
+  it('Should mount component when clicking report issue button', async () => {
+    const { getByLabelText, getByText } = render(EditorItem, { linkInjection })
+
+    await fireEvent.click(getByLabelText('More options'))
+    await fireEvent.click(getByText('Report issue'))
+
+    expect(getByText('What would you like to report?')).toBeTruthy()
+  })
 })

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

@@ -0,0 +1,63 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import ReportIssueModal from '../../../../routes/components/Editorial/ReportIssueModal.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { generateInjection } from '../../../helpers'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('ReportIssueModal.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  const onclose = vi.fn()
+  const linkInjection = generateInjection('a word', 'Some sentence with a word')
+
+  it('Should enable button after selecting issue', async () => {
+    const { getByRole, getAllByRole, getByText } = render(ReportIssueModal, { onclose, linkInjection })
+
+    expect(/** @type {HTMLButtonElement } */ (getByText('Send report')).disabled).toBeTruthy()
+
+    await fireEvent.click(getByRole('combobox'))
+    await fireEvent.click(getAllByRole('option')[1])
+
+    expect(/** @type {HTMLButtonElement } */ (getByText('Send report')).disabled).not.toBeTruthy()
+  })
+
+  it('Should submit form when clicked', async () => {
+    const { getByRole, getAllByRole, getByText } = render(ReportIssueModal, { onclose, linkInjection })
+
+    await fireEvent.click(getByRole('combobox'))
+    await fireEvent.click(getAllByRole('option')[1])
+    await fireEvent.click(getByText('Send report'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ManualReport,
+      linkInjection.title_details,
+      {
+        report_reason: /** @type {HTMLOptionElement} */ (getAllByRole('option')[1]).value,
+        sid: linkInjection.sid,
+        title: linkInjection.title,
+        sentence: linkInjection.sentence,
+        failed: linkInjection.failed?.toString(),
+        failed_message: linkInjection.failed_message,
+        manual: linkInjection.manual?.toString(),
+      },
+    )
+
+    expect(getByText('Report has been sent', { exact: false }))
+  })
+
+  it('Should not submit form when no reason is selected', async () => {
+    const { getByText } = render(ReportIssueModal, { onclose, linkInjection })
+
+    await fireEvent.click(getByText('Send report'))
+
+    expect(track).not.toHaveBeenCalled()
+  })
+})

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

@@ -22,6 +22,7 @@ describe('Playlinks.svelte', () => {
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
       { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
     ]
+    // @ts-ignore
     const { getByText } = render(Playlinks, { playlinks, title })
 
     expect(getByText('Some playlink')).toBeTruthy()
@@ -29,7 +30,7 @@ describe('Playlinks.svelte', () => {
   })
 
   it('Should show empty state when no playlinks were given', () => {
-    /** @type {PlaylinkData[]} */
+    /** @type {import('$lib/types/playlink').PlaylinkData[]} */
     const playlinks = []
     const { container } = render(Playlinks, { playlinks, title })
 
@@ -43,6 +44,7 @@ describe('Playlinks.svelte', () => {
       { name: 'Some rent playlink', logo_url: 'logo', extra_info: { category: 'RENT' } },
       { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'other' } },
     ]
+    // @ts-ignore
     const { getByText, getAllByText } = render(Playlinks, { playlinks, title })
 
     expect(getAllByText('Stream')).toHaveLength(2)
@@ -55,6 +57,7 @@ describe('Playlinks.svelte', () => {
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
       { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
     ]
+    // @ts-ignore
     const { getByText } = render(Playlinks, { playlinks, title })
 
     await fireEvent.click(getByText(playlinks[0].name))
@@ -68,6 +71,7 @@ describe('Playlinks.svelte', () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
     ]
+    // @ts-ignore
     const { getByText } = render(Playlinks, { playlinks, title })
 
     await fireEvent.click(getByText(playlinks[0].name))
@@ -82,20 +86,36 @@ describe('Playlinks.svelte', () => {
       { name: 'Some playlink', logo_url: '', extra_info: { category: 'RENT' } },
       { name: 'Some playlink', logo_url: null, extra_info: { category: 'other' } },
     ]
+    // @ts-ignore
     const { getAllByText } = render(Playlinks, { playlinks, title })
 
     expect(getAllByText('Some playlink')).toHaveLength(1)
   })
 
-  it('Should not have list class by default', async () => {
+  it('Should not have list class by default', () => {
     const { container } = render(Playlinks, { playlinks: [], title })
 
     expect(container.querySelector('.list')).not.toBeTruthy()
   })
 
-  it('Should have list class when prop is given', async () => {
+  it('Should have list class when prop is given', () => {
     const { container } = render(Playlinks, { playlinks: [], title, list: true })
 
     expect(container.querySelector('.list')).toBeTruthy()
   })
+
+  it('Should highlight and replace category text for playlinks that have highlighted as true', () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some other playlink', logo_url: 'logo', highlighted: true, cta_text: '', extra_info: { category: 'BUY' } },
+      { name: 'Some highlighted playlink', logo_url: 'logo', highlighted: true, cta_text: 'Some CTA', extra_info: { category: 'BUY' } },
+    ]
+    // @ts-ignore
+    const { getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByText('Some playlink').closest('.playlink')?.classList).not.toContain('highlighted')
+    expect(getByText('Some other playlink').closest('.playlink')?.classList).not.toContain('highlighted')
+    expect(getByText('Some highlighted playlink').closest('.playlink')?.classList).toContain('highlighted')
+    expect(getByText('Some CTA')).toBeTruthy()
+  })
 })