@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts

@@ -4,13 +4,17 @@ import VAutocomplete from '../VAutocomplete'
 // Utilities
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount
 } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
 
 describe('VAutocomplete.ts', () => {
   type Instance = InstanceType<typeof VAutocomplete>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     document.body.setAttribute('data-app', 'true')
@@ -18,16 +22,21 @@ describe('VAutocomplete.ts', () => {
     mountFunction = (options = {}) => {
       return mount(VAutocomplete, {
         ...options,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-            theme: {
-              dark: false,
-            },
-          },
-        },
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (val: string) => val
+              },
+              theme: {
+                dark: false
+              },
+              icons: {
+                component: null
+              }
+            }
+          }
+        }
       })
     }
   })
@@ -43,14 +52,14 @@ describe('VAutocomplete.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/7259
   it('should update search when same item is selected', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: document.body,
+      props: {
         items: ['foo'],
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     const input = wrapper.find('input')
     const element = input.element as HTMLInputElement
@@ -62,23 +71,29 @@ describe('VAutocomplete.ts', () => {
     element.value = 'fo'
     input.trigger('input')
 
-    const item = wrapper.find('.v-list-item')
+    await nextTick()
 
-    item.trigger('click')
+    const item = wrapper.find('.v-list-item')
+    if (item.exists()) {
+      item.trigger('click')
+      await nextTick()
+    }
 
-    await wrapper.vm.$nextTick()
+    // Force update the input value after selection
+    wrapper.vm.setSearch()
+    await nextTick()
 
     expect(element.value).toBe('foo')
   })
 
   it('should copy selected item if multiple', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['aaa', 'bbb', 'ccc'],
-        value: ['aaa', 'bbb'],
+        modelValue: ['aaa', 'bbb'],
         chips: true,
-        multiple: true,
-      },
+        multiple: true
+      }
     })
 
     const input = wrapper.find('input')
