quasar 2.15.2 → 2.15.3

package/src/components/btn/QBtn.test.js

@@ -1,349 +1,1528 @@
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { describe, test, expect, vi } from 'vitest'
 
 import QBtn from './QBtn.js'
 
-const defaultOptions = {
-  label: 'simple Btn'
-}
-
-function mountQBtn (options = {}) {
-  options.props = {
-    ...defaultOptions,
-    ...options.props
-  }
-
-  return mount(QBtn, options)
-}
+import { btnPadding, defaultSizes } from './use-btn.js'
+import { alignMap } from 'quasar/src/composables/private.use-align/use-align.js'
+import { getRouter } from 'testing/runtime/router.js'
 
 describe('[QBtn API]', () => {
   describe('[Props]', () => {
-    describe('[(prop)percentage]', () => {
-      test('should render a button with a percentage when "loading" prop is set to true', () => {
-        const percentage = 50
-        const wrapper = mountQBtn({
+    describe('[(prop)size]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.size).toBeDefined()
+      })
+
+      test('type String has effect (in pixels)', async () => {
+        const propVal = '50px'
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.$style('font-size')
+        ).not.toBe(propVal)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.$style('font-size')
+        ).toBe(propVal)
+      })
+
+      test('type String has effect (as "xs")', async () => {
+        const propVal = 'xs'
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.$style('font-size')
+        ).not.toBe(`${ defaultSizes.xs }px`)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.$style('font-size')
+        ).toBe(`${ defaultSizes.xs }px`)
+      })
+    })
+
+    describe('[(prop)type]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.type).toBeDefined()
+      })
+
+      test.each([
+        [ 'button' ],
+        [ 'a' ]
+      ])('type "%s" has effect', (propVal) => {
+        const wrapper = mount(QBtn, {
           props: {
-            percentage,
-            loading: true
+            type: propVal
           }
         })
 
         expect(
-          wrapper.get('.q-btn')
-            .attributes('aria-valuenow')
-        ).toBe(percentage.toString())
+          wrapper.get('.q-btn').element.tagName.toLowerCase()
+        ).toBe(propVal)
       })
-    })
 
-    describe('[(prop)dark-percentage]', () => {
-      test('should render a button with a dark percentage when "loading" prop is set to true', () => {
-        const percentage = 50
-        const wrapper = mountQBtn({
+      test.each([
+        [ 'submit' ],
+        [ 'reset' ]
+      ])('type "%s" has effect', (propVal) => {
+        const wrapper = mount(QBtn, {
           props: {
-            percentage,
-            loading: true,
-            darkPercentage: true
+            type: propVal
           }
         })
 
         expect(
-          wrapper.get('.q-btn')
-            .attributes('aria-valuenow')
-        ).toBe(percentage.toString())
+          wrapper.get('.q-btn').element.tagName.toLowerCase()
+        ).toBe('button')
+      })
+
+      // accessibility
+      test.each([
+        [ 'media/html' ],
+        [ 'image/png' ]
+      ])('type "%s" has effect', (propVal) => {
+        const wrapper = mount(QBtn, {
+          props: {
+            type: propVal,
+            href: 'https://quasar.dev'
+          }
+        })
+
+        const target = wrapper.get('.q-btn')
 
         expect(
-          wrapper.get('.q-btn__progress')
-            .classes()
-        ).toContain('q-btn__progress--dark')
+          target.element.tagName.toLowerCase()
+        ).toBe('a')
+
+        expect(
+          target.attributes('type')
+        ).toBe(propVal)
       })
     })
 
-    describe.todo('(prop): loading', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)to]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.to).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): disable', () => {
-      test(' ', () => {
-        //
+      test('type String has effect', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: testRoute })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe(testRoute)
+
+        const routerFn = vi.spyOn(router, 'push')
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
+
+        expect(routerFn).toHaveBeenCalledTimes(1)
+        expect(routerFn).toHaveBeenCalledWith(testRoute)
+      })
+
+      test('type Object has effect', async () => {
+        const testRoute = '/my-route-name'
+        const propVal = { path: testRoute }
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ to: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe(testRoute)
+
+        const routerFn = vi.spyOn(router, 'push')
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
+
+        expect(routerFn).toHaveBeenCalledTimes(1)
+        expect(routerFn).toHaveBeenCalledWith(propVal)
       })
     })
 
