quasar 2.15.2 → 2.15.3

package/src/components/chip/QChip.test.js

@@ -1,149 +1,390 @@
-import { mount } from '@vue/test-utils'
-import { describe, test, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
 
 import QChip, { defaultSizes } from './QChip.js'
 
-const defaultOptions = {
-  label: 'simple chip'
-}
+describe('[QChip API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)dense]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.dense).toBeDefined()
+      })
 
-const chipSizeValues = Object.keys(defaultSizes)
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
 
-function mountQChip (options = {}) {
-  options.props = {
-    ...defaultOptions,
-    ...options.props
-  }
+        expect(
+          target.classes()
+        ).not.toContain('q-chip--dense')
 
-  return mount(QChip, options)
-}
+        await wrapper.setProps({ dense: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-chip--dense')
+      })
+    })
+
+    describe('[(prop)size]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.size).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        expect(
+          target.$style('font-size')
+        ).not.toBe('100px')
+
+        await wrapper.setProps({ size: '100px' })
+        await flushPromises()
+
+        expect(
+          target.$style('font-size')
+        ).toBe('100px')
+
+        await wrapper.setProps({ size: 'sm' })
+
+        expect(
+          target.$style('font-size')
+        ).toBe(`${ defaultSizes.sm }px`)
+      })
+    })
+
+    describe('[(prop)dark]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.dark).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-chip--dark')
+
+        await wrapper.setProps({ dark: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-chip--dark')
+      })
+
+      test('type null has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-chip--dense')
+
+        await wrapper.setProps({ dark: null })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).not.toContain('q-chip--dense')
+      })
+    })
 
-describe('[QChip API]', () => {
-  describe('[Props]', () => {
     describe('[(prop)icon]', () => {
-      test('should render an icon on the left', () => {
-        const icon = 'add'
-        const wrapper = mountQChip({
-          props: {
-            icon
-          }
-        })
+      test('is defined correctly', () => {
+        expect(QChip.props.icon).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QChip)
 
         expect(
-          wrapper.get('.q-chip')
-            .get('.q-icon.q-chip__icon--left')
-            .text()
-        ).toBe(icon)
+          wrapper.find('.q-icon').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ icon: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-icon').text()
+        ).toContain(propVal)
       })
     })
 
     describe('[(prop)icon-right]', () => {
-      test('should render an icon on the right', () => {
-        const icon = 'add'
-        const wrapper = mountQChip({
-          props: {
-            iconRight: icon
-          }
-        })
+      test('is defined correctly', () => {
+        expect(QChip.props.iconRight).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QChip)
 
         expect(
-          wrapper.get('.q-chip')
-            .get('.q-icon.q-chip__icon--right')
-            .text()
-        ).toBe(icon)
+          wrapper.find('.q-icon').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ iconRight: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-icon').text()
+        ).toContain(propVal)
       })
     })
 
     describe('[(prop)icon-remove]', () => {
-      test('should render a custom remove icon', () => {
-        const icon = 'delete'
-        const wrapper = mountQChip({
-          props: {
-            removable: true,
-            iconRemove: icon
-          }
+      test('is defined correctly', () => {
+        expect(QChip.props.iconRemove).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QChip)
+
+        expect(
+          wrapper.find('.q-icon').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({
+          removable: true,
+          iconRemove: propVal
         })
+        await flushPromises()
 
         expect(
-          wrapper.get('.q-chip')
-            .get('.q-icon.q-chip__icon--remove')
+          wrapper.get('.q-icon.q-chip__icon--remove')
             .text()
-        ).toBe(icon)
+        ).toBe(propVal)
       })
     })
 
     describe('[(prop)icon-selected]', () => {
-      test('should render a custom selected icon when one provided', () => {
-        const icon = 'done'
-        const wrapper = mountQChip({
-          props: {
-            selected: true,
-            iconSelected: icon
-          }
+      test('is defined correctly', () => {
+        expect(QChip.props.iconSelected).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QChip)
+
+        expect(
+          wrapper.find('.q-icon').exists()
+        ).toBe(false)
+
+        await wrapper.setProps({
+          selected: true,
+          iconSelected: propVal
         })
+        await flushPromises()
 
         expect(
           wrapper.get('.q-chip.q-chip--selected')
             .get('.q-icon')
             .text()
-        ).toBe(icon)
+        ).toBe(propVal)
       })
     })
 
     describe('[(prop)label]', () => {
-      test('should render a label inside the chip', () => {
-        const label = 'Chip label'
-        const wrapper = mountQChip({
+      test('is defined correctly', () => {
+        expect(QChip.props.label).toBeDefined()
+      })
+
+      test.each([
+        [ 'String', 'John Doe' ],
+        [ 'Number', 22 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const wrapper = mount(QChip)
+
+        expect(
+          wrapper.get('.q-chip__content')
+            .text()
+        ).not.toBe('' + propVal)
+
+        await wrapper.setProps({ label: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-chip__content')
+            .text()
+        ).toBe('' + propVal)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.color).toBeDefined()
+      })
+
+      test('with default design', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).toContain('bg-red')
+      })
+
+      test('with outline design', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QChip, {
           props: {
-            label
+            outline: true
           }
         })
 
-        expect(
-          wrapper.get('.q-chip')
-            .get('.q-chip__content')
-            .text()
-        ).toBe(label)
+        const target = wrapper.get('.q-chip')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).toContain('text-red')
+        expect(cls).not.toContain('bg-red')
       })
     })
 
-    describe('[(prop)tabindex]', () => {
-      test('should set the tabindex', () => {
-        const tabindex = 1
-        const wrapper = mountQChip({
+    describe('[(prop)text-color]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.textColor).toBeDefined()
+      })
+
+      test('with default design', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('q-chip--colored')
+
+        await wrapper.setProps({ textColor: propVal })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).toContain('q-chip--colored')
+      })
+
+      test('with default design + color', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QChip, {
           props: {
-            clickable: true,
-            tabindex
+            color: 'blue'
           }
         })
 
-        expect(
-          wrapper.get('.q-chip')
-            .attributes('tabindex')
-        ).toBe(`${ tabindex }`)
+        const target = wrapper.get('.q-chip')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('text-blue')
+        expect(cls).toContain('bg-blue')
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('q-chip--colored')
+
+        await wrapper.setProps({ textColor: propVal })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).not.toContain('text-blue')
+        expect(cls).toContain('bg-blue')
+        expect(cls).toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).toContain('q-chip--colored')
+      })
+
+      test('with outline design', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QChip, {
+          props: {
+            outline: true
+          }
+        })
+
+        const target = wrapper.get('.q-chip')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).not.toContain('q-chip--colored')
+
+        await wrapper.setProps({ textColor: propVal })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).toContain('q-chip--colored')
+      })
+
+      test('with outline design + color', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QChip, {
+          props: {
+            color: 'blue',
+            outline: true
+          }
+        })
+
+        const target = wrapper.get('.q-chip')
+
+        let cls = target.classes()
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).toContain('text-blue')
+        expect(cls).not.toContain('bg-blue')
+        expect(cls).toContain('q-chip--colored')
+
+        await wrapper.setProps({ textColor: propVal })
+        await flushPromises()
+
+        cls = target.classes()
+        expect(cls).toContain('text-blue')
+        expect(cls).not.toContain('bg-blue')
+        expect(cls).not.toContain('text-red')
+        expect(cls).not.toContain('bg-red')
+        expect(cls).toContain('q-chip--colored')
       })
     })
 
     describe('[(prop)model-value]', () => {
-      test('should render when "modelValue" prop is true', () => {
-        const wrapper = mountQChip({
+      test('is defined correctly', () => {
+        expect(QChip.props.modelValue).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip, {
           props: {
             modelValue: true
           }
         })
 
         expect(
-          wrapper.find('.q-chip')
-            .exists()
+          wrapper.find('.q-chip').exists()
         ).toBe(true)
-      })
 
-      test('should not render when "modelValue" prop is false', async () => {
-        const wrapper = mountQChip({
-          props: {
-            modelValue: false
-          }
-        })
+        await wrapper.setProps({ modelValue: false })
+        await flushPromises()
 
         expect(
           wrapper.find('.q-chip')
@@ -153,381 +394,508 @@ describe('[QChip API]', () => {
     })
 
     describe('[(prop)selected]', () => {
-      test('should be selected when "selected" prop is true', () => {
-        const wrapper = mountQChip({
-          props: {
-            selected: true
-          }
+      test('is defined correctly', () => {
+        expect(QChip.props.selected).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-chip--selected')
+
+        await wrapper.setProps({
+          selected: true,
+          'onUpdate:selected': val => { wrapper.setProps({ selected: val }) }
         })
+        await flushPromises()
 
         expect(
-          wrapper.find('.q-chip.q-chip--selected')
-            .exists()
-        ).toBe(true)
+          target.classes()
+        ).toContain('q-chip--selected')
       })
 
-      test('should not be selected when "selected" prop is false', () => {
-        const wrapper = mountQChip({
-          props: {
-            selected: false
-          }
+      test('type null has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-chip--selected')
+
+        await wrapper.setProps({
+          selected: null,
+          'onUpdate:selected': val => { wrapper.setProps({ selected: val }) }
         })
+        await flushPromises()
 
         expect(
-          wrapper.get('.q-chip')
-            .classes()
+          target.classes()
         ).not.toContain('q-chip--selected')
       })
     })
 
-    describe('[(prop)clickable]', () => {
-      test('should have hover effects and emit "click" event when "clickable" prop is true', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
-          props: {
-            clickable: true,
-            onClick: fn
-          }
-        })
+    describe('[(prop)square]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.square).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
 
         expect(
-          wrapper.get('.q-chip')
-            .$computedStyle('cursor')
-        ).toBe('pointer')
+          target.classes()
+        ).not.toContain('q-chip--square')
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        await wrapper.setProps({ square: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-chip--square')
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('4px')
       })
     })
 
-    describe('[(prop)removable]', () => {
-      test('should display a remove icon emitting a "remove" event when clicked', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
-          props: {
-            removable: true,
-            onRemove: fn
-          }
-        })
+    describe('[(prop)outline]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.outline).toBeDefined()
+      })
 
-        wrapper.get('.q-chip')
-          .get('.q-icon.q-chip__icon--remove')
-          .trigger('click')
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-chip--outline')
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        await wrapper.setProps({ outline: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-chip--outline')
       })
     })
 
-    describe('[(prop)disable]', () => {
-      test('should not have hover effect and not emit "click" event when "disable" prop is true', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
-          props: {
-            disable: true,
-            onClick: fn
-          }
-        })
+    describe('[(prop)clickable]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.clickable).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+        const target = wrapper.get('.q-chip')
 
         expect(
-          wrapper.get('.q-chip')
-            .$computedStyle('cursor')
-        ).not.toBe('pointer')
+          target.attributes('tabindex')
+        ).toBeUndefined()
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        await wrapper.setProps({ clickable: true })
+        await flushPromises()
+
+        expect(
+          target.attributes('tabindex')
+        ).toBe('0')
 
-        expect(fn).not.toHaveBeenCalled()
+        expect(
+          target.$computedStyle('cursor')
+        ).toBe('pointer')
       })
     })
 
-    describe('[(prop)dense]', () => {
-      test('should have a dense style when "dense" prop is true', () => {
-        const wrapper = mountQChip({
-          props: { dense: true }
-        })
+    describe('[(prop)removable]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.removable).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+
+        expect(
+          wrapper.find('.q-icon.q-chip__icon--remove')
+            .exists()
+        ).not.toBe(true)
+
+        await wrapper.setProps({ removable: true })
+        await flushPromises()
 
         expect(
-          wrapper.find('.q-chip.q-chip--dense')
+          wrapper.find('.q-icon.q-chip__icon--remove')
             .exists()
         ).toBe(true)
       })
     })
 
-    describe('[(prop)size]', () => {
-      test('should change QChip size based on a CSS unit value', () => {
-        const size = '50px'
-        const wrapper = mountQChip({
-          props: { size }
-        })
+    describe('[(prop)ripple]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.ripple).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
 
         expect(
-          wrapper.get('.q-chip')
-            .$style()
-        ).toContain(`font-size: ${ size };`)
-      })
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ ripple: true })
+        await flushPromises()
 
-      test(`should change QChip size based defined values: ${ chipSizeValues.join(', ') }`, () => {
-        // loop over chipSizeValues
-        for (const key of chipSizeValues) {
-          const wrapper = mountQChip({
-            props: { size: key }
-          })
+        await wrapper.trigger('click')
 
-          expect(
-            wrapper.get('.q-chip')
-              .$style()
-          ).toContain(`font-size: ${ defaultSizes[ key ] }px;`)
-        }
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(true)
       })
-    })
 
-    describe('[(prop)dark]', () => {
-      test('should have a dark style when "dark" prop is true', () => {
-        const wrapper = mountQChip({
-          props: {
-            dark: true
-          }
-        })
+      test('type Object has effect', async () => {
+        const propVal = { center: true, color: 'teal', keyCodes: [] }
+        const wrapper = mount(QChip)
 
-        const cls = wrapper.get('.q-chip').classes()
-        expect(cls).toContain('q-dark')
-        expect(cls).toContain('q-chip--dark')
-      })
-    })
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(false)
 
-    describe('[(prop)color]', () => {
-      test('should change color based on Quasar Color Palette', () => {
-        const color = 'red'
-        const wrapper = mountQChip({
-          props: { color }
-        })
+        await wrapper.setProps({ ripple: propVal })
+        await flushPromises()
+
+        await wrapper.trigger('click')
 
         expect(
-          wrapper.get('.q-chip')
-            .classes()
-        ).toContain(`bg-${ color }`)
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(true)
       })
     })
 
-    describe('[(prop)text-color]', () => {
-      test('should change text color based on Quasar Color Palette', () => {
-        const textColor = 'red'
-        const wrapper = mountQChip({
-          props: { textColor }
-        })
-
-        const cls = wrapper.get('.q-chip').classes()
-        expect(cls).toContain(`text-${ textColor }`)
-        expect(cls).toContain('q-chip--colored')
+    describe('[(prop)remove-aria-label]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.removeAriaLabel).toBeDefined()
       })
-    })
 
-    describe('[(prop)square]', () => {
-      test('should have a square style when "square" prop is true', () => {
-        const wrapper = mountQChip({
+      test('type String has effect', async () => {
+        const propVal = 'Remove item'
+        const wrapper = mount(QChip, {
           props: {
-            square: true
+            removable: true
           }
         })
 
+        const removeIcon = wrapper.get('.q-chip__icon--remove')
+
         expect(
-          wrapper.get('.q-chip')
-            .classes()
-        ).toContain('q-chip--square')
-      })
-    })
+          removeIcon.attributes('aria-label')
+        ).not.toBe(propVal)
 
-    describe('[(prop)outline]', () => {
-      test('should have a outline style when "outline" prop is true', () => {
-        const wrapper = mountQChip({
-          props: {
-            outline: true
-          }
-        })
+        await wrapper.setProps({ removeAriaLabel: propVal })
+        await flushPromises()
 
         expect(
-          wrapper.get('.q-chip')
-            .classes()
-        ).toContain('q-chip--outline')
+          removeIcon.attributes('aria-label')
+        ).toBe(propVal)
+
+        expect(
+          removeIcon.attributes('tabindex')
+        ).toBe('0')
       })
     })
 
-    describe('[(prop)ripple]', () => {
-      test('should have a ripple effect when "ripple" prop is true', () => {
-        const wrapper = mountQChip({
+    describe('[(prop)tabindex]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.tabindex).toBeDefined()
+      })
+
+      test.each([
+        [ 'Number', 100 ],
+        [ 'String', '100' ]
+      ])('type %s has effect', async (_, propVal) => {
+        const wrapper = mount(QChip, {
           props: {
-            ripple: true
+            clickable: true,
+            tabindex: propVal
           }
         })
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        expect(
+          wrapper.attributes('tabindex')
+        ).toBe('' + propVal)
+
+        // we'll test clickable + disable
+        await wrapper.setProps({ disable: true })
+        await flushPromises()
 
         expect(
-          wrapper.get('.q-chip')
-            .find('.q-ripple')
-            .exists()
-        ).toBe(true)
-      })
+          wrapper.attributes('tabindex')
+        ).toBeUndefined()
 
-      test('should not have a ripple effect when "ripple" prop is false', () => {
-        const wrapper = mountQChip({
-          props: {
-            ripple: false
-          }
+        expect(
+          wrapper.attributes('aria-disabled')
+        ).toBeUndefined()
+
+        // we'll now test removable + disable
+        await wrapper.setProps({
+          clickable: false,
+          removable: true
         })
+        await flushPromises()
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        let removeIcon = wrapper.get('.q-chip__icon--remove')
 
         expect(
-          wrapper.get('.q-chip')
-            .find('.q-ripple')
-            .exists()
-        ).toBe(false)
+          removeIcon.attributes('tabindex')
+        ).toBe('-1')
+
+        expect(
+          removeIcon.attributes('aria-disabled')
+        ).toBe('true')
+
+        // we'll now test removable
+        await wrapper.setProps({ disable: false })
+        await flushPromises()
+
+        removeIcon = wrapper.get('.q-chip__icon--remove')
+
+        expect(
+          removeIcon.attributes('tabindex')
+        ).toBe('' + propVal)
+
+        expect(
+          removeIcon.attributes('aria-disabled')
+        ).toBeUndefined()
       })
     })
 
-    describe.todo('(prop): remove-aria-label', () => {
-      test(' ', () => {
-        //
+    describe('[(prop)disable]', () => {
+      test('is defined correctly', () => {
+        expect(QChip.props.disable).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QChip)
+
+        expect(
+          wrapper.get('.q-chip').classes()
+        ).not.toContain('disabled')
+
+        await wrapper.setProps({ disable: true })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-chip').classes()
+        ).toContain('disabled')
       })
     })
   })
 
   describe('[Slots]', () => {
     describe('[(slot)default]', () => {
-      test('should display the default slot content', () => {
-        const wrapper = mountQChip({
-          props: {
-            label: undefined
-          },
-
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QChip, {
           slots: {
-            default: 'Default Slot Content'
+            default: () => slotContent
           }
         })
 
-        expect(
-          wrapper.get('.q-chip__content')
-            .text()
-        ).toBe('Default Slot Content')
+        expect(wrapper.text()).toContain(slotContent)
       })
     })
   })
 
   describe('[Events]', () => {
     describe('[(event)click]', () => {
-      test('should emit "click" event when clicked and "clickable" prop is true', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
+      test('is defined correctly', () => {
+        expect(
+          QChip.emits?.includes('click')
+          ^ (QChip.props?.onClick !== void 0)
+        ).toBe(1)
+      })
+
+      test('is emitting when clickable', async () => {
+        const wrapper = mount(QChip, {
+          props: {
+            clickable: true
+          }
+        })
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('click')
+        expect(eventList.click).toHaveLength(1)
+
+        const [ evt ] = eventList.click[ 0 ]
+        expect(evt).toBeInstanceOf(Event)
+      })
+
+      test('is emitting when selected', async () => {
+        const wrapper = mount(QChip, {
+          props: {
+            selected: true
+          }
+        })
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('click')
+        expect(eventList.click).toHaveLength(1)
+
+        const [ evt ] = eventList.click[ 0 ]
+        expect(evt).toBeInstanceOf(Event)
+      })
+
+      test('is NOT emitting when not clickable or removable', async () => {
+        const wrapper = mount(QChip)
+
+        await wrapper.trigger('click')
+
+        const eventList = wrapper.emitted()
+        expect(eventList).not.toHaveProperty('click')
+      })
+
+      test('is NOT emitting when disable + clickable', async () => {
+        const wrapper = mount(QChip, {
           props: {
             clickable: true,
-            onClick: fn
+            disable: true
           }
         })
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        await wrapper.trigger('click')
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        const eventList = wrapper.emitted()
+        expect(eventList).not.toHaveProperty('click')
       })
 
-      test('should not emit "click" event when "clickable" prop is false', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
+      test('is NOT emitting when disable + selected', async () => {
+        const wrapper = mount(QChip, {
           props: {
-            clickable: false,
-            onClick: fn
+            selected: true,
+            disable: true
           }
         })
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        await wrapper.trigger('click')
 
-        expect(fn).not.toHaveBeenCalled()
+        const eventList = wrapper.emitted()
+        expect(eventList).not.toHaveProperty('click')
       })
     })
 
-    describe('[(event): update:selected]', () => {
-      test('should update selected value when called', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
+    describe('[(event)update:selected]', () => {
+      test('is defined correctly', () => {
+        expect(
+          QChip.emits?.includes('update:selected')
+          ^ (QChip.props?.[ 'onUpdate:selected' ] !== void 0)
+        ).toBe(1)
+      })
+
+      test('is emitting', async () => {
+        const wrapper = mount(QChip, {
           props: {
             selected: false,
-            'onUpdate:selected': fn
+            'onUpdate:selected': val => {
+              wrapper.setProps({ selected: val })
+            }
           }
         })
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        await wrapper.trigger('click')
+        await flushPromises()
 
-        expect(
-          wrapper.find('.q-chip')
-            .exists()
-        ).toBe(true)
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('update:selected')
+        expect(eventList[ 'update:selected' ]).toHaveLength(1)
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        const [ state ] = eventList[ 'update:selected' ][ 0 ]
+        expect(state).toBeTypeOf('boolean')
       })
 
-      test('should not emit update:selected event when "selected" prop is not set', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
+      test('is NOT emitting when disable', async () => {
+        const wrapper = mount(QChip, {
           props: {
-            selected: undefined,
-            'onUpdate:selected': fn
+            disable: true,
+            selected: false,
+            'onUpdate:selected': val => {
+              wrapper.setProps({ selected: val })
+            }
           }
         })
 
-        wrapper.get('.q-chip')
-          .trigger('click')
+        await wrapper.trigger('click')
+        await flushPromises()
 
-        expect(
-          wrapper.find('.q-chip')
-            .exists()
-        ).toBe(true)
-
-        expect(fn).not.toHaveBeenCalled()
+        const eventList = wrapper.emitted()
+        expect(eventList).not.toHaveProperty('update:selected')
       })
     })
 
     describe('[(event)remove]', () => {
-      test('should emit remove event when clicked and "removable" prop is true', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
+      test('is defined correctly', () => {
+        expect(
+          QChip.emits?.includes('remove')
+          ^ (QChip.props?.onRemove !== void 0)
+        ).toBe(1)
+      })
+
+      test('is emitting', async () => {
+        const wrapper = mount(QChip, {
           props: {
-            removable: true,
-            onRemove: fn
+            removable: true
           }
         })
 
-        wrapper.get('.q-chip')
-          .get('.q-icon.q-chip__icon--remove')
+        await wrapper.get('.q-chip__icon--remove')
           .trigger('click')
 
-        expect(fn).toHaveBeenCalledTimes(1)
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('remove')
+        expect(eventList.remove).toHaveLength(1)
+
+        expect(eventList.remove[ 0 ]).toHaveLength(0)
+      })
+    })
+
+    describe('[(event)update:model-value]', () => {
+      test('is defined correctly', () => {
+        expect(
+          QChip.emits?.includes('update:modelValue')
+          ^ (QChip.props?.[ 'onUpdate:modelValue' ] !== void 0)
+        ).toBe(1)
       })
 
-      test('should not emit remove event when "removable" prop is false', () => {
-        const fn = vi.fn()
-        const wrapper = mountQChip({
+      test('is emitting', async () => {
+        const wrapper = mount(QChip, {
           props: {
-            removable: false,
-            onRemove: fn
+            removable: true,
+            modelValue: true,
+            'onUpdate:modelValue': val => {
+              wrapper.setProps({ modelValue: val })
+            }
           }
         })
 
-        wrapper.get('.q-chip')
+        await wrapper.get('.q-chip__icon--remove')
           .trigger('click')
 
-        expect(
-          wrapper.find('.q-chip')
-            .exists()
-        ).toBe(true)
+        const eventList = wrapper.emitted()
+        expect(eventList).toHaveProperty('update:modelValue')
+        expect(eventList[ 'update:modelValue' ]).toHaveLength(1)
 
-        expect(fn).not.toHaveBeenCalled()
+        const [ value ] = eventList[ 'update:modelValue' ][ 0 ]
+        expect(value).toBe(false)
       })
     })
   })