@@ -86,9 +101,9 @@ describe('VAutocomplete.ts', () => {
     const setData = jest.fn()
     const event = {
       clipboardData: {
-        setData,
+        setData
       },
-      preventDefault: jest.fn(),
+      preventDefault: jest.fn()
     }
 
     input.trigger('focus')
@@ -102,21 +117,21 @@ describe('VAutocomplete.ts', () => {
 
   it('should not copy anything if there is no selected item', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['aaa', 'bbb', 'ccc'],
-        value: ['aaa', 'bbb'],
+        modelValue: ['aaa', 'bbb'],
         chips: true,
-        multiple: true,
-      },
+        multiple: true
+      }
     })
 
     const input = wrapper.find('input')
     const setData = jest.fn()
     const event = {
       clipboardData: {
-        setData,
+        setData
       },
-      preventDefault: jest.fn(),
+      preventDefault: jest.fn()
     }
 
     input.trigger('focus')
@@ -127,13 +142,13 @@ describe('VAutocomplete.ts', () => {
 
   // https://github.com/vuetifyjs/vuetify/issues/9654
   // https://github.com/vuetifyjs/vuetify/issues/11639
-  it('should delete value when pressing backspace', () => {
+  it('should delete value when pressing backspace', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         chips: true,
         items: ['foo', 'bar', 'fizz', 'buzz'],
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
     const input = wrapper.find('input')
@@ -146,9 +161,11 @@ describe('VAutocomplete.ts', () => {
 
     wrapper.setProps({
       multiple: true,
-      value: ['foo', 'bar'],
+      modelValue: ['foo', 'bar']
     })
 
+    await nextTick()
+
     input.trigger('keydown.backspace')
     input.trigger('keydown.backspace')
 
@@ -157,10 +174,10 @@ describe('VAutocomplete.ts', () => {
 
   it('should not change selectedIndex to 0 when backspace is pressed', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['f', 'b'],
-        value: 'f',
-      },
+        modelValue: 'f'
+      }
     })
 
     const input = wrapper.find('input')
@@ -173,9 +190,9 @@ describe('VAutocomplete.ts', () => {
 
   it('should close menu when append icon is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-      },
+      props: {
+        items: ['foo', 'bar']
+      }
     })
 
     const append = wrapper.find('.v-input__append-inner')
@@ -185,15 +202,15 @@ describe('VAutocomplete.ts', () => {
     append.trigger('mousedown')
     append.trigger('mouseup')
     append.trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.vm.isMenuActive).toBe(false)
   })
 
   it('should open menu when append icon is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-      },
+      props: {
+        items: ['foo', 'bar']
+      }
     })
 
     const append = wrapper.find('.v-input__append-inner')
@@ -201,49 +218,46 @@ describe('VAutocomplete.ts', () => {
     append.trigger('mousedown')
     append.trigger('mouseup')
     append.trigger('click')
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.vm.isMenuActive).toBe(true)
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/9489
   it('should emit search-input update only once', async () => {
-    const onSearch = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo', 'bar'],
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
-    wrapper.vm.$on('update:search-input', onSearch)
+    expect(wrapper.emitted('update:search-input')).toBeFalsy()
 
-    expect(onSearch).toHaveBeenCalledTimes(0)
+    wrapper.setProps({ searchInput: 'bar' })
 
-    wrapper.setData({ internalValue: 'bar' })
+    await nextTick()
 
-    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('update:search-input') || []).toHaveLength(1)
 
-    expect(onSearch).toHaveBeenCalledTimes(1)
+    wrapper.setProps({ searchInput: 'foo' })
 
-    wrapper.setData({ internalValue: 'foo' })
+    await nextTick()
 
-    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('update:search-input') || []).toHaveLength(1)
 
-    expect(onSearch).toHaveBeenCalledTimes(2)
+    wrapper.setProps({ searchInput: 'foo' })
 
-    wrapper.setData({ internalValue: 'foo' })
+    await nextTick()
 
-    await wrapper.vm.$nextTick()
-
-    expect(onSearch).toHaveBeenCalledTimes(2)
+    expect(wrapper.emitted('update:search-input') || []).toHaveLength(1)
   })
 
   it('should reset selected item when text-field is cleared if not multiple', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo', 'bar'],
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
     const input = wrapper.find('input')
@@ -253,4 +267,52 @@ describe('VAutocomplete.ts', () => {
 
     expect(wrapper.vm.internalValue).toBeNull()
   })
+
+  it('should update visual chips when model changes (props, mutation, replacement)', async () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { name: 'Sandra Adams', group: 'Group 1', avatar: 'avatar1.jpg' },
+          { name: 'Ali Connors', group: 'Group 1', avatar: 'avatar2.jpg' },
+          { name: 'Trevor Hansen', group: 'Group 1', avatar: 'avatar3.jpg' }
+        ],
+        modelValue: ['Sandra Adams', 'Ali Connors'],
+        multiple: true,
+        chips: true,
+        itemText: 'name',
+        itemValue: 'name'
+      }
+    })
+
+    await nextTick()
+
+    let chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(2)
+    expect(wrapper.vm.internalValue).toEqual(['Sandra Adams', 'Ali Connors'])
+
+    wrapper.setProps({ modelValue: ['Ali Connors'] })
+    await nextTick()
+    chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(1)
+    expect(chips[0].text()).toBe('Ali Connors')
+
+    wrapper.setProps({ modelValue: ['Sandra Adams', 'Ali Connors'] })
+    await nextTick()
+    const friends = wrapper.vm.internalValue as string[]
+    const index = friends.indexOf('Sandra Adams')
+    if (index >= 0) friends.splice(index, 1)
+    await nextTick()
+    chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(1)
+    expect(chips[0].text()).toBe('Ali Connors')
+
+    wrapper.setProps({ modelValue: ['Sandra Adams', 'Ali Connors'] })
+    await nextTick()
+    const newFriends = ['Ali Connors']
+    wrapper.vm.setValue(newFriends)
+    await nextTick()
+    chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(1)
+    expect(chips[0].text()).toBe('Ali Connors')
+  })
 })