-    describe('[(prop)round]', () => {
-      test('should render a circle shaped button when "round" prop is set to true', () => {
-        const wrapper = mountQBtn({
+    describe('[(prop)replace]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.replace).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const testRoute = '/test-route'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
           props: {
-            round: true
+            replace: true,
+            to: testRoute
+          },
+          global: {
+            plugins: [ router ]
           }
         })
 
         expect(
-          wrapper.get('.q-btn')
-            .classes()
-        ).toContain('q-btn--round')
+          wrapper.get('a').attributes('href')
+        ).toBe(testRoute)
+
+        const routerFn = vi.spyOn(router, 'replace')
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
+
+        expect(routerFn).toHaveBeenCalledTimes(1)
+        expect(routerFn).toHaveBeenCalledWith(testRoute)
       })
     })
 
-    describe.todo('(prop): size', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)href]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.href).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): outline', () => {
-      test(' ', () => {
-        //
+      test('type String has effect', async () => {
+        const propVal = 'https://quasar.dev'
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ href: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('a').attributes('href')
+        ).toBe(propVal)
       })
     })
 
-    describe.todo('(prop): flat', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)target]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.target).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): unelevated', () => {
-      test(' ', () => {
-        //
+      test('type String has effect', () => {
+        const propVal = '_blank'
+        const href = 'https://quasar.dev'
+        const wrapper = mount(QBtn, {
+          props: {
+            href,
+            target: propVal
+          }
+        })
+
+        const link = wrapper.get('a')
+
+        expect(
+          link.attributes('href')
+        ).toBe(href)
+
+        expect(
+          link.attributes('target')
+        ).toBe(propVal)
       })
     })
 
-    describe.todo('(prop): rounded', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)label]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.label).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): push', () => {
-      test(' ', () => {
-        //
+      test('type String has effect', async () => {
+        const propVal = 'Button Label'
+        const wrapper = mount(QBtn)
+
+        expect(wrapper.text()).not.toContain(propVal)
+
+        await wrapper.setProps({ label: propVal })
+        await flushPromises()
+
+        expect(wrapper.text()).toContain(propVal)
       })
-    })
 
-    describe.todo('(prop): square', () => {
-      test(' ', () => {
-        //
+      test('type Number has effect', async () => {
+        const propVal = 10
+        const wrapper = mount(QBtn)
+
+        expect(wrapper.text()).not.toContain('' + propVal)
+
+        await wrapper.setProps({ label: propVal })
+        await flushPromises()
+
+        expect(wrapper.text()).toContain('' + propVal)
       })
     })
 
-    describe.todo('(prop): glossy', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)icon]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.icon).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): fab', () => {
-      test(' ', () => {
-        //
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.find('.q-icon').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ icon: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-icon').text()
+        ).toContain(propVal)
       })
     })
 
-    describe.todo('(prop): fab-mini', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)icon-right]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.iconRight).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): padding', () => {
-      test(' ', () => {
-        //
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.find('.q-icon').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ iconRight: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-icon').text()
+        ).toContain(propVal)
       })
     })
 
-    describe.todo('(prop): color', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)outline]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.outline).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): text-color', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--outline')
+
+        await wrapper.setProps({ outline: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--outline')
+
+        expect(
+          target.$computedStyle('background')
+        ).toBe('transparent')
       })
     })
 
-    describe.todo('(prop): dense', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)flat]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.flat).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): ripple', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--flat')
+
+        await wrapper.setProps({ flat: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--flat')
       })
     })
 
-    describe.todo('(prop): type', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)unelevated]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.unelevated).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): tabindex', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--unelevated')
+
+        await wrapper.setProps({ unelevated: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--unelevated')
       })
     })
 
-    describe.todo('(prop): to', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)rounded]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.rounded).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): exact', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--rounded')
+
+        await wrapper.setProps({ rounded: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--rounded')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('28px')
       })
     })
 
-    describe.todo('(prop): replace', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)push]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.push).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): active-class', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--push')
+
+        await wrapper.setProps({ push: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--push')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('7px')
+
+        expect(
+          target.$computedStyle('transition')
+        ).toBeDefined()
       })
     })
 
-    describe.todo('(prop): exact-active-class', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)square]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.square).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): href', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--square')
+
+        await wrapper.setProps({ square: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--square')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('0')
       })
     })
 
-    describe.todo('(prop): target', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)glossy]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.glossy).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): label', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('glossy')
+
+        await wrapper.setProps({ glossy: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('glossy')
       })
     })
 
