@playpilot/tpi 3.1.0 → 3.2.0-beta.2

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

@@ -1,61 +1,47 @@
-import { fireEvent, render, waitFor  } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
 
 import AIIndicator from '../../../../routes/components/Editorial/AIIndicator.svelte'
-import { generateInjection } from '../../../helpers'
 
 describe('AIIndicator.svelte', () => {
-  it('Should should running state by default', () => {
-    const { getByText, getByTestId } = render(AIIndicator, { onadd: () => null })
+  it('Should show disabled state by default', () => {
+    const { getByText, queryByTestId } = render(AIIndicator)
+
+    expect(getByText('AI processing is disabled', { exact: false })).toBeTruthy()
+    expect(queryByTestId('loading-bar')).not.toBeTruthy()
+  })
+
+  it('Should show running when aiRunning and automationEnabled are true', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true })
 
     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, 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')])
-    await waitFor(() => {
-      expect(getByText('AI links are ready.', { exact: false })).toBeTruthy()
-      expect(getByText('2 New links were found.')).toBeTruthy()
-    })
-
-    component.notifyUserOfNewState([])
-    await waitFor(() => {
-      expect(getByText('AI links finished running, but no new links were found.')).toBeTruthy()
-      expect(queryByTestId('loading-bar')).not.toBeTruthy()
-    })
-  })
+  it('Should not show animator or loading bar if aiRunning is false', () => {
+    const { queryByTestId } = render(AIIndicator, { aiRunning: false })
 
-  it('Should close element when dismiss button is clicked', async () => {
-    const { getByText, component, container } = render(AIIndicator, { onadd: () => null })
+    expect(queryByTestId('loading-bar')).not.toBeTruthy()
+    expect(queryByTestId('animator')).not.toBeTruthy()
+  })
 
-    component.notifyUserOfNewState([])
-    await waitFor(() => getByText('Dismiss'))
+  it('Should show given message if aiRunning is true', () => {
+    const { getByText } = render(AIIndicator, { aiRunning: true, automationEnabled: true, message: 'Some message' })
 
-    await fireEvent.click(getByText('Dismiss'))
-    expect(container.querySelector('.ai-indicator')).not.toBeTruthy()
+    expect(getByText('Some message')).toBeTruthy()
   })
 
-  it('Should close element and call onadd when Add AI links button is clicked', async () => {
-    const onadd = vi.fn()
-    const { getByText, component, container } = render(AIIndicator, { onadd })
+  it('Should set progress bar to given progress percentage', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 25 })
 
-    const injection = generateInjection('Some sentence', 'Some title')
-    component.notifyUserOfNewState([injection])
-    await waitFor(() => getByText('Add AI links'))
+    expect(getByTestId('loading-bar').style.width).toBe('25%')
+    expect(getByText('25%')).toBeTruthy()
+  })
 
-    await fireEvent.click(getByText('Add AI links'))
+  it('Should limit progress to minimum value in loading bar style only', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 0 })
 
-    expect(onadd).toHaveBeenCalledWith([injection])
-    expect(container.querySelector('.ai-indicator')).not.toBeTruthy()
+    expect(getByTestId('loading-bar').style.width).toBe('3%')
+    expect(getByText('0%')).toBeTruthy()
   })
 })

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

@@ -5,13 +5,20 @@ import Alert from '../../../../routes/components/Editorial/Alert.svelte'
 import { createRawSnippet } from 'svelte'
 
 describe('Alert.svelte', () => {
+  const children = createRawSnippet(() => ({
+    render: () => '<p>Some snippet</p>',
+  }))
+
   it('Should render the given snippet', () => {
-    const children = createRawSnippet(() => ({
-      render: () => '<p>Some snippet</p>',
-    }))
 
     const { getByText } = render(Alert, { children })
 
     expect(getByText('Some snippet')).toBeTruthy()
   })
+
+  it('Should render with given type as class', () => {
+    const { container } = render(Alert, { children, type: 'warning' })
+
+    expect(container.querySelector('.alert')?.classList).toContain('warning')
+  })
 })

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

