@playpilot/tpi 3.1.0-beta.4 → 3.1.0

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

@@ -1,5 +1,5 @@
-import { fireEvent  } from '@testing-library/svelte'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
+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 } from '$lib/linkInjection'
 import { mount, unmount } from 'svelte'
@@ -29,6 +29,10 @@ describe('linkInjection.js', () => {
     window.PlayPilotLinkInjections = {}
   })
 
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   describe('injectLinksInDocument', () => {
     it('Should replace given words with injections', () => {
       const injection = generateInjection('This is a sentence with an injection.', 'an injection')
@@ -335,7 +339,10 @@ describe('linkInjection.js', () => {
 
       const link = /** @type {HTMLAnchorElement} */ (document.querySelector('[data-playpilot-injection-key]'))
 
+      vi.useFakeTimers()
+
       await fireEvent.mouseEnter(link)
+      vi.advanceTimersByTime(200)
       expect(mount).toHaveBeenCalled()
 
       await fireEvent.mouseLeave(link)
@@ -353,13 +360,38 @@ describe('linkInjection.js', () => {
 
       const link = /** @type {HTMLAnchorElement} */ (document.querySelector('[data-playpilot-injection-key]'))
 
+      vi.useFakeTimers()
+
       await fireEvent.mouseEnter(link)
+      vi.advanceTimersByTime(200)
       await fireEvent.mouseLeave(link)
       await fireEvent.mouseEnter(link)
+      vi.advanceTimersByTime(200)
 
       expect(mount).toHaveBeenCalledTimes(2)
     })
 
+    it('Should not mount popover on mouseover if not hovered for long enough duration', async () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, mock, { aiInjections: [injection], manualInjections: [] })
+
+      const link = /** @type {HTMLAnchorElement} */ (document.querySelector('[data-playpilot-injection-key]'))
+
+      vi.useFakeTimers()
+
+      await fireEvent.mouseEnter(link)
+      vi.advanceTimersByTime(50)
+      await fireEvent.mouseLeave(link)
+      vi.advanceTimersByTime(500)
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
     it('Should mount popover component only once when the same popover is already open', async () => {
       document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
@@ -371,10 +403,15 @@ describe('linkInjection.js', () => {
 
       const link = /** @type {HTMLAnchorElement} */ (document.querySelector('[data-playpilot-injection-key]'))
 
+      vi.useFakeTimers()
+
       await fireEvent.mouseEnter(link)
+      vi.advanceTimersByTime(200)
       expect(mount).toHaveBeenCalled()
 
       await fireEvent.mouseEnter(link)
+      vi.advanceTimersByTime(200)
+
       expect(mount).toHaveBeenCalledTimes(1)
     })
 
@@ -487,6 +524,30 @@ describe('linkInjection.js', () => {
 
       expect(document.querySelectorAll('a')).toHaveLength(3)
     })
+
+    it('Should properly inject into lists', () => {
+      document.body.innerHTML = `<section>
+          <ul>
+            <li>First</li>
+            <li>Title</li>
+            <li>Some other title</li>
+            <li>Fourth</li>
+          </ul>
+        </section>
+      `
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injections = [
+        generateInjection('First Title Some other title', 'First'),
+        generateInjection('First Title Some other title', 'Title'),
+        generateInjection('First Title Some other title', 'Some other title'),
+        generateInjection('First Title Some other title', 'Fourth'),
+      ]
+
+      injectLinksInDocument(elements, () => null, { aiInjections: [], manualInjections: injections })
+
+      expect(document.querySelectorAll('a')).toHaveLength(4)
+    })
   })
 
   describe('clearLinkInjections', () => {
@@ -557,7 +618,7 @@ describe('linkInjection.js', () => {
       expect(getLinkInjectionElements(parent)).toHaveLength(2)
     })
 
-    it('Should return each item in a list separately', () => {
+    it('Should return a list as a single element', () => {
       document.body.innerHTML = `<section>
         <ul>
           <li>Hey!</li>
@@ -568,10 +629,22 @@ describe('linkInjection.js', () => {
           <li>a</li>
           <li>list.</li>
         </ul>
+
+        <ol>
+          <li>Hey!</li>
+          <li>I</li>
+          <li>am</li>
+          <li>part</li>
+          <li>of</li>
+          <li>a</li>
+          <li>list.</li>
+        </ol>
       </section>`
       const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
 
-      expect(getLinkInjectionElements(parent)).toHaveLength(7)
+      expect(getLinkInjectionElements(parent)).toHaveLength(2)
+      expect(getLinkInjectionElements(parent)[0].tagName).toBe('UL')
+      expect(getLinkInjectionElements(parent)[1].tagName).toBe('OL')
     })
 
     it('Should ignore links, buttons, script tags, style tags, iframes, and headers', () => {
@@ -686,8 +759,8 @@ describe('linkInjection.js', () => {
   describe('insertAfterArticlePlaylinks', () => {
     it('Should insert component after given elements', () => {
       document.body.innerHTML = `<section>
-          <div>Some text</div>
-          <div>Some other text</div>
+          <p>Some text</p>
+          <p>Some other text</p>
         </section>
       `
 
@@ -696,8 +769,10 @@ describe('linkInjection.js', () => {
       const elements = getLinkInjectionElements(document.body)
       insertAfterArticlePlaylinks(elements, [injection], () => null)
 
+      console.log(document.body.innerHTML)
+
       expect(mount).toHaveBeenCalled()
-      expect(document.querySelector('[data-playpilot-after-article-playlinks]')).toBeTruthy()
+      expect(document.querySelector('p:last-of-type + [data-playpilot-after-article-playlinks]')).toBeTruthy()
     })
 
     it('Should not insert component if no linkInjections were given', () => {
@@ -713,6 +788,58 @@ describe('linkInjection.js', () => {
       expect(mount).not.toHaveBeenCalled()
       expect(document.querySelector('[data-playpilot-after-article-playlinks]')).not.toBeTruthy()
     })
+
+    it('Should insert after the given element if selector is given in config object', () => {
+      window.PlayPilotLinkInjections.after_article_selector = 'hr'
+
+      document.body.innerHTML = `<section>
+          <div>Some text</div>
+          <hr>
+          <div>Some other text</div>
+        </section>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      const elements = getLinkInjectionElements(document.body)
+      insertAfterArticlePlaylinks(elements, [injection], () => null)
+
+      expect(document.querySelector('hr + [data-playpilot-after-article-playlinks]')).toBeTruthy()
+    })
+
+    it('Should insert in given position if position is given in config object', () => {
+      window.PlayPilotLinkInjections.after_article_insert_position = 'beforebegin'
+
+      document.body.innerHTML = `<section>
+          <div>Some text</div>
+          <hr>
+          <div>Some other text</div>
+        </section>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      const elements = getLinkInjectionElements(document.body)
+      insertAfterArticlePlaylinks(elements, [injection], () => null)
+
+      expect(document.querySelector('hr + [data-playpilot-after-article-playlinks]')).toBeTruthy()
+    })
+
+    it('Should insert in given position for the given element if selector and position are given in config object', () => {
+      window.PlayPilotLinkInjections.after_article_selector = 'hr'
+      window.PlayPilotLinkInjections.after_article_insert_position = 'beforebegin'
+
+      document.body.innerHTML = `<section>
+          <div>Some text</div>
+          <hr>
+          <div>Some other text</div>
+        </section>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      const elements = getLinkInjectionElements(document.body)
+      insertAfterArticlePlaylinks(elements, [injection], () => null)
+
+      expect(document.querySelector('[data-playpilot-after-article-playlinks] + hr')).toBeTruthy()
+    })
   })
 
   describe('sortLinkInjectionsByRange', () => {

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

@@ -1,11 +1,13 @@
-import { render, waitFor } from '@testing-library/svelte'
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
 import page from '../../routes/+page.svelte'
 import { fetchConfig, pollLinkInjections } from '$lib/api'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
-import { authorize } from '$lib/auth'
+import { authorize, getAuthToken, removeAuthCookie } from '$lib/auth'
+import { generateInjection } from '../helpers'
+import { injectLinksInDocument } from '$lib/linkInjection'
 import { isCrawler } from '$lib/crawler'
 
 vi.mock('$lib/api', () => ({
@@ -13,6 +15,14 @@ vi.mock('$lib/api', () => ({
   fetchConfig: vi.fn(),
 }))
 
+vi.mock(import('$lib/linkInjection'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    injectLinksInDocument: vi.fn(() => []),
+  }
+})
+
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
@@ -22,6 +32,8 @@ vi.mock(import('$lib/auth'), async (importOriginal) => {
   return {
     ...actual,
     authorize: vi.fn(),
+    getAuthToken: vi.fn(() => ''),
+    removeAuthCookie: vi.fn(),
   }
 })
 
@@ -36,6 +48,7 @@ vi.mock('$lib/url', () => ({
 describe('$routes/+page.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
+    vi.mocked(injectLinksInDocument).mockReturnValue([])
   })
 
   afterEach(() => {
@@ -131,12 +144,76 @@ describe('$routes/+page.svelte', () => {
     expect(container.querySelector('.editor')).not.toBeTruthy()
   })
 
+  it('Should not render editor trigger if getAuthToken does not return token', () => {
+    vi.mocked(getAuthToken).mockReturnValueOnce('')
+
+    const { queryByTitle } = render(page)
+
+    expect(queryByTitle('Show PlayPilot TPI editor')).not.toBeTruthy()
+  })
+
+  it('Should render editor trigger if getAuthToken returns token', () => {
+    vi.mocked(getAuthToken).mockReturnValueOnce('token')
+
+    const { getByTitle } = render(page)
+
+    expect(getByTitle('Show PlayPilot TPI editor')).toBeTruthy()
+  })
+
+  it('Should call removeAuthCookie when editor trigger close button is clicked', async () => {
+    vi.mocked(getAuthToken).mockReturnValueOnce('token')
+
+    const { getByTitle } = render(page)
+
+    await fireEvent.click(getByTitle('Close PlayPilot TPI'))
+
+    expect(removeAuthCookie).toHaveBeenCalled()
+  })
+
+  it('Should open editor after clicking editor token', async () => {
+    vi.mocked(getAuthToken).mockReturnValueOnce('token')
+    vi.mocked(authorize).mockResolvedValueOnce(true)
+
+    const { getByTitle, container } = render(page)
+
+    await fireEvent.click(getByTitle('Show PlayPilot TPI editor'))
+
+    expect(container.querySelector('.editor')).toBeTruthy()
+  })
+
   it('Should track event when the page is loaded', () => {
     render(page)
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ArticlePageView)
   })
 
+  it('Should track injection event when injections are injected', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [generateInjection('a', 'b')], link_injections: [{ ...generateInjection('a', 'b'), manual: true }] })
+    vi.mocked(injectLinksInDocument).mockReturnValueOnce([generateInjection('a', 'b'), { ...generateInjection('a', 'b'), manual: true }])
+
+    render(page)
+
+    await waitFor(() => {
+      expect(track).toHaveBeenCalledWith(TrackingEvent.ArticleInjected, null, {
+        ai: 1,
+        manual: 1,
+      })
+    })
+  })
+
+  it('Should not track injection event when no injections were successful', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [generateInjection('a', 'b')], link_injections: [{ ...generateInjection('a', 'b'), manual: true }] })
+    vi.mocked(injectLinksInDocument).mockReturnValueOnce([{ ...generateInjection('a', 'b'), manual: true, failed: true }])
+
+    render(page)
+
+    await waitFor(() => expect(injectLinksInDocument).toHaveBeenCalled())
+
+    expect(track).toHaveBeenCalledOnce()
+  })
+
   it('Should not initialize if isCrawler is true', async () => {
     vi.mocked(isCrawler).mockReturnValueOnce(true)
 

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

@@ -66,10 +66,10 @@ describe('Editor.svelte', () => {
 
     expect(getAllByText(title.title)).toHaveLength(2)
     expect(track).toHaveBeenCalledWith(TrackingEvent.TotalInjectionsCount, null, {
-      total: '7',
-      failed_automatic: '2',
-      failed_manual: '1',
-      final_injected: '2',
+      total: 7,
+      failed_automatic: 2,
+      failed_manual: 1,
+      final_injected: 2,
     })
   })
 

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

@@ -0,0 +1,24 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import EditorTrigger from '../../../../routes/components/Editorial/EditorTrigger.svelte'
+
+describe('EditorTrigger.svelte', () => {
+  it('Should fire the given onclick function', async () => {
+    const onclick = vi.fn()
+    const { getByTitle } = render(EditorTrigger, { onclick, onclose: () => null })
+
+    await fireEvent.click(getByTitle('Show PlayPilot TPI editor'))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+
+  it('Should fire the given onclick function', async () => {
+    const onclose = vi.fn()
+    const { getByTitle } = render(EditorTrigger, { onclick: () => null, onclose })
+
+    await fireEvent.click(getByTitle('Close PlayPilot TPI'))
+
+    expect(onclose).toHaveBeenCalled()
+  })
+})

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

@@ -5,6 +5,24 @@ import ManualInjection from '../../../../routes/components/Editorial/ManualInjec
 import { searchTitles } from '$lib/search'
 import { title } from '$lib/fakeData'
 
+function createSelectionMock() {
+  const container = document.querySelector('div')
+
+  // @ts-ignore
+  window.getSelection = vi.fn(() => ({
+    toString: () => 'text',
+    getRangeAt: () => ({
+      commonAncestorContainer: container,
+      startContainer: container,
+      startOffset: 0,
+      endOffset: 0,
+      cloneContents: () => ({ childNodes: [] }),
+    }),
+    anchorNode: container,
+    focusNode: container,
+  }))
+}
+
 vi.mock('$lib/search', () => ({
   searchTitles: vi.fn(),
 }))
@@ -14,27 +32,14 @@ describe('ManualInjection.svelte', () => {
     vi.resetAllMocks()
 
     document.body.innerHTML = '<div>Some text in a sentence</div>'
-
-    const container = document.querySelector('div')
-
-    // @ts-ignore
-    window.getSelection = vi.fn(() => ({
-      toString: () => 'text',
-      getRangeAt: () => ({
-        commonAncestorContainer: container,
-        startContainer: container,
-        startOffset: 0,
-        endOffset: 0,
-      }),
-      anchorNode: container,
-      focusNode: container,
-    }))
   })
 
   it('Should input selected text in selected text input and search input', async () => {
+    createSelectionMock()
+
     const { getByLabelText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave: () => null })
 
-    await fireEvent.click(window)
+    await fireEvent.mouseUp(window)
 
     expect(window.getSelection).toHaveBeenCalled()
     expect(/** @type {HTMLFormElement} */ (getByLabelText('Select text on the page')).value).toBe('text')
@@ -42,17 +47,21 @@ describe('ManualInjection.svelte', () => {
   })
 
   it('Should disable save button by default', async () => {
+    createSelectionMock()
+
     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 ManualInjection', async () => {
+    createSelectionMock()
+
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
     const { getByText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave: () => null })
 
-    await fireEvent.click(window)
+    await fireEvent.mouseUp(window)
     await waitFor(() => getByText(title.title))
     await fireEvent.click(getByText(title.title))
 
@@ -60,12 +69,14 @@ describe('ManualInjection.svelte', () => {
   })
 
   it('Should call given onsave function when clicked', async () => {
+    createSelectionMock()
+
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
     const onsave = vi.fn()
     const { getByText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave })
 
-    await fireEvent.click(window)
+    await fireEvent.mouseUp(window)
     await fireEvent.click(getByText(title.title))
     await fireEvent.click(getByText('Add playlink'))
 
@@ -95,6 +106,7 @@ describe('ManualInjection.svelte', () => {
         startContainer: container,
         startOffset: 0,
         endOffset: 0,
+        cloneContents: () => ({ childNodes: [] }),
       }),
       anchorNode: container,
       focusNode: container,
@@ -103,7 +115,7 @@ describe('ManualInjection.svelte', () => {
     const onsave = vi.fn()
     const { getByText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave })
 
-    await fireEvent.click(window)
+    await fireEvent.mouseUp(window)
     await fireEvent.click(getByText(title.title))
     await fireEvent.click(getByText('Add playlink'))
 
@@ -136,12 +148,13 @@ describe('ManualInjection.svelte', () => {
         startContainer: container,
         startOffset: 0,
         endOffset: 0,
+        cloneContents: () => ({ childNodes: [] }),
       }),
       anchorNode: container,
       focusNode: container,
     }))
 
-    await fireEvent.click(window)
+    await fireEvent.mouseUp(window)
 
     expect(searchTitles).not.toHaveBeenCalled()
 
@@ -157,6 +170,7 @@ describe('ManualInjection.svelte', () => {
         startContainer: container,
         startOffset: 0,
         endOffset: 0,
+        cloneContents: () => ({ childNodes: [] }),
       }),
       anchorNode: container,
       focusNode: container,
@@ -164,8 +178,38 @@ describe('ManualInjection.svelte', () => {
 
     ;(render(ManualInjection, { htmlString: document.body.innerHTML, onsave }))
 
-    await fireEvent.click(window)
+    await fireEvent.mouseUp(window)
 
     await waitFor(() => expect(searchTitles).toHaveBeenCalled())
   })
+
+  it('Should not select content if it contains multiple child nodes with content', async () => {
+    document.body.innerHTML = '<main><div>Some text in a sentence</div></main>'
+
+    const container = document.querySelector('div')
+    const onsave = vi.fn()
+    const { getByText } = render(ManualInjection, { htmlString: document.body.innerHTML, onsave })
+
+    // @ts-ignore
+    window.getSelection = vi.fn(() => ({
+      toString: () => 'Some text',
+      getRangeAt: () => ({
+        commonAncestorContainer: container,
+        startContainer: container,
+        startOffset: 0,
+        endOffset: 0,
+        cloneContents: () => ({ childNodes: [{ textContent: 'a' }, { textContent: 'b' }] }),
+      }),
+      anchorNode: container,
+      focusNode: container,
+    }))
+
+    await fireEvent.mouseUp(window)
+
+    expect(searchTitles).not.toHaveBeenCalled()
+
+    await waitFor(() => {
+      expect(getByText('Selection contains multiple items. Selection may not contain a mix of styled and non styled text. Please select the text more directly.')).toBeTruthy()
+    })
+  })
 })