quasar/src/components/video/QVideo.test.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { mount, flushPromises } from '@vue/test-utils'
import { describe, test, expect } from 'vitest'

import QVideo from './QVideo.js'

describe('[QVideo API]', () => {
  describe('[Props]', () => {
    describe('[(prop)ratio]', () => {
      test.each([
        [ 'String', '5' ],
        [ 'Number', 5 ]
      ])('type %s has effect', async (_, propVal) => {
        const wrapper = mount(QVideo, {
          props: {
            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
          }
        })

        expect(
          wrapper.get('.q-video')
            .$style('padding-bottom')
        ).toBe('')

        await wrapper.setProps({ ratio: propVal })
        await flushPromises()

        expect(
          wrapper.get('.q-video')
            .$style('padding-bottom')
        ).toBe('20%')
      })
    })

    describe('[(prop)src]', () => {
      test('type String has effect', () => {
        const propVal = 'https://www.youtube.com/embed/k3_tw44QsZQ'
        const wrapper = mount(QVideo, {
          props: {
            src: propVal
          }
        })

        expect(
          wrapper.get('iframe')
            .attributes('src')
        ).toBe(propVal)
      })
    })

    describe('[(prop)title]', () => {
      test('type String has effect', async () => {
        const wrapper = mount(QVideo, {
          props: {
            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
          }
        })

        expect(
          wrapper.get('iframe')
            .attributes('title')
        ).toBeUndefined()

        const propVal = 'My Daily Marathon'
        await wrapper.setProps({ title: propVal })
        await flushPromises()

        expect(
          wrapper.get('iframe')
            .attributes('title')
        ).toBe(propVal)
      })
    })

    describe('[(prop)fetchpriority]', () => {
      test.each([
        [ 'high' ],
        [ 'low' ],
        [ 'auto' ]
      ])('value "%s" has effect', async propVal => {
        const wrapper = mount(QVideo, {
          props: {
            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
          }
        })

        expect(
          wrapper.get('iframe')
            .attributes('fetchpriority')
        ).toBe('auto')

        await wrapper.setProps({ fetchpriority: propVal })
        await flushPromises()

        expect(
          wrapper.get('iframe')
            .attributes('fetchpriority')
        ).toBe(propVal)
      })
    })

    describe('[(prop)loading]', () => {
      test.each([
        [ 'eager' ],
        [ 'lazy' ]
      ])('value "%s" has effect', async propVal => {
        const wrapper = mount(QVideo, {
          props: {
            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
          }
        })

        expect(
          wrapper.get('iframe')
            .attributes('loading')
        ).toBe('eager')

        await wrapper.setProps({ loading: propVal })
        await flushPromises()

        expect(
          wrapper.get('iframe')
            .attributes('loading')
        ).toBe(propVal)
      })
    })

    describe('[(prop)referrerpolicy]', () => {
      test.each([
        [ 'no-referrer' ],
        [ 'no-referrer-when-downgrade' ],
        [ 'origin' ],
        [ 'origin-when-cross-origin' ],
        [ 'same-origin' ],
        [ 'strict-origin' ],
        [ 'strict-origin-when-cross-origin' ],
        [ 'unsafe-url' ]
      ])('value "%s" has effect', async propVal => {
        const wrapper = mount(QVideo, {
          props: {
            src: 'https://www.youtube.com/embed/k3_tw44QsZQ'
          }
        })

        expect(
          wrapper.get('iframe')
            .attributes('referrerpolicy')
        ).toBe('strict-origin-when-cross-origin')

        await wrapper.setProps({ referrerpolicy: propVal })
        await flushPromises()

        expect(
          wrapper.get('iframe')
            .attributes('referrerpolicy')
        ).toBe(propVal)
      })
    })
  })
})