@playpilot/tpi 3.2.0-beta.1 → 3.2.0

package/src/routes/components/Title.svelte

@@ -6,6 +6,7 @@
   import IconIMDb from './Icons/IconIMDb.svelte'
   import { t } from '$lib/localization'
   import type { TitleData } from '$lib/types/title'
+  import { heading } from '$lib/actions/heading'
 
   interface Props {
     title: TitleData
@@ -33,7 +34,7 @@
       </div>
     {/if}
 
-    <h1 class:truncate={small}>{title.title}</h1>
+    <div class="heading" use:heading class:truncate={small}>{title.title}</div>
 
     <div class="info">
       <div class="imdb">
@@ -78,7 +79,7 @@
 </div>
 
 <style lang="scss">
-  h1 {
+  .heading {
     margin: margin(0.5) 0;
     color: var(--playpilot-detail-title-text-color, #fff);
     font-family: var(--playpilot-detail-title-font-family, inherit);

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

@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
-import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, getLinkInjectionElements, insertAfterArticlePlaylinks, getLinkInjectionsParentElement, sortLinkInjectionsByRange, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType } from '$lib/linkInjection'
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, getLinkInjectionElements, insertAfterArticlePlaylinks, getLinkInjectionsParentElement, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType } from '$lib/linkInjection'
 import { mount, unmount } from 'svelte'
 import { generateInjection } from '../helpers'
 
@@ -219,8 +219,6 @@ describe('linkInjection.js', () => {
 
       injectLinksInDocument(elements, () => null, { aiInjections: [injection], manualInjections: [] })
 
-      console.log(document.body.innerHTML)
-
       expect(document.querySelectorAll('a')).toHaveLength(2)
       expect(Array.from(document.querySelectorAll('a')).filter(a => a.innerText === 'a word')).toHaveLength(2)
     })
@@ -233,8 +231,6 @@ describe('linkInjection.js', () => {
 
       injectLinksInDocument(elements, () => null, { aiInjections: [injection], manualInjections: [] })
 
-      console.log(document.body.innerHTML)
-
       expect(document.querySelectorAll('a')).toHaveLength(2)
       expect(Array.from(document.querySelectorAll('a')).filter(a => a.innerText === 'a word')).toHaveLength(2)
     })
@@ -252,6 +248,18 @@ describe('linkInjection.js', () => {
       expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(1)
     })
 
+    it('Should inject into correct sentence when element contains other sentences with the same matching title', () => {
+      document.body.innerHTML = '<p>This is a match. But this sentence is a match.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+      const injection = generateInjection('But this sentence is a match.', 'a match')
+
+      injectLinksInDocument(elements, () => null, { aiInjections: [injection], manualInjections: [] })
+
+      expect(document.body.innerHTML).toContain('This is a match')
+      expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(1)
+    })
+
     it('Should inject properly when sentence contains element that are not part of the match', () => {
       document.body.innerHTML = '<p>This is <a>a sentence</a> with an injection.</p>'
 

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

@@ -84,6 +84,79 @@ describe('$routes/+page.svelte', () => {
     })
   })
 
+  it('Should continue response while in editorial mode and ai_running and automation_enabled are true', async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { editorial_token: 'some-token' }
+
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockImplementationOnce(async () => {
+      await new Promise(res => setTimeout(res, 100))
+      return { ai_injections: [], link_injections: [], ai_running: true, automation_enabled: true }
+    })
+
+    render(page)
+
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockImplementationOnce(async () => {
+      await new Promise(res => setTimeout(res, 100))
+      return { ai_injections: ['a'], link_injections: ['b'], ai_running: true, automation_enabled: true }
+    })
+
+    await waitFor(() => {
+      expect(pollLinkInjections).toHaveBeenCalledWith(expect.any(String), expect.any(String), { requireCompletedResult: true })
+    })
+
+    expect(pollLinkInjections).toHaveBeenCalledTimes(2)
+    expect(injectLinksInDocument).toHaveBeenCalledOnce()
+  })
+
+  it('Should not continue response while in editorial mode but ai_running or automation_enabled are not true', async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { editorial_token: 'some-token' }
+
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockImplementationOnce(async () => {
+      await new Promise(res => setTimeout(res, 100))
+      return { ai_injections: [], link_injections: [], ai_running: false, automation_enabled: false }
+    })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 500)) // Await possible response
+
+    expect(pollLinkInjections).toHaveBeenCalledTimes(1)
+  })
+
+  it('Should not continue response or inject while not in editorial mode and ai_running and automation_enabled are true', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockImplementationOnce(async () => {
+      await new Promise(res => setTimeout(res, 100))
+      return { ai_injections: [], link_injections: [], ai_running: true, automation_enabled: true }
+    })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 500)) // Await possible response
+
+    expect(pollLinkInjections).toHaveBeenCalledTimes(1)
+    expect(injectLinksInDocument).not.toHaveBeenCalled()
+  })
+
+  it('Should not continue response but should inject while not in editorial mode and ai_running is false', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockImplementationOnce(async () => {
+      await new Promise(res => setTimeout(res, 100))
+      return { ai_injections: [], link_injections: [], ai_running: false, automation_enabled: true }
+    })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 500)) // Await possible response
+
+    expect(pollLinkInjections).toHaveBeenCalledTimes(1)
+    expect(injectLinksInDocument).toHaveBeenCalled()
+  })
+
   it('Should use the given selector when present', async () => {
     document.body.innerHTML = '<div class="some-element"><p>Here</p></div> <p>Not here</p>'
 

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

@@ -1,68 +1,47 @@
-import { fireEvent, render, waitFor  } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
 
 import AIIndicator from '../../../../routes/components/Editorial/AIIndicator.svelte'
-import { generateInjection } from '../../../helpers'
 
 describe('AIIndicator.svelte', () => {
   it('Should show disabled state by default', () => {
-    const { getByText, queryByTestId } = render(AIIndicator, { onadd: () => null })
+    const { getByText, queryByTestId } = render(AIIndicator)
 
     expect(getByText('AI processing is disabled', { exact: false })).toBeTruthy()
     expect(queryByTestId('loading-bar')).not.toBeTruthy()
   })
 
-  it('Should should running state if automation is enabled', () => {
-    const { getByText, getByTestId } = render(AIIndicator, { onadd: () => null, automationEnabled: true })
+  it('Should show running when aiRunning and automationEnabled are true', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true })
 
     expect(getByText('AI links are currently processing.', { exact: false })).toBeTruthy()
     expect(getByTestId('loading-bar')).toBeTruthy()
   })
 
-  it('Should show completed state with text depending on length of given array', async () => {
-    const { getByText, component, queryByTestId } = render(AIIndicator, { onadd: () => null, automationEnabled: true })
+  it('Should not show animator or loading bar if aiRunning is false', () => {
+    const { queryByTestId } = render(AIIndicator, { aiRunning: false })
 
-    component.notifyUserOfNewState([generateInjection('Some sentence', 'Some title')])
-    await waitFor(() => {
-      expect(getByText('AI links are ready.', { exact: false })).toBeTruthy()
-      expect(getByText('1 New link was found.')).toBeTruthy()
-      expect(queryByTestId('loading-bar')).not.toBeTruthy()
-    })
-
-    component.notifyUserOfNewState([generateInjection('Some sentence', 'Some title'), generateInjection('Some sentence', 'Some title')])
-    await waitFor(() => {
-      expect(getByText('AI links are ready.', { exact: false })).toBeTruthy()
-      expect(getByText('2 New links were found.')).toBeTruthy()
-    })
-
-    component.notifyUserOfNewState([])
-    await waitFor(() => {
-      expect(getByText('AI links finished running, but no new links were found.')).toBeTruthy()
-      expect(queryByTestId('loading-bar')).not.toBeTruthy()
-    })
+    expect(queryByTestId('loading-bar')).not.toBeTruthy()
+    expect(queryByTestId('animator')).not.toBeTruthy()
   })
 
-  it('Should close element when dismiss button is clicked', async () => {
-    const { getByText, component, container } = render(AIIndicator, { onadd: () => null, automationEnabled: true })
+  it('Should show given message if aiRunning is true', () => {
+    const { getByText } = render(AIIndicator, { aiRunning: true, automationEnabled: true, message: 'Some message' })
 
-    component.notifyUserOfNewState([])
-    await waitFor(() => getByText('Dismiss'))
-
-    await fireEvent.click(getByText('Dismiss'))
-    expect(container.querySelector('.ai-indicator')).not.toBeTruthy()
+    expect(getByText('Some message')).toBeTruthy()
   })
 
-  it('Should close element and call onadd when Add AI links button is clicked', async () => {
-    const onadd = vi.fn()
-    const { getByText, component, container } = render(AIIndicator, { onadd, automationEnabled: true })
+  it('Should set progress bar to given progress percentage', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 25 })
 
-    const injection = generateInjection('Some sentence', 'Some title')
-    component.notifyUserOfNewState([injection])
-    await waitFor(() => getByText('Add AI links'))
+    expect(getByTestId('loading-bar').style.width).toBe('25%')
+    expect(getByText('25%')).toBeTruthy()
+  })
 
-    await fireEvent.click(getByText('Add AI links'))
+  it('Should limit progress to minimum value in loading bar style only', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 0 })
 
-    expect(onadd).toHaveBeenCalledWith([injection])
-    expect(container.querySelector('.ai-indicator')).not.toBeTruthy()
+    expect(getByTestId('loading-bar').style.width).toBe('3%')
+    expect(getByText('0%')).toBeTruthy()
   })
 })

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

@@ -61,9 +61,9 @@ describe('Title.svelte', () => {
   })
 
   it('Should truncate title when small prop is given', () => {
-    const { container } = render(Title, { title, small: true })
+    const { getAllByRole } = render(Title, { title, small: true })
 
-    expect(container.querySelector('h1.truncate')).toBeTruthy()
+    expect(getAllByRole('heading')[0].classList).toContain('truncate')
   })
 
   it('Should render given description', () => {

package/svelte.config.js

@@ -8,6 +8,7 @@ const config = {
       includePaths: ['src'],
       prependData: `
         @use "src/lib/scss/_functions.scss" as *;
+        @use "src/lib/scss/_mixins.scss" as *;
       `,
     },
   }),