@playpilot/tpi 7.0.0 → 7.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "7.0.0",
+	"version": "7.0.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/main.ts

@@ -86,12 +86,13 @@ window.PlayPilotLinkInjections = {
 
     const script = document.createElement('script')
 
+    script.id = 'playpilot-mount'
     script.src = `https://cdn.jsdelivr.net/npm/@playpilot/tpi@${__SCRIPT_VERSION__}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
     // script.src = './dist/mount.js' // Use me during development of this script
 
     script.onload = () => window.PlayPilotMount?.mount()
 
-    if (process.env.NODE_ENV !== 'test') document.body.insertAdjacentElement('beforeend', script)
+    document.body.appendChild(script)
   },
 }
 

package/src/routes/components/Debugger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { SplitTest } from '$lib/enums/SplitTest'
+  import { getPageTextAndElements } from '$lib/injectionElements'
   import { getFullUrlPath } from '$lib/url'
   import { onDestroy } from 'svelte'
 
@@ -160,6 +161,11 @@
 
     <hr />
 
+    <button onclick={() => console.log(getPageTextAndElements(window.PlayPilotLinkInjections.config))}>Output elements in console</button>
+    <button onclick={() => console.log(getPageTextAndElements(window.PlayPilotLinkInjections.config).pageText)}>Output text in console</button>
+
+    <hr />
+
     <button onclick={onrerender}>Re-inject</button>
 
     {#if isUsingBetaScript}

package/src/tests/main.test.js

@@ -5,6 +5,7 @@ import { fetchConfig } from '$lib/api/config'
 import { waitFor } from '@testing-library/svelte'
 import { isUrlExcludedViaConfig } from '$lib/url'
 import { pollLinkInjections } from '$lib/api/externalPages'
+import { getAuthToken, isEditorialModeEnabled } from '$lib/api/auth'
 
 vi.mock('$lib/consent', () => ({
   setConsent: vi.fn(),
@@ -23,8 +24,15 @@ vi.mock('$lib/url', () => ({
   isUrlExcludedViaConfig: vi.fn(),
 }))
 
+vi.mock('$lib/api/auth', () => ({
+  getAuthToken: vi.fn(),
+  isEditorialModeEnabled: vi.fn(),
+}))
+
 describe('main.ts', () => {
   beforeEach(async () => {
+    document.body.innerHTML = ''
+
     fakeFetch()
 
     vi.resetModules()
@@ -37,65 +45,99 @@ describe('main.ts', () => {
     vi.resetModules()
   })
 
-  it('Should not call setConsent when only a token is passed', () => {
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+  describe('initialize', () => {
+    it('Should not call setConsent when only a token is passed', () => {
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
 
-    expect(setConsent).not.toHaveBeenCalled()
+      expect(setConsent).not.toHaveBeenCalled()
 
-    expect(window.PlayPilotLinkInjections.consents).toEqual({
-      ads: false,
-      pixels: false,
-      tracking: false,
-      split_tests: false,
-      affiliate: false,
+      expect(window.PlayPilotLinkInjections.consents).toEqual({
+        ads: false,
+        pixels: false,
+        tracking: false,
+        split_tests: false,
+        affiliate: false,
+      })
     })
-  })
 
-  it('Should call setConsent when require_consent is false', () => {
-    window.PlayPilotLinkInjections.initialize({ token: 'a', require_consent: false })
+    it('Should call setConsent when require_consent is false', () => {
+      window.PlayPilotLinkInjections.initialize({ token: 'a', require_consent: false })
 
-    expect(setConsent).toHaveBeenCalledWith({
-      ads: true,
-      pixels: true,
-      tracking: true,
-      split_tests: true,
-      affiliate: true,
+      expect(setConsent).toHaveBeenCalledWith({
+        ads: true,
+        pixels: true,
+        tracking: true,
+        split_tests: true,
+        affiliate: true,
+      })
     })
-  })
 
-  it('Should call config object and set the result to the window object', async () => {
-    vi.mocked(fetchConfig).mockResolvedValue({ html_selector: 'some_value' })
+    it('Should call config object and set the result to the window object', async () => {
+      vi.mocked(fetchConfig).mockResolvedValue({ html_selector: 'some_value' })
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
 
-    expect(fetchConfig).toHaveBeenCalled()
+      expect(fetchConfig).toHaveBeenCalled()
 
-    await waitFor(() => {
-      expect(window.PlayPilotLinkInjections.config).toEqual({ html_selector: 'some_value' })
+      await waitFor(() => {
+        expect(window.PlayPilotLinkInjections.config).toEqual({ html_selector: 'some_value' })
+      })
     })
-  })
 
-  it('Should not call pollLinkInjections if config object excludes page', async () => {
-    vi.mocked(isUrlExcludedViaConfig).mockReturnValue(true)
+    it('Should not call pollLinkInjections if config object excludes page', async () => {
+      vi.mocked(isUrlExcludedViaConfig).mockReturnValue(true)
+
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
+
+      expect(fetchConfig).toHaveBeenCalled()
+
+      await new Promise(res => setTimeout(res))
+
+      expect(pollLinkInjections).not.toHaveBeenCalled()
+    })
+
+    it('Should call pollLinkInjections if config object does not page', async () => {
+      vi.mocked(isUrlExcludedViaConfig).mockReturnValue(false)
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
 
-    expect(fetchConfig).toHaveBeenCalled()
+      expect(fetchConfig).toHaveBeenCalled()
 
-    await new Promise(res => setTimeout(res))
+      await new Promise(res => setTimeout(res))
 
-    expect(pollLinkInjections).not.toHaveBeenCalled()
+      expect(pollLinkInjections).toHaveBeenCalled()
+    })
   })
 
-  it('Should call pollLinkInjections if config object does not page', async () => {
-    vi.mocked(isUrlExcludedViaConfig).mockReturnValue(false)
+  describe('mount', () => {
+    it('Should insert script tag', () => {
+      window.PlayPilotLinkInjections.mount()
+
+      expect(document.querySelector('script#playpilot-mount')).toBeTruthy()
+    })
+
+    it('Should insert script tag with editorial mode if editiorial mode is enabled', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(true)
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('editorial.mount.js')
+    })
 
-    expect(fetchConfig).toHaveBeenCalled()
+    it('Should insert script tag with editorial mode if editiorial mode is disabled but auth token is present', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(false)
+      vi.mocked(getAuthToken).mockReturnValueOnce('abc')
 
-    await new Promise(res => setTimeout(res))
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('editorial.mount.js')
+    })
 
-    expect(pollLinkInjections).toHaveBeenCalled()
+    it('Should insert script tag without editorial mode if editiorial mode is disabled but auth token is present', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(false)
+      vi.mocked(getAuthToken).mockReturnValueOnce('')
+
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).not.toContain('editorial.mount.js')
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('mount.js')
+    })
   })
 })

package/src/tests/mount.test.js

@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fakeFetch } from './helpers'
+import { clearLinkInjections } from '$lib/injection'
+import { mount } from 'svelte'
+
+vi.mock('$lib/injection', () => ({
+  clearLinkInjections: vi.fn(),
+}))
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+}))
+
+describe('mount.ts', () => {
+  beforeEach(async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+    document.body.innerHTML = ''
+
+    fakeFetch()
+
+    vi.resetModules()
+    vi.resetAllMocks()
+
+    await import('../mount')
+  })
+
+  describe('mount', () => {
+    it('Should mount app', () => {
+      window.PlayPilotMount.mount()
+
+      expect(mount).toHaveBeenCalledWith(expect.any(Function), { target: expect.any(HTMLElement) })
+    })
+
+    it('Should assign app to window PlayPilotLinkInjections object', () => {
+      vi.mocked(mount).mockReturnValueOnce({ some_key: 'Some value' })
+
+      window.PlayPilotMount.mount()
+
+      expect(window.PlayPilotLinkInjections.app).toEqual({ some_key: 'Some value' })
+    })
+  })
+
+  describe('destroy', () => {
+    it('Should call clearLinkInjections and remove link injections element', () => {
+      document.body.innerHTML = '<div id="playpilot-link-injection"></div>'
+
+      window.PlayPilotMount.destroy()
+
+      expect(document.body.innerHTML).toBe('')
+      expect(clearLinkInjections).toHaveBeenCalled()
+    })
+
+    it('Should clear app on window PlayPilotLinkInjections object', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { app: {} }
+
+      window.PlayPilotMount.destroy()
+
+      expect(window.PlayPilotLinkInjections.app).toBe(null)
+    })
+  })
+})