quasar/src/composables/use-split-attrs/use-split-attrs.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 { defineComponent } from 'vue'

import useSplitAttrs from './use-split-attrs.js'

describe('[useSplitAttrs API]', () => {
  describe('[Functions]', () => {
    describe('[(function)default]', () => {
      test.each([
        ['no attrs', {}, []],
        ['attrs', { a: '1' }, []],
        ['listeners', {}, ['b']],
        ['attrs and listeners', { a: '1' }, ['b']],
        ['multiple attrs and listeners', { a: '1', b: '2' }, ['f1', 'f2']]
      ])('correctly splits: %s', (_, attrs, listeners) => {
        const attrHtml = Object.keys(attrs)
          .map(key => `${key}="${attrs[key]}"`)
          .join(' ')

        const fn = () => {}
        const fnList = {}
        const listenerHtml = listeners
          .map(key => {
            fnList['on' + key.toUpperCase()] = fn
            return `@${key}="fn"`
          })
          .join(' ')

        const ChildComponent = {
          name: 'ChildComponent',
          template: '<div />',
          setup() {
            const result = useSplitAttrs()
            return { result }
          }
        }

        const wrapper = mount(
          defineComponent({
            template: `<ChildComponent ${attrHtml} ${listenerHtml} />`,
            components: { ChildComponent },
            setup() {
              return { fn }
            }
          })
        )

        const target = wrapper.findComponent({ name: 'ChildComponent' })
        expect(target.vm.result).toStrictEqual({
          attributes: expect.$ref(attrs),
          listeners: expect.$ref(fnList)
        })
      })
    })
  })
})