@playpilot/tpi 1.4.3 → 2.0.0

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

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/svelte'
+import { render, waitFor } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
 import page from '../../routes/+page.svelte'
@@ -43,6 +43,21 @@ describe('$routes/+page.svelte', () => {
     expect(pollLinkInjections).toHaveBeenCalled()
   })
 
+  it('Should call pollLinkInjections again if ai_running is true while in editorial mode', async () => {
+    vi.mocked(authorize).mockResolvedValueOnce(true)
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { editorial_token: 'some-token' }
+
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_running: true, injections_ready: true, page_updated: false, automation_enabled: true, injections_enabled: true, ai_injections: [], link_injections: [] })
+
+    render(page)
+
+    await waitFor(() => {
+      expect(pollLinkInjections).toHaveBeenCalled()
+      expect(pollLinkInjections).toHaveBeenCalledTimes(2)
+    })
+  })
+
   it('Should use the given selector when present', () => {
     document.body.innerHTML = '<div class="some-element"><p>Here</p></div> <p>Not here</p>'
 

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

@@ -0,0 +1,58 @@
+import { fireEvent, render, waitFor  } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import AIIndicator from '../../../../routes/components/Editorial/AIIndicator.svelte'
+import { generateInjection } from '../../../helpers'
+
+describe('AIIndicator.svelte', () => {
+  it('Should should running state by default', () => {
+    const { getByText } = render(AIIndicator, { onadd: () => null })
+
+    expect(getByText('AI links are currently processing.', { exact: false })).toBeTruthy()
+  })
+
+  it('Should show completed state with text depending on length of given array', async () => {
+    const { getByText, component } = render(AIIndicator, { onadd: () => null })
+
+    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()
+    })
+
+    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()
+    })
+  })
+
+  it('Should close element when dismiss button is clicked', async () => {
+    const { getByText, component, container } = render(AIIndicator, { onadd: () => null })
+
+    component.notifyUserOfNewState([])
+    await waitFor(() => getByText('Dismiss'))
+
+    await fireEvent.click(getByText('Dismiss'))
+    expect(container.querySelector('.ai-indicator')).not.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 })
+
+    const injection = generateInjection('Some sentence', 'Some title')
+    component.notifyUserOfNewState([injection])
+    await waitFor(() => getByText('Add AI links'))
+
+    await fireEvent.click(getByText('Add AI links'))
+
+    expect(onadd).toHaveBeenCalledWith([injection])
+    expect(container.querySelector('.ai-indicator')).not.toBeTruthy()
+  })
+})

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

@@ -1,29 +1,19 @@
-import { render } from '@testing-library/svelte'
+import { fireEvent, render } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
 import Editor from '../../../../routes/components/Editorial/Editor.svelte'
 import { title } from '$lib/fakeData'
