@playpilot/tpi 8.10.0 → 8.10.2

package/src/routes/components/Title.svelte

@@ -55,7 +55,7 @@
       <TitlePoster {title} onload={() => posterLoaded = true} lazy={false} />
     </div>
 
-    <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
+    <div class="heading" use:heading={2} class:truncate={small} id="heading">{title.title}</div>
 
     <div class="info">
       <div class="imdb">

package/src/routes/components/TrackAnyClick.svelte

@@ -18,8 +18,17 @@
     const targetSelector = `${target?.nodeName.toLowerCase()}${getClasslistAsString(target)}`
     const selector = `${parentSelector} > ${targetSelector}`
 
-    const hasDirectTextContent = Array.from(target.childNodes).some(node => node.nodeName === '#text' && !!node.nodeValue?.trim())
-    const text = hasDirectTextContent ? target.textContent.slice(0, 30) : ''
+    const closestButtonOrLink = target.closest('a, button')
+    const directTextNode =
+      elementHasDirectTextContent(target) ||
+      elementHasDirectTextContent(parent) ||
+      (closestButtonOrLink && elementHasDirectTextContent(closestButtonOrLink))
+
+    const textContent = directTextNode ? directTextNode.textContent?.slice(0, 30) : ''
+    const label = target.getAttribute('aria-label') || closestButtonOrLink?.getAttribute('aria-label') || parent?.getAttribute('aria-label')
+    const placeholder = (target as HTMLInputElement).placeholder
+    const alt = (target as HTMLImageElement).alt
+    const text = (textContent || label || placeholder || alt || '').trim()
 
     track(trackingEvent, null, { selector, text })
   }
@@ -33,6 +42,10 @@
 
     return '.' + classnames.join('.')
   }
+
+  function elementHasDirectTextContent(element: Element): Node | undefined {
+    return Array.from(element.childNodes).find(node => node.nodeName === '#text' && !!node.textContent?.trim())
+  }
 </script>
 
 <svelte:window {onclick} />

package/src/routes/components/YouTubeEmbed.svelte

@@ -38,7 +38,7 @@
   </iframe>
 
   {#if showMuteControls}
-    <button class="mute" onclick={() => toggleMute()}>
+    <button class="mute" onclick={() => toggleMute()} aria-label="Mute">
       <IconMute muted={isMuted} />
     </button>
   {/if}

package/src/routes/elements/+page.svelte

@@ -16,7 +16,7 @@
   import RoundButton from '../components/RoundButton.svelte'
   import SkeletonText from '../components/SkeletonText.svelte'
   import Title from '../components/Title.svelte'
-  import TitlePopover from '../components/TitlePopover.svelte'
+  import InjectionPopover from '../components/InjectionPopover.svelte'
   import Tooltip from '../components/Tooltip.svelte'
   import ExploreRouter from '../components/Explore/ExploreRouter.svelte'
   import TitlesRail from '../components/Rails/TitlesRail.svelte'
@@ -69,10 +69,10 @@
   </div>
 
   <div>
-    <h3>TitlePopover.svelte</h3>
+    <h3>InjectionPopover.svelte</h3>
     <div class="item">
       <div style:height="500px"></div>
-      <TitlePopover {title} event={{} as MouseEvent} />
+      <InjectionPopover data={title} event={{} as MouseEvent} />
     </div>
   </div>
 </div>

package/src/tests/helpers.js

@@ -44,5 +44,6 @@ export function generateInjection(sentence, title) {
     playpilot_url: 'https://some-link.com/',
     key: 'some-key-' + Math.random().toString(),
     title_details,
+    type: 'title',
   }
 }

package/src/tests/lib/api/youtubeAvailability.test.js

@@ -1,8 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
 import { fakeFetch } from '../../helpers'
-import { track } from '$lib/tracking'
-import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -64,7 +62,9 @@ describe('youtubeAvailability', () => {
       fakeFetch({ ok: false, status: 500 })
 
       expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
-      expect(track).toHaveBeenCalledWith(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: expect.any(String) })
+
+      // For now it's silently failing on purpose
+      // expect(track).toHaveBeenCalledWith(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: expect.any(String) })
     })
   })
 })

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

@@ -1,11 +1,12 @@
 import { fireEvent } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