@@ -89,18 +89,21 @@ describe('Editor.svelte', () => {
   it('Should not show save button if no injections are present', async () => {
     const { queryByText } = render(Editor, { linkInjections: [], loading: false })
 
+    await new Promise(res => setTimeout(res))
     expect(queryByText('Save links')).not.toBeTruthy()
   })
 
   it('Should not show save button if injections are present but no change is made', async () => {
     const { queryByText } = render(Editor, { linkInjections, loading: false })
 
+    await new Promise(res => setTimeout(res))
     expect(queryByText('Save links')).not.toBeTruthy()
   })
 
   it('Should show save button if injections are present and a change has been made', async () => {
     const { getByText, getAllByText } = render(Editor, { linkInjections, loading: false })
 
+    await new Promise(res => setTimeout(res))
     await fireEvent.click(getAllByText('Visible')[0])
 
     expect(getByText('Save links')).toBeTruthy()
@@ -112,6 +115,18 @@ describe('Editor.svelte', () => {
     expect(getByText('No links available', { exact: false })).toBeTruthy()
   })
 
+  it('Should show message if injections are not enabled', async () => {
+    const { getByText } = render(Editor, { linkInjections: [], loading: false, injectionsEnabled: false })
+
+    expect(getByText('Playlinks are currently not published.')).toBeTruthy()
+  })
+
+  it('Should not show message if injections are enabled', async () => {
+    const { queryByText } = render(Editor, { linkInjections: [], loading: false, injectionsEnabled: true })
+
+    expect(queryByText('Playlinks are currently not published.')).not.toBeTruthy()
+  })
+
   it('Should sort injections based on their named and .failed state', () => {
     const linkInjections = [
       { ...generateInjection('Sentence', 'c'), manual: true, title_details: { ...title, title: 'c' } },

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

@@ -29,10 +29,10 @@ describe('EditorItem.svelte', () => {
     const { getAllByText, container } = render(EditorItem, { linkInjection })
 
     await fireEvent.mouseEnter(/** @type {HTMLElement} */ (container.querySelector('.item')))
-    expect(/** @type {HTMLElement} */ (getAllByText(linkInjection.title)[0].closest('span')).classList).toContain('injection-highlight')
+    expect(/** @type {HTMLElement} */ (getAllByText(linkInjection.title)[0].closest('span')).classList).toContain('playpilot-injection-highlight')
 
     await fireEvent.mouseLeave(/** @type {HTMLElement} */ (container.querySelector('.item')))
-    expect(/** @type {HTMLElement} */ (getAllByText(linkInjection.title)[0].closest('span')).classList).not.toContain('injection-highlight')
+    expect(/** @type {HTMLElement} */ (getAllByText(linkInjection.title)[0].closest('span')).classList).not.toContain('playpilot-injection-highlight')
   })
 
   it('Should highlight multiple elements if multiple are present', async () => {
@@ -44,7 +44,20 @@ describe('EditorItem.svelte', () => {
     const { container } = render(EditorItem, { linkInjection })
 
     await fireEvent.mouseEnter(/** @type {HTMLElement} */ (container.querySelector('.item')))
-    expect(document.querySelectorAll('.injection-highlight')).toHaveLength(2)
+    expect(document.querySelectorAll('.playpilot-injection-highlight')).toHaveLength(2)
+  })
+
+  it('Should highlight the sentence the injection is in if an injection failed but a matching sentence exists.', async () => {
+    document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+    const failedInjection = generateInjection('This is a sentence', 'fail')
+
+    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, { aiInjections: [], manualInjections: [failedInjection] })
+
+    const { container } = render(EditorItem, { linkInjection })
+
+    await fireEvent.mouseEnter(/** @type {HTMLElement} */ (container.querySelector('.item')))
+    expect(/** @type {HTMLElement} */ (document.querySelector('p')).classList).toContain('playpilot-injection-highlight')
   })
 
   it('Should scroll matching link into view when component is clicked', async () => {
@@ -59,9 +72,9 @@ describe('EditorItem.svelte', () => {
   })
 
   it('Should not scroll matching link into view when component is clicked but there is no matching injection', async () => {
-    document.body.innerHTML = '<p>This has no matching injections.</p>'
+    document.body.innerHTML = '<main><p>This has no matching injections.</p></main>'
 
-    injectLinksInDocument(Array.from(document.querySelectorAll('p')), () => null, linkInjections)
+    injectLinksInDocument(Array.from(document.querySelectorAll('main p')), () => null, linkInjections)
 
     const { container } = render(EditorItem, { linkInjection })
 
@@ -108,9 +121,9 @@ describe('EditorItem.svelte', () => {
   })
 
   it('Should show different state when injection failed', () => {
-    const { getByText, queryByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, failed: true } })
+    const { getByText, queryByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, failed: true, failed_message: 'Some message' } })
 
-    expect(getByText('the link could not be injected', { exact: false })).toBeTruthy()
+    expect(getByText('Some message')).toBeTruthy()
     expect(queryByLabelText('Expand')).not.toBeTruthy()
     expect(track).toHaveBeenCalled()
   })
@@ -164,4 +177,16 @@ describe('EditorItem.svelte', () => {
     expect(queryByText('Visible')).toBeTruthy()
     expect(container.querySelector('.inactive')).not.toBeTruthy()
   })
+
+  it('Should display an icon when playlink types are invalid', async () => {
+    const { getByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, in_text: false  } })
+
+    expect(getByLabelText('Invalid playlink settings')).toBeTruthy()
+  })
+
+  it('Should not display an icon when playlink types are valid', async () => {
+    const { queryByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, in_text: true  } })
+
+    expect(queryByLabelText('Invalid playlink settings')).not.toBeTruthy()
+  })
 })

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

@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it } from 'vitest'
 import PlaylinkTypeSelect from '../../../../routes/components/Editorial/PlaylinkTypeSelect.svelte'
 
 describe('PlaylinkTypeSelect.svelte', () => {
-  /** @type {LinkInjection} */
+  /** @type {import('$lib/types/injection').LinkInjection} */
   const linkInjection = {
     sid: '1',
     title: 'test',
@@ -60,4 +60,16 @@ describe('PlaylinkTypeSelect.svelte', () => {
     expect(getByText('Modal button').classList).toContain('active')
     expect(/** @type {HTMLElement} */(document.querySelector('.active-marker')).classList).toContain('right')
   })
+
+  it('Should display a message when playlink types are invalid', async () => {
+    const { getByText } = render(PlaylinkTypeSelect, { linkInjection: { ...linkInjection, in_text: false  } })
+
+    expect(getByText('At least one layout option must be selected for the playlink to be visible.')).toBeTruthy()
+  })
+
+  it('Should not display a message when playlink types are valid', async () => {
+    const { queryByText } = render(PlaylinkTypeSelect, { linkInjection: { ...linkInjection, in_text: true  } })
+
+    expect(queryByText('At least one layout option must be selected for the playlink to be visible.')).not.toBeTruthy()
+  })
 })

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

@@ -61,9 +61,9 @@ describe('Title.svelte', () => {
   })
 
   it('Should truncate title when small prop is given', () => {
-    const { container } = render(Title, { title, small: true })
+    const { getAllByRole } = render(Title, { title, small: true })
 
-    expect(container.querySelector('h1.truncate')).toBeTruthy()
+    expect(getAllByRole('heading')[0].classList).toContain('truncate')
   })
 
   it('Should render given description', () => {

package/svelte.config.js

@@ -8,6 +8,7 @@ const config = {
       includePaths: ['src'],
       prependData: `
         @use "src/lib/scss/_functions.scss" as *;
+        @use "src/lib/scss/_mixins.scss" as *;
       `,
     },
   }),