quasar/src/components/btn/use-btn.test.js

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

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

import useBtn, {
  btnPadding, defaultSizes, btnDesignOptions,
  useBtnProps, nonRoundBtnProps,
  getBtnDesign, getBtnDesignAttr
} from './use-btn.js'

describe('[useBtn API]', () => {
  describe('[Variables]', () => {
    describe('[(variable)btnPadding]', () => {
      test('is defined correctly', () => {
        expect(btnPadding).toBeTypeOf('object')
        expect(Object.keys(btnPadding)).not.toHaveLength(0)
      })
    })

    describe('[(variable)defaultSizes]', () => {
      test('is defined correctly', () => {
        expect(defaultSizes).toBeTypeOf('object')
        expect(Object.keys(defaultSizes)).not.toHaveLength(0)
      })
    })

    describe('[(variable)btnDesignOptions]', () => {
      test('is defined correctly', () => {
        expect(btnDesignOptions).toBeTypeOf('object')
        expect(Object.keys(btnDesignOptions)).not.toHaveLength(0)
      })
    })

    describe('[(variable)useBtnProps]', () => {
      test('is defined correctly', () => {
        expect(useBtnProps).toBeTypeOf('object')
        expect(Object.keys(useBtnProps)).not.toHaveLength(0)
      })
    })

    describe('[(variable)nonRoundBtnProps]', () => {
      test('is defined correctly', () => {
        expect(nonRoundBtnProps).toBeTypeOf('object')
        expect(Object.keys(nonRoundBtnProps)).not.toHaveLength(0)
      })
    })
  })

  describe('[Functions]', () => {
    describe('[(function)default]', () => {
      test('has correct return value', () => {
        const wrapper = mount(
          defineComponent({
            template: '<div />',
            setup () {
              const result = useBtn({})
              return { result }
            }
          })
        )

        expect(
          wrapper.vm.result
        ).toStrictEqual({
          classes: expect.$ref(expect.any(String)),
          style: expect.$ref(expect.any(Object)),
          innerClasses: expect.$ref(expect.any(String)),
          attributes: expect.$ref(expect.any(Object)),
          hasLink: expect.$ref(expect.any(Boolean)),
          linkTag: expect.$ref(expect.any(String)),
          navigateOnClick: expect.any(Function),
          isActionable: expect.$ref(expect.any(Boolean))
        })
      })
    })

    describe('[(function)getBtnDesign]', () => {
      test('returns correctly with single value', () => {
        for (const prop of btnDesignOptions) {
          expect(
            getBtnDesign({ [ prop ]: true })
          ).toBe(prop)

          expect(
            getBtnDesign({ [ prop ]: true }, 'default')
          ).toBe(prop)

          expect(
            getBtnDesign({ [ prop ]: false })
          ).toBeUndefined()

          expect(
            getBtnDesign({ [ prop ]: false }, 'default')
          ).toBe('default')
        }
      })

      test('returns correctly with multiple values', () => {
        for (const prop of btnDesignOptions) {
          const propMap = btnDesignOptions
            .reduce((acc, val) => {
              if (val !== prop) {
                acc[ val ] = true
              }

              return acc
            }, {})

          expect(
            getBtnDesign(propMap)
          ).not.toBe(prop)

          expect(
            getBtnDesign(propMap, 'default')
          ).not.toBe('default')
        }
      })
    })

    describe('[(function)getBtnDesignAttr]', () => {
      test('has correct return value', () => {
        expect(
          getBtnDesignAttr({})
        ).toStrictEqual({})

        expect(
          getBtnDesignAttr({ something: true })
        ).toStrictEqual({})

        for (const prop of btnDesignOptions) {
          expect(
            getBtnDesignAttr({ [ prop ]: true })
          ).toStrictEqual({ [ prop ]: true })

          expect(
            getBtnDesignAttr({ [ prop ]: false })
          ).toStrictEqual({})
        }
      })
    })
  })
})