@playpilot/tpi 6.10.7 → 7.0.0-beta.1

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

@@ -0,0 +1,235 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+
+import { getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injectionElements'
+
+describe('injectionElements.ts', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  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 a list as a single element', () => {
+      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>
+
+        <ol>
+          <li>Hey!</li>
+          <li>I</li>
+          <li>am</li>
+          <li>part</li>
+          <li>of</li>
+          <li>a</li>
+          <li>list.</li>
+        </ol>
+      </section>`
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(2)
+      expect(getLinkInjectionElements(parent)[0].tagName).toBe('UL')
+      expect(getLinkInjectionElements(parent)[1].tagName).toBe('OL')
+    })
+
+    it('Should ignore links, buttons, script tags, style tags, iframes, h1, and more', () => {
+      document.body.innerHTML = `<section>
+        <h1>Some header</h1>
+
+        <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>
+        <figcaption>I am a figcaption</figcaption>
+        <time>I am time</time>
+        <label>I am a label</label>
+        <blockquote>I am a quote</blockquote>
+
+        <div>
+          <a>I am another link</a>
+          <h4>Some smaller header</h4>
+          <p>And finally, some text</p>
+        </div>
+      </section>`
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      expect(getLinkInjectionElements(parent)).toHaveLength(2) // The h4 tag and the paragraph tag
+    })
+
+    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>
+          <div><span><strong>Some first text</strong></span></div>
+          <div>
+            <em>Some empasized</em>
+            <main><span><em><i>Some deeply nested text</i></em></span></main>
+            <div>Some text</div>
+          </div>
+        </div>
+      </section>`
+
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+      const elements = getLinkInjectionElements(parent)
+
+      expect(elements).toHaveLength(4)
+      expect(elements[0].nodeName).toBe('STRONG')
+      expect(elements[1].nodeName).toBe('EM')
+      expect(elements[2].nodeName).toBe('I')
+      expect(elements[3].nodeName).toBe('DIV')
+    })
+
+    it('Should exclude elements that match or are in the given excludeElementsSelector attribute', () => {
+      document.body.innerHTML = `<section>
+        <p>I am a regular element</p>
+        <div data-exclude>I am to be excluded. <span>And so am I!</span></div>
+      </section>
+      `
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      const result = getLinkInjectionElements(parent, '[data-exclude]')
+      expect(result).toHaveLength(1)
+      expect(result[0].innerText).toBe('I am a regular element')
+    })
+
+    it('Should return paragraphs fully even if they contain no direct text nodes, skipping empty paragraphs', () => {
+      document.body.innerHTML = `<section>
+        <p>Some text</p>
+        <p><span>Some text</span> <span>broken up</span></p>
+        <p><span>Some text</span> <span>broken up</span> but also contains direct text</p>
+        <p></p>
+      </section>`
+
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+      const elements = getLinkInjectionElements(parent)
+
+      expect(elements).toHaveLength(3)
+    })
+  })
+
+  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('getPageText', () => {
+    it('Should return page text for all given elements separated by newlines', () => {
+      document.body.innerHTML = `<section>
+        <p>Some text</p>
+        <p>Some second text</p>
+        <p>Some third text</p>
+      </section>`
+
+      expect(getPageText(getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section'))))).toBe(
+        'Some text\n\nSome second text\n\nSome third text',
+      )
+    })
+  })
+})

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

@@ -0,0 +1,56 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { getLanguage } from '$lib/language'
+
+describe('language.ts', () => {
+  describe('getLanguage', () => {
+    afterEach(() => {
+      // @ts-expect-error
+      window.PlayPilotLinkInjections = {}
+    })
+
+    it('Should return the language given in config object before document language', () => {
+      // @ts-expect-error
+      window.PlayPilotLinkInjections = { language: 'sv-SE' }
+
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'en-US')
+
+      expect(getLanguage()).toBe('sv-SE')
+    })
+
+    it('Should return the language given as document language when config language is invalid', () => {
+      // @ts-expect-error
+      window.PlayPilotLinkInjections = { language: 'no' }
+
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'sv-SE')
+
+      expect(getLanguage()).toBe('sv-SE')
+    })
+
+    it('Should return the language given as document language when no config object is set', () => {
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'sv-SE')
+
+      expect(getLanguage()).toBe('sv-SE')
+    })
+
+    it('Should return the language given as document language even when using shorthand', () => {
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'sv')
+
+      expect(getLanguage()).toBe('sv-SE')
+    })
+
+    it('Should return the default language when document language is invalid', () => {
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'no')
+
+      expect(getLanguage()).toBe('en-US')
+    })
+
+    it('Should return the default language no document language or config language is given', () => {
+      expect(getLanguage()).toBe('en-US')
+    })
+  })
+})

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

