@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/organisms/VideoPlayer/VideoPlayer.test.ts

@@ -0,0 +1,439 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import VideoPlayer from './VideoPlayer.vue'
+import VideoControls from '../VideoControls/VideoControls.vue'
+import type { NexxtVideoPlayerProps } from './VideoPlayer.vue'
+
+const SRC = 'https://example.com/media/rondleiding.mp4'
+
+let wrapper: VueWrapper | undefined
+
+const mountPlayer = (props: Partial<NexxtVideoPlayerProps> = {}, attrs = {}) => {
+  wrapper = mount(VideoPlayer, {
+    props: { src: SRC, ...props },
+    attrs,
+    attachTo: document.body,
+  })
+  return wrapper
+}
+
+/** play() as a browser does it: the play event, then a resolved promise (jsdom plays nothing). */
+const playsForReal = () =>
+  vi.spyOn(HTMLMediaElement.prototype, 'play').mockImplementation(function (
+    this: HTMLMediaElement,
+  ) {
+    this.dispatchEvent(new Event('play'))
+    return Promise.resolve()
+  })
+
+afterEach(() => {
+  vi.useRealTimers()
+  wrapper?.unmount()
+  wrapper = undefined
+  vi.restoreAllMocks()
+})
+
+describe('VideoPlayer', () => {
+  describe('video element', () => {
+    it('renders the src, loop and an accessible name', () => {
+      const w = mountPlayer({ loop: true })
+      const video = w.get('video')
+
+      expect(video.attributes('src')).toBe(SRC)
+      expect(video.attributes('loop')).toBeDefined()
+      expect(video.attributes('aria-label')).toBe('Video')
+    })
+
+    it('takes its accessible name from `name`, or from messages.video', () => {
+      expect(mountPlayer({ name: 'Rondleiding' }).get('video').attributes('aria-label')).toBe(
+        'Rondleiding',
+      )
+      wrapper?.unmount()
+      expect(
+        mountPlayer({ messages: { video: 'Clip' } })
+          .get('video')
+          .attributes('aria-label'),
+      ).toBe('Clip')
+    })
+
+    it('preloads nothing with a poster, and only the metadata without one', () => {
+      const withPoster = mountPlayer({ poster: '/poster.jpg' }).get('video')
+      expect(withPoster.attributes('poster')).toBe('/poster.jpg')
+      expect(withPoster.attributes('preload')).toBe('none')
+      wrapper?.unmount()
+
+      const without = mountPlayer().get('video')
+      expect(without.attributes('poster')).toBeUndefined()
+      expect(without.attributes('preload')).toBe('metadata')
+    })
+
+    it('lets a consumer class land on the root', () => {
+      const w = mountPlayer({}, { class: 'rounded-none' })
+      expect(w.classes()).toContain('rounded-none')
+    })
+  })
+
+  describe('controls', () => {
+    it('shows the full bar by default', () => {
+      const w = mountPlayer({ name: 'Rondleiding' })
+      expect(w.get('[role="group"]').attributes('aria-label')).toBe('Videobediening: Rondleiding')
+      expect(w.find('[role="slider"][aria-label="Tijdlijn"]').exists()).toBe(true)
+    })
+
+    it('shows only the play/pause and mute buttons with `toggle`', () => {
+      const w = mountPlayer({ controls: 'toggle' })
+      const corner = w.findAll('[data-video-controls] button')
+      expect(corner.map((b) => b.attributes('aria-label'))).toEqual(['Geluid uit', 'Afspelen'])
+      expect(w.find('[role="slider"]').exists()).toBe(false)
+    })
+
+    it('shows nothing with `none`', () => {
+      const w = mountPlayer({ controls: 'none' })
+      expect(w.find('button').exists()).toBe(false)
+      expect(w.find('[data-video-controls]').exists()).toBe(false)
+    })
+
+    it('passes the messages on to the controls', () => {
+      const w = mountPlayer({ messages: { play: 'Play', timeline: 'Timeline' } })
+      expect(w.find('button[aria-label="Play"]').exists()).toBe(true)
+      expect(w.find('[role="slider"][aria-label="Timeline"]').exists()).toBe(true)
+      expect(w.find('button[aria-label="Geluid uit"]').exists()).toBe(true)
+    })
+  })
+
+  describe('big play button', () => {
+    /** Lets the button's fade-out (a real Transition in jsdom) finish. */
+    const settle = () => new Promise((resolve) => setTimeout(resolve, 50))
+    const startButton = (w: VueWrapper) => w.find('[data-video-start]')
+    const controlsRoot = (w: VueWrapper) => w.get('[data-video-controls]').element.parentElement!
+
+    it.each(['full', 'toggle'] as const)('stands before the first play with `%s`', (controls) => {
+      const w = mountPlayer({ controls, name: 'Rondleiding' })
+
+      expect(startButton(w).attributes('aria-label')).toBe('Afspelen: Rondleiding')
+      // The controls wait behind it: hidden and out of reach of Tab
+      expect(controlsRoot(w).hasAttribute('inert')).toBe(true)
+      expect(controlsRoot(w).classList).toContain('invisible')
+    })
+
+    it('is not there with `none` or with autoplay', () => {
+      expect(startButton(mountPlayer({ controls: 'none' })).exists()).toBe(false)
+      wrapper?.unmount()
+      expect(startButton(mountPlayer({ autoplay: true, muted: true })).exists()).toBe(false)
+    })
+
+    // Enter and Space are the button's native activation, a click; the real keys are in the story
+    it('plays on a click and hands the focus to the controls', async () => {
+      const play = playsForReal()
+      const w = mountPlayer()
+      // The media listeners attach after mount, as they would before any real event
+      await flushPromises()
+      const button = startButton(w).element as HTMLButtonElement
+      button.focus()
+
+      // From the keyboard: a click without a pointer (detail 0)
+      button.click()
+      await flushPromises()
+      await settle()
+
+      expect(play).toHaveBeenCalledOnce()
+      expect(startButton(w).exists()).toBe(false)
+      expect(controlsRoot(w).hasAttribute('inert')).toBe(false)
+      // The controls' own play button (jsdom does not play, so it still says Afspelen)
+      const focused = document.activeElement!
+      expect(focused.closest('[data-video-controls]')).not.toBeNull()
+      expect(focused.getAttribute('aria-label')).toBe('Afspelen')
+    })
+
+    it.each([
+      ['a mouse click', 1, false],
+      ['the keyboard', 0, true],
+    ])(
+      'after %s, the bar hides as usual unless the keyboard started it',
+      async (_, detail, stays) => {
+        vi.useFakeTimers()
+        const w = mountPlayer()
+        await flushPromises()
+        const video = w.get('video').element
+        // jsdom does not play: the video reports playing once started
+        let paused = true
+        Object.defineProperty(video, 'paused', { get: () => paused })
+        vi.spyOn(video, 'play').mockImplementation(() => {
+          paused = false
+          video.dispatchEvent(new Event('play'))
+          return Promise.resolve()
+        })
+
+        const button = startButton(w).element as HTMLButtonElement
+        button.focus()
+        button.dispatchEvent(new MouseEvent('click', { bubbles: true, detail }))
+        await flushPromises()
+        vi.advanceTimersByTime(3000)
+        await nextTick()
+
+        expect(document.activeElement?.closest('[data-video-controls]')).not.toBeNull()
+        expect(w.get('[data-video-controls]').classes('opacity-100')).toBe(stays)
+        vi.useRealTimers()
+      },
+    )
+
+    it('hands the focus over when the video starts another way while the button has it', async () => {
+      playsForReal()
+      const player = ref<InstanceType<typeof VideoPlayer> | null>(null)
+      wrapper = mount(
+        defineComponent({ setup: () => () => h(VideoPlayer, { ref: player, src: SRC }) }),
+        { attachTo: document.body },
+      )
+      await flushPromises()
+      ;(wrapper.get('[data-video-start]').element as HTMLButtonElement).focus()
+
+      player.value!.playing = true
+      await flushPromises()
+
+      expect(document.activeElement?.closest('[data-video-controls]')).not.toBeNull()
+    })
+
+    it('stays when play() is refused: nothing plays, so nothing has started', async () => {
+      vi.spyOn(HTMLMediaElement.prototype, 'play').mockRejectedValue(
+        new DOMException('Not allowed', 'NotAllowedError'),
+      )
+      const w = mountPlayer()
+      await flushPromises()
+
+      ;(startButton(w).element as HTMLButtonElement).click()
+      await flushPromises()
+      await settle()
+
+      expect(startButton(w).exists()).toBe(true)
+    })
+
+    it('does not come back after a pause or the end', async () => {
+      const w = mountPlayer()
+      // The media listeners attach after mount, as they would before any real event
+      await flushPromises()
+      const video = w.get('video').element
+      video.dispatchEvent(new Event('play'))
+      await settle()
+      expect(startButton(w).exists()).toBe(false)
+
+      video.dispatchEvent(new Event('pause'))
+      video.dispatchEvent(new Event('ended'))
+      await settle()
+      expect(startButton(w).exists()).toBe(false)
+    })
+
+    it('goes when the parent plays the video', async () => {
+      playsForReal()
+      const player = ref<InstanceType<typeof VideoPlayer> | null>(null)
+      const Parent = defineComponent({
+        setup: () => () => h(VideoPlayer, { ref: player, src: SRC }),
+      })
+      wrapper = mount(Parent, { attachTo: document.body })
+      await flushPromises()
+      expect(wrapper.find('[data-video-start]').exists()).toBe(true)
+
+      player.value!.playing = true
+      await settle()
+      expect(wrapper.find('[data-video-start]').exists()).toBe(false)
+    })
+  })
+
+  describe('clicks on the video', () => {
+    const mountInParent = (controls: NexxtVideoPlayerProps['controls']) => {
+      const onParentClick = vi.fn()
+      const Parent = defineComponent({
+        setup: () => () =>
+          h('div', { onClick: onParentClick }, [h(VideoPlayer, { src: SRC, controls })]),
+      })
+      wrapper = mount(Parent, { attachTo: document.body })
+      return onParentClick
+    }
+
+    it('with `none`, leaves the click to the parent and does not play', async () => {
+      const play = vi.spyOn(HTMLMediaElement.prototype, 'play')
+      const onParentClick = mountInParent('none')
+      await nextTick()
+
+      wrapper!
+        .get('video')
+        .element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+      wrapper!.get('video').element.click()
+
+      expect(onParentClick).toHaveBeenCalledOnce()
+      expect(play).not.toHaveBeenCalled()
+    })
+
+    it('with `toggle`, leaves the click on the video alone', async () => {
+      const play = vi.spyOn(HTMLMediaElement.prototype, 'play')
+      mountInParent('toggle')
+      await nextTick()
+
+      wrapper!.get('video').element.click()
+      expect(play).not.toHaveBeenCalled()
+    })
+
+    it('with `full`, a mouse click plays', async () => {
+      const play = vi.spyOn(HTMLMediaElement.prototype, 'play')
+      mountInParent('full')
+      await nextTick()
+
+      wrapper!.get('video').element.click()
+      expect(play).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('autoplay', () => {
+    it('mutes before it plays', async () => {
+      const mutedAtPlay: boolean[] = []
+      vi.spyOn(HTMLMediaElement.prototype, 'play').mockImplementation(function (
+        this: HTMLMediaElement,
+      ) {
+        mutedAtPlay.push(this.muted)
+        return Promise.resolve()
+      })
+
+      mountPlayer({ autoplay: true, muted: true })
+      await nextTick()
+
+      expect(mutedAtPlay).toEqual([true])
+    })
+
+    it('does not play without autoplay', async () => {
+      const play = vi.spyOn(HTMLMediaElement.prototype, 'play')
+      mountPlayer({ muted: true })
+      await nextTick()
+
+      expect(play).not.toHaveBeenCalled()
+      expect(wrapper!.get('video').element.muted).toBe(true)
+    })
+
+    it('swallows a refused play() and reports it is not playing', async () => {
+      vi.spyOn(HTMLMediaElement.prototype, 'play').mockRejectedValue(
+        new DOMException('Autoplay is not allowed', 'NotAllowedError'),
+      )
+
+      const player = ref<InstanceType<typeof VideoPlayer> | null>(null)
+      const Parent = defineComponent({
+        setup: () => () => h(VideoPlayer, { ref: player, src: SRC, autoplay: true }),
+      })
+      wrapper = mount(Parent, { attachTo: document.body })
+      await flushPromises()
+
+      expect(player.value?.playing).toBe(false)
+    })
+  })
+
+  describe('removed props', () => {
+    it.each([
+      [{ showControls: false }, 'controls="none"'],
+      [{ 'show-controls': 'false' }, 'controls="none"'],
+      [{ labels: { play: 'Play' } }, '`messages`'],
+    ])('warns once in development about %o, and keeps it off the root', (attrs, replacement) => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const w = mountPlayer({}, attrs)
+
+      expect(warn).toHaveBeenCalledOnce()
+      expect(warn.mock.calls[0][0]).toContain(replacement)
+      for (const key of Object.keys(attrs)) expect(w.attributes(key)).toBeUndefined()
+    })
+
+    it('does not warn in production', () => {
+      vi.stubEnv('NODE_ENV', 'production')
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      mountPlayer({}, { showControls: false, labels: {} })
+
+      expect(warn).not.toHaveBeenCalled()
+      vi.unstubAllEnvs()
+    })
+
+    it('still passes other attrs to the root', () => {
+      vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const w = mountPlayer({}, { id: 'intro', 'data-test': 'player', showControls: false })
+
+      expect(w.attributes('id')).toBe('intro')
+      expect(w.attributes('data-test')).toBe('player')
+    })
+  })
+
+  describe('error state', () => {
+    it('shows the message, and never the URL', async () => {
+      const w = mountPlayer()
+      await w.get('video').trigger('error')
+
+      const alert = w.get('[role="alert"]')
+      expect(alert.text()).toBe('De video kan niet worden geladen')
+      expect(alert.html()).not.toContain('example.com')
+      expect(alert.html()).not.toContain('rondleiding.mp4')
+    })
+
+    it('takes its copy from messages.error', async () => {
+      const w = mountPlayer({ messages: { error: 'Video unavailable' } })
+      await w.get('video').trigger('error')
+      expect(w.get('[role="alert"]').text()).toBe('Video unavailable')
+    })
+
+    it('hides the controls and the video', async () => {
+      const w = mountPlayer()
+      await w.get('video').trigger('error')
+
+      expect(w.find('[data-video-controls]').exists()).toBe(false)
+      expect(w.get('video').classes()).toContain('invisible')
+    })
+
+    it('brings the cursor back when the error comes while the bar is hidden', async () => {
+      const w = mountPlayer()
+      w.findComponent(VideoControls).vm.$emit('visibility-change', false)
+      await nextTick()
+      expect(w.classes()).toContain('cursor-none')
+
+      await w.get('video').trigger('error')
+      expect(w.classes()).not.toContain('cursor-none')
+    })
+
+    it('clears when the src changes', async () => {
+      const w = mountPlayer()
+      await w.get('video').trigger('error')
+      await w.setProps({ src: 'https://example.com/other.mp4' })
+
+      expect(w.find('[role="alert"]').exists()).toBe(false)
+    })
+  })
+
+  describe('expose', () => {
+    const mountWithRef = () => {
+      const player = ref<InstanceType<typeof VideoPlayer> | null>(null)
+      const Parent = defineComponent({
+        setup: () => () => h(VideoPlayer, { ref: player, src: SRC, controls: 'none' }),
+      })
+      wrapper = mount(Parent, { attachTo: document.body })
+      return player
+    }
+
+    it('writes `playing` through to the video', async () => {
+      const play = vi.spyOn(HTMLMediaElement.prototype, 'play')
+      const pause = vi.spyOn(HTMLMediaElement.prototype, 'pause')
+      const player = mountWithRef()
+      await nextTick()
+
+      player.value!.playing = !player.value!.playing
+      expect(play).toHaveBeenCalledOnce()
+      expect(player.value!.playing).toBe(true)
+
+      player.value!.playing = false
+      expect(pause).toHaveBeenCalledOnce()
+      // At once, not only after the pause event
+      expect(player.value!.playing).toBe(false)
+    })
+
+    it('reads and writes `muted`', async () => {
+      const player = mountWithRef()
+      await nextTick()
+
+      expect(player.value!.muted).toBe(false)
+      player.value!.muted = true
+      expect(wrapper!.get('video').element.muted).toBe(true)
+      expect(player.value!.muted).toBe(true)
+    })
+  })
+})