@playpilot/tpi 1.0.0

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

@@ -0,0 +1,754 @@
+import { fireEvent  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, getLinkInjectionElements, insertAfterArticlePlaylinks, getLinkInjectionsParentElement, sortLinkInjectionsByRange } from '$lib/linkInjection'
+import { title } from '$lib/fakeData'
+import { mount, unmount } from 'svelte'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+function mockMatchMedia(matches = false) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches,
+      media: query,
+    })),
+  })
+}
+
+describe('linkInjection.js', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    mockMatchMedia()
+
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+  })
+
+  describe('injectLinksInDocument', () => {
+    it('Should replace given words with injections', () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
+
+      expect(link.innerText).toBe('an injection')
+      expect(link.href).toBe('https://some-link.com/')
+    })
+
+    it('Should replace given words as expected when more than 1 injection per sentence is present', () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'a sentence',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+        title_details: title,
+      }, {
+        sid: '2',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+        title_details: title,
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      const links = /** @type {HTMLAnchorElement[]} */ (Array.from(document.querySelectorAll('a')))
+
+      expect(links[0].innerText).toBe('a sentence')
+      expect(links[0].href).toBe('https://some-link.com/')
+      expect(links[0].dataset.playpilotOriginalTitle).toBe(title.original_title)
+
+      expect(links[1].innerText).toBe('an injection')
+      expect(links[1].href).toBe('https://some-link.com/')
+      expect(links[1].dataset.playpilotOriginalTitle).toBe(title.original_title)
+    })
+
+    it('Should ignore injections that are marked as inactive', () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: '',
+        poster: 'some-poster',
+        key: 'some-key',
+        inactive: true,
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.body.innerHTML).toBe('<p>This is a sentence with an injection.</p>')
+    })
+
+    it('Should keep existing HTML elements intact', () => {
+      document.body.innerHTML = '<p>This is a <button>sentence</button> with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: '',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      const button = /** @type {HTMLButtonElement} */ (document.querySelector('button'))
+
+      expect(button.innerText).toBe('sentence')
+    })
+
+    it('Should ignore elements that were not selected', () => {
+      document.body.innerHTML = '<h1>I am a title</h1><p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'a title',
+        sentence: 'I am a title',
+        playpilot_url: '',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.body.innerHTML.includes('I am a title')).toBeTruthy()
+    })
+
+    it('Should ignore partial matches due to interfering elements', () => {
+      document.body.innerHTML = '<p>This is a sentence with <strong>an</strong> injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: '',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.body.innerHTML.includes('an injection')).not.toBeTruthy()
+      expect(document.body.innerHTML.includes('an')).toBeTruthy()
+    })
+
+    it('Should ignore matches due to parent links', () => {
+      document.body.innerHTML = '<p>This is <a>a sentence</a> with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'a sentence',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.querySelector('[data-playpilot-injection-key]')).not.toBeTruthy()
+    })
+
+    it('Should ignore matches inside of attributes inside of links', () => {
+      document.body.innerHTML = '<p>This is <a data-thing="some word">a sentence</a> with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'some word',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.querySelector('[data-playpilot-injection-key]')).not.toBeTruthy()
+    })
+
+    it('Should skip links and replace other words instead', () => {
+      document.body.innerHTML = '<p>This is <a>a word</a> with a word.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'a word',
+        sentence: 'This is a word with a word.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.querySelectorAll('a')).toHaveLength(2)
+    })
+
+    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>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.querySelector('[data-playpilot-injection-key]')).toBeTruthy()
+    })
+
+    it('Should leave the text intact if no injections were found', () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      /** @type {LinkInjection[]} */
+      const linkInjections = []
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.body.innerHTML.includes('This is a sentence with an injection.')).toBeTruthy()
+    })
+
+    it('Should handle not receiving elements or injections', () => {
+      /** @type {HTMLElement[]} */
+      const elements = []
+
+      /** @type {LinkInjection[]} */
+      const linkInjections = []
+
+      expect(() => injectLinksInDocument(elements, linkInjections, () => null)).not.toThrow()
+    })
+
+    it('Should fire given onclick function when clicked', async () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, linkInjections, mock)
+
+      const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
+      await fireEvent.click(link)
+
+      expect(mock).toHaveBeenCalledWith(linkInjections[0])
+    })
+
+    it('Should fire given onclick function when clicked for each link in a sentence if more than 1 injection is present', async () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'a sentence',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+      }, {
+        sid: '2',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-2',
+      }]
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, linkInjections, mock)
+
+      const links = document.querySelectorAll('a')
+      await fireEvent.click(links[0])
+      await fireEvent.click(links[1])
+
+      expect(mock).toHaveBeenCalledTimes(2)
+    })
+
+    it('Should not fire given onclick function when clicked with modifier keys or not left click', async () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, linkInjections, mock)
+
+      const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
+
+      await fireEvent.click(link, { ctrlKey: true })
+      await fireEvent.click(link, { metaKey: true })
+      await fireEvent.click(link, { button: 1 })
+      await fireEvent.click(link, { button: 2 })
+
+      expect(mock).not.toHaveBeenCalled()
+    })
+
+    it('Should return array with failed injections marked as such', () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'a sentence',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-1',
+      }, {
+        sid: '2',
+        title: 'not an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key-2',
+      }]
+
+      const results = injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(results[1].failed).toBe(true)
+      expect(results[0].failed).toBe(false)
+    })
+
+    it('Should mount popover component when link is hovered and unmount when link is blurred', async () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      const mock = vi.fn()
+      injectLinksInDocument(elements, linkInjections, mock)
+
+      const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
+
+      await fireEvent.mouseEnter(link)
+      expect(mount).toHaveBeenCalled()
+
+      await fireEvent.mouseLeave(link)
+      expect(unmount).toHaveBeenCalled()
+    })
+
+    it('Should inject links of the same phrase when multiple are present', () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection and another injection</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'injection',
+        sentence: 'This is a sentence with an injection and another injection',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key',
+      }, {
+        sid: '2',
+        title: 'injection',
+        sentence: 'This is a sentence with an injection and another injection',
+        playpilot_url: 'https://some-link-2.com/',
+        poster: 'some-poster',
+        key: 'some-key-2',
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      const links = /** @type {HTMLAnchorElement[]} */ (Array.from(document.querySelectorAll('a')))
+
+      expect(links).toHaveLength(2)
+      expect(links[0].dataset.playpilotInjectionKey).toBe('some-key')
+      expect(links[1].dataset.playpilotInjectionKey).toBe('some-key-2')
+    })
+
+    it('Should not inject injections with in_text set to false', () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key',
+        in_text: false,
+      }]
+
+      injectLinksInDocument(elements, linkInjections, () => null)
+
+      expect(document.querySelector('a')).not.toBeTruthy()
+    })
+  })
+
+  it('Should not mount popover if user uses touch', async () => {
+    mockMatchMedia(true)
+
+    document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+    const elements = Array.from(document.body.querySelectorAll('p'))
+
+    const linkInjections = [{
+      sid: '1',
+      title: 'an injection',
+      sentence: 'This is a sentence with an injection.',
+      playpilot_url: 'https://some-link.com/',
+      poster: 'some-poster',
+      key: 'some-key',
+    }]
+
+    const mock = vi.fn()
+    injectLinksInDocument(elements, linkInjections, mock)
+
+    const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
+
+    await fireEvent.mouseEnter(link)
+    expect(mount).not.toHaveBeenCalled()
+  })
+
+  describe('clearLinkInjections', () => {
+    it('Should remove injected links from the page', () => {
+      document.body.innerHTML = '<p><a data-playpilot-injection-key>Some link</a></p>'
+      clearLinkInjections()
+
+      expect(document.body.innerHTML).toBe('<p>Some link</p>')
+    })
+
+    it('Should leave non-injected links intact', () => {
+      document.body.innerHTML = '<p><a>Some link</a></p>'
+      clearLinkInjections()
+
+      expect(document.body.innerHTML).toBe('<p><a>Some link</a></p>')
+    })
+  })
+
+  describe('clearLinkInjection', () => {
+    it('Should remove injected link from the page', () => {
+      document.body.innerHTML = '<p><a data-playpilot-injection-key="a">Some link</a></p>'
+      clearLinkInjection('a')
+
+      expect(document.body.innerHTML).toBe('<p>Some link</p>')
+    })
+
+    it('Should keep other keys intact', () => {
+      document.body.innerHTML = '<p><a data-playpilot-injection-key="b">Some link</a></p>'
+      clearLinkInjection('a')
+
+      expect(document.body.innerHTML).toBe('<p><a data-playpilot-injection-key="b">Some link</a></p>')
+    })
+  })
+
+  describe('getLinkInjectionElements', () => {
+    it('Should return a list of elements inside the given parent', () => {
+      document.body.innerHTML = '<section><p>Some paragraph</p><div>Some div</div></section>'
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(2)
+    })
+
+    it('Should ignore elements without text content', () => {
+      document.body.innerHTML = '<section><p>Some paragraph</p><div></div></section>'
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(1)
+    })
+
+    it('Should ignore child elements that were already included in parent text', () => {
+      document.body.innerHTML = '<section><p>Some paragraph <div>Some div</div></p></section>'
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(1)
+    })
+
+    it('Should return separate elements inside a parent if the parent has no direct text', () => {
+      document.body.innerHTML = '<section><div>Some text</div> <div>Some div</div></section>'
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(2)
+    })
+
+    it('Should return separate elements when text content is deep', () => {
+      document.body.innerHTML = '<section><div><div><main><p>Some <div>text<div></p><p>Some other text</p></main></div></div></section>'
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(2)
+    })
+
+    it('Should return each item in a list separately', () => {
+      document.body.innerHTML = `<section>
+        <ul>
+          <li>Hey!</li>
+          <li>I</li>
+          <li>am</li>
+          <li>part</li>
+          <li>of</li>
+          <li>a</li>
+          <li>list.</li>
+        </ul>
+      </section>`
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(7)
+    })
+
+    it('Should ignore links, buttons, script tags, style tags, iframes, and headers', () => {
+      document.body.innerHTML = `<section>
+        <h1>Some header</h1>
+        <h4>Some smaller header</h4>
+
+        <a>I am a link</a>
+        <button>And I am a button</button>
+
+        <script>I am a script</script>
+        <style>I am styling</style>
+        <iframe>I am an iframe</iframe>
+        <noscript>I am noscript</noscript>
+
+        <div>
+          <a>I am another link</a>
+          <p>And finally, some text</p>
+        </div>
+      </section>`
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(1)
+    })
+
+    it('Should ignore links, buttons, and headers even when deeply nested', () => {
+      document.body.innerHTML = `<section>
+        <div>
+          <h2><button>Button inside header</button></h2>
+          <div>
+            <a><h3>Header inside link</h3></a>
+            <p>Some text</p>
+          </div>
+        </div>
+      </section>`
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(1)
+    })
+
+    it('Should return an empty array if parent is empty', () => {
+      document.body.innerHTML = '<section></section>'
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toEqual([])
+    })
+
+    it('Should ignore empty elements', () => {
+      document.body.innerHTML = '<section><div>&nbsp;</div><div> </div><div>\n</div><div>Some text</div></section>'
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(1)
+    })
+
+    it('Should return elements in the same order they were given', () => {
+      document.body.innerHTML = `<section>
+        <div>
+          <p>Button inside header</p>
+          <div>
+            <strong>Header inside link</strong>
+            <div>Some text</div>
+          </div>
+        </div>
+      </section>`
+
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+      const elements = getLinkInjectionElements(parent)
+
+      expect(elements[0].nodeName === 'P')
+      expect(elements[1].nodeName === 'STRONG')
+      expect(elements[2].nodeName === 'DIV')
+    })
+  })
+
+  describe('getLinkInjectionsParentElement', () => {
+    it('Should return based on their given importance if no selector is given', () => {
+      document.body.innerHTML = '<main><article></article></main>'
+      expect(getLinkInjectionsParentElement().nodeName).toBe('ARTICLE')
+
+      document.body.innerHTML = '<main><div></div></main>'
+      expect(getLinkInjectionsParentElement().nodeName).toBe('MAIN')
+
+      document.body.innerHTML = '<div></div>'
+      expect(getLinkInjectionsParentElement().nodeName).toBe('BODY')
+    })
+
+    it('Should return the element matching the given selector', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.selector = 'section'
+      document.body.innerHTML = '<div><section></section></div>'
+      expect(getLinkInjectionsParentElement().nodeName).toBe('SECTION')
+    })
+
+    it('Should fall back to fallback elements if selector was given but matching element was not found', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.selector = 'section'
+      document.body.innerHTML = '<div><article></article></div>'
+      expect(getLinkInjectionsParentElement().nodeName).toBe('ARTICLE')
+    })
+
+    it('Should escape selectors with :', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.selector = '.some:class'
+      document.body.innerHTML = '<div><section class="some:class"></section></div>'
+      expect(getLinkInjectionsParentElement().nodeName).toBe('SECTION')
+    })
+  })
+
+  describe('insertAfterArticlePlaylinks', () => {
+    it('Should insert component after given elements', () => {
+      document.body.innerHTML = `<section>
+          <div>Some text</div>
+          <div>Some other text</div>
+        </section>
+      `
+
+      const linkInjections = [{
+        sid: '1',
+        title: 'an injection',
+        sentence: 'This is a sentence with an injection.',
+        playpilot_url: 'https://some-link.com/',
+        poster: 'some-poster',
+        key: 'some-key',
+      }]
+
+      const elements = getLinkInjectionElements(document.body)
+      insertAfterArticlePlaylinks(elements, linkInjections, () => null)
+
+      expect(mount).toHaveBeenCalled()
+      expect(document.querySelector('[data-playpilot-after-article-playlinks]')).toBeTruthy()
+    })
+
+    it('Should not insert component if no linkInjections were given', () => {
+      document.body.innerHTML = `<section>
+          <div>Some text</div>
+          <div>Some other text</div>
+        </section>
+      `
+
+      const elements = getLinkInjectionElements(document.body)
+      insertAfterArticlePlaylinks(elements, [], () => null)
+
+      expect(mount).not.toHaveBeenCalled()
+      expect(document.querySelector('[data-playpilot-after-article-playlinks]')).not.toBeTruthy()
+    })
+  })
+
+  describe('sortLinkInjectionsByRange', () => {
+    const injections = [
+      { key: 'a', sid: '', title: '', playpilot_url: '', sentence: '' },
+      { key: 'b', sid: '', title: '', playpilot_url: '', sentence: '' },
+      { key: 'c', sid: '', title: '', playpilot_url: '', sentence: '' },
+    ]
+
+    it('Should sort link injections by their element index', () => {
+      const ranges = {
+        a: { elementIndex: 1, from: 0, to: 0 },
+        b: { elementIndex: 0, from: 0, to: 0 },
+      }
+
+      const sortedInjections = sortLinkInjectionsByRange(injections, ranges)
+
+      expect(sortedInjections[0].key).toBe('b')
+      expect(sortedInjections[1].key).toBe('a')
+    })
+
+    it('Should sort link injections by their from value', () => {
+      const ranges = {
+        a: { elementIndex: 0, from: 2, to: 0 },
+        b: { elementIndex: 0, from: 1, to: 0 },
+      }
+
+      const sortedInjections = sortLinkInjectionsByRange(injections, ranges)
+
+      expect(sortedInjections[0].key).toBe('b')
+      expect(sortedInjections[1].key).toBe('a')
+    })
+
+    it('Should place elements without range last', () => {
+      const ranges = {
+        b: { elementIndex: 0, from: 0, to: 0 },
+        c: { elementIndex: 0, from: 1, to: 0 },
+      }
+
+      const sortedInjections = sortLinkInjectionsByRange(injections, ranges)
+
+      expect(sortedInjections[0].key).toBe('b')
+      expect(sortedInjections[1].key).toBe('c')
+      expect(sortedInjections[2].key).toBe('a')
+    })
+  })
+})