quasar/src/utils/private.touch/touch.test.js

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

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

import { getModifierDirections, shouldStart } from './touch.js'

async function createEvent (nodeName) {
  let evt
  const wrapper = mount({ template: `<${ nodeName } />` }, {
    props: {
      onClick: localEvt => { evt = localEvt }
    }
  })

  await wrapper.trigger('click')
  return evt
}

describe('[touch API]', () => {
  describe('[Functions]', () => {
    describe('[(function)getModifierDirections]', () => {
      test.each([
        [ 'left', { left: true } ],
        [ 'left+right', { left: true, right: true }, { left: true, right: true, horizontal: true } ],
        [ 'horizontal', { horizontal: true }, { left: true, right: true, horizontal: true } ],

        [ 'up', { up: true } ],
        [ 'up+down', { up: true, down: true }, { up: true, down: true, vertical: true } ],
        [ 'vertical', { vertical: true }, { up: true, down: true, vertical: true } ],

        [ 'right+down', { right: true, down: true } ],
        [ 'none', {},
          { up: true, down: true, left: true, right: true, horizontal: true, vertical: true, all: true }
        ],
        [ 'horizontal+vertical',
          { horizontal: true, vertical: true },
          { up: true, down: true, left: true, right: true, horizontal: true, vertical: true, all: true }
        ]
      ])('has correct return value for %s', (_, mod, expected) => {
        const result = getModifierDirections(mod)
        expect(result).toStrictEqual(expected || mod)
      })
    })

    describe('[(function)shouldStart]', () => {
      test('has handler', async () => {
        const evt = await createEvent('div')

        const result = shouldStart(evt, {
          handler: () => {}
        })
        expect(result).toBe(true)
      })

      test('no handler', async () => {
        const evt = await createEvent('div')

        const result = shouldStart(evt, {})
        expect(result).toBe(false)
      })

      test('input element', async () => {
        const evt = await createEvent('input')

        const result = shouldStart(evt, {
          handler: () => {}
        })
        expect(result).toBe(false)
      })

      test('textarea element', async () => {
        const evt = await createEvent('textarea')

        const result = shouldStart(evt, {
          handler: () => {}
        })
        expect(result).toBe(false)
      })

      test('on a Quasar cloned event (by itself)', async () => {
        const evt = await createEvent('div')
        evt.qClonedBy = 'abc'

        const result = shouldStart(evt, {
          uid: 'abc',
          handler: () => {}
        })
        expect(result).toBe(false)
      })

      test('on a Quasar cloned event (by someone else)', async () => {
        const evt = await createEvent('div')
        evt.qClonedBy = 'abc'

        const result = shouldStart(evt, {
          uid: 'xyz',
          handler: () => {}
        })
        expect(result).toBe(true)
      })
    })
  })
})