@playpilot/tpi 1.0.0

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

@@ -0,0 +1,101 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Playlinks from '../../../routes/components/Playlinks.svelte'
+import { title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { getContext } from 'svelte'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('svelte', async (importActual) => ({
+  ...(await importActual()),
+  getContext: vi.fn(),
+}))
+
+describe('Playlinks.svelte', () => {
+  it('Should render each given playlink', () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+    const { getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByText('Some playlink')).toBeTruthy()
+    expect(getByText('Some other playlink')).toBeTruthy()
+  })
+
+  it('Should show empty state when no playlinks were given', () => {
+    /** @type {PlaylinkData[]} */
+    const playlinks = []
+    const { container } = render(Playlinks, { playlinks, title })
+
+    expect(container.querySelector('.empty')).toBeTruthy()
+  })
+
+  it('Should render category as words', () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some buy playlink', logo_url: 'logo', extra_info: { category: 'BUY' } },
+      { name: 'Some rent playlink', logo_url: 'logo', extra_info: { category: 'RENT' } },
+      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'other' } },
+    ]
+    const { getByText, getAllByText } = render(Playlinks, { playlinks, title })
+
+    expect(getAllByText('Stream')).toHaveLength(2)
+    expect(getByText('Buy')).toBeTruthy()
+    expect(getByText('Rent')).toBeTruthy()
+  })
+
+  it('Should call track function when clicked', async () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+    const { getByText } = render(Playlinks, { playlinks, title })
+
+    await fireEvent.click(getByText(playlinks[0].name))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink: playlinks[0].name })
+  })
+
+  it('Should call track function for modal when clicked inside of modal scope', async () => {
+    /** @type {import('vitest').Mock} */ (getContext).mockReturnValueOnce('modal')
+
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+    const { getByText } = render(Playlinks, { playlinks, title })
+
+    await fireEvent.click(getByText(playlinks[0].name))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalPlaylinkClick, title, { playlink: playlinks[0].name })
+  })
+
+  it('Should exclude playlinks without logo', () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', extra_info: { category: 'BUY' } },
+      { name: 'Some playlink', logo_url: '', extra_info: { category: 'RENT' } },
+      { name: 'Some playlink', logo_url: null, extra_info: { category: 'other' } },
+    ]
+    const { getAllByText } = render(Playlinks, { playlinks, title })
+
+    expect(getAllByText('Some playlink')).toHaveLength(1)
+  })
+
+  it('Should not have list class by default', async () => {
+    const { container } = render(Playlinks, { playlinks: [], title })
+
+    expect(container.querySelector('.list')).not.toBeTruthy()
+  })
+
+  it('Should have list class when prop is given', async () => {
+    const { container } = render(Playlinks, { playlinks: [], title, list: true })
+
+    expect(container.querySelector('.list')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,66 @@
+import { render, waitFor } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import Popover from '../../../routes/components/Popover.svelte'
+import { createRawSnippet } from 'svelte'
+
+describe('Popover.svelte', () => {
+  const children = createRawSnippet(() => ({ render: () => 'Some snippet' }))
+
+  it('Should render given snippet', () => {
+    const { getByText } = render(Popover, { children })
+
+    expect(getByText('Some snippet')).toBeTruthy()
+  })
+
+  it('Should flip its position when near the top of the screen', async () => {
+    const { container } = render(Popover, { children })
+
+    const element = /** @type {HTMLElement} */ (container.querySelector('.popover'))
+
+    await waitFor(() => {
+      expect(element?.classList).toContain('flip')
+    })
+  })
+
+  it('Should not flip its position when not near the top of the screen', async () => {
+    document.body.innerHTML = '<div style="height: 1000px"></div>'
+
+    const { container } = render(Popover, { children })
+    const element = /** @type {HTMLElement} */ (container.querySelector('.popover'))
+
+    // @ts-ignore
+    window.HTMLElement.prototype.getBoundingClientRect = () => ({ top: 500 })
+
+    await new Promise(res => setTimeout(res, 500)) // Wait for element to be positioned
+
+    expect(element?.classList).not.toContain('flip')
+  })
+
+  it('Should position itself from the right side of the screen if the element is offscreen', async () => {
+    document.body.innerHTML = '<div style="height: 1000px"></div>'
+
+    const { container } = render(Popover, { children })
+    const element = /** @type {HTMLElement} */ (container.querySelector('.popover'))
+
+    // @ts-ignore
+    window.HTMLElement.prototype.getBoundingClientRect = () => ({ right: 2000 })
+
+    await waitFor(() => {
+      expect(element?.style).toContain('left')
+    })
+  })
+
+  it('Should position itself from the right side of the screen if the element is offscreen', async () => {
+    document.body.innerHTML = '<div style="height: 1000px"></div>'
+
+    const { container } = render(Popover, { children })
+    const element = /** @type {HTMLElement} */ (container.querySelector('.popover'))
+
+    // @ts-ignore
+    window.HTMLElement.prototype.getBoundingClientRect = () => ({ right: 0 })
+
+    await new Promise(res => setTimeout(res, 500)) // Wait for element to be positioned
+    expect(element?.style).not.toContain('left: -992px;')
+  })
+})

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

@@ -0,0 +1,35 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import RoundButton from '../../../routes/components/RoundButton.svelte'
+
+describe('RoundButton.svelte', () => {
+  it('Should render as a button by default', () => {
+    const { getByRole } = render(RoundButton)
+
+    expect(getByRole('button')).toBeTruthy()
+  })
+
+  it('Should render as a link when an href is passed', () => {
+    const { getByRole } = render(RoundButton, { href: 'https://some-link.com' })
+
+    expect(getByRole('link')).toBeTruthy()
+  })
+
+  it('Should include any rest props on the element', () => {
+    const { getByRole } = render(RoundButton, { href: 'https://some-link.com', 'aria-label': 'Some label', id: 'some-id' })
+
+    expect(getByRole('link').getAttribute('href')).toBe('https://some-link.com')
+    expect(getByRole('link').getAttribute('aria-label')).toBe('Some label')
+    expect(getByRole('link').getAttribute('id')).toBe('some-id')
+  })
+
+  it('Should fire given onclick function on click', async () => {
+    const onclick = vi.fn()
+    const { getByRole } = render(RoundButton, { onclick })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import SkeletonText from '../../../routes/components/SkeletonText.svelte'
+
+describe('SkeletonText.svelte', () => {
+  it('Should render the given amount of lines', () => {
+    const { container } = render(SkeletonText, { lines: 3 })
+
+    expect(container.querySelectorAll('.skeleton').length).toBe(3)
+  })
+})

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

@@ -0,0 +1,82 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import Title from '../../../routes/components/Title.svelte'
+import { title } from '$lib/fakeData'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('svelte', async (importActual) => ({
+  ...(await importActual()),
+  getContext: vi.fn(),
+}))
+
+describe('Title.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should render the given playlinks', () => {
+    const { getByText } = render(Title, { title })
+
+    expect(getByText(title.providers[0].name)).toBeTruthy()
+    expect(getByText(title.providers[1].name)).toBeTruthy()
+  })
+
+  it('Should render the given image', () => {
+    const { getByAltText } = render(Title, { title })
+
+    expect(getByAltText(`Movie poster for '${title.title}'`)).toBeTruthy()
+  })
+
+  it('Should render the given info', () => {
+    const { getByText } = render(Title, { title })
+
+    expect(getByText(title.title)).toBeTruthy()
+    expect(getByText(title.imdb_score)).toBeTruthy()
+    expect(getByText(title.year)).toBeTruthy()
+  })
+
+  it('Should include data attributes', () => {
+    const { container } = render(Title, { title })
+
+    const element = /** @type {HTMLElement} */ (container.querySelector('[data-playpilot-link-injections-title]'))
+
+    expect(element).toBeTruthy()
+    expect(element?.dataset.playpilotOriginalTitle).toBe(title.original_title)
+  })
+
+  it('Should not have small class by default', () => {
+    const { container } = render(Title, { title })
+
+    expect(container.querySelector('.small')).not.toBeTruthy()
+  })
+
+  it('Should have small class when prop is given', () => {
+    const { container } = render(Title, { title, small: true })
+
+    expect(container.querySelector('.small')).toBeTruthy()
+  })
+
+  it('Should render given description', () => {
+    const { getByText } = render(Title, { title: { ...title, description: 'Some description' } })
+
+    expect(getByText('Some description')).toBeTruthy()
+  })
+
+  it('Should not render description when small prop is given', () => {
+    const { queryByText } = render(Title, { title: { ...title, description: 'Some description' }, small: true })
+
+    expect(queryByText('Some description')).not.toBeTruthy()
+  })
+
+  it('Should render as compacter version when compact prop is true', () => {
+    const { queryByAltText, container } = render(Title, { title: { ...title, description: 'Some description' }, compact: true })
+
+    expect(queryByAltText(`Movie poster for '${title.title}'`)).not.toBeTruthy()
+    expect(container.querySelector('.compact')).toBeTruthy()
+    expect(container.querySelector('.faded')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,33 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import TitleModal from '../../../routes/components/TitleModal.svelte'
+import { title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('TitleModal.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  const onclose = vi.fn()
+
+  it('Should call track function when rendered', () => {
+    render(TitleModal, { onclose, title })
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalView, title)
+  })
+
+  it('Should call track function when scrolled', async () => {
+    const { getByRole } = render(TitleModal, { onclose, title })
+
+    await fireEvent.scroll(getByRole('dialog'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalScroll, title)
+  })
+})

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

@@ -0,0 +1,23 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import TitlePopover from '../../../routes/components/TitlePopover.svelte'
+import { title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('TitlePopover.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should call track function when rendered', () => {
+    render(TitlePopover, { title })
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverView, title)
+  })
+})

package/src/tests/setup.js

@@ -0,0 +1,53 @@
+import { cleanup } from '@testing-library/svelte'
+import { afterEach, beforeAll, beforeEach, vi } from 'vitest'
+
+// https://github.com/jsdom/jsdom/issues/3429#issuecomment-1936128876
+const mockAnimations = () => {
+  Element.prototype.animate ??= vi.fn().mockReturnValue({
+    finished: Promise.resolve(),
+    cancel: vi.fn(),
+    startTime: null,
+    currentTime: null,
+  })
+}
+
+const mockLocalStorage = () => {
+  /** @type {Record<string, string>} */
+  let store = {}
+
+  // @ts-ignore
+  ;(window).localStorage = {
+    getItem: function (key) {
+      return store[key] || null
+    },
+    setItem: function (key, value) {
+      store[key] = value.toString()
+    },
+    removeItem: function (key) {
+      delete store[key]
+    },
+    clear: function () {
+      store = {}
+    },
+  }
+}
+
+beforeAll(() => {
+  mockAnimations()
+  mockLocalStorage()
+})
+
+beforeEach(() => {
+  // @ts-ignore
+  window.PlayPilotLinkInjections = { token: 'some-token' }
+
+  // Reset cookies
+  document.cookie.split(';').forEach((cookie) => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;'))
+
+  window.HTMLElement.prototype.scrollIntoView = vi.fn()
+  localStorage.clear()
+})
+
+afterEach(() => {
+  cleanup()
+})

package/src/typedefs.js

@@ -0,0 +1,72 @@
+/**
+  * @typedef {{
+  *   sid: string,
+  *   slug: string,
+  *   poster_uuid: string,
+  *   standing_poster_uuid: string,
+  *   genres: string[],
+  *   year: number,
+  *   imdb_score: number,
+  *   type: string,
+  *   providers: PlaylinkData[],
+  *   description: string,
+  *   small_poster: string,
+  *   medium_poster: string,
+  *   standing_poster: string,
+  *   title: string,
+  *   original_title: string,
+  *   length?: number,
+  *   participants?: Participant[],
+  *   blurb?: string,
+  * }} TitleData
+ */
+
+/**
+ * @typedef {{ sid: string, name: string, url: string, logo_url: string, extra_info: { category: PlaylinkCategory } }} PlaylinkData
+ */
+
+/**
+ * @typedef {'SVOD' | 'BUY' | 'RENT'} PlaylinkCategory
+ */
+
+/**
+ * @typedef {{ username: string, profile: { display_name: string, profile_photo: string } }} User
+ */
+
+/**
+ * @typedef {{ sid: string, name: string, birth_date: string, death_date: string | null, jobs: Job[], image: string | null, image_uuid: string | null, gender: string, character: string | null }} Participant
+ */
+
+/**
+ * @typedef {'actor' | 'writer' | 'director'} Job
+ */
+
+/**
+ * @typedef {{
+ *   sid: string,
+ *   title: string,
+ *   sentence: string,
+ *   playpilot_url: string,
+ *   key: string,
+ *   title_details?: TitleData,
+ *   inactive?: boolean,
+ *   failed?: boolean,
+ *   in_text?: boolean,
+ *   after_article?: boolean
+ *   after_article_style?: 'modal_button' | 'playlinks' | null
+ * }} LinkInjection
+ */
+
+/** @typedef {Record<string, { elementIndex: number, from: number, to: number }>} LinkInjectionRanges */
+
+/**
+ * @typedef {'bottom' | 'center'} Alignment
+ */
+
+/**
+ * @typedef {{ injections_ready: boolean, injections_enabled: boolean, link_injections: LinkInjection[] | null, automation_enabled: boolean }} LinkInjectionResponse
+ */
+
+/**
+ * @typedef {{ x: number, y: number }} Position
+ */

package/svelte.config.js

@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-auto'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+}
+
+export default config

package/vite.config.js

@@ -0,0 +1,61 @@
+import fs from 'fs'
+import path from 'path'
+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'
+
+export default defineConfig(({ command }) => ({
+  plugins: [
+    command === 'build' ? svelte() : sveltekit(),
+    command === 'build' && cssInjectedByJsPlugin(),
+    {
+      // The build is output to /dist/index.html and /dist/assets/index-[random-hash].js
+      // We only care for the .js file. We remove the .html file, and move and remove the .js to the root .dist folder.
+
+      name: 'move-build-files',
+      writeBundle() {
+        const distPath = path.resolve(__dirname, './dist')
+        const assetsPath = path.resolve(__dirname, './dist/assets')
+
+        // 1. Remove index.html
+        const indexHtml = path.join(distPath, 'index.html')
+        if (fs.existsSync(indexHtml)) fs.unlinkSync(indexHtml)
+
+        // 2. Find the index-[hash].js file
+        const files = fs.readdirSync(assetsPath)
+        const jsFile = files.find(f => /^index-.*\.js$/.test(f))
+
+        if (!jsFile) return
+
+        const sourcePath = path.join(assetsPath, jsFile)
+        const targetPath = path.join(distPath, 'link-injections.js')
+
+        // 3. Move and rename the file
+        fs.renameSync(sourcePath, targetPath)
+        console.log(`Moved and renamed ${jsFile} to link-injections.js`)
+
+        // 4. Remove the now-empty /assets directory
+        const remaining = fs.readdirSync(assetsPath)
+        if (remaining.length === 0) fs.rmdirSync(assetsPath)
+      },
+    },
+  ],
+
+  server: {
+    port: 3000,
+  },
+
+  test: {
+    environment: 'happy-dom',
+    include: ['src/**/*.{test,spec}.{js,ts}'],
+    setupFiles: ['src/tests/setup.js'],
+  },
+
+  resolve: {
+    conditions: process.env.VITEST ? ['browser'] : [],
+    alias: {
+      '$lib': path.resolve(__dirname, './src/lib'),
+    },
+  },
+}))