@playpilot/tpi 1.0.0

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

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { searchTitles } from '$lib/search'
+import { fakeFetch } from '../helpers'
+import { title } from '$lib/fakeData'
+
+describe('$lib/search', () => {
+  afterEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('searchTitles', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a' }
+    })
+
+    it('Should call fetch with api token and given query', async () => {
+      fakeFetch({ response: [title] })
+
+      const response = await searchTitles('Some query')
+
+      expect(response).toEqual([title])
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringMatching(/api-token=[^&]+&query=[^&]+/),
+        expect.anything(),
+      )
+    })
+
+    it('Should throw when response is invalid', async () => {
+      fakeFetch({ response: null, ok: false })
+
+      expect(async () => await searchTitles('')).rejects.toThrowError()
+    })
+
+    it('Should throw when no api token is given', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = null
+
+      expect(async () => await searchTitles('')).rejects.toThrowError('No token was provided')
+    })
+  })
+})

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

@@ -0,0 +1,94 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { findTextNodeContaining, isNodeInLink, replaceStartingFrom } from '$lib/text'
+
+describe('text.js', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <section>
+        <p>Some sentence <strong>with words</strong> in it</p>
+        <a href="#">A link <span>inside</span></a>
+        <div>Another <span>text</span> node</div>
+      </section>
+    `
+  })
+
+  describe('findTextNodeContaining', () => {
+    it('Should find the correct text node inside an element', () => {
+      document.body.innerHTML = '<section>Some sentence with several words in it.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('section'))
+      expect(findTextNodeContaining('words', element)?.parentNode?.nodeName).toBe('SECTION')
+    })
+
+    it('Should find the correct text node inside a child element element', () => {
+      document.body.innerHTML = '<section>Some sentence with <strong>several words</strong> in it.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('section'))
+      expect(findTextNodeContaining('words', element)?.parentNode?.nodeName).toBe('STRONG')
+    })
+
+    it('Should return null if the text is not found', () => {
+      document.body.innerHTML = '<section>Some sentence.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('section'))
+      expect(findTextNodeContaining('word', element)).toBeNull()
+    })
+
+    it('Should not return a node if it is of a filtered parent type', () => {
+      document.body.innerHTML = '<section>Some sentence with <strong>several words</strong> in it.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('section'))
+      expect(findTextNodeContaining('words', element, ['STRONG'])).toBeNull()
+    })
+
+    it('Should return the first occurance of a node that is not in the filtered parent type', () => {
+      document.body.innerHTML = '<section>Some sentence with <strong>several words</strong> in it and other words.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('section'))
+      expect(findTextNodeContaining('words', element, ['STRONG'])?.parentNode?.nodeName).toBe('SECTION')
+    })
+  })
+
+  describe('isNodeInLink', () => {
+    it('Should return true if the node is inside a link', () => {
+      document.body.innerHTML = '<section>Some sentence <a>with a link</a> in it.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('a')).childNodes[0]
+      expect(isNodeInLink(element)).toBe(true)
+    })
+
+    it('Should return true if the node is a child inside a link', () => {
+      document.body.innerHTML = '<section>Some sentence <a>with a <span>link</span></a> in it.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('span')).childNodes[0]
+      expect(isNodeInLink(element)).toBe(true)
+    })
+
+    it('Should return false if the node is not inside a link', () => {
+      document.body.innerHTML = '<section>Some sentence <span>link</span> in it.</section>'
+
+      const element = /** @type {HTMLElement} */ (document.querySelector('span')).childNodes[0]
+      expect(isNodeInLink(element)).toBe(false)
+    })
+  })
+
+  describe('replaceStartingFrom', () => {
+    it('Should replace a given string with a given replacement', () => {
+      expect(replaceStartingFrom('Some text', 'text', 'word', 0)).toBe('Some word')
+    })
+
+    it('Should replace a given string with a given replacement starting from a given index', () => {
+      expect(replaceStartingFrom('Some text with more text', 'text', 'words', 10)).toBe('Some text with more words')
+    })
+
+    it('Should return the original string if no replacement was found', () => {
+      expect(replaceStartingFrom('Some text', 'word', 'other', 0)).toBe('Some text')
+      expect(replaceStartingFrom('Some text', 'text', 'other', 20)).toBe('Some text')
+    })
+
+    it('Should treat unencoded and encoded characters as the same', () => {
+      expect(replaceStartingFrom('Some text & more', 'text &amp; more', 'word', 0)).toBe('Some word')
+      expect(replaceStartingFrom('Some text &amp; more', 'text & more', 'word', 0)).toBe('Some word')
+    })
+  })
+})

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

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { track } from '$lib/tracking'
+import { title } from '$lib/fakeData'
+
+global.fetch = vi.fn()
+
+describe('$lib/tracking', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('track', () => {
+    it('Should fetch with given event and expected payload', () => {
+      track('Some event')
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining('insights'),
+        expect.objectContaining({
+          body: expect.stringContaining('Some event'),
+          headers: expect.any(Object),
+          method: 'POST',
+        }),
+      )
+    })
+
+    it('Should include current url in request', () => {
+      track('Some event')
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining(window.location.href),
+        }),
+      )
+    })
+
+    it('Should include relevant title data when title is given', () => {
+      track('Some event', title)
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining(`"original_title":"${title.original_title}"`),
+        }),
+      )
+    })
+
+    it('Should include given payload', () => {
+      track('Some event', null, { 'Some key': 'Some value' })
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining('"Some key":"Some value"'),
+        }),
+      )
+    })
+
+    it('Should override given title data if same data is given in payload', () => {
+      track('Some event', title, { original_title: 'Some other title' })
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining('"original_title":"Some other title"'),
+        }),
+      )
+    })
+  })
+})

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

@@ -0,0 +1,109 @@
+import { render } 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 { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { authorize } from '$lib/auth'
+
+vi.mock('$lib/api', () => ({
+  pollLinkInjections: vi.fn(),
+}))
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock(import('$lib/auth'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    authorize: vi.fn(),
+  }
+})
+
+describe('$routes/+page.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { search: '' },
+    })
+
+    // @ts-ignore
+    window.PlayPiloLinkInjections = null
+  })
+
+  it('Should call pollLinkInjections on mount', () => {
+    render(page)
+    expect(pollLinkInjections).toHaveBeenCalled()
+  })
+
+  it('Should use the given selector when present', () => {
+    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.anything(), '<p>Here</p>')
+  })
+
+  it('Should render editor if correct url param is given', async () => {
+    vi.mocked(authorize).mockResolvedValueOnce(true)
+    window.location.search = '?playpilot-editorial-mode=true'
+
+    const { container } = render(page)
+    await new Promise(res => setTimeout(res)) // Await auth
+
+    expect(container.querySelector('.editor')).toBeTruthy()
+  })
+
+  it('Should render editor if initialized with editorial_token', async () => {
+    vi.mocked(authorize).mockResolvedValueOnce(true)
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { editorial_token: 'some-token' }
+
+    const { container } = render(page)
+    await new Promise(res => setTimeout(res)) // Await auth
+
+    expect(container.querySelector('.editor')).toBeTruthy()
+  })
+
+  it('Should not render editor if correct url param is given but user is not authed', async () => {
+    vi.mocked(authorize).mockResolvedValueOnce(false)
+    window.location.search = '?playpilot-editorial-mode=true'
+
+    const { container } = render(page)
+    await new Promise(res => setTimeout(res)) // Await auth
+
+    expect(container.querySelector('.editor')).not.toBeTruthy()
+  })
+
+  it('Should not render editor if correct url param is not given', async () => {
+    window.location.search = '?playpilot-editorial-mode=false'
+    let { container } = render(page)
+    await new Promise(res => setTimeout(res)) // Await auth
+    expect(container.querySelector('.editor')).not.toBeTruthy()
+
+    window.location.search = '?other-param-mode=true'
+    ;({ container } = render(page))
+    await new Promise(res => setTimeout(res)) // Await auth
+    expect(container.querySelector('.editor')).not.toBeTruthy()
+
+    window.location.search = ''
+    ;({ container } = render(page))
+    await new Promise(res => setTimeout(res)) // Await auth
+    expect(container.querySelector('.editor')).not.toBeTruthy()
+  })
+
+  it('Should track event when the page is loaded', () => {
+    render(page)
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ArticlePageView)
+  })
+})

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

@@ -0,0 +1,115 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import AfterArticlePlaylinks from '../../../routes/components/AfterArticlePlaylinks.svelte'
+import { title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('svelte', async (importActual) => ({
+  ...(await importActual()),
+  getContext: vi.fn(),
+}))
+
+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',
+  title_details: title,
+}, {
+  sid: '2',
+  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,
+}]
+
+describe('AfterArticlePlaylinks.svelte', () => {
+  it('Should render each given injection', () => {
+    const { getByText } = render(AfterArticlePlaylinks, { linkInjections })
+
+    expect(getByText('an injection', { exact: false })).toBeTruthy()
+    expect(getByText('a sentence', { exact: false })).toBeTruthy()
+  })
+
+  it('Should render the playlinks for a given injection', () => {
+    const { getByText } = render(AfterArticlePlaylinks, { linkInjections: [linkInjections[0]] })
+
+    const playlinks = linkInjections[0].title_details.providers
+
+    expect(/** @type {HTMLAnchorElement} */ (getByText(playlinks[0].name)).href).toBe(playlinks[0].url)
+    expect(/** @type {HTMLAnchorElement} */ (getByText(playlinks[1].name)).href).toBe(playlinks[1].url)
+  })
+
+  it('Should not render a trailing comma and end in a period', () => {
+    const { container } = render(AfterArticlePlaylinks, { linkInjections })
+
+    const text = container.innerText.trim()
+
+    expect(text.charAt(text.length - 1)).toBe('.')
+    expect(text.charAt(text.length - 2)).not.toBe(',')
+  })
+
+  it('Should render final playlink prepended with "and"', () => {
+    const { container } = render(AfterArticlePlaylinks, { linkInjections: [linkInjections[0]] })
+
+    const playlinks = linkInjections[0].title_details.providers
+
+    const text = container.innerText.trim()
+    expect(text).toBe(`"${linkInjections[0].title}" is available to stream on  ${playlinks[0].name}, and ${playlinks[1].name}.`)
+  })
+
+  it('Should not render "and" after final playlink when only 1 playlink is present', () => {
+    /** @type {LinkInjection} */
+    const injection = { ...linkInjections[0], title_details: { ...linkInjections[0].title_details, providers: [linkInjections[0].title_details.providers[0]] }}
+    const { container } = render(AfterArticlePlaylinks, { linkInjections: [injection] })
+
+    const playlinks = injection.title_details?.providers || []
+
+    const text = container.innerText.trim()
+    expect(text).toBe(`"${injection.title}" is available to stream on  ${playlinks[0].name}.`)
+  })
+
+  it('Should call track event when playlink is clicked', async () => {
+    const { getAllByRole } = render(AfterArticlePlaylinks, { linkInjections })
+
+    await fireEvent.click(getAllByRole('link')[0])
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.AfterArticlePlaylinkClick, expect.any(Object), { playlink: expect.any(String) })
+  })
+
+  it('Should render titles without playlinks as empty state', () => {
+    const injection = { ...linkInjections[0], title_details: { ...linkInjections[0].title_details, providers: [] }}
+    const { getByText } = render(AfterArticlePlaylinks, { linkInjections: [injection] })
+
+    expect(getByText(`"${injection.title}" is not currently available to stream.`)).toBeTruthy()
+  })
+
+  it('Should display as modal button if after_article_style is modal_button', () => {
+    const injection = { ...linkInjections[0], after_article_style: 'modal_button' }
+    const { getByText } = render(AfterArticlePlaylinks, { linkInjections: [injection] })
+
+    expect(getByText(`"${injection.title}" is available to stream.`)).toBeTruthy()
+    expect(getByText('View streaming options')).toBeTruthy()
+  })
+
+  it('Should fire given onclickmodal function when display as modal_button', async () => {
+    const onclickmodal = vi.fn()
+    const injection = { ...linkInjections[0], after_article_style: 'modal_button' }
+    const { getByText } = render(AfterArticlePlaylinks, { linkInjections: [injection], onclickmodal })
+
+    await fireEvent.click(getByText('View streaming options'))
+
+    expect(onclickmodal).toHaveBeenCalled()
+    expect(track).toHaveBeenCalledWith(TrackingEvent.AfterArticlePlaylinkClick, expect.any(Object), { playlink: expect.any(String) })
+  })
+})

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

@@ -0,0 +1,37 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import ContextMenu from '../../../routes/components/ContextMenu.svelte'
+import { createRawSnippet } from 'svelte'
+
+describe('ContextMenu.svelte', () => {
+  const children = createRawSnippet(() => ({ render: () => '<p>Some snippet</p>' }))
+
+  it('Should open the context menu on click', async () => {
+    const { getByRole, queryByText } = render(ContextMenu, { ariaLabel: '', children })
+
+    expect(queryByText('Some snippet')).not.toBeTruthy()
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(queryByText('Some snippet')).toBeTruthy()
+  })
+
+  it('Should close the context menu on second click', async () => {
+    const { getByRole, queryByText } = render(ContextMenu, { ariaLabel: '', children })
+
+    await fireEvent.click(getByRole('button'))
+    await fireEvent.click(getByRole('button'))
+
+    expect(queryByText('Some snippet')).not.toBeTruthy()
+  })
+
+  it('Should close the context menu when clicking outside of the button', async () => {
+    const { getByRole, queryByText } = render(ContextMenu, { ariaLabel: '', children })
+
+    await fireEvent.click(getByRole('button'))
+    await fireEvent.click(document.body)
+
+    expect(queryByText('Some snippet')).not.toBeTruthy()
+  })
+})

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

@@ -0,0 +1,58 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Description from '../../../routes/components/Description.svelte'
+
+describe('Description.svelte', () => {
+  it('Should render given text', () => {
+    const { getByText } = render(Description, { text: 'Some test description' })
+
+    expect(getByText('Some test description')).toBeTruthy()
+  })
+
+  it('Should limit given description to given limit', () => {
+    const { getByText } = render(Description, { text: 'Some test description', limit: 5 })
+
+    expect(getByText('Some ...')).toBeTruthy()
+    expect(getByText('Show more')).toBeTruthy()
+  })
+
+  it('Should not render show more button if text is shorter than limit', () => {
+    const { queryByRole } = render(Description, { text: 'Some test description', limit: 50 })
+
+    expect(queryByRole('button')).not.toBeTruthy()
+  })
+
+  it('Should expand description and remove show more button after clicking', async () => {
+    const { getByText, queryByRole } = render(Description, { text: 'Some test description', limit: 5 })
+
+    expect(getByText('Some ...')).toBeTruthy()
+
+    await fireEvent.click(/** @type {Node} **/(queryByRole('button')))
+
+    expect(getByText('Some test description')).toBeTruthy()
+    expect(queryByRole('button')).not.toBeTruthy()
+  })
+
+  it('Should include blurb after expanding if given', async () => {
+    const { queryByText, queryByRole } = render(Description, { text: 'Some test description', limit: 5, blurb: 'Some blurb' })
+
+    expect(queryByText('Some blurb')).not.toBeTruthy()
+
+    await fireEvent.click(/** @type {Node} **/(queryByRole('button')))
+
+    expect(queryByText('Some blurb')).toBeTruthy()
+  })
+
+  it('Should show "show more" button regardless of limit if blurb is given', async () => {
+    const { getByText } = render(Description, { text: 'Some test description', limit: 200, blurb: 'Some blurb' })
+
+    expect(getByText('Show more')).toBeTruthy()
+  })
+
+  it('Should not show "show more" button if limit is passed and no blurb is given', async () => {
+    const { queryByText } = render(Description, { text: 'Some test description', limit: 200, blurb: '' })
+
+    expect(queryByText('Show more')).not.toBeTruthy()
+  })
+})

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

@@ -0,0 +1,17 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Alert from '../../../../routes/components/Editorial/Alert.svelte'
+import { createRawSnippet } from 'svelte'
+
+describe('Alert.svelte', () => {
+  it('Should render the given snippet', () => {
+    const children = createRawSnippet(() => ({
+      render: () => '<p>Some snippet</p>',
+    }))
+
+    const { getByText } = render(Alert, { children })
+
+    expect(getByText('Some snippet')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,55 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import DragHandle from '../../../../routes/components/Editorial/DragHandle.svelte'
+
+describe('DragHandle.svelte', () => {
+  it('Should position the given element based on the given position', () => {
+    document.body.innerHTML = '<div></div>'
+    const element = document.querySelector('div')
+    render(DragHandle, { element, position: { x: 50, y: 30 } })
+
+    expect(element?.style.right).toBe('50px')
+    expect(element?.style.bottom).toBe('30px')
+  })
+
+  it('Should limit the position to be visible on the screen', () => {
+    document.body.innerHTML = '<div></div>'
+    const element = document.querySelector('div')
+    render(DragHandle, { element, position: { x: 5000, y: 5000 } })
+
+    expect(element?.style.right).toBe(window.innerWidth + 'px')
+    expect(element?.style.bottom).toBe(window.innerHeight + 'px')
+  })
+
+  it('Should limit the position to the given limit', () => {
+    document.body.innerHTML = '<div></div>'
+    const element = document.querySelector('div')
+    render(DragHandle, { element, position: { x: 0, y: 0 }, limit: { x: 10, y: 10 } })
+
+    expect(element?.style.right).toBe('10px')
+    expect(element?.style.bottom).toBe('10px')
+  })
+
+  it('Should limit the position to both the screen size and the given limit', () => {
+    document.body.innerHTML = '<div></div>'
+    const element = 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')
+    expect(element?.style.bottom).toBe(window.innerHeight - 10 + 'px')
+  })
+
+  it('Should fire given onchange function when position changes', () => {
+    document.body.innerHTML = '<div></div>'
+
+    const onchange = vi.fn()
+    const element = document.querySelector('div')
+    render(DragHandle, { element, position: { x: 5000, y: 5000 }, onchange })
+
+    expect(onchange).toHaveBeenCalledWith({
+      x: window.innerWidth,
+      y: window.innerHeight,
+    })
+  })
+})

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

@@ -0,0 +1,64 @@
+import { 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'
+
+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,
+  }]
+
+  it('Should show the number of injections', () => {
+    const { getByText } = render(Editor, { linkInjections })
+
+    expect(getByText(linkInjections.length)).toBeTruthy()
+  })
+
+  it('Should show injections', async () => {
+    const { getAllByText } = render(Editor, { linkInjections })
+
+    expect(getAllByText(title.title)).toHaveLength(2)
+  })
+
+  it('Should display a loading state when loading is true', async () => {
+    const { getByText, container } = render(Editor, { linkInjections: [], loading: true })
+
+    expect(getByText('Loading...')).toBeTruthy()
+    expect(container.querySelector('.loading')).toBeTruthy()
+  })
+
+  it('Should not display a loading state when loading is false', async () => {
+    const { queryByText } = render(Editor, { linkInjections: [], loading: false })
+
+    expect(queryByText('Loading...')).not.toBeTruthy()
+  })
+
+  it('Should not show save button in enlarged view if no injections are present', async () => {
+    const { queryByText } = render(Editor, { linkInjections: [], loading: false })
+
+    expect(queryByText('Save links')).not.toBeTruthy()
+  })
+
+  it('Should show save button in enlarged view if injections are present', async () => {
+    const { queryByText } = render(Editor, { linkInjections, loading: false })
+
+    expect(queryByText('Save links')).toBeTruthy()
+  })
+})