+import { generateInjection } from '../../../helpers'
 
 vi.mock('$lib/api', () => ({
   saveLinkInjections: vi.fn(),
 }))
 
 describe('Editor.svelte', () => {
-  const linkInjections = [{
-    sid: '123',
-    key: '1',
-    title: 'an injection',
-    sentence: 'This is a sentence with an injection.',
-    playpilot_url: 'https://some-link.com/',
-    title_details: title,
-  }, {
-    sid: '456',
-    key: '2',
-    title: 'a sentence',
-    sentence: 'This is a sentence with an injection.',
-    playpilot_url: 'https://some-link.com/',
-    title_details: title,
-  }]
+  const linkInjections = [
+    generateInjection('This is a sentence with an injection.', 'an injection'),
+    generateInjection('This is a sentence with an injection.', 'a sentence'),
+  ]
 
   it('Should show the number of injections', () => {
     const { getByText } = render(Editor, { linkInjections })
@@ -56,15 +46,23 @@ describe('Editor.svelte', () => {
     expect(queryByText('Save links')).not.toBeTruthy()
   })
 
-  it('Should show save button if injections are present', async () => {
+  it('Should not show save button if injections are present but no change is made', async () => {
     const { queryByText } = render(Editor, { linkInjections, loading: false })
 
-    expect(queryByText('Save links')).toBeTruthy()
+    expect(queryByText('Save links')).not.toBeTruthy()
+  })
+
+  it('Should show save button if injections are present and a change has been made', async () => {
+    const { getByText, getAllByText } = render(Editor, { linkInjections, loading: false })
+
+    await fireEvent.click(getAllByText('Visible')[0])
+
+    expect(getByText('Save links')).toBeTruthy()
   })
 
   it('Should show empty state if no links are found', async () => {
-    const { queryByText } = render(Editor, { linkInjections: [], loading: false })
+    const { getByText } = render(Editor, { linkInjections: [], loading: false })
 
-    expect(queryByText('No links available', { exact: false })).toBeTruthy()
+    expect(getByText('No links available', { exact: false })).toBeTruthy()
   })
 })

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

@@ -3,34 +3,29 @@ import { describe, expect, it, vi } from 'vitest'
 
 import EditorItem from '../../../../routes/components/Editorial/EditorItem.svelte'
 import { injectLinksInDocument } from '$lib/linkInjection'
-import { title } from '$lib/fakeData'
+import { linkInjections, title } from '$lib/fakeData'
 import { track } from '$lib/tracking'
+import { generateInjection } from '../../../helpers'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
 describe('EditorItem.svelte', () => {
-  const linkInjection = {
-    sid: '1',
-    title: 'an injection',
-    sentence: 'This is a sentence with an injection.',
-    playpilot_url: 'https://some-link.com/',
-    key: 'some-key',
-    title_details: title,
-  }
+  const linkInjection = generateInjection('This is a sentence with an injection.', 'an injection')
+  const linkInjections = { aiInjections: [linkInjection], manualInjections: [] }
 
   it('Should render the given title', () => {
     const { getByText, getByRole } = render(EditorItem, { linkInjection })
 
-    expect(getByText(linkInjection.title_details.title)).toBeTruthy()
-    expect(/** @type {HTMLImageElement} */ (getByRole('presentation')).src).toContain(linkInjection.title_details.standing_poster)
+    expect(getByText(linkInjection.title_details?.title || '')).toBeTruthy()
+    expect(/** @type {HTMLImageElement} */ (getByRole('presentation')).src).toContain(linkInjection.title_details?.standing_poster)
   })
 
   it('Should highlight and unhighlight the matching link when component is hovered', async () => {
     document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
-    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, linkInjections)
 
     const { getAllByText, container } = render(EditorItem, { linkInjection })
 
@@ -45,7 +40,7 @@ describe('EditorItem.svelte', () => {
     document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
     const linkInjectionWithAfterArticle = { ...linkInjection, in_text: true, after_article: true }
-    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjectionWithAfterArticle], () => null)
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, { aiInjections: [linkInjectionWithAfterArticle], manualInjections: [] })
 
     const { container } = render(EditorItem, { linkInjection })
 
@@ -56,7 +51,7 @@ describe('EditorItem.svelte', () => {
   it('Should scroll matching link into view when component is clicked', async () => {
     document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
-    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, linkInjections)
 
     const { container } = render(EditorItem, { linkInjection })
 
@@ -67,7 +62,7 @@ describe('EditorItem.svelte', () => {
   it('Should not scroll matching link into view when component is clicked but there is no matching injection', async () => {
     document.body.innerHTML = '<p>This has no matching injections.</p>'
 
-    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, linkInjections)
 
     const { container } = render(EditorItem, { linkInjection })
 
@@ -78,7 +73,7 @@ describe('EditorItem.svelte', () => {
   it('Should not scroll matching link into view when component is clicked on button or input', async () => {
     document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
-    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, linkInjections)
 
     const { container } = render(EditorItem, { linkInjection })
 
@@ -92,7 +87,7 @@ describe('EditorItem.svelte', () => {
   it('Should highlight element in editor when hovering element on page', async () => {
     document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
-    injectLinksInDocument(Array.from(document.querySelectorAll('p')), [linkInjection], () => null)
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, linkInjections)
 
     await new Promise(res => setTimeout(res))
 

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

@@ -1,7 +1,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import TitleSearch from '../../../../routes/components/Editorial/ManualInjection.svelte'
+import ManualInjection from '../../../../routes/components/Editorial/ManualInjection.svelte'
 import { searchTitles } from '$lib/search'
 import { title } from '$lib/fakeData'
 
@@ -9,7 +9,7 @@ vi.mock('$lib/search', () => ({
   searchTitles: vi.fn(),
 }))
 
-describe('TitleSearch.svelte', () => {
+describe('ManualInjection.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
 
@@ -31,7 +31,7 @@ describe('TitleSearch.svelte', () => {
   })
 
   it('Should input selected text in selected text input and search input', async () => {
-    const { getByLabelText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave: () => null })
+    const { getByLabelText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave: () => null })
 
     await fireEvent.click(window)
 
@@ -41,15 +41,15 @@ describe('TitleSearch.svelte', () => {
   })
 
   it('Should disable save button by default', async () => {
-    const { getByText } = render(TitleSearch, { htmlString: '', onsave: () => null })
+    const { getByText } = render(ManualInjection, { htmlString: '', onsave: () => null })
 
     expect(getByText('Add playlink').hasAttribute('disabled')).toBeTruthy()
   })
 
-  it('Should enable save button after selecting text and selecting title from TitleSearch', async () => {
+  it('Should enable save button after selecting text and selecting title from ManualInjection', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
-    const { getByText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave: () => null })
+    const { getByText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave: () => null })
 
     await fireEvent.click(window)
     await waitFor(() => getByText(title.title))
@@ -62,7 +62,7 @@ describe('TitleSearch.svelte', () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
     const onsave = vi.fn()
-    const { getByText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave })
+    const { getByText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave })
 
     await fireEvent.click(window)
     await fireEvent.click(getByText(title.title))
@@ -75,6 +75,7 @@ describe('TitleSearch.svelte', () => {
       playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
       key: expect.any(String),
       title_details: title,
+      manual: true,
     })
   })
 
@@ -98,7 +99,7 @@ describe('TitleSearch.svelte', () => {
     }))
 
     const onsave = vi.fn()
-    const { getByText } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave })
+    const { getByText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave })
 
     await fireEvent.click(window)
     await fireEvent.click(getByText(title.title))
@@ -111,6 +112,7 @@ describe('TitleSearch.svelte', () => {
       playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
       key: expect.any(String),
       title_details: title,
+      manual: true,
     })
   })
 
@@ -122,7 +124,7 @@ describe('TitleSearch.svelte', () => {
     let container = document.querySelector('div')
 
     const onsave = vi.fn()
-    const { unmount } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave })
+    const { unmount } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave })
 
     // @ts-ignore
     window.getSelection = vi.fn(() => ({
@@ -156,7 +158,7 @@ describe('TitleSearch.svelte', () => {
       anchorNode: container,
     }))
 
-    ;(render(TitleSearch, { htmlString: document.body.innerHTML, onsave }))
+    ;(render(ManualInjection, { htmlString: document.body.innerHTML, onsave }))
 
     await fireEvent.click(window)
 

package/src/typedefs.js

@@ -43,17 +43,20 @@
 
 /**
  * @typedef {{
- *   sid: string,
- *   title: string,
- *   sentence: string,
- *   playpilot_url: string,
- *   key: string,
- *   title_details?: TitleData,
- *   inactive?: boolean,
- *   failed?: boolean,
- *   in_text?: boolean,
- *   after_article?: boolean
- *   after_article_style?: 'modal_button' | 'playlinks' | null
+ *  sid: string,
+ *  title: string,
+ *  sentence: string,
+ *  playpilot_url: string,
+ *  key: string,
+ *  title_details?: TitleData,
+ *  inactive?: boolean,
+ *  failed?: boolean,
+ *  in_text?: boolean,
+ *  after_article?: boolean,
+ *  after_article_style?: 'modal_button' | 'playlinks' | null,
+ *  manual?: boolean,
+ *  removed?: boolean,
+ *  duplicate?: boolean,
  * }} LinkInjection
  */
 
@@ -64,7 +67,19 @@
  */
 
 /**
- * @typedef {{ injections_ready: boolean, injections_enabled: boolean, link_injections: LinkInjection[] | null, automation_enabled: boolean }} LinkInjectionResponse
+ * @typedef {{
+ *  injections_ready: boolean,
+ *  page_updated: boolean,
+ *  automation_enabled: boolean,
+ *  injections_enabled: boolean,
+ *  ai_running: boolean,
+ *  ai_injections: LinkInjection[] | null,
+ *  link_injections: LinkInjection[] | null,
+ * }} LinkInjectionResponse
+ */
+
+/**
+ * @typedef {{ aiInjections: LinkInjection[], manualInjections: LinkInjection[] }} LinkInjectionTypes
  */
 
 /**