@playpilot/tpi 3.0.1 → 3.1.0-beta.2

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

@@ -1,7 +1,7 @@
 import { fireEvent  } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, getLinkInjectionElements, insertAfterArticlePlaylinks, getLinkInjectionsParentElement, sortLinkInjectionsByRange, isAvailableAsManualInjection, filterRemovedInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection } from '$lib/linkInjection'
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, getLinkInjectionElements, insertAfterArticlePlaylinks, getLinkInjectionsParentElement, sortLinkInjectionsByRange, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection } from '$lib/linkInjection'
 import { mount, unmount } from 'svelte'
 import { generateInjection } from '../helpers'
 
@@ -118,6 +118,24 @@ describe('linkInjection.js', () => {
       expect(document.body.innerHTML).toBe(`<p>${sentence}</p>`)
     })
 
+    it('Should ignore AI injections that are marked as inactive as a matching manual injections', () => {
+      const sentence = 'This is a sentence with an injection.'
+      const injection = generateInjection(sentence, 'an injection')
+
+      document.body.innerHTML = `<p>${sentence}</p>`
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const injections = {
+        aiInjections: [injection],
+        manualInjections: [{ ...injection, manual: true, inactive: true }],
+      }
+
+      injectLinksInDocument(elements, () => null, injections)
+
+      expect(document.body.innerHTML).toBe(`<p>${sentence}</p>`)
+    })
+
     it('Should keep existing HTML elements intact', () => {
       const injection = generateInjection('This is a sentence with an injection.', 'an injection')
       const linkInjections = [injection]
@@ -216,7 +234,7 @@ describe('linkInjection.js', () => {
 
       const elements = Array.from(document.body.querySelectorAll('p'))
 
-      /** @type {LinkInjection[]} */
+      /** @type {import('$lib/types/injection').LinkInjection[]} */
       const linkInjections = []
 
       injectLinksInDocument(elements, () => null, { aiInjections: linkInjections, manualInjections: [] })
@@ -228,7 +246,7 @@ describe('linkInjection.js', () => {
       /** @type {HTMLElement[]} */
       const elements = []
 
-      /** @type {LinkInjection[]} */
+      /** @type {import('$lib/types/injection').LinkInjection[]} */
       const linkInjections = []
 
       expect(() => injectLinksInDocument(elements, () => null, { aiInjections: linkInjections, manualInjections: [] })).not.toThrow()
@@ -446,8 +464,6 @@ describe('linkInjection.js', () => {
       const mock = vi.fn()
       injectLinksInDocument(elements, mock, { aiInjections: [], manualInjections: injections })
 
-      console.log(document.body.innerHTML)
-
       expect(document.querySelectorAll('a')).toHaveLength(4)
     })
 
@@ -469,8 +485,6 @@ describe('linkInjection.js', () => {
       const mock = vi.fn()
       injectLinksInDocument(elements, mock, { aiInjections: [], manualInjections: injections })
 
-      console.log(document.body.innerHTML)
-
       expect(document.querySelectorAll('a')).toHaveLength(3)
     })
   })
@@ -767,26 +781,40 @@ describe('linkInjection.js', () => {
     })
   })
 
-  describe('filterRemovedInjections', () => {
+  describe('filterRemovedAndInactiveInjections', () => {
     it('Should not return injections that are removed or have an removed manual equivalent', () => {
       const aiInjection = generateInjection('Some sentence', 'Some title')
       const manualInjection = { ...aiInjection, manual: true, removed: true }
 
-      expect(filterRemovedInjections([aiInjection, manualInjection])).toEqual([])
+      expect(filterRemovedAndInactiveInjections([aiInjection, manualInjection])).toEqual([])
+    })
+
+    it('Should not return injections that are inactive or have an inactive manual equivalent', () => {
+      const aiInjection = generateInjection('Some sentence', 'Some title')
+      const manualInjection = { ...aiInjection, manual: true, inactive: true }
+
+      expect(filterRemovedAndInactiveInjections([aiInjection, manualInjection])).toEqual([])
     })
 
     it('Should return ai injections that have no matching manual injection', () => {
       const aiInjection = generateInjection('Some sentence', 'Some title')
       const manualInjection = { ...generateInjection('Some other sentence', 'Some other title'), manual: true }
 
-      expect(filterRemovedInjections([aiInjection, manualInjection])).toEqual([aiInjection, manualInjection])
+      expect(filterRemovedAndInactiveInjections([aiInjection, manualInjection])).toEqual([aiInjection, manualInjection])
     })
 
     it('Should return manual injections that have been removed at one point, but a new injection for the same title was created', () => {
       const manualInjection = { ...generateInjection('Some other sentence', 'Some other title'), manual: true }
       const removedManualInjection = { ...manualInjection, removed: true }
 
-      expect(filterRemovedInjections([manualInjection, removedManualInjection])).toEqual([manualInjection])
+      expect(filterRemovedAndInactiveInjections([manualInjection, removedManualInjection])).toEqual([manualInjection])
+    })
+
+    it('Should return manual injections that have been inactive at one point, but a new injection for the same title was created', () => {
+      const manualInjection = { ...generateInjection('Some other sentence', 'Some other title'), manual: true }
+      const inactiveManualInjection = { ...manualInjection, inactive: true }
+
+      expect(filterRemovedAndInactiveInjections([manualInjection, inactiveManualInjection])).toEqual([manualInjection])
     })
   })
 

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from '$lib/text'
+import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom, truncateAroundPhrase } from '$lib/text'
 
 describe('text.js', () => {
   beforeEach(() => {
@@ -105,4 +105,26 @@ describe('text.js', () => {
       expect(cleanPhrase('{&}')).toBe('{&}')
     })
   })
+
+  describe('truncateAroundPhrase', () => {
+    it('Should truncate a sentence at the end when the phrase is near the start', () => {
+      expect(truncateAroundPhrase('Some sentence with a word', 'Some', 10)).toBe('Some sente…')
+    })
+
+    it('Should truncate a sentence at the start when the phrase is near the end', () => {
+      expect(truncateAroundPhrase('Some sentence with a word', 'a word', 10)).toBe('…ith a word')
+    })
+
+    it('Should truncate a sentence at the start end the start when the phrase is near the center', () => {
+      expect(truncateAroundPhrase('Some sentence with a word', 'with', 10)).toBe('…ce with a…')
+    })
+
+    it('Should not truncate a sentence if it fits regardless', () => {
+      expect(truncateAroundPhrase('Some sentence with a word', 'with', 50)).toBe('Some sentence with a word')
+    })
+
+    it('Should break phrase and truncate if the phrase would not fit in max lengtj', () => {
+      expect(truncateAroundPhrase('Some sentence with a word', 'sentence with a', 10)).toBe('…tence with…')
+    })
+  })
 })

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

@@ -2,13 +2,14 @@ import { render, waitFor } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
 import page from '../../routes/+page.svelte'
-import { pollLinkInjections } from '$lib/api'
+import { fetchConfig, pollLinkInjections } from '$lib/api'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { authorize } from '$lib/auth'
 
 vi.mock('$lib/api', () => ({
   pollLinkInjections: vi.fn(),
+  fetchConfig: vi.fn(),
 }))
 
 vi.mock('$lib/tracking', () => ({
@@ -23,6 +24,10 @@ vi.mock(import('$lib/auth'), async (importOriginal) => {
   }
 })
 
+vi.mock('$lib/url', () => ({
+  getFullUrlPath: () => '/test',
+}))
+
 describe('$routes/+page.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -38,9 +43,11 @@ describe('$routes/+page.svelte', () => {
     window.PlayPiloLinkInjections = null
   })
 
-  it('Should call pollLinkInjections on mount', () => {
+  it('Should call pollLinkInjections and fetchConfig on mount', async () => {
     render(page)
-    expect(pollLinkInjections).toHaveBeenCalled()
+
+    expect(fetchConfig).toHaveBeenCalled()
+    await waitFor(() => expect(pollLinkInjections).toHaveBeenCalled())
   })
 
   it('Should call pollLinkInjections again if ai_running is true while in editorial mode', async () => {
@@ -58,14 +65,17 @@ describe('$routes/+page.svelte', () => {
     })
   })
 
-  it('Should use the given selector when present', () => {
+  it('Should use the given selector when present', async () => {
     document.body.innerHTML = '<div class="some-element"><p>Here</p></div> <p>Not here</p>'
 
     // @ts-ignore
     window.PlayPilotLinkInjections = { selector: '.some-element' }
 
     render(page)
-    expect(pollLinkInjections).toHaveBeenCalledWith(expect.any(String), '<p>Here</p>', { maxTries: 1 })
+
+    await waitFor(() => {
+      expect(pollLinkInjections).toHaveBeenCalledWith(expect.any(String), '<p>Here</p>', { maxTries: 1 })
+    })
   })
 
   it('Should render editor if correct url param is given', async () => {
@@ -121,4 +131,41 @@ describe('$routes/+page.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ArticlePageView)
   })
+
+  it('Should not inject if config exclude_urls_pattern matches current url', async () => {
+    vi.mocked(fetchConfig).mockResolvedValueOnce({ exclude_urls_pattern: '/t' })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 100)) // Await all fetches
+    expect(pollLinkInjections).not.toHaveBeenCalled()
+  })
+
+  it('Should not inject if config exclude_urls_pattern matches current url with more complex regex pattern', async () => {
+    vi.mocked(fetchConfig).mockResolvedValueOnce({ exclude_urls_pattern: '^/test$' })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 100)) // Await all fetches
+    expect(pollLinkInjections).not.toHaveBeenCalled()
+  })
+
+  it('Should not inject if config returns an error', async () => {
+    vi.mocked(fetchConfig).mockRejectedValueOnce('null')
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 100)) // Await all fetches
+    expect(pollLinkInjections).not.toHaveBeenCalled()
+    expect(track).toHaveBeenCalledWith(TrackingEvent.FetchingConfigFailed)
+  })
+
+  it('Should inject if config exclude_urls_pattern does not match current url', async () => {
+    vi.mocked(fetchConfig).mockResolvedValueOnce({ exclude_urls_pattern: '/something-else' })
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 100)) // Await all fetches
+    expect(pollLinkInjections).toHaveBeenCalled()
+  })
 })

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