-    describe.todo('(prop): icon', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)fab]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.fab).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): icon-right', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--fab')
+
+        await wrapper.setProps({ fab: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--fab')
       })
     })
 
-    describe.todo('(prop): no-caps', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)fab-mini]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.fabMini).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): no-wrap', () => {
-      test(' ', () => {
-        //
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--fab-mini')
+
+        await wrapper.setProps({ fabMini: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--fab-mini')
       })
     })
 
-    describe.todo('(prop): align', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)padding]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.padding).toBeDefined()
       })
-    })
 
-    describe.todo('(prop): stack', () => {
-      test(' ', () => {
-        //
+      test.each([
+        [ 'pixels; single value', '50px' ],
+        [ 'pixels; multiple values', '50px 100px' ]
+      ])('type String has effect (%s)', async (_, propVal) => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.$style('padding')
+        ).not.toBe(propVal)
+
+        await wrapper.setProps({ padding: propVal })
+        await flushPromises()
+
+        expect(
+          target.$style('padding')
+        ).toBe(propVal)
       })
-    })
 
-    describe.todo('(prop): stretch', () => {
-      test(' ', () => {
-        //
+      test('type String has effect (as "xs")', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.$style('padding')
+        ).not.toBe(`${ btnPadding.xs }px`)
+
+        await wrapper.setProps({ padding: 'xs' })
+        await flushPromises()
+
+        expect(
+          target.$style('padding')
+        ).toBe(`${ btnPadding.xs }px`)
       })
-    })
-  })
 
-  describe('[Slots]', () => {
-    describe('[(slot)default]', () => {
-      test('should render a button with a label', () => {
-        const wrapper = mountQBtn()
+      test('type String has effect (as "xs xl")', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
 
         expect(
-          wrapper.get('.q-btn')
-            .text()
-        ).toContain(defaultOptions.label)
+          target.$style('padding')
+        ).not.toBe(`${ btnPadding.xs }px ${ btnPadding.xl }px`)
+
+        await wrapper.setProps({ padding: 'xs xl' })
+        await flushPromises()
+
+        expect(
+          target.$style('padding')
+        ).toBe(`${ btnPadding.xs }px ${ btnPadding.xl }px`)
       })
-    })
 
-    describe('[(slot)loading]', () => {
-      test('should render a button with a loading slot', () => {
-        const loadingSlot = 'loading slot'
-        const wrapper = mountQBtn({
-          props: {
-            loading: true
-          },
-          slots: {
-            loading: loadingSlot
-          }
-        })
+      test('padding "0" is applied correctly', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
 
-        const text = wrapper.get('.q-btn').text()
-        expect(text).toContain(loadingSlot)
-        expect(text).toContain(defaultOptions.label)
+        expect(
+          target.$style('min-width')
+        ).not.toBe('0')
 
         expect(
-          wrapper.get('.q-btn__content')
-            .isVisible()
-        ).not.toBe(true)
+          target.$style('min-height')
+        ).not.toBe('0')
+
+        await wrapper.setProps({ padding: 'xs xl' })
+        await flushPromises()
+
+        expect(
+          target.$style('min-width')
+        ).toBe('0')
+
+        expect(
+          target.$style('min-height')
+        ).toBe('0')
       })
     })
-  })
 
-  describe('[Events]', () => {
-    describe('[(event)click]', () => {
-      test('should emit a click event when the button is clicked', () => {
-        const fn = vi.fn()
-        const wrapper = mountQBtn({
-          props: {
-            onClick: fn
-          }
+    describe('[(prop)color]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.color).toBeDefined()
+      })
+
+      test('(default design) is applied correctly', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('text-white')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).toContain('bg-red')
+        expect(cls).toContain('text-white')
+      })
+
+      test.each([
+        [ 'push' ],
+        [ 'unelevated' ]
+      ])('(design "%s") is applied correctly', async designProp => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('text-white')
+
+        await wrapper.setProps({
+          color: 'red',
+          [ designProp ]: true
         })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).toContain('bg-red')
+        expect(cls).toContain('text-white')
+      })
+
+      test.each([
+        [ 'flat' ],
+        [ 'outline' ]
+      ])('(design "%s") is applied correctly', async designProp => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
 
-        wrapper.get('.q-btn').trigger('click')
+        let cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+
+        await wrapper.setProps({
+          color: 'red',
+          [ designProp ]: true
+        })
+        await flushPromises()
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        cls = target.classes()
+        expect(cls).toContain('text-red')
+        expect(cls).not.toContain('bg-red')
       })
     })