-import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks } from '$lib/injection'
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks, hasValidTypeData } from '$lib/injection'
 import { mount, unmount } from 'svelte'
 import { fakeFetch, generateInjection } from '../helpers'
 import { openModalForInjectedLink } from '$lib/modal'
 import { getLinkInjectionElements } from '$lib/injectionElements'
+import { participants } from '$lib/fakeData'
 
 vi.mock('svelte', () => ({
   mount: vi.fn(),
@@ -568,7 +569,7 @@ describe('injection.ts', () => {
     })
 
     it('Should remove all popovers that may not have been removed properly in previous destroy attempts', async () => {
-      document.body.innerHTML = '<div data-playpilot-title-popover></div> <p>This is a sentence with an injection.</p>'
+      document.body.innerHTML = '<div data-playpilot-injection-popover></div> <p>This is a sentence with an injection.</p>'
 
       const elements = Array.from(document.body.querySelectorAll('p'))
       const injection = generateInjection('This is a sentence with an injection.', 'an injection')
@@ -583,7 +584,7 @@ describe('injection.ts', () => {
       await fireEvent.mouseMove(document.body)
       vi.advanceTimersByTime(200)
 
-      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
     })
 
     it('Should inject links of the same phrase when multiple are present', () => {
@@ -946,6 +947,20 @@ describe('injection.ts', () => {
 
       expect(document.querySelector('a')?.closest('[data-playpilot-injection-key]')).toBeTruthy()
     })
+
+    describe('Participants', () => {
+      it('Should inject participants just as a title', () => {
+        document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+        const elements = Array.from(document.body.querySelectorAll('p'))
+        const injection = { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: participants[0] }
+
+        // @ts-ignore
+        injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
+
+        expect(document.querySelector('[data-playpilot-injection-key]')).toBeTruthy()
+      })
+    })
   })
 
   describe('clearLinkInjections', () => {
@@ -1127,6 +1142,32 @@ describe('injection.ts', () => {
     })
   })
 
+  describe('hasValidTypeData', () => {
+    it('Should return true if injection has type title and has title_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'title', title_details: {} })).toBe(true)
+    })
+
+    it('Should return true if injection has type participant and has participant_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'participant', participant_details: {} })).toBe(true)
+    })
+
+    it('Should return false if injection has type title but has no title_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'title', title_details: null })).toBe(false)
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'title' })).toBe(false)
+    })
+
+    it('Should return false if injection has type participant but has no participant_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'participant', participant_details: null })).toBe(false)
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'participant' })).toBe(false)
+    })
+  })
+
   describe('removePlayPilotTitleLinks', () => {
     it('Should remove existing title links', () => {
       document.body.innerHTML = `

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

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { linkInjections } from '$lib/fakeData'
 import { mount, unmount } from 'svelte'
 import { clearCurrentlyHoveredInjection, currentlyHoveredInjection, destroyLinkPopover, isPopoverActive, openPopoverForInjectedLink } from '$lib/popover'
-import TitlePopover from '../../routes/components/TitlePopover.svelte'
+import InjectionPopover from '../../routes/components/InjectionPopover.svelte'
 import { waitFor } from '@testing-library/svelte'
 
 vi.mock('svelte', () => ({
@@ -22,17 +22,17 @@ describe('popover.js', () => {
   describe('openPopoverForInjectedLink', () => {
     it('Should mount popover', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await waitFor(() => {
-        expect(mount).toHaveBeenCalledWith(TitlePopover, expect.any(Object))
+        expect(mount).toHaveBeenCalledWith(InjectionPopover, expect.any(Object))
         expect(currentlyHoveredInjection).toBeTruthy()
       })
     })
 
     it('Should not mount popover if user is no longer hovering after delay', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await new Promise(res => setTimeout(res, 50))
 
@@ -46,19 +46,19 @@ describe('popover.js', () => {
 
   describe('destroyLinkPopover', () => {
     it('Should not call unmount but still remove potential popover elements if no active popover is set', async () => {
-      document.body.innerHTML = '<div data-playpilot-title-popover></div> <div data-playpilot-title-popover></div>'
+      document.body.innerHTML = '<div data-playpilot-injection-popover></div> <div data-playpilot-injection-popover></div>'
 
       destroyLinkPopover()
 
       expect(unmount).not.toHaveBeenCalled()
-      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
     })
   })
 
   describe('clearCurrentlyHoveredInjection', () => {
     it('Should clear currentlyHoveredInjection', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await waitFor(() => expect(currentlyHoveredInjection).toBeTruthy())
 

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -6,6 +6,7 @@ import { injectLinksInDocument } from '$lib/injection'
 import { track } from '$lib/tracking'
 import { generateInjection } from '../../../helpers'
 import { removeImageUrlPrefix } from '$lib/image'
+import { linkInjections as fakeLinkInjections } from '$lib/fakeData'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -200,4 +201,13 @@ describe('EditorItem.svelte', () => {
 
     expect(getByText('What would you like to report?')).toBeTruthy()
   })
+
+  it('Should render as participant when type is participant', () => {
+    const { container, queryByLabelText, getByText } = render(EditorItem, { linkInjection: fakeLinkInjections[4] })
+
+    expect(queryByLabelText('Expand')).not.toBeTruthy()
+    expect(getByText(fakeLinkInjections[4].participant_details?.name || '-')).toBeTruthy()
+    expect(container.querySelector('.poster')).not.toBeTruthy()
+    expect(container.querySelector('.placeholder-image')).toBeTruthy()
+  })
 })

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -99,6 +99,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: 'Some',
       phrase_after: 'in a',
+      type: 'title',
     })
   })
 
@@ -141,6 +142,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: '',
       phrase_after: '',
+      type: 'title',
     })
   })
 
@@ -183,6 +185,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: expect.any(String),
       phrase_after: expect.any(String),
+      type: 'title',
     })
   })
 
@@ -225,6 +228,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: expect.any(String),
       phrase_after: expect.any(String),
+      type: 'title',
     })
   })
 

package/src/tests/routes/components/Editorial/PlaylinkTypeSelect.test.js

@@ -11,6 +11,8 @@ describe('PlaylinkTypeSelect.svelte', () => {
     sentence: 'Some sentence',
     playpilot_url: 'https://playpilot.com/movie/example-3/',
     key: 'some-key',
+    /** @type {import('$lib/types/injection').LinkInjectionDataType} */
+    type: 'title',
   }
 
   beforeEach(() => {

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

@@ -0,0 +1,117 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+
+import InjectionPopover from '../../../routes/components/InjectionPopover.svelte'
+import { participants, title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { hasConsentedTo } from '$lib/consent'
+
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/pixel', () => ({
+  isPixelAllowed: vi.fn(),
+}))
+
+vi.mock('$lib/api/participants', () => ({
+  fetchParticipantsForTitle: vi.fn(),
+}))
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
+describe('InjectionPopover.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('Should render top scroll ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll', content: {}, cta: {} }] }
+
+    const event = new MouseEvent('mouseenter')
+    const { container } = render(InjectionPopover, { event, type: 'title', data: title })
+
+    expect(container.querySelector('.top-scroll')).toBeTruthy()
+  })
+
+  it('Should not render top scroll ad when not given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: null }
+
+    const event = new MouseEvent('mouseenter')
+    const { container } = render(InjectionPopover, { event, type: 'title', data: title })
+
+    expect(container.querySelector('.top-scroll')).not.toBeTruthy()
+  })
+
+  describe('Title type', () => {
+    it('Should render the given title', () => {
+      const event = new MouseEvent('mouseenter')
+      const { getByText } = render(InjectionPopover, { event, type: 'title', data: title })
+
+      expect(getByText(title.title)).toBeTruthy()
+    })
+
+    it('Should call track function when rendered', () => {
+      const event = new MouseEvent('mouseenter')
+      render(InjectionPopover, { event, type: 'title', data: title })
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverView, title, { type: 'title' })
+    })
+
+    it('Should call track function with time_spent when destroyed', async () => {
+      vi.useFakeTimers()
+
+      const event = new MouseEvent('mouseenter')
+      const { unmount } = render(InjectionPopover, { event, type: 'title', data: title })
+
+      vi.advanceTimersByTime(200)
+      unmount()
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverClose, title, expect.objectContaining({ time_spent: 200, type: 'title' }))
+    })
+  })
+
+  describe('Participant type', () => {
+    const participant = participants[0]
+
+    it('Should render the given participant', () => {
+      const event = new MouseEvent('mouseenter')
+      const { getByText } = render(InjectionPopover, { event, type: 'participant', data: participant })
+
+      expect(getByText(participant.name)).toBeTruthy()
+    })
+
+    it('Should call track function when rendered', () => {
+      const event = new MouseEvent('mouseenter')
+      render(InjectionPopover, { event, type: 'participant', data: participant })
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverView, null, { type: 'participant', participant: participant.name })
+    })
+
+    it('Should call track function with time_spent when destroyed', async () => {
+      vi.useFakeTimers()
+
+      const event = new MouseEvent('mouseenter')
+      const { unmount } = render(InjectionPopover, { event, type: 'participant', data: participant })
+
+      vi.advanceTimersByTime(200)
+      unmount()
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverClose, null, expect.objectContaining({ type: 'participant', time_spent: 200, participant: participant.name }))
+    })
+  })
+})

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

@@ -50,6 +50,13 @@ describe('ListTitle.svelte', () => {
     expect(onclick).toHaveBeenCalled()
   })
 
+  it('Should render as small variant when given', () => {
+    const { container } = render(ListTitle, { title, compact: true })
+
+    expect(container.querySelector('.compact')).toBeTruthy()
+    expect(container.querySelector('.description')).not.toBeTruthy()
+  })
+
   describe('Playlinks', () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },

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

@@ -73,4 +73,11 @@ describe('Participant.svelte', () => {
 
     expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2 })
   })
+
+  it('Should render as small variant when given', () => {
+    const { container, queryByText } = render(Participant, { participant: participants[0], small: true })
+
+    expect(queryByText('Credits')).not.toBeTruthy()
+    expect(container.querySelector('.small')).toBeTruthy()
+  })
 })

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

@@ -23,6 +23,8 @@ const linkInjections = [{
   poster: 'some-poster',
   key: 'some-key-1',
   title_details: title,
+  /** @type {import('$lib/types/injection').LinkInjectionDataType} */
+  type: 'title',
 }, {
   sid: '2',
   title: 'a sentence',
@@ -31,6 +33,8 @@ const linkInjections = [{
   poster: 'some-poster',
   key: 'some-key-1',
   title_details: title,
+  /** @type {import('$lib/types/injection').LinkInjectionDataType} */
+  type: 'title',
 }]
 
 describe('AfterArticlePlaylinks.svelte', () => {

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

@@ -85,7 +85,7 @@ describe('Playlinks.svelte', () => {
 
     await fireEvent.click(getByText(playlinks[0].name))
 
-    expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink: playlinks[0].name })
+    expect(track).toHaveBeenCalledWith(TrackingEvent.InjectionPopoverPlaylinkClick, title, { playlink: playlinks[0].name })
   })
 
   it('Should call track function for modal when clicked inside of modal scope', async () => {

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

@@ -42,7 +42,7 @@ describe('TrackAnyClick.svelte', () => {
       TrackingEvent.ExploreAnyClick,
       null,
       expect.objectContaining({
-        text: 'This is a very long text that ',
+        text: 'This is a very long text that',
       }),
     )
   })
@@ -104,4 +104,140 @@ describe('TrackAnyClick.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ExploreAnyClick, null, expect.objectContaining({ selector: 'section > p' }))
   })
+
+  it('Should select text of closest button', async () => {
+    document.body.innerHTML = '<button>Some text <span><em></em></span></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('em'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
+
+  it('Should select text of closest link', async () => {
+    document.body.innerHTML = '<a href="/">Some text <span><em></em></span></a>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('em'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
+
+  it('Should use placeholder text', async () => {
+    document.body.innerHTML = '<input placeholder="Some placeholder" />'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('input'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some placeholder',
+      }),
+    )
+  })
+
+  it('Should use alt text', async () => {
+    document.body.innerHTML = '<img alt="Some alt text" />'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some alt text',
+      }),
+    )
+  })
+
+  it('Should use aria label', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('button'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should use parent aria label', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"><img /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should prefer aria label over placeholder and alt text', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"><img placeholder="Some placeholder" alt="Some alt text" /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should prefer text content over aria label, placeholder and alt text', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label">Some text <img placeholder="Some placeholder" alt="Some alt text" /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
 })