@@ -1,9 +1,9 @@
-import { describe, it, expect, afterEach } from 'vitest'
-import { getLanguage, t } from '$lib/localization'
+import { describe, it, expect } from 'vitest'
+import { t } from '$lib/localization'
 import { Language } from '$lib/enums/Language'
 import { translations } from '$lib/data/translations'
 
-describe('localization.js', () => {
+describe('localization.ts', () => {
   describe('t', () => {
     it('Should return the value for the given language and key', () => {
       expect(t(Object.keys(translations)[0], Language.English)).toBe(Object.values(translations)[0][Language.English])
@@ -19,56 +19,4 @@ describe('localization.js', () => {
       expect(t(Object.keys(translations)[0], 'Some Invalid Language')).toBe(Object.keys(translations)[0])
     })
   })
-
-  describe('getLanguage', () => {
-    afterEach(() => {
-      // @ts-expect-error
-      window.PlayPilotLinkInjections = {}
-    })
-
-    it('Should return the language given in config object before document language', () => {
-      // @ts-expect-error
-      window.PlayPilotLinkInjections = { language: 'sv-SE' }
-
-      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
-      html.setAttribute('lang', 'en-US')
-
-      expect(getLanguage()).toBe('sv-SE')
-    })
-
-    it('Should return the language given as document language when config language is invalid', () => {
-      // @ts-expect-error
-      window.PlayPilotLinkInjections = { language: 'no' }
-
-      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
-      html.setAttribute('lang', 'sv-SE')
-
-      expect(getLanguage()).toBe('sv-SE')
-    })
-
-    it('Should return the language given as document language when no config object is set', () => {
-      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
-      html.setAttribute('lang', 'sv-SE')
-
-      expect(getLanguage()).toBe('sv-SE')
-    })
-
-    it('Should return the language given as document language even when using shorthand', () => {
-      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
-      html.setAttribute('lang', 'sv')
-
-      expect(getLanguage()).toBe('sv-SE')
-    })
-
-    it('Should return the default language when document language is invalid', () => {
-      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
-      html.setAttribute('lang', 'no')
-
-      expect(getLanguage()).toBe('en-US')
-    })
-
-    it('Should return the default language no document language or config language is given', () => {
-      expect(getLanguage()).toBe('en-US')
-    })
-  })
 })

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

@@ -112,7 +112,7 @@ describe('Playlinks.svelte', () => {
     expect(getAllByText('Some playlink')).toHaveLength(1)
   })
 
-  it('Should render as list when only one playlink is present', async () => {
+  it('Should render as list when only one playlink is present', () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
     ]
@@ -122,4 +122,55 @@ describe('Playlinks.svelte', () => {
     // @ts-ignore
     expect(container.querySelector('.playlinks').classList).toContain('list')
   })
+
+  it('Should categorize and sort playlinks if config option is given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: { categorize_playlinks: true },
+    }
+
+    const playlinks = [
+      { name: 'Some svod playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some rent playlink', extra_info: { category: 'RENT' } },
+      { name: 'Some other rent playlink', logo_url: '', extra_info: { category: 'RENT' } },
+      { name: 'Some free playlink', logo_url: null, extra_info: { category: 'AVOD' } },
+    ]
+
+    // @ts-ignore
+    const { container, getByText } = render(Playlinks, { playlinks, title })
+
+    const elements = /** @type {HTMLElement[]} */ (Array.from(container.querySelectorAll('[data-playlink]')))
+
+    expect(elements[0].innerText).toContain(playlinks[3].name)
+    expect(elements[1].innerText).toContain(playlinks[0].name)
+    expect(elements[2].innerText).toContain(playlinks[1].name)
+    expect(elements[3].innerText).toContain(playlinks[2].name)
+
+    expect(getByText('Streaming services')).toBeTruthy()
+    expect(getByText('Rent it')).toBeTruthy()
+    expect(getByText('Stream for free')).toBeTruthy()
+  })
+
+  it('Should list uncategorized playlinks under "other" category', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: { categorize_playlinks: true },
+    }
+
+    const playlinks = [
+      { name: 'Some udef playlink', logo_url: 'logo', extra_info: { category: 'UDEF' } },
+      { name: 'Some empty playlink', extra_info: { category: '' } },
+      { name: 'Some svod playlink', logo_url: '', extra_info: { category: 'SVOD' } },
+      { name: 'Some tvod playlink', logo_url: null, extra_info: { category: 'TVOD' } },
+    ]
+
+    // @ts-ignore
+    const { getByTestId, getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByText('Other')).toBeTruthy()
+    expect(getByTestId('category-Other').querySelectorAll('[data-playlink]')).toHaveLength(3)
+
+    expect(getByText('Streaming services'))
+    expect(getByTestId('category-SVOD').querySelectorAll('[data-playlink]')).toHaveLength(1)
+  })
 })