-  })
 
-  describe('[Methods]', () => {
-    describe('[(method)click]', () => {
-      test('should click the button', () => {
-        const fn = vi.fn()
-        const wrapper = mountQBtn({
-          props: {
-            onClick: fn
-          }
+    describe('[(prop)text-color]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.textColor).toBeDefined()
+      })
+
+      test('is applied correctly with no "color" prop', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+
+        await wrapper.setProps({ textColor: 'red' })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+      })
+
+      test('(default design + color) is applied correctly', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        let cls = target.classes()
+
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-blue')
+        expect(cls).not.toContain('text-blue')
+
+        await wrapper.setProps({
+          color: 'red',
+          textColor: 'blue'
         })
+        await flushPromises()
+
+        cls = target.classes()
+
+        expect(cls).toContain('bg-red')
+        expect(cls).toContain('text-blue')
+
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-blue')
+      })
+
+      test.each([
+        [ 'push' ],
+        [ 'unelevated' ]
+      ])('(design "%s" + color) is applied correctly', async designProp => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
 
-        wrapper.trigger('click')
+        let cls = target.classes()
+
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-blue')
+        expect(cls).not.toContain('text-blue')
+
+        await wrapper.setProps({
+          color: 'red',
+          textColor: 'blue',
+          [ designProp ]: true
+        })
+        await flushPromises()
+
+        cls = target.classes()
+
+        expect(cls).toContain('bg-red')
+        expect(cls).toContain('text-blue')
+
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-blue')
+      })
+
+      test.each([
+        [ 'flat' ],
+        [ 'outline' ]
+      ])('(design "%s" + color) is applied correctly', async designProp => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        let cls = target.classes()
+
+        expect(cls).not.toContain('text-blue')
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('bg-blue')
+
+        await wrapper.setProps({
+          color: 'red',
+          textColor: 'blue',
+          [ designProp ]: true
+        })
+        await flushPromises()
+
+        cls = target.classes()
+
+        expect(cls).toContain('text-blue')
+
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('bg-blue')
+      })
+    })
+
+    describe('[(prop)no-caps]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.noCaps).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--no-uppercase')
+
+        await wrapper.setProps({ noCaps: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--no-uppercase')
+
+        expect(
+          target.$computedStyle('text-transform')
+        ).toBe('none')
+      })
+    })
+
+    describe('[(prop)no-wrap]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.noWrap).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+
+        let cls = wrapper.get('.q-btn__content').classes()
+        expect(cls).not.toContain('no-wrap')
+        expect(cls).not.toContain('text-no-wrap')
+
+        await wrapper.setProps({ noWrap: true })
+        await flushPromises()
+
+        cls = wrapper.get('.q-btn__content').classes()
+        expect(cls).toContain('no-wrap')
+        expect(cls).toContain('text-no-wrap')
+      })
+    })
+
+    describe('[(prop)dense]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.dense).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-btn--dense')
+
+        await wrapper.setProps({ dense: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--dense')
+      })
+    })
+
+    describe('[(prop)ripple]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.ripple).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ ripple: true })
+        await flushPromises()
+
+        await wrapper.trigger('click')
+
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(true)
+      })
+
+      test('type Object has effect', async () => {
+        const propVal = { center: true, color: 'teal', keyCodes: [] }
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ ripple: propVal })
+        await flushPromises()
+
+        await wrapper.trigger('click')
+
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(true)
+      })
+    })
+
+    describe('[(prop)tabindex]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.tabindex).toBeDefined()
+      })
+
+      test.each([
+        [ 'Number', 100 ],
+        [ 'String', '100' ]
+      ])('type %s has effect', async (_, propVal) => {
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.attributes('tabindex')
+        ).not.toBe('' + propVal)
+
+        await wrapper.setProps({ tabindex: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.attributes('tabindex')
+        ).toBe('' + propVal)
+
+        // we'll test tabindex + disable
+        await wrapper.setProps({ disable: true })
+        await flushPromises()
+
+        expect(
+          wrapper.attributes('tabindex')
+        ).toBe('-1')
+
+        // we'll now test loading + disable
+        await wrapper.setProps({
+          disable: false,
+          loading: true
+        })
+        await flushPromises()
+
+        expect(
+          wrapper.attributes('tabindex')
+        ).toBe('-1')
+      })
+    })
+
+    describe('[(prop)align]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.align).toBeDefined()
+      })
+
+      test.each([
+        [ 'left' ],
+        [ 'center' ],
+        [ 'right' ],
+        [ 'between' ],
+        [ 'around' ],
+        [ 'evenly' ]
+      ])('value "%s" has effect', async propVal => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn__content')
+
+        if (propVal !== 'center') {
+          // the default value
+          expect(
+            target.classes()
+          ).not.toContain(`justify-${ alignMap[ propVal ] }`)
+        }
+
+        await wrapper.setProps({ align: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain(`justify-${ alignMap[ propVal ] }`)
+      })
+    })
+
+    describe('[(prop)stack]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.stack).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn__content')
+
+        expect(
+          target.classes()
+        ).toContain('row')
+
+        await wrapper.setProps({ stack: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('column')
+      })
+    })
+
+    describe('[(prop)stretch]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.stretch).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('self-stretch')
+
+        await wrapper.setProps({ stretch: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('self-stretch')
+      })
+    })
+
+    describe('[(prop)loading]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.loading).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.attributes('role')
+        ).not.toBe('progressbar')
+
+        expect(
+          target.attributes('aria-valuenow')
+        ).toBeUndefined()
+
+        await wrapper.setProps({ loading: true })
+        await flushPromises()
+
+        expect(
+          target.attributes('role')
+        ).not.toBe('progressbar')
+
+        expect(
+          target.attributes('aria-valuenow')
+        ).toBeUndefined()
+
+        expect(
+          wrapper.find('.q-spinner')
+            .exists()
+        ).toBe(true)
+
+        expect(
+          wrapper.get('.q-btn__content')
+            .classes()
+        ).toContain('q-btn__content--hidden')
+
+        await wrapper.setProps({ percentage: 50 })
+        await flushPromises()
+
+        expect(
+          target.attributes('role')
+        ).toBe('progressbar')
+
+        expect(
+          target.attributes('aria-valuenow')
+        ).toBe('50')
+      })
+
+      test('type null has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.attributes('role')
+        ).not.toBe('progressbar')
+
+        expect(
+          target.attributes('aria-valuenow')
+        ).toBeUndefined()
+
+        await wrapper.setProps({ loading: null })
+        await flushPromises()
+
+        expect(
+          target.attributes('role')
+        ).not.toBe('progressbar')
+
+        expect(
+          target.attributes('aria-valuenow')
+        ).toBeUndefined()
+
+        expect(
+          wrapper.get('.q-btn__content')
+            .classes()
+        ).not.toContain('q-btn__content--hidden')
+
+        expect(
+          wrapper.find('.q-spinner')
+            .exists()
+        ).toBe(false)
+      })
+    })
+
+    describe('[(prop)disable]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.disable).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).not.toContain('disabled')
+
+        expect(
+          target.attributes('aria-disabled')
+        ).not.toBe('true')
+
+        await wrapper.setProps({ disable: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('disabled')
+
+        expect(
+          target.attributes('aria-disabled')
+        ).toBe('true')
+      })
+
+      test('link + disable', async () => {
+        const testRoute = '/home'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
+          props: {
+            disable: true,
+            to: testRoute
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          wrapper.find('a').exists()
+        ).toBe(false)
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).not.toBe(testRoute)
+      })
+
+      test('loading + disable', async () => {
+        const testRoute = '/home'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
+          props: {
+            loading: true,
+            to: testRoute
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).not.toBe(testRoute)
+      })
+    })
+
+    describe('[(prop)round]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.round).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBtn)
+        const target = wrapper.get('.q-btn')
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--rectangle')
+
+        await wrapper.setProps({ round: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-btn--round')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('50%')
+      })
+    })
+
+    describe('[(prop)percentage]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.percentage).toBeDefined()
+      })
+
+      test('type Number has effect', async () => {
+        const propVal = 58
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.find('.q-btn__progress')
+            .exists()
+        ).toBe(false)
+
+        expect(
+          wrapper.get('.q-btn')
+            .attributes('aria-valuenow')
+        ).toBeUndefined()
+
+        await wrapper.setProps({ percentage: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.find('.q-btn__progress')
+            .exists()
+        ).toBe(false)
+
+        expect(
+          wrapper.get('.q-btn')
+            .attributes('aria-valuenow')
+        ).toBeUndefined()
+
+        await wrapper.setProps({ loading: true })
+        await flushPromises()
+
+        expect(
+          wrapper.find('.q-btn__progress')
+            .exists()
+        ).toBe(true)
+
+        expect(
+          wrapper.get('.q-btn__progress-indicator')
+            .$computedStyle('transform')
+        ).toContain(`${ 100 - propVal }%`)
+
+        expect(
+          wrapper.find('.q-spinner')
+            .exists()
+        ).toBe(true)
+
+        expect(
+          wrapper.get('.q-btn')
+            .attributes('aria-valuenow')
+        ).toBe('' + propVal)
+      })
+    })
+
+    describe('[(prop)dark-percentage]', () => {
+      test('is defined correctly', () => {
+        expect(QBtn.props.darkPercentage).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const propVal = 58
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.get('.q-btn')
+            .attributes('aria-valuenow')
+        ).not.toBe('' + propVal)
+
+        expect(
+          wrapper.find('.q-btn__progress')
+            .exists()
+        ).toBe(false)
+
+        await wrapper.setProps({
+          percentage: propVal,
+          loading: true,
+          darkPercentage: true
+        })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-btn')
+            .attributes('aria-valuenow')
+        ).toBe('' + propVal)
+
+        expect(
+          wrapper.get('.q-btn__progress')
+            .classes()
+        ).toContain('q-btn__progress--dark')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBtn, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+
+    describe('[(slot)loading]', () => {
+      test('renders the content', async () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBtn, {
+          slots: {
+            loading: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).not.toContain(slotContent)
+
+        await wrapper.setProps({ loading: true })
+        await flushPromises()
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+
+  describe('[Events]', () => {
+    describe('[(event)click]', () => {
+      test('is defined correctly', () => {
+        expect(
+          QBtn.emits?.includes('click')
+          ^ (QBtn.props?.onClick !== void 0)
+        ).toBe(1)
+      })
+
+      test('(with route) is emitting', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
+          props: {
+            to: testRoute
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('click')
+        expect(eventList.click).toHaveLength(1)
+
+        const [ evt, go ] = eventList.click[ 0 ]
+        expect(evt).toBeInstanceOf(Event)
+        expect(go).toBeTypeOf('function')
+      })
+
+      test('(with route) does not navigates when prevented', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
+          props: {
+            to: testRoute,
+            onClick: e => e.preventDefault()
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).not.toBe(testRoute)
+      })
+
+      test('(with route) can manually navigate by calling go()', async () => {
+        const testRoute = '/home/dashboard'
+        const router = await getRouter(testRoute)
+
+        const wrapper = mount(QBtn, {
+          props: {
+            to: testRoute,
+            onClick: (e, go) => {
+              e.preventDefault()
+              go()
+            }
+          },
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        await wrapper.trigger('click')
+        await flushPromises()
+
+        expect(
+          router.currentRoute.value.path
+        ).toBe(testRoute)
+      })
+
+      test('is emitting', async () => {
+        const wrapper = mount(QBtn)
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('click')
+        expect(eventList.click).toHaveLength(1)
+
+        const [ evt, go ] = eventList.click[ 0 ]
+        expect(evt).toBeInstanceOf(Event)
+        expect(go).toBeUndefined()
+      })
+
+      test('is NOT emitting when in loading state', async () => {
+        const wrapper = mount(QBtn, {
+          props: {
+            loading: true
+          }
+        })
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).not.toHaveProperty('click')
+      })
+
+      test('is NOT emitting when disabled', async () => {
+        const wrapper = mount(QBtn, {
+          props: {
+            disable: true
+          }
+        })
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).not.toHaveProperty('click')
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)click]', () => {
+      test('should be callable', () => {
+        const event = new MouseEvent('click')
+        const wrapper = mount(QBtn)
+
+        expect(
+          wrapper.vm.click(event)
+        ).toBeUndefined()
+
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('click')
+        expect(eventList.click).toHaveLength(1)
+
+        const [ evt, go ] = eventList.click[ 0 ]
+        expect(evt).toBeInstanceOf(Event)
+        expect(go).toBeUndefined()
+      })
+
+      test('should not do anything when disabled', () => {
+        const event = new MouseEvent('click')
+        const wrapper = mount(QBtn, {
+          props: {
+            disable: true
+          }
+        })
+
+        expect(
+          wrapper.vm.click(event)
+        ).toBeUndefined()
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        const eventList = wrapper.emitted()
+        expect(eventList).not.toHaveProperty('click')
       })
     })
   })