@playpilot/tpi 8.40.0 → 8.41.0-beta.1

package/src/tests/routes/components/Ads/Display.test.js

@@ -1,156 +1,166 @@
-import { fireEvent, render } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
-
-import Display from '../../../../routes/components/Ads/Display.svelte'
-import { track } from '$lib/tracking'
-import { TrackingEvent } from '$lib/enums/TrackingEvent'
-
-vi.mock('$lib/tracking', () => ({
-  track: vi.fn(),
-}))
-
-export const campaign = {
-  campaign_format: 'display',
-  campaign_type: 'image',
-  campaign_platforms: ['web', 'android_app', 'ios_app'],
-  campaign_name: 'some_campaign_NL',
-  campaign_start: '2025-04-24T00:00:00Z',
-  campaign_end: '2025-04-30T23:59:00Z',
-  campaign_region: 'nl',
-  content: {
-    header: 'Some top scroll header',
-    header_logo: 'https://example.com/',
-    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
-    subheader: null,
-    image: 'https://example.com/',
-    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
-    video: null,
-    format: null,
-  },
-  cta: {
-    header: 'Button Label',
-    subheader: null,
-    image: null,
-    image_uuid: null,
-    url: 'https://google.com/',
-  },
-  content_playlist: null,
-  provider: null,
-  impression_trackers: [],
-  target_title_uuid: null,
-  target_title_sid: null,
-  backfill_providers: [],
-  autogenerated: false,
-  enabled: true,
-  hide_imdb_score: false,
-  hide_sponsored_message: false,
-  disclaimer: 'Some disclaimer',
-}
-
-describe('Display.svelte', () => {
-  it('Should fire track event on mount', () => {
-    /** @ts-ignore */
-    render(Display, { campaign })
-
-    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdView, null, { campaign_name: campaign.campaign_name })
-  })
-
-  it('Should fire track event on click', async () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign })
-
-    vi.resetAllMocks()
-
-    await fireEvent.click(getByRole('link'))
-    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
-    expect(track).toHaveBeenCalledTimes(1)
-
-    await fireEvent.mouseUp(getByRole('link'), { button: 1 })
-    expect(track).toHaveBeenCalledTimes(2)
-  })
-
-  it('Should render link without any content by default', () => {
-    /** @ts-ignore */
-    const { container } = render(Display, { campaign: { cta: {}, content: {} } })
-
-    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a'))).toBeTruthy()
-    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a')).children).toHaveLength(0)
-  })
-
-  it('Should render disclaimer when given', () => {
-    /** @ts-ignore */
-    const { getByTestId } = render(Display, { campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
-
-    expect(getByTestId('disclaimer')).toBeTruthy()
-  })
-
-  it('Should render content subheader when given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: { subheader: 'Some cta subheader' }, content: { } } })
-
-    expect(getByText('Some cta subheader')).toBeTruthy()
-  })
-
-  it('Should render logo when given', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign: { cta: {}, content: { header_logo: 'test' } } })
-
-    expect(getByRole('presentation').getAttribute('src')).toBe('test')
-  })
-
-  it('Should render background image when given', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign: { campaign_type: 'image', cta: {}, content: { image: 'test' } } })
-
-    expect(getByRole('presentation').getAttribute('src')).toBe('test')
-  })
-
-  it('Should render header when given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some header' } } })
-
-    expect(getByText('Some header')).toBeTruthy()
-  })
-
-  it('Should render subheader when given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some subheader' } } })
-
-    expect(getByText('Some subheader')).toBeTruthy()
-  })
-
-  it('Should render button when cta header is given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: { header: 'Some button label' }, content: {} } })
-
-    expect(getByText('Some button label')).toBeTruthy()
-  })
-
-  it('Should not have compact class by default', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign })
-
-    expect(getByRole('link').classList).not.toContain('compact')
-  })
-
-  it('Should have compact class when prop is given', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign, compact: true })
-
-    expect(getByRole('link').classList).toContain('compact')
-  })
-
-  it('Should not show disclaimer text when compact', () => {
-    /** @ts-ignore */
-    const { queryByText } = render(Display, { compact: true, campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
-
-    expect(queryByText('Some disclaimer')).not.toBeTruthy()
-  })
-
-  it('Should render video rather than image when video is given as type', () => {
-    /** @ts-ignore */
-    const { container } = render(Display, { campaign: { campaign_type: 'video', cta: {}, content: { video: 'abc' } } })
-
-    expect(container.querySelector('video')).toBeTruthy()
-  })
-})
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Display from '../../../../routes/components/Ads/Display.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+export const campaign = {
+  campaign_format: 'display',
+  campaign_type: 'image',
+  campaign_platforms: ['web', 'android_app', 'ios_app'],
+  campaign_name: 'some_campaign_NL',
+  campaign_start: '2025-04-24T00:00:00Z',
+  campaign_end: '2025-04-30T23:59:00Z',
+  campaign_region: 'nl',
+  content: {
+    header: 'Some top scroll header',
+    header_logo: 'https://example.com/',
+    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    subheader: null,
+    image: 'https://example.com/',
+    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    video: null,
+    format: null,
+  },
+  cta: {
+    header: 'Button Label',
+    subheader: null,
+    image: null,
+    image_uuid: null,
+    url: 'https://google.com/',
+  },
+  content_playlist: null,
+  provider: null,
+  impression_trackers: [],
+  target_title_uuid: null,
+  target_title_sid: null,
+  backfill_providers: [],
+  autogenerated: false,
+  enabled: true,
+  hide_imdb_score: false,
+  hide_sponsored_message: false,
+  disclaimer: 'Some disclaimer',
+}
+
+describe('Display.svelte', () => {
+  it('Should fire track event on mount', () => {
+    /** @ts-ignore */
+    render(Display, { campaign })
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdView, null, { campaign_name: campaign.campaign_name })
+  })
+
+  it('Should fire track event on click', async () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign })
+
+    vi.resetAllMocks()
+
+    await fireEvent.click(getByRole('link'))
+    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
+    expect(track).toHaveBeenCalledTimes(1)
+
+    await fireEvent.mouseUp(getByRole('link'), { button: 1 })
+    expect(track).toHaveBeenCalledTimes(2)
+  })
+
+  it('Should render link without any content by default', () => {
+    /** @ts-ignore */
+    const { container } = render(Display, { campaign: { cta: {}, content: {} } })
+
+    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a'))).toBeTruthy()
+    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a')).children).toHaveLength(0)
+  })
+
+  it('Should render disclaimer when given', () => {
+    /** @ts-ignore */
+    const { getByTestId } = render(Display, { campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
+
+    expect(getByTestId('disclaimer')).toBeTruthy()
+  })
+
+  it('Should render content subheader when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: { subheader: 'Some cta subheader' }, content: {} } })
+
+    expect(getByText('Some cta subheader')).toBeTruthy()
+  })
+
+  it('Should render logo when given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign: { cta: {}, content: { header_logo: 'test' } } })
+
+    expect(getByRole('presentation').getAttribute('src')).toBe('test')
+  })
+
+  it('Should render background image when given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign: { campaign_type: 'image', cta: {}, content: { image: 'test' } } })
+
+    expect(getByRole('presentation').getAttribute('src')).toBe('test')
+  })
+
+  it('Should render header when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some header' } } })
+
+    expect(getByText('Some header')).toBeTruthy()
+  })
+
+  it('Should render subheader when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some subheader' } } })
+
+    expect(getByText('Some subheader')).toBeTruthy()
+  })
+
+  it('Should render button when cta header is given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: { header: 'Some button label' }, content: {} } })
+
+    expect(getByText('Some button label')).toBeTruthy()
+  })
+
+  it('Should not have compact class by default', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign })
+
+    expect(getByRole('link').classList).not.toContain('compact')
+  })
+
+  it('Should have compact class when prop is given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign, compact: true })
+
+    expect(getByRole('link').classList).toContain('compact')
+  })
+
+  it('Should not show disclaimer text when compact', () => {
+    /** @ts-ignore */
+    const { queryByText } = render(Display, { compact: true, campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
+
+    expect(queryByText('Some disclaimer')).not.toBeTruthy()
+  })
+
+  it('Should render video rather than image when video is given as type', () => {
+    /** @ts-ignore */
+    const { container } = render(Display, { campaign: { campaign_type: 'video', cta: {}, content: { video: 'abc' } } })
+
+    expect(container.querySelector('video')).toBeTruthy()
+  })
+
+  it('Should render with expected content when slim variant is given', () => {
+    /** @ts-ignore */
+    const { container, queryByText } = render(Display, { slim: true, campaign: { campaign_type: 'video', cta: { header: 'Some header', subheader: 'Some cta subheader' }, content: { header_logo: 'dfg', video: 'abc' } } })
+
+    expect(container.querySelector('.slim')).toBeTruthy()
+    expect(container.querySelector('.logo')).toBeTruthy()
+    expect(queryByText('Some header')).toBeTruthy()
+    expect(queryByText('Some cta header')).not.toBeTruthy()
+  })
+})

