@financial-times/cp-content-pipeline-ui 7.6.0 → 7.8.0

package/src/components/content-tree/Clip/test/client/index.spec.ts

@@ -0,0 +1,212 @@
+import Clip from '../../client/index'
+
+class IntersectionObserverMock implements IntersectionObserver {
+  root: Element | Document | null = null
+  rootMargin: string = ''
+  thresholds: ReadonlyArray<number> = []
+  callback: IntersectionObserverCallback
+  options?: IntersectionObserverInit
+  observe: jest.Mock
+  unobserve: jest.Mock
+  disconnect: jest.Mock
+  takeRecords: jest.Mock
+
+  constructor(
+    callback: IntersectionObserverCallback,
+    options?: IntersectionObserverInit
+  ) {
+    this.callback = callback
+    this.options = options
+    this.observe = jest.fn()
+    this.unobserve = jest.fn()
+    this.disconnect = jest.fn()
+    this.takeRecords = jest.fn().mockReturnValue([])
+  }
+
+  trigger(
+    entries: IntersectionObserverEntry[],
+    observer: IntersectionObserverMock
+  ) {
+    this.callback(entries, observer)
+  }
+}
+
+global.IntersectionObserver =
+  IntersectionObserverMock as unknown as typeof IntersectionObserver
+
+describe('Clip', () => {
+  let clipComponent: HTMLElement
+  let videoElement: HTMLVideoElement
+  let videoContainer: HTMLElement
+  let captionContainer: HTMLElement
+  let captionElement: HTMLElement
+  let clipInstance: Clip
+  let dispatchEventSpy: jest.SpyInstance
+  const mockReadySate = 4
+  let isPaused = true
+
+  beforeEach(() => {
+    videoElement = document.createElement('video')
+    videoElement.classList.add('cp-clip__video')
+    isPaused = true
+
+    const trackElement = document.createElement('track')
+    trackElement.kind = 'captions'
+    trackElement.srclang = 'en'
+    trackElement.src = 'https://next-media-api.ft.com/clips/captions/35441370'
+    videoElement.appendChild(trackElement)
+
+    Object.defineProperty(videoElement, 'readyState', {
+      get() {
+        return mockReadySate
+      },
+    })
+    Object.defineProperty(videoElement, 'paused', {
+      get() {
+        return isPaused
+      },
+    })
+    Object.defineProperty(videoElement, 'canPlayType', {
+      value: jest.fn().mockImplementation(() => 'probably'),
+      writable: true,
+    })
+    videoElement.play = jest.fn().mockImplementation(() => {
+      isPaused = false
+      return Promise.resolve()
+    })
+    videoElement.pause = jest.fn().mockImplementation(() => {
+      isPaused = true
+    })
+    const mockTextTracks = [
+      {
+        mode: 'disabled',
+        kind: 'captions',
+        language: 'en',
+        label: 'English',
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      },
+    ]
+    Object.defineProperty(videoElement, 'textTracks', {
+      value: mockTextTracks,
+      writable: true,
+    })
+    clipComponent = document.createElement('div')
+
+    videoContainer = document.createElement('div')
+    videoContainer.classList.add('cp-clip__video-container')
+    videoContainer.appendChild(videoElement)
+
+    captionElement = document.createElement('div')
+    captionElement.classList.add('cp-clip__caption')
+    captionElement.setAttribute('data-cp-clip-caption', 'true')
+
+    captionContainer = document.createElement('div')
+    captionContainer.classList.add('cp-clip__video-meta-info')
+    captionContainer.appendChild(captionElement)
+
+    clipComponent.appendChild(videoContainer)
+    clipComponent.appendChild(captionContainer)
+    document.body.appendChild(clipComponent)
+
+    clipInstance = new Clip(clipComponent, {
+      closedCaption: true,
+      autoShowClosedCaptions: true,
+    })
+
+    dispatchEventSpy = jest.spyOn(videoElement, 'dispatchEvent')
+  })
+
+  afterEach(() => {
+    document.body.removeChild(clipComponent)
+    jest.clearAllMocks()
+  })
+
+  it('should initialise with default options', () => {
+    expect(clipInstance.opts.autorender).toBe(true)
+    expect(clipInstance.opts.fadeOutDelay).toBe(2000)
+  })
+
+  it('should update amount watched on pause', async () => {
+    isPaused = false
+    clipInstance.togglePlay()
+    clipInstance.markPlayStart()
+    setTimeout(() => {
+      clipInstance.updateAmountWatched()
+      expect(clipInstance.amountWatched).toBeGreaterThan(0)
+    }, 1)
+  })
+
+  it('should toggle play/pause state', () => {
+    clipInstance.togglePlay()
+    expect(videoElement.paused).toBe(false)
+    clipInstance.togglePlay()
+    expect(videoElement.paused).toBe(true)
+  })
+
+  it('should fire watched event on unload', () => {
+    const fireEventSpy = jest.spyOn(clipInstance, 'fireEvent')
+    clipInstance.unload()
+    expect(fireEventSpy).toHaveBeenCalledWith('watched')
+  })
+
+  it('should create custom player controls', () => {
+    clipInstance.createCustomPlayer()
+    const playerCreatedEvent = dispatchEventSpy.mock.calls[0][0] as CustomEvent
+    expect(playerCreatedEvent.type).toBe(
+      'cpContentPipeline.clipComponent.customPlayerCreated'
+    )
+    expect(playerCreatedEvent.detail).toEqual({
+      clipId: clipInstance.opts.id,
+    })
+  })
+
+  it('should handle visibility changes', () => {
+    const visibilityListenerSpy = jest.spyOn(clipInstance, 'visibilityListener')
+    clipInstance.visibilityListener([
+      { isIntersecting: true } as IntersectionObserverEntry,
+    ])
+    expect(visibilityListenerSpy).toHaveBeenCalled()
+  })
+
+  it('should play closed captions by default when available', () => {
+    clipInstance.videoEl.dispatchEvent(new Event('playing'))
+    expect(clipInstance.videoEl.textTracks[0]?.mode).toBe('showing')
+    expect(clipInstance.videoEl.getAttribute('crossorigin')).toBe('true')
+    const closedCaptionIcon = document.querySelector('.cp-clip__closed-caption')
+    expect(
+      closedCaptionIcon?.getAttribute('data-display-closed-captions')
+    ).toBeDefined()
+  })
+
+  it('should toggle closed captions', () => {
+    clipInstance.videoEl.dispatchEvent(new Event('playing'))
+    const fireEventSpy = jest.spyOn(clipInstance, 'fireEvent')
+    clipInstance.containerEl
+      .querySelector('.cp-clip__closed-caption')
+      ?.dispatchEvent(new Event('click'))
+    expect(clipInstance.videoEl.textTracks[0]?.mode).toBe('hidden')
+    const closedCaptionIcon = clipInstance.containerEl.querySelector(
+      '.cp-clip__closed-caption'
+    )
+    expect(
+      closedCaptionIcon?.getAttribute('data-display-closed-captions')
+    ).toBeNull()
+    expect(fireEventSpy.mock.calls[0]).toEqual([
+      'cta:click',
+      { trigger_action: 'turn captions off' },
+    ])
+
+    clipInstance.containerEl
+      .querySelector('.cp-clip__closed-caption')
+      ?.dispatchEvent(new Event('click'))
+    expect(clipInstance.videoEl.textTracks[0]?.mode).toBe('showing')
+    expect(
+      closedCaptionIcon?.getAttribute('data-display-closed-captions')
+    ).toBeDefined()
+    expect(fireEventSpy.mock.calls[1]).toEqual([
+      'cta:click',
+      { trigger_action: 'turn captions on' },
+    ])
+  })
+})