@playpilot/tpi 8.41.0-beta.1 → 8.41.0

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

@@ -1,166 +1,156 @@
-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()
-  })
-})
+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()
+  })
+})