package/svelte.config.js

@@ -1,23 +1,32 @@
-import adapter from '@sveltejs/adapter-auto'
-import { sveltePreprocess  } from 'svelte-preprocess'
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-  preprocess: sveltePreprocess({
-    scss: {
-      includePaths: ['src'],
-      prependData: `
-        @use "src/lib/scss/_functions.scss" as *;
-        @use "src/lib/scss/_mixins.scss" as *;
-      `,
-    },
-  }),
-  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
+import adapter from '@sveltejs/adapter-auto'
+import { sveltePreprocess } from 'svelte-preprocess'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: sveltePreprocess({
+    scss: {
+      includePaths: ['src'],
+      prependData: `
+        @use "src/lib/scss/_functions.scss" as *;
+        @use "src/lib/scss/_mixins.scss" as *;
+      `,
+    },
+  }),
+  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(),
+  },
+  compilerOptions: {
+    warningFilter: (warning) => {
+      const ignore = [
+        'state_referenced_locally',
+      ]
+
+      return !ignore.includes(warning.code)
+    },
+  },
+}
+
+export default config

package/vite.config.js

@@ -1,43 +1,43 @@
-import path from 'path'
-import * as dotenv from 'dotenv'
-import { defineConfig } from 'vitest/config'
-import { sveltekit } from '@sveltejs/kit/vite'
-import packageJson from './package.json'
-
-dotenv.config({ path: '.env' })
-
-export default defineConfig(() => ({
-  plugins: [
-    sveltekit(),
-  ],
-
-  server: {
-    port: 3000,
-    allowedHosts: ['engage-moderate-happy-davis.trycloudflare.com'],
-  },
-
-  test: {
-    environment: 'happy-dom',
-    environmentOptions: {
-      happyDOM: {
-        settings: {
-          disableJavaScriptFileLoading: true,
-        },
-      },
-    },
-    include: ['src/**/*.{test,spec}.{js,ts}'],
-    setupFiles: ['src/tests/setup.js'],
-  },
-
-  resolve: {
-    conditions: process.env.VITEST ? ['browser'] : [],
-    alias: {
-      '$lib': path.resolve(__dirname, './src/lib'),
-    },
-  },
-
-  define: {
-    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
-    __IS_EDITORIAL_SCRIPT__: true,
-  },
-}))
+import path from 'path'
+import * as dotenv from 'dotenv'
+import { defineConfig } from 'vitest/config'
+import { sveltekit } from '@sveltejs/kit/vite'
+import packageJson from './package.json'
+
+dotenv.config({ path: '.env' })
+
+export default defineConfig(() => ({
+  plugins: [
+    sveltekit(),
+  ],
+
+  server: {
+    port: 3000,
+    allowedHosts: ['engage-moderate-happy-davis.trycloudflare.com'],
+  },
+
+  test: {
+    environment: 'happy-dom',
+    environmentOptions: {
+      happyDOM: {
+        settings: {
+          disableJavaScriptFileLoading: true,
+        },
+      },
+    },
+    include: ['src/**/*.{test,spec}.{js,ts}'],
+    setupFiles: ['src/tests/setup.js'],
+  },
+
+  resolve: {
+    conditions: process.env.VITEST ? ['browser'] : [],
+    alias: {
+      '$lib': path.resolve(__dirname, './src/lib'),
+    },
+  },
+
+  define: {
+    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
+    __IS_EDITORIAL_SCRIPT__: true,
+  },
+}))