quasar 2.18.6 → 2.19.0

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

@@ -15,16 +15,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.$style('font-size')
-        ).not.toBe(propVal)
+        expect(target.$style('font-size')).not.toBe(propVal)
 
         await wrapper.setProps({ size: propVal })
         await flushPromises()
 
-        expect(
-          target.$style('font-size')
-        ).toBe(propVal)
+        expect(target.$style('font-size')).toBe(propVal)
       })
 
       test('type String has effect (as "xs")', async () => {
@@ -32,72 +28,58 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.$style('font-size')
-        ).not.toBe(`${ defaultSizes.xs }px`)
+        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`)
+        expect(target.$style('font-size')).toBe(`${defaultSizes.xs}px`)
       })
     })
 
     describe('[(prop)type]', () => {
-      test.each([
-        [ 'button' ],
-        [ 'a' ]
-      ])('type "%s" has effect', (propVal) => {
+      test.each([['button'], ['a']])('type "%s" has effect', propVal => {
         const wrapper = mount(QBtn, {
           props: {
             type: propVal
           }
         })
 
-        expect(
-          wrapper.get('.q-btn').element.tagName.toLowerCase()
-        ).toBe(propVal)
+        expect(wrapper.get('.q-btn').element.tagName.toLowerCase()).toBe(
+          propVal
+        )
       })
 
-      test.each([
-        [ 'submit' ],
-        [ 'reset' ]
-      ])('type "%s" has effect', (propVal) => {
+      test.each([['submit'], ['reset']])('type "%s" has effect', propVal => {
         const wrapper = mount(QBtn, {
           props: {
             type: propVal
           }
         })
 
-        expect(
-          wrapper.get('.q-btn').element.tagName.toLowerCase()
-        ).toBe('button')
+        expect(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'
-          }
-        })
+      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')
+          const target = wrapper.get('.q-btn')
 
-        expect(
-          target.element.tagName.toLowerCase()
-        ).toBe('a')
+          expect(target.element.tagName.toLowerCase()).toBe('a')
 
-        expect(
-          target.attributes('type')
-        ).toBe(propVal)
-      })
+          expect(target.attributes('type')).toBe(propVal)
+        }
+      )
     })
 
     describe('[(prop)to]', () => {
@@ -107,32 +89,28 @@ describe('[QBtn API]', () => {
 
         const wrapper = mount(QBtn, {
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
-        expect(
-          wrapper.find('a').exists()
-        ).toBe(false)
+        expect(wrapper.find('a').exists()).toBe(false)
 
         await wrapper.setProps({ to: testRoute })
         await flushPromises()
 
-        expect(
-          wrapper.get('a').attributes('href')
-        ).toBe(testRoute)
+        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(router.currentRoute.value.path).toBe(testRoute)
 
         expect(routerFn).toHaveBeenCalledTimes(1)
         expect(routerFn).toHaveBeenCalledWith(testRoute)
+
+        vi.restoreAllMocks()
       })
 
       test('type Object has effect', async () => {
@@ -142,32 +120,28 @@ describe('[QBtn API]', () => {
 
         const wrapper = mount(QBtn, {
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
-        expect(
-          wrapper.find('a').exists()
-        ).toBe(false)
+        expect(wrapper.find('a').exists()).toBe(false)
 
         await wrapper.setProps({ to: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('a').attributes('href')
-        ).toBe(testRoute)
+        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(router.currentRoute.value.path).toBe(testRoute)
 
         expect(routerFn).toHaveBeenCalledTimes(1)
         expect(routerFn).toHaveBeenCalledWith(propVal)
+
+        vi.restoreAllMocks()
       })
     })
 
@@ -182,25 +156,23 @@ describe('[QBtn API]', () => {
             to: testRoute
           },
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
-        expect(
-          wrapper.get('a').attributes('href')
-        ).toBe(testRoute)
+        expect(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(router.currentRoute.value.path).toBe(testRoute)
 
         expect(routerFn).toHaveBeenCalledTimes(1)
         expect(routerFn).toHaveBeenCalledWith(testRoute)
+
+        vi.restoreAllMocks()
       })
     })
 
@@ -209,16 +181,12 @@ describe('[QBtn API]', () => {
         const propVal = 'https://quasar.dev'
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.find('a').exists()
-        ).toBe(false)
+        expect(wrapper.find('a').exists()).toBe(false)
 
         await wrapper.setProps({ href: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('a').attributes('href')
-        ).toBe(propVal)
+        expect(wrapper.get('a').attributes('href')).toBe(propVal)
       })
     })
 
@@ -235,13 +203,9 @@ describe('[QBtn API]', () => {
 
         const link = wrapper.get('a')
 
-        expect(
-          link.attributes('href')
-        ).toBe(href)
+        expect(link.attributes('href')).toBe(href)
 
-        expect(
-          link.attributes('target')
-        ).toBe(propVal)
+        expect(link.attributes('target')).toBe(propVal)
       })
     })
 
@@ -262,12 +226,12 @@ describe('[QBtn API]', () => {
         const propVal = 10
         const wrapper = mount(QBtn)
 
-        expect(wrapper.text()).not.toContain('' + propVal)
+        expect(wrapper.text()).not.toContain(String(propVal))
 
         await wrapper.setProps({ label: propVal })
         await flushPromises()
 
-        expect(wrapper.text()).toContain('' + propVal)
+        expect(wrapper.text()).toContain(String(propVal))
       })
     })
 
@@ -276,16 +240,12 @@ describe('[QBtn API]', () => {
         const propVal = 'map'
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.find('.q-icon').exists()
-        ).toBe(false)
+        expect(wrapper.find('.q-icon').exists()).toBe(false)
 
         await wrapper.setProps({ icon: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-icon').text()
-        ).toContain(propVal)
+        expect(wrapper.get('.q-icon').text()).toContain(propVal)
       })
     })
 
@@ -294,16 +254,12 @@ describe('[QBtn API]', () => {
         const propVal = 'map'
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.find('.q-icon').exists()
-        ).toBe(false)
+        expect(wrapper.find('.q-icon').exists()).toBe(false)
 
         await wrapper.setProps({ iconRight: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-icon').text()
-        ).toContain(propVal)
+        expect(wrapper.get('.q-icon').text()).toContain(propVal)
       })
     })
 
@@ -312,20 +268,14 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--outline')
+        expect(target.classes()).not.toContain('q-btn--outline')
 
         await wrapper.setProps({ outline: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--outline')
+        expect(target.classes()).toContain('q-btn--outline')
 
-        expect(
-          target.$computedStyle('background')
-        ).toBe('transparent')
+        expect(target.$computedStyle('background')).toBe('transparent')
       })
     })
 
@@ -334,16 +284,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--flat')
+        expect(target.classes()).not.toContain('q-btn--flat')
 
         await wrapper.setProps({ flat: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--flat')
+        expect(target.classes()).toContain('q-btn--flat')
       })
     })
 
@@ -352,16 +298,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--unelevated')
+        expect(target.classes()).not.toContain('q-btn--unelevated')
 
         await wrapper.setProps({ unelevated: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--unelevated')
+        expect(target.classes()).toContain('q-btn--unelevated')
       })
     })
 
@@ -370,20 +312,14 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--rounded')
+        expect(target.classes()).not.toContain('q-btn--rounded')
 
         await wrapper.setProps({ rounded: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--rounded')
+        expect(target.classes()).toContain('q-btn--rounded')
 
-        expect(
-          target.$computedStyle('border-radius')
-        ).toBe('28px')
+        expect(target.$computedStyle('border-radius')).toBe('28px')
       })
     })
 
@@ -392,24 +328,16 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--push')
+        expect(target.classes()).not.toContain('q-btn--push')
 
         await wrapper.setProps({ push: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--push')
+        expect(target.classes()).toContain('q-btn--push')
 
-        expect(
-          target.$computedStyle('border-radius')
-        ).toBe('7px')
+        expect(target.$computedStyle('border-radius')).toBe('7px')
 
-        expect(
-          target.$computedStyle('transition')
-        ).toBeDefined()
+        expect(target.$computedStyle('transition')).toBeDefined()
       })
     })
 
@@ -418,20 +346,14 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--square')
+        expect(target.classes()).not.toContain('q-btn--square')
 
         await wrapper.setProps({ square: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--square')
+        expect(target.classes()).toContain('q-btn--square')
 
-        expect(
-          target.$computedStyle('border-radius')
-        ).toBe('0')
+        expect(target.$computedStyle('border-radius')).toBe('0px')
       })
     })
 
@@ -440,16 +362,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('glossy')
+        expect(target.classes()).not.toContain('glossy')
 
         await wrapper.setProps({ glossy: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('glossy')
+        expect(target.classes()).toContain('glossy')
       })
     })
 
@@ -458,16 +376,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--fab')
+        expect(target.classes()).not.toContain('q-btn--fab')
 
         await wrapper.setProps({ fab: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--fab')
+        expect(target.classes()).toContain('q-btn--fab')
       })
     })
 
@@ -476,93 +390,72 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--fab-mini')
+        expect(target.classes()).not.toContain('q-btn--fab-mini')
 
         await wrapper.setProps({ fabMini: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--fab-mini')
+        expect(target.classes()).toContain('q-btn--fab-mini')
       })
     })
 
     describe('[(prop)padding]', () => {
       test.each([
-        [ 'pixels; single value', '50px' ],
-        [ 'pixels; multiple values', '50px 100px' ]
+        ['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)
+        expect(target.$style('padding')).not.toBe(propVal)
 
         await wrapper.setProps({ padding: propVal })
         await flushPromises()
 
-        expect(
-          target.$style('padding')
-        ).toBe(propVal)
+        expect(target.$style('padding')).toBe(propVal)
       })
 
       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`)
