@playpilot/tpi 8.14.0-beta.4 → 8.15.0

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

@@ -0,0 +1,160 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import { generateInjection } from '../helpers'
+import { insertInTextWidgets, clearInTextWidgets, inTextWidgetInsertedComponents } from '$lib/inTextWidgets'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+describe('inTextWidgets.ts', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    document.body.innerHTML = ''
+
+    clearInTextWidgets()
+  })
+
+  describe('insertInTextWidgets', () => {
+    it('Should not mount any component if no linkInjections are given', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      insertInTextWidgets([])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should not mount any component if no widget targets exist', () => {
+      document.body.innerHTML = '<div>No widgets here</div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should mount a component for a known widget type', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledOnce()
+      expect(mount).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          target: document.querySelector('[data-playpilot-widget="tpi-rail"]'),
+          props: { linkInjections: [injection] },
+        }),
+      )
+    })
+
+    it('Should not mount a component for an unknown widget type', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="unknown-widget"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should mount components for multiple widget targets on the same page', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledTimes(2)
+    })
+
+    it('Should skip unknown widget targets and mount known ones', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="unknown-widget"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledOnce()
+    })
+
+    it('Should track inserted components', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(inTextWidgetInsertedComponents).toHaveLength(2)
+    })
+
+    it('Should clear previously inserted widgets before inserting new ones', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+      insertInTextWidgets([injection])
+
+      expect(unmount).toHaveBeenCalled()
+    })
+  })
+
+  describe('clearInTextWidgets', () => {
+    it('Should unmount all inserted components', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      insertInTextWidgets([injection])
+
+      clearInTextWidgets()
+
+      expect(unmount).toHaveBeenCalled()
+    })
+
+    it('Should clear innerHTML of all widget elements', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"><span>leftover content</span></div>
+      `
+
+      clearInTextWidgets()
+
+      expect(/** @type {HTMLElement} */ (document.querySelector('[data-playpilot-widget]')).innerHTML).toBe('')
+    })
+
+    it('Should reset inTextWidgetInsertedComponents to empty array', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      insertInTextWidgets([injection])
+
+      expect(inTextWidgetInsertedComponents.length).toBe(1)
+
+      clearInTextWidgets()
+
+      expect(inTextWidgetInsertedComponents.length).toBe(0)
+    })
+
+    it('Should do nothing if no components are present', () => {
+      clearInTextWidgets()
+
+      expect(unmount).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/tests/routes/components/Widgets/InjectionsWidgetRail.test.js

@@ -0,0 +1,28 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import InjectionsWidgetRail from '../../../../routes/components/Widgets/InjectionsWidgetRail.svelte'
+import { linkInjections } from '$lib/fakeData'
+
+describe('InjectionsWidgetRail.svelte', () => {
+  it('Should render unique titles for given injections', () => {
+    const injections = [linkInjections[0], linkInjections[0], linkInjections[1], linkInjections[2], linkInjections[2]]
+
+    const { getAllByTestId } = render(InjectionsWidgetRail, { linkInjections: injections })
+
+    expect(getAllByTestId('title')).toHaveLength(3)
+  })
+
+  it('Should not render if no injections were given', () => {
+    const { queryByTestId } = render(InjectionsWidgetRail, { linkInjections: [] })
+
+    expect(queryByTestId('widget')).not.toBeTruthy()
+  })
+
+  it('Should not render if injections contained no valid titles', () => {
+    // @ts-ignore
+    const { queryByTestId } = render(InjectionsWidgetRail, { linkInjections: [{ ...linkInjections, title_details: null }] })
+
+    expect(queryByTestId('widget')).not.toBeTruthy()
+  })
+})