@@ -6,18 +6,20 @@ import { generateInjection } from '../../../helpers'
 
 describe('AIIndicator.svelte', () => {
   it('Should should running state by default', () => {
-    const { getByText } = render(AIIndicator, { onadd: () => null })
+    const { getByText, getByTestId } = render(AIIndicator, { onadd: () => null })
 
     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 } = render(AIIndicator, { onadd: () => null })
+    const { getByText, component, queryByTestId } = 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()
+      expect(queryByTestId('loading-bar')).not.toBeTruthy()
     })
 
     component.notifyUserOfNewState([generateInjection('Some sentence', 'Some title'), generateInjection('Some sentence', 'Some title')])
@@ -29,6 +31,7 @@ describe('AIIndicator.svelte', () => {
     component.notifyUserOfNewState([])
     await waitFor(() => {
       expect(getByText('AI links finished running, but no new links were found.')).toBeTruthy()
+      expect(queryByTestId('loading-bar')).not.toBeTruthy()
     })
   })
 

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

@@ -6,7 +6,7 @@ import DragHandle from '../../../../routes/components/Editorial/DragHandle.svelt
 describe('DragHandle.svelte', () => {
   it('Should position the given element based on the given position', () => {
     document.body.innerHTML = '<div></div>'
-    const element = document.querySelector('div')
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
     render(DragHandle, { element, position: { x: 50, y: 30 } })
 
     expect(element?.style.right).toBe('50px')
@@ -15,7 +15,7 @@ describe('DragHandle.svelte', () => {
 
   it('Should limit the position to be visible on the screen', () => {
     document.body.innerHTML = '<div></div>'
-    const element = document.querySelector('div')
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
     render(DragHandle, { element, position: { x: 5000, y: 5000 } })
 
     expect(element?.style.right).toBe(window.innerWidth + 'px')
@@ -24,7 +24,7 @@ describe('DragHandle.svelte', () => {
 
   it('Should limit the position to the given limit', () => {
     document.body.innerHTML = '<div></div>'
-    const element = document.querySelector('div')
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
     render(DragHandle, { element, position: { x: 0, y: 0 }, limit: { x: 10, y: 10 } })
 
     expect(element?.style.right).toBe('10px')
@@ -33,7 +33,7 @@ describe('DragHandle.svelte', () => {
 
   it('Should limit the position to both the screen size and the given limit', () => {
     document.body.innerHTML = '<div></div>'
-    const element = document.querySelector('div')
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
     render(DragHandle, { element, position: { x: 5000, y: 5000 }, limit: { x: 10, y: 10 } })
 
     expect(element?.style.right).toBe(window.innerWidth - 10 + 'px')
@@ -44,7 +44,7 @@ describe('DragHandle.svelte', () => {
     document.body.innerHTML = '<div></div>'
 
     const onchange = vi.fn()
-    const element = document.querySelector('div')
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
     render(DragHandle, { element, position: { x: 5000, y: 5000 }, onchange })
 
     expect(onchange).toHaveBeenCalledWith({

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

@@ -4,12 +4,19 @@ import { describe, expect, it, vi } from 'vitest'
 import Editor from '../../../../routes/components/Editorial/Editor.svelte'
 import { title } from '$lib/fakeData'
 import { generateInjection } from '../../../helpers'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
 vi.mock('$lib/api', () => ({
   saveLinkInjections: vi.fn(),
 }))
 
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
 describe('Editor.svelte', () => {
+  /** @type {import('$lib/types/injection').LinkInjection[]} */
   const linkInjections = [
     generateInjection('This is a sentence with an injection.', 'an injection'),
     generateInjection('This is a sentence with an injection.', 'a sentence'),
@@ -21,12 +28,51 @@ describe('Editor.svelte', () => {
     expect(getByText(linkInjections.length)).toBeTruthy()
   })
 
+  it('Should show the number of injections correctly in relation to injections that will be filtered out', () => {
+    /** @type {import('$lib/types/injection').LinkInjection[]} */
+    const linkInjections = [
+      { ...generateInjection('Sentence', 'word'), failed: true },
+      { ...generateInjection('Sentence', 'word'), duplicate: true },
+      { ...generateInjection('Sentence', 'word'), removed: true },
+      { ...generateInjection('Sentence', 'word'), title_details: undefined },
+      { ...generateInjection('Sentence', 'word'), manual: true, failed: true },
+      { ...generateInjection('Sentence', 'word'), manual: false, failed: true },
+    ]
+
+    const { getByText } = render(Editor, { linkInjections })
+
+    expect(getByText(1)).toBeTruthy()
+  })
+
   it('Should show injections', async () => {
     const { getAllByText } = render(Editor, { linkInjections })
 
     expect(getAllByText(title.title)).toHaveLength(2)
   })
 
+  it('Should not show injections that are filtered out', () => {
+    /** @type {import('$lib/types/injection').LinkInjection[]} */
+    const linkInjections = [
+      { ...generateInjection('Sentence', 'word') },
+      { ...generateInjection('Sentence', 'word'), failed: true },
+      { ...generateInjection('Sentence', 'word'), duplicate: true },
+      { ...generateInjection('Sentence', 'word'), removed: true },
+      { ...generateInjection('Sentence', 'word'), title_details: undefined },
+      { ...generateInjection('Sentence', 'word'), manual: true, failed: true },
+      { ...generateInjection('Sentence', 'word'), manual: false, failed: true },
+    ]
+
+    const { getAllByText } = render(Editor, { linkInjections })
+
+    expect(getAllByText(title.title)).toHaveLength(2)
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TotalInjectionsCount, null, {
+      total: '7',
+      failed_automatic: '2',
+      failed_manual: '1',
+      final_injected: '2',
+    })
+  })
+
   it('Should display a loading state when loading is true', async () => {
     const { getByText, container } = render(Editor, { linkInjections: [], loading: true })
 
@@ -65,4 +111,27 @@ describe('Editor.svelte', () => {
 
     expect(getByText('No links available', { exact: false })).toBeTruthy()
   })
+
+  it('Should sort injections based on their named and .failed state', () => {
+    const linkInjections = [
+      { ...generateInjection('Sentence', 'c'), manual: true, title_details: { ...title, title: 'c' } },
+      { ...generateInjection('Sentence', 'b'), manual: true, title_details: { ...title, title: 'b' } },
+      { ...generateInjection('Sentence', 'a'), manual: true, failed: true, title_details: { ...title, title: 'a' } },
+      { ...generateInjection('Sentence', 'b'), manual: true, title_details: { ...title, title: 'e' } },
+      { ...generateInjection('Sentence', 'b'), manual: true, title_details: { ...title, title: 'd' } },
+    ]
+
+    const { container } = render(Editor, { linkInjections })
+
+    // @ts-ignore
+    expect(container.querySelectorAll('.item')[0].querySelector('.title').innerText).toBe('b')
+    // @ts-ignore
+    expect(container.querySelectorAll('.item')[1].querySelector('.title').innerText).toBe('c')
+    // @ts-ignore
+    expect(container.querySelectorAll('.item')[2].querySelector('.title').innerText).toBe('d')
+    // @ts-ignore
+    expect(container.querySelectorAll('.item')[3].querySelector('.title').innerText).toBe('e')
+    // @ts-ignore
+    expect(container.querySelectorAll('.item')[4].querySelector('.title').innerText).toBe('a')
+  })
 })

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

@@ -3,7 +3,6 @@ import { describe, expect, it, vi } from 'vitest'
 
 import EditorItem from '../../../../routes/components/Editorial/EditorItem.svelte'
 import { injectLinksInDocument } from '$lib/linkInjection'
-import { linkInjections, title } from '$lib/fakeData'
 import { track } from '$lib/tracking'
 import { generateInjection } from '../../../helpers'
 
@@ -116,19 +115,29 @@ describe('EditorItem.svelte', () => {
     expect(track).toHaveBeenCalled()
   })
 
-  it('Should show length of title if length is given', () => {
-    const title_details = { ...linkInjection.title_details, length: 20 }
-    const { getByTestId, getByText } = render(EditorItem, { linkInjection: { ...linkInjection, title_details } })
+  it('Should show sentence of given injection', async () => {
+    const { container } = render(EditorItem, { linkInjection })
+
+    expect(/** @type {HTMLElement} */ (container.querySelector('.sentence')).innerText).toContain(linkInjection.sentence)
+  })
 
-    expect(getByTestId('length')).toBeTruthy()
-    expect(getByText('20m')).toBeTruthy()
+  it('Should not show expand button for sentence if sentence is too short to be expanded', async () => {
+    const { queryByText } = render(EditorItem, { linkInjection })
+
+    expect(queryByText('More')).not.toBeTruthy()
   })
 
-  it('Should not show length of title if no length is given', () => {
-    const title_details = { ...linkInjection.title_details, length: null }
-    const { queryByTestId } = render(EditorItem, { linkInjection: { ...linkInjection, title_details } })
+  it('Should expand and collapse sentence after clicking button', async () => {
+    const longLinkInjection = { ...linkInjection, sentence: 'Some long sentence with a word in it that will be truncated if its long enough to be truncated' }
+    const { container, getByText } = render(EditorItem, { linkInjection: longLinkInjection })
+
+    expect(/** @type {HTMLElement} */ (container.querySelector('.sentence')).innerText).not.toContain(longLinkInjection.sentence)
+
+    await fireEvent.click(getByText('More'))
+    expect(/** @type {HTMLElement} */ (container.querySelector('.sentence')).innerText).toContain(longLinkInjection.sentence)
 
-    expect(queryByTestId('length')).not.toBeTruthy()
+    await fireEvent.click(getByText('Less'))
+    expect(/** @type {HTMLElement} */ (container.querySelector('.sentence')).innerText).not.toContain(longLinkInjection.sentence)
   })
 
   it('Should call given onremove function when remove button is clicked', async () => {
@@ -140,4 +149,19 @@ describe('EditorItem.svelte', () => {
 
     expect(onremove).toHaveBeenCalled()
   })
+
+  it('Should display an inactive injection as being so with text and classname', async () => {
+    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 () => {
+    const { queryByText, container } = render(EditorItem, { linkInjection })
+
+    expect(queryByText('Inactive')).not.toBeTruthy()
+    expect(queryByText('Visible')).toBeTruthy()
+    expect(container.querySelector('.inactive')).not.toBeTruthy()
+  })
 })

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

@@ -27,6 +27,7 @@ describe('ManualInjection.svelte', () => {
         endOffset: 0,
       }),
       anchorNode: container,
+      focusNode: container,
     }))
   })
 
@@ -82,7 +83,7 @@ describe('ManualInjection.svelte', () => {
   it('Should select content outside of element if content is too short', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
-    document.body.innerHTML = '<div>Some <strong>text</strong> in a sentence</div>'
+    document.body.innerHTML = '<div>Some other sentence. Some <strong><span>text</span></strong> in a sentence</div>'
 
     const container = document.querySelector('strong')
 
@@ -96,6 +97,7 @@ describe('ManualInjection.svelte', () => {
         endOffset: 0,
       }),
       anchorNode: container,
+      focusNode: container,
     }))
 
     const onsave = vi.fn()
@@ -136,6 +138,7 @@ describe('ManualInjection.svelte', () => {
         endOffset: 0,
       }),
       anchorNode: container,
+      focusNode: container,
     }))
 
     await fireEvent.click(window)
@@ -156,6 +159,7 @@ describe('ManualInjection.svelte', () => {
         endOffset: 0,
       }),
       anchorNode: container,
+      focusNode: container,
     }))
 
     ;(render(ManualInjection, { htmlString: document.body.innerHTML, onsave }))

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

@@ -0,0 +1,45 @@
+import { render  } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import ResizeHandle from '../../../../routes/components/Editorial/ResizeHandle.svelte'
+
+describe('ResizeHandle.svelte', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    window.HTMLElement.prototype.getBoundingClientRect = () => ({ bottom: window.innerHeight })
+  })
+
+  it('Should set the height of the given element based on the given height', () => {
+    document.body.innerHTML = '<div></div>'
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
+    render(ResizeHandle, { element, height: 50 })
+
+    expect(element?.style.height).toBe('50px')
+  })
+
+  it('Should limit the height to be visible on the screen', () => {
+    document.body.innerHTML = '<div></div>'
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
+    render(ResizeHandle, { element, height: 5000 })
+
+    expect(element?.style.height).toBe(window.innerHeight - 32 + 'px')
+  })
+
+  it('Should limit the height to elements minimum height', () => {
+    document.body.innerHTML = '<div style="min-height: 5px"></div>'
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
+    render(ResizeHandle, { element, height: 0 })
+
+    expect(element?.style.height).toBe('5px')
+  })
+
+  it('Should fire given onchange function when height changes', () => {
+    document.body.innerHTML = '<div></div>'
+
+    const onchange = vi.fn()
+    const element = /** @type {HTMLElement} */ (document.querySelector('div'))
+    render(ResizeHandle, { element, height: window.innerHeight / 2, onchange })
+
+    expect(onchange).toHaveBeenCalledWith(window.innerHeight / 2)
+  })
+})

package/src/tests/routes/components/Editorial/Search/TitleSearch.test.js

@@ -35,24 +35,26 @@ describe('TitleSearch.svelte', () => {
   it('Should show results when given', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
-    const { getByRole, getByText } = render(TitleSearch)
+    const { getByRole, getByText, getByTestId } = render(TitleSearch)
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
+    expect(getByTestId('search-results')).toBeTruthy()
     expect(getByText(title.title)).toBeTruthy()
     expect(getByText(title.type)).toBeTruthy()
   })
 
-  it('Should fire the given onselect function and close the results when a result is clicked', async () => {
+  it('Should fire the given onselect function and close the results, and show selected result when a result is clicked', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
     const onselect = vi.fn()
-    const { getByRole, queryByRole } = render(TitleSearch, { onselect })
+    const { getByRole, getByText, queryByTestId } = render(TitleSearch, { onselect, query: '' })
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
     await fireEvent.click(getByRole('button'))
 
     expect(onselect).toHaveBeenCalledWith(title)
-    expect(queryByRole('button')).not.toBeTruthy()
+    expect(queryByTestId('search-results')).not.toBeTruthy()
+    expect(getByText(title.title)).toBeTruthy()
   })
 })

package/src/tests/routes/components/Editorial/Search/TitleSearchItem.test.js

@@ -0,0 +1,44 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TitleSearchItem from '../../../../../routes/components/Editorial/Search/TitleSearchItem.svelte'
+import { title } from '$lib/fakeData'
+
+vi.mock('$lib/search', () => ({
+  searchTitles: vi.fn(),
+}))
+
+describe('TitleSearchItem.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should fire given onclick function', async () => {
+    const onclick = vi.fn()
+    const { getByRole } = render(TitleSearchItem, { onclick, title })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+
+  it('Should render title data', () => {
+    const { getByText } = render(TitleSearchItem, { title })
+
+    expect(getByText(title.title)).toBeTruthy()
+    expect(getByText(title.year)).toBeTruthy()
+    expect(getByText(title.type)).toBeTruthy()
+  })
+
+  it('Should have hoverable class by default', () => {
+    const { getByRole } = render(TitleSearchItem, { title })
+
+    expect(getByRole('button').classList).toContain('hoverable')
+  })
+
+  it('Should not have hoverable class when hoverable prop is false', () => {
+    const { getByRole } = render(TitleSearchItem, { title, hoverable: false })
+
+    expect(getByRole('button').classList).not.toContain('hoverable')
+  })
+})