+        expect(target.$style('padding')).not.toBe(`${btnPadding.xs}px`)
 
         await wrapper.setProps({ padding: 'xs' })
         await flushPromises()
 
-        expect(
-          target.$style('padding')
-        ).toBe(`${ btnPadding.xs }px`)
+        expect(target.$style('padding')).toBe(`${btnPadding.xs}px`)
       })
 
       test('type String has effect (as "xs xl")', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.$style('padding')
-        ).not.toBe(`${ btnPadding.xs }px ${ btnPadding.xl }px`)
+        expect(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`)
+        expect(target.$style('padding')).toBe(
+          `${btnPadding.xs}px ${btnPadding.xl}px`
+        )
       })
 
       test('padding "0" is applied correctly', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.$style('min-width')
-        ).not.toBe('0')
+        expect(target.$style('min-width')).not.toBe('0')
 
-        expect(
-          target.$style('min-height')
-        ).not.toBe('0')
+        expect(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')
+        expect(target.$style('min-width')).toBe('0px')
+        expect(target.$style('min-height')).toBe('0px')
       })
     })
 
@@ -584,49 +477,49 @@ describe('[QBtn API]', () => {
         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')
-
-        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()
-
-        cls = target.classes()
-        expect(cls).toContain('text-red')
-        expect(cls).not.toContain('bg-red')
-      })
+      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')
+
+          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()
+
+          cls = target.classes()
+          expect(cls).toContain('text-red')
+          expect(cls).not.toContain('bg-red')
+        }
+      )
     })
 
     describe('[(prop)text-color]', () => {
@@ -672,65 +565,65 @@ describe('[QBtn API]', () => {
         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')
+      test.each([['push'], ['unelevated']])(
+        '(design "%s" + color) is applied correctly',
+        async designProp => {
+          const wrapper = mount(QBtn)
+          const target = wrapper.get('.q-btn')
 
-        let cls = target.classes()
+          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')
+          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()
+          await wrapper.setProps({
+            color: 'red',
+            textColor: 'blue',
+            [designProp]: true
+          })
+          await flushPromises()
 
-        cls = target.classes()
+          cls = target.classes()
 
-        expect(cls).toContain('bg-red')
-        expect(cls).toContain('text-blue')
+          expect(cls).toContain('bg-red')
+          expect(cls).toContain('text-blue')
 
-        expect(cls).not.toContain('text-red')
-        expect(cls).not.toContain('bg-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')
+      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()
+          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')
+          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()
+          await wrapper.setProps({
+            color: 'red',
+            textColor: 'blue',
+            [designProp]: true
+          })
+          await flushPromises()
 
-        cls = target.classes()
+          cls = target.classes()
 
-        expect(cls).toContain('text-blue')
+          expect(cls).toContain('text-blue')
 
-        expect(cls).not.toContain('text-red')
-        expect(cls).not.toContain('bg-red')
-        expect(cls).not.toContain('bg-blue')
-      })
+          expect(cls).not.toContain('text-red')
+          expect(cls).not.toContain('bg-red')
+          expect(cls).not.toContain('bg-blue')
+        }
+      )
     })
 
     describe('[(prop)no-caps]', () => {
@@ -738,20 +631,14 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--no-uppercase')
+        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.classes()).toContain('q-btn--no-uppercase')
 
-        expect(
-          target.$computedStyle('text-transform')
-        ).toBe('none')
+        expect(target.$computedStyle('text-transform')).toBe('none')
       })
     })
 
@@ -777,16 +664,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-btn--dense')
+        expect(target.classes()).not.toContain('q-btn--dense')
 
         await wrapper.setProps({ dense: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--dense')
+        expect(target.classes()).toContain('q-btn--dense')
       })
     })
 
@@ -794,68 +677,50 @@ describe('[QBtn API]', () => {
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.find('.q-ripple')
-            .exists()
-        ).toBe(false)
+        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)
+        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)
+        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)
+        expect(wrapper.find('.q-ripple').exists()).toBe(true)
       })
     })
 
     describe('[(prop)tabindex]', () => {
       test.each([
-        [ 'Number', 100 ],
-        [ 'String', '100' ]
+        ['Number', 100],
+        ['String', '100']
       ])('type %s has effect', async (_, propVal) => {
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.attributes('tabindex')
-        ).not.toBe('' + propVal)
+        expect(wrapper.attributes('tabindex')).not.toBe(String(propVal))
 
         await wrapper.setProps({ tabindex: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.attributes('tabindex')
-        ).toBe('' + propVal)
+        expect(wrapper.attributes('tabindex')).toBe(String(propVal))
 
         // we'll test tabindex + disable
         await wrapper.setProps({ disable: true })
         await flushPromises()
 
-        expect(
-          wrapper.attributes('tabindex')
-        ).toBe('-1')
+        expect(wrapper.attributes('tabindex')).toBe('-1')
 
         // we'll now test loading + disable
         await wrapper.setProps({
@@ -864,37 +729,31 @@ describe('[QBtn API]', () => {
         })
         await flushPromises()
 
-        expect(
-          wrapper.attributes('tabindex')
-        ).toBe('-1')
+        expect(wrapper.attributes('tabindex')).toBe('-1')
       })
     })
 
     describe('[(prop)align]', () => {
       test.each([
-        [ 'left' ],
-        [ 'center' ],
-        [ 'right' ],
-        [ 'between' ],
-        [ 'around' ],
-        [ 'evenly' ]
+        ['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 ] }`)
+          expect(target.classes()).not.toContain(`justify-${alignMap[propVal]}`)
         }
 
         await wrapper.setProps({ align: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain(`justify-${ alignMap[ propVal ] }`)
+        expect(target.classes()).toContain(`justify-${alignMap[propVal]}`)
       })
     })
 
@@ -903,16 +762,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn__content')
 
-        expect(
-          target.classes()
-        ).toContain('row')
+        expect(target.classes()).toContain('row')
 
         await wrapper.setProps({ stack: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('column')
+        expect(target.classes()).toContain('column')
       })
     })
 
@@ -921,16 +776,12 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('self-stretch')
+        expect(target.classes()).not.toContain('self-stretch')
 
         await wrapper.setProps({ stretch: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('self-stretch')
+        expect(target.classes()).toContain('self-stretch')
       })
     })
 
@@ -939,79 +790,51 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.attributes('role')
-        ).not.toBe('progressbar')
+        expect(target.attributes('role')).not.toBe('progressbar')
 
-        expect(
-          target.attributes('aria-valuenow')
-        ).toBeUndefined()
+        expect(target.attributes('aria-valuenow')).toBeUndefined()
 
         await wrapper.setProps({ loading: true })
         await flushPromises()
 
-        expect(
-          target.attributes('role')
-        ).not.toBe('progressbar')
+        expect(target.attributes('role')).not.toBe('progressbar')
 
-        expect(
-          target.attributes('aria-valuenow')
-        ).toBeUndefined()
+        expect(target.attributes('aria-valuenow')).toBeUndefined()
 
-        expect(
-          wrapper.find('.q-spinner')
-            .exists()
-        ).toBe(true)
+        expect(wrapper.find('.q-spinner').exists()).toBe(true)
 
-        expect(
-          wrapper.get('.q-btn__content')
-            .classes()
-        ).toContain('q-btn__content--hidden')
+        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('role')).toBe('progressbar')
 
-        expect(
-          target.attributes('aria-valuenow')
-        ).toBe('50')
+        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('role')).not.toBe('progressbar')
 
-        expect(
-          target.attributes('aria-valuenow')
-        ).toBeUndefined()
+        expect(target.attributes('aria-valuenow')).toBeUndefined()
 
         await wrapper.setProps({ loading: null })
         await flushPromises()
 
-        expect(
-          target.attributes('role')
-        ).not.toBe('progressbar')
+        expect(target.attributes('role')).not.toBe('progressbar')
 
-        expect(
-          target.attributes('aria-valuenow')
-        ).toBeUndefined()
+        expect(target.attributes('aria-valuenow')).toBeUndefined()
 
-        expect(
-          wrapper.get('.q-btn__content')
-            .classes()
-        ).not.toContain('q-btn__content--hidden')
+        expect(wrapper.get('.q-btn__content').classes()).not.toContain(
+          'q-btn__content--hidden'
+        )
 
-        expect(
-          wrapper.find('.q-spinner')
-            .exists()
-        ).toBe(false)
+        expect(wrapper.find('.q-spinner').exists()).toBe(false)
       })
     })
 
@@ -1020,24 +843,16 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).not.toContain('disabled')
+        expect(target.classes()).not.toContain('disabled')
 
-        expect(
-          target.attributes('aria-disabled')
-        ).not.toBe('true')
+        expect(target.attributes('aria-disabled')).not.toBe('true')
 
         await wrapper.setProps({ disable: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('disabled')
+        expect(target.classes()).toContain('disabled')
 
-        expect(
-          target.attributes('aria-disabled')
-        ).toBe('true')
+        expect(target.attributes('aria-disabled')).toBe('true')
       })
 
       test('link + disable', async () => {
@@ -1050,20 +865,16 @@ describe('[QBtn API]', () => {
             to: testRoute
           },
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
-        expect(
-          wrapper.find('a').exists()
-        ).toBe(false)
+        expect(wrapper.find('a').exists()).toBe(false)
 
         await wrapper.trigger('click')
         await flushPromises()
 
-        expect(
-          router.currentRoute.value.path
-        ).not.toBe(testRoute)
+        expect(router.currentRoute.value.path).not.toBe(testRoute)
       })
 
       test('loading + disable', async () => {
@@ -1076,16 +887,14 @@ describe('[QBtn API]', () => {
             to: testRoute
           },
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
         await wrapper.trigger('click')
         await flushPromises()
 
-        expect(
-          router.currentRoute.value.path
-        ).not.toBe(testRoute)
+        expect(router.currentRoute.value.path).not.toBe(testRoute)
       })
     })
 
@@ -1094,20 +903,14 @@ describe('[QBtn API]', () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--rectangle')
+        expect(target.classes()).toContain('q-btn--rectangle')
 
         await wrapper.setProps({ round: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-btn--round')
+        expect(target.classes()).toContain('q-btn--round')
 
-        expect(
-          target.$computedStyle('border-radius')
-        ).toBe('50%')
+        expect(target.$computedStyle('border-radius')).toBe('50%')
       })
     })
 
@@ -1116,51 +919,35 @@ describe('[QBtn API]', () => {
         const propVal = 58
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.find('.q-btn__progress')
-            .exists()
-        ).toBe(false)
+        expect(wrapper.find('.q-btn__progress').exists()).toBe(false)
 
         expect(
-          wrapper.get('.q-btn')
-            .attributes('aria-valuenow')
+          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.find('.q-btn__progress').exists()).toBe(false)
 
         expect(
-          wrapper.get('.q-btn')
-            .attributes('aria-valuenow')
+          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.find('.q-btn__progress').exists()).toBe(true)
 
         expect(
-          wrapper.get('.q-btn__progress-indicator')
-            .$computedStyle('transform')
-        ).toContain(`${ 100 - propVal }%`)
+          wrapper.get('.q-btn__progress-indicator').$computedStyle('transform')
+        ).toContain(`${100 - propVal}%`)
 