package/vite._main.config.js

@@ -0,0 +1,27 @@
+import path from 'path'
+import { defineConfig } from 'vitest/config'
+import packageJson from './package.json'
+
+export default defineConfig(() => ({
+  plugins: [],
+
+  build: {
+    rollupOptions: {
+      input: './src/main.ts',
+      output: {
+        name: 'PlayPilotLinkInjections',
+        entryFileNames: 'link-injections.js',
+      },
+    },
+  },
+
+  resolve: {
+    alias: {
+      '$lib': path.resolve(__dirname, './src/lib'),
+    },
+  },
+
+  define: {
+    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
+  },
+}))

package/vite._mount.config.js

@@ -0,0 +1,54 @@
+import path from 'path'
+import * as dotenv from 'dotenv'
+import { defineConfig } from 'vitest/config'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+import packageJson from './package.json'
+
+dotenv.config({ path: '.env' })
+
+export default defineConfig(() => ({
+  plugins: [
+    svelte(),
+    cssInjectedByJsPlugin(),
+    injectEnvVariables,
+  ],
+
+  build: {
+    emptyOutDir: false,
+    rollupOptions: {
+      input: './src/mount.ts',
+      output: {
+        name: 'PlayPilotMount',
+        entryFileNames: 'mount.js',
+      },
+    },
+  },
+
+  resolve: {
+    alias: {
+      '$lib': path.resolve(__dirname, './src/lib'),
+    },
+  },
+
+  define: {
+    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
+  },
+}))
+
+const injectEnvVariables = {
+  name: 'resolve-env-variables',
+  /** @param {string} id */
+  resolveId(id) {
+    if (id === '$env/static/public') return '\0$env/static/public'
+  },
+  /** @param {string} id */
+  load(id) {
+    if (id === '\0$env/static/public') {
+      return Object.entries(process.env)
+        .filter(([key]) => key.startsWith('PUBLIC_'))
+        .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)};`)
+        .join('\n')
+    }
+  },
+}

package/vite.config.js

@@ -2,30 +2,15 @@ import path from 'path'
 import * as dotenv from 'dotenv'
 import { defineConfig } from 'vitest/config'
 import { sveltekit } from '@sveltejs/kit/vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import packageJson from './package.json'
 
 dotenv.config({ path: '.env' })
 
-export default defineConfig(({ command }) => ({
+export default defineConfig(() => ({
   plugins: [
-    command === 'build' ? svelte() : sveltekit(),
-    command === 'build' && cssInjectedByJsPlugin(),
-    command === 'build' && injectEnvVariables,
+    sveltekit(),
   ],
 
-  build: {
-    rollupOptions: {
-      input: './src/main.ts',
-      output: {
-        format: 'iife',
-        name: 'PlayPilotLinkInjections',
-        entryFileNames: 'link-injections.js',
-      },
-    },
-  },
-
   server: {
     port: 3000,
   },
@@ -47,20 +32,3 @@ export default defineConfig(({ command }) => ({
     __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
   },
 }))
-
-const injectEnvVariables = {
-  name: 'resolve-env-variables',
-  /** @param {string} id */
-  resolveId(id) {
-    if (id === '$env/static/public') return '\0$env/static/public'
-  },
-  /** @param {string} id */
-  load(id) {
-    if (id === '\0$env/static/public') {
-      return Object.entries(process.env)
-        .filter(([key]) => key.startsWith('PUBLIC_'))
-        .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)};`)
-        .join('\n')
-    }
-  },
-}