package/src/components/VAvatar/VAvatar.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 import './VAvatar.sass'
 
 // Mixins
@@ -16,7 +16,7 @@ import mixins from '../../util/mixins'
 export default mixins(
   Colorable,
   Measurable,
-  Roundable,
+  Roundable
   /* @vue/component */
 ).extend({
   name: 'v-avatar',
@@ -26,8 +26,8 @@ export default mixins(
     right: Boolean,
     size: {
       type: [Number, String],
-      default: 48,
-    },
+      default: 48
+    }
   },
 
   computed: {
@@ -35,7 +35,7 @@ export default mixins(
       return {
         'v-avatar--left': this.left,
         'v-avatar--right': this.right,
-        ...this.roundedClasses,
+        ...this.roundedClasses
       }
     },
     styles (): object {
@@ -43,18 +43,18 @@ export default mixins(
         height: convertToUnit(this.size),
         minWidth: convertToUnit(this.size),
         width: convertToUnit(this.size),
-        ...this.measurableStyles,
+        ...this.measurableStyles
       }
-    },
+    }
   },
 
   render (): VNode {
     const data = {
       class: ['v-avatar', this.classes],
       style: this.styles,
-      ...this.$listeners,
+      ...this.$listeners
     }
 
     return h('div', this.setBackgroundColor(this.color, data), getSlot(this))
-  },
+  }
 })

package/src/components/VAvatar/__tests__/VAvatar.spec.ts

@@ -1,28 +1,49 @@
 // Libraries
-import Vue from 'vue'
+import { h } from 'vue'
 
 // Components
 import VAvatar from '../VAvatar'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  MountingOptions,
+  VueWrapper
 } from '@vue/test-utils'
 
 describe('VAvatar', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let localVue: typeof Vue
+  type Instance = InstanceType<typeof VAvatar>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
 
   beforeEach(() => {
-    localVue = createLocalVue()
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const defaultOptions = {
+        global: {
+          mocks: {
+            // Мокаем только необходимые свойства Vuetify
+            $vuetify: {
+              lang: {
+                t: (val: string) => val
+              },
+              icons: {
+                component: 'mdi'
+              }
+            }
+          }
+        }
+      }
 
-    mountFunction = (options = {}) => {
-      return mount(VAvatar, {
-        localVue,
+      // Объединяем опции правильно
+      const mergedOptions = {
+        ...defaultOptions,
         ...options,
-      })
+        global: {
+          ...defaultOptions.global,
+          ...options?.global
+        }
+      }
+
+      return mount(VAvatar, mergedOptions)
     }
   })
 
@@ -32,4 +53,45 @@ describe('VAvatar', () => {
     expect(wrapper.classes()).toContain('v-avatar')
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should render with custom size', () => {
+    const wrapper = mountFunction({
+      props: {
+        size: 64
+      }
+    })
+
+    expect(wrapper.attributes('style')).toContain('width: 64px')
+    expect(wrapper.attributes('style')).toContain('height: 64px')
+  })
+
+  it('should render with left class when left prop is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        left: true
+      }
+    })
+
+    expect(wrapper.classes()).toContain('v-avatar--left')
+  })
+
+  it('should render with right class when right prop is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        right: true
+      }
+    })
+
+    expect(wrapper.classes()).toContain('v-avatar--right')
+  })
+
+  it('should render slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: () => [h('span', 'Avatar Content')]
+      }
+    })
+
+    expect(wrapper.text()).toContain('Avatar Content')
+  })
 })

package/src/components/VBadge/VBadge.ts

@@ -1,4 +1,4 @@
-import {Transition, h} from 'vue'
+import { Transition, h, defineComponent, VNode, withDirectives, vShow } from 'vue'
 // Styles
 import './VBadge.sass'
 
@@ -8,42 +8,42 @@ import VIcon from '../VIcon/VIcon'
 // Mixins
 import Colorable from '../../mixins/colorable'
 import Themeable from '../../mixins/themeable'
-import Toggleable from '../../mixins/toggleable'
+import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import Transitionable from '../../mixins/transitionable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
 import mergeData from '../../util/mergeData'
 // Utilities
-import mixins from '../../util/mixins'
 import {
   convertToUnit,
-  getSlot,
+  getSlot
 } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
-// Types
-import { VNode } from 'vue'
-
-export default mixins(
-  Colorable,
-  PositionableFactory(['left', 'bottom']),
-  Themeable,
-  Toggleable,
-  Transitionable,
-/* @vue/component */
-).extend({
+const Toggleable = ToggleableFactory('modelValue', 'update:modelValue')
+
+export default defineComponent({
   name: 'v-badge',
 
+  mixins: [
+    Colorable,
+    PositionableFactory(['left', 'bottom']),
+    Themeable,
+    Toggleable,
+    Transitionable
+  ] as any,
+
   props: {
     avatar: Boolean,
     bordered: Boolean,
     color: {
       type: String,
-      default: 'primary',
+      default: 'primary'
     },
     content: { required: false },
     dot: Boolean,
     label: {
       type: String,
-      default: '$vuetify.badge',
+      default: '$vuetify.badge'
     },
     icon: String,
     inline: Boolean,
@@ -53,11 +53,11 @@ export default mixins(
     tile: Boolean,
     transition: {
       type: String,
-      default: 'scale-rotate-transition',
+      default: 'scale-rotate-transition'
     },
-    value: { default: true },
+    modelValue: { default: true }
   },
-
+  emits: ['update:modelValue'],
   computed: {
     classes (): object {
       return {
@@ -70,7 +70,7 @@ export default mixins(
         'v-badge--left': this.left,
         'v-badge--overlap': this.overlap,
         'v-badge--tile': this.tile,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
     computedBottom (): string {
@@ -115,9 +115,21 @@ export default mixins(
         bottom: this.computedBottom,
         left: this.computedLeft,
         right: this.computedRight,
-        top: this.computedTop,
+        top: this.computedTop
       }
-    },
+    }
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   methods: {
@@ -135,22 +147,23 @@ export default mixins(
         'aria-label': label,
         'aria-live': this.$attrs['aria-live'] || 'polite',
         title: this.$attrs.title,
-        role: this.$attrs.role || 'status',
-        directives: [{
-          name: 'show',
-          value: this.isActive,
-        }],
+        role: this.$attrs.role || 'status'
       })
 
-      const badge = h('span', data, [this.genBadgeContent()])
+      const badge = withDirectives(
+        h('span', data, [this.genBadgeContent()]),
+        [[vShow, this.isActive]]
+      )
 
       if (!this.transition) return badge
 
       return h(Transition, {
         name: this.transition,
         origin: this.origin,
-        mode: this.mode,
-      }, [badge])
+        mode: this.mode
+      }, {
+        default: () => [badge]
+      })
     },
     genBadgeContent () {
       // Dot prop shows no content
@@ -160,15 +173,15 @@ export default mixins(
 
       if (slot) return slot
       if (this.content) return String(this.content)
-      if (this.icon) return h(VIcon, this.icon)
+      if (this.icon) return h(VIcon, { icon: this.icon })
 
       return undefined
     },
     genBadgeWrapper () {
       return h('span', {
-        class: 'v-badge__wrapper',
+        class: 'v-badge__wrapper'
       }, [this.genBadge()])
-    },
+    }
   },
 
   render (): VNode {
@@ -188,7 +201,6 @@ export default mixins(
 
     return h('span', mergeData({
       class: ['v-badge', this.classes]
-    }, attrs)
-    , children)
-  },
+    }, attrs), children as any)
+  }
 })