-        expect(
-          wrapper.find('.q-spinner')
-            .exists()
-        ).toBe(true)
+        expect(wrapper.find('.q-spinner').exists()).toBe(true)
 
-        expect(
-          wrapper.get('.q-btn')
-            .attributes('aria-valuenow')
-        ).toBe('' + propVal)
+        expect(wrapper.get('.q-btn').attributes('aria-valuenow')).toBe(
+          String(propVal)
+        )
       })
     })
 
@@ -1169,15 +956,11 @@ describe('[QBtn API]', () => {
         const propVal = 58
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.get('.q-btn')
-            .attributes('aria-valuenow')
-        ).not.toBe('' + propVal)
+        expect(wrapper.get('.q-btn').attributes('aria-valuenow')).not.toBe(
+          String(propVal)
+        )
 
-        expect(
-          wrapper.find('.q-btn__progress')
-            .exists()
-        ).toBe(false)
+        expect(wrapper.find('.q-btn__progress').exists()).toBe(false)
 
         await wrapper.setProps({
           percentage: propVal,
@@ -1186,15 +969,13 @@ describe('[QBtn API]', () => {
         })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-btn')
-            .attributes('aria-valuenow')
-        ).toBe('' + propVal)
+        expect(wrapper.get('.q-btn').attributes('aria-valuenow')).toBe(
+          String(propVal)
+        )
 
-        expect(
-          wrapper.get('.q-btn__progress')
-            .classes()
-        ).toContain('q-btn__progress--dark')
+        expect(wrapper.get('.q-btn__progress').classes()).toContain(
+          'q-btn__progress--dark'
+        )
       })
     })
   })
@@ -1243,7 +1024,7 @@ describe('[QBtn API]', () => {
             to: testRoute
           },
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
@@ -1253,7 +1034,7 @@ describe('[QBtn API]', () => {
         expect(eventList).toHaveProperty('click')
         expect(eventList.click).toHaveLength(1)
 
-        const [ evt, go ] = eventList.click[ 0 ]
+        const [evt, go] = eventList.click[0]
         expect(evt).toBeInstanceOf(Event)
         expect(go).toBeTypeOf('function')
       })
@@ -1268,16 +1049,14 @@ describe('[QBtn API]', () => {
             onClick: e => e.preventDefault()
           },
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
         await wrapper.trigger('click')
         await flushPromises()
 
-        expect(
-          router.currentRoute.value.path
-        ).not.toBe(testRoute)
+        expect(router.currentRoute.value.path).not.toBe(testRoute)
       })
 
       test('(with route) can manually navigate by calling go()', async () => {
@@ -1293,16 +1072,14 @@ describe('[QBtn API]', () => {
             }
           },
           global: {
-            plugins: [ router ]
+            plugins: [router]
           }
         })
 
         await wrapper.trigger('click')
         await flushPromises()
 
-        expect(
-          router.currentRoute.value.path
-        ).toBe(testRoute)
+        expect(router.currentRoute.value.path).toBe(testRoute)
       })
 
       test('is emitting', async () => {
@@ -1314,7 +1091,7 @@ describe('[QBtn API]', () => {
         expect(eventList).toHaveProperty('click')
         expect(eventList.click).toHaveLength(1)
 
-        const [ evt, go ] = eventList.click[ 0 ]
+        const [evt, go] = eventList.click[0]
         expect(evt).toBeInstanceOf(Event)
         expect(go).toBeUndefined()
       })
@@ -1353,15 +1130,13 @@ describe('[QBtn API]', () => {
         const event = new MouseEvent('click')
         const wrapper = mount(QBtn)
 
-        expect(
-          wrapper.vm.click(event)
-        ).toBeUndefined()
+        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 ]
+        const [evt, go] = eventList.click[0]
         expect(evt).toBeInstanceOf(Event)
         expect(go).toBeUndefined()
       })
@@ -1374,9 +1149,7 @@ describe('[QBtn API]', () => {
           }
         })
 
-        expect(
-          wrapper.vm.click(event)
-        ).toBeUndefined()
+        expect(wrapper.vm.click(event)).toBeUndefined()
 
         const eventList = wrapper.emitted()
         expect(eventList).not.toHaveProperty('click')