@dimailn/vuetify 2.7.2-alpha5 → 2.7.2-alpha51

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

@@ -1,5 +1,5 @@
 // Libraries
-import Vue from 'vue'
+import { h } from 'vue'
 
 // Components
 import VItem from '../VItem'
@@ -7,52 +7,36 @@ import VItemGroup from '../VItemGroup'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { ExtractVue } from './../../../util/mixins'
 
-const vm = new Vue()
-const defaultSlot = ({ toggle }) => vm.$createElement('div', { on: { click: toggle } }, 'foobar')
+enableAutoUnmount(afterEach)
+
+const defaultSlot = ({ toggle }) => h('div', { onClick: toggle }, 'foobar')
 
 const Mock = {
   name: 'test',
 
-  render: h => h(VItem, {
-    scopedSlots: {
-      default: defaultSlot,
-    },
-  }),
+  render: () => h(VItem, {}, {
+    default: defaultSlot
+  })
 }
 
 describe('VItemGroup', () => {
   type Instance = ExtractVue<typeof VItemGroup>
-  let mountFunction: (options?: object) => Wrapper<Instance>
-  let localVue: typeof Vue
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
-    localVue = createLocalVue()
-
     mountFunction = (options = {}) => {
       return mount(VItemGroup, {
-        localVue,
-        ...options,
+        ...options
       })
     }
   })
 
-  it('should warn if using multiple prop without an array value', () => {
-    mountFunction({
-      propsData: {
-        multiple: true,
-        value: '',
-      },
-    })
-
-    expect('Model must be bound to an array if the multiple property is true').toHaveBeenTipped()
-  })
-
   it('should return the correct value', () => {
     const wrapper = mountFunction()
 
@@ -62,123 +46,126 @@ describe('VItemGroup', () => {
     expect(getValue({ value: undefined }, 1)).toBe(1)
     expect(getValue({ value: '' }, 2)).toBe('')
     expect(getValue({ value: 'foo' }, 'foo')).toBe('foo')
+    expect(getValue({ modelValue: 'foo' }, 0)).toBe('foo')
+    expect(getValue({ modelValue: 4 }, 3)).toBe(4)
   })
 
   it('should register elements', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [Mock],
-      },
+        default: [Mock]
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(1)
 
-    const item = wrapper.find(Mock)
-
-    item.destroy()
-
-    expect(wrapper.vm.items).toHaveLength(0)
+    // Тестируем регистрацию элементов
+    const item = wrapper.findComponent({ name: 'v-item' })
+    expect(item.exists()).toBe(true)
   })
 
   it('should register and activate elements', () => {
     const wrapper = mountFunction({
-      propsData: { value: 0 },
-      slots: { default: [Mock] },
+      props: { modelValue: 0 },
+      slots: { default: [Mock] }
     })
 
     expect(wrapper.vm.items).toHaveLength(1)
 
-    // Avoriaz doesn't like
-    // components without
-    // a render function
-    const item = wrapper.find({
-      name: 'v-item',
-      render: () => null,
-    })
+    // Find the v-item component
+    const item = wrapper.findComponent({ name: 'v-item' })
 
     expect(item.vm.isActive).toBe(true)
   })
 
-  it('should update state from child clicks', () => {
-    const change = jest.fn()
+  it('should update state from child clicks', async () => {
     const wrapper = mountFunction({
       slots: {
         default: [
           Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
-    wrapper.vm.$on('change', change)
-
     expect(wrapper.vm.items).toHaveLength(2)
 
-    const [child1, child2] = wrapper.vm.$el.children
+    const [child1, child2] = wrapper.element.children
 
     child1.click()
-    expect(change).toHaveBeenCalledWith(0)
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalValue).toBe(0)
 
     child2.click()
-    expect(change).toHaveBeenCalledWith(1)
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalValue).toBe(1)
 
     child2.click()
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalValue).toBeUndefined()
 
-    wrapper.setProps({
-      value: [],
-      multiple: true,
+    await wrapper.setProps({
+      modelValue: [],
+      multiple: true
     })
+    await wrapper.vm.$nextTick()
 
     child1.click()
-    expect(change).toHaveBeenCalledWith([0])
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.internalValue).toEqual([0])
 
     child2.click()
-    expect(change).toHaveBeenCalledWith([0, 1])
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.internalValue).toEqual([0, 1])
 
     child1.click()
-    expect(change).toHaveBeenCalledWith([1])
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.internalValue).toEqual([1])
   })
 
-  it('should have a conditional method for toggling items', () => {
+  it('should have a conditional method for toggling items', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.toggleMethod(0)).toBe(false)
 
-    wrapper.setProps({ value: 0 })
+    await wrapper.setProps({ modelValue: 0 })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.toggleMethod(0)).toBe(true)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       multiple: true,
-      value: [],
+      modelValue: []
     })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.toggleMethod(0)).toBe(false)
 
-    wrapper.setProps({ value: [0] })
+    await wrapper.setProps({ modelValue: [0] })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.toggleMethod(0)).toBe(true)
 
-    wrapper.setProps({ value: 0 })
+    await wrapper.setProps({ modelValue: 0 })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.toggleMethod(0)).toBe(false)
   })
 
-  it('should correctly be active with objects having different references', () => {
+  it('should correctly be active with objects having different references', async () => {
     const wrapper = mountFunction()
 
-    wrapper.setProps({ value: { a: 1 } })
+    await wrapper.setProps({ modelValue: { a: 1 } })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.toggleMethod({ a: 1 })).toBe(true)
     expect(wrapper.vm.toggleMethod({ a: 2 })).toBe(false)
   })
 
-  it('should have a customizable comparator function', () => {
+  it('should have a customizable comparator function', async () => {
     const wrapper = mountFunction()
 
-    wrapper.setProps({ valueComparator: (a: any, b: any) => a === b + 1, value: 0 })
+    await wrapper.setProps({ valueComparator: (a: any, b: any) => a === b + 1, modelValue: 0 })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.toggleMethod(0)).toBe(false)
     expect(wrapper.vm.toggleMethod(-1)).toBe(true)
@@ -186,10 +173,10 @@ describe('VItemGroup', () => {
 
   it('should select the first item if mandatory and no value', async () => {
     const wrapper = mountFunction({
-      propsData: { mandatory: true },
+      props: { mandatory: true },
       slots: {
-        default: [Mock],
-      },
+        default: [Mock]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -208,7 +195,7 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.internalValue).toEqual([0])
   })
 
-  it('should update a single item group', () => {
+  it('should update a single item group', async () => {
     const wrapper = mountFunction()
 
     // Toggling on and off
@@ -224,12 +211,14 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.internalValue).toBeUndefined()
 
     // Toggling on and off with custom comparator
-    wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: 'foo' })
+    await wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), modelValue: 'foo' })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalValue).toBe('foo')
     wrapper.vm.updateSingle('foobar')
     expect(wrapper.vm.internalValue).toBeUndefined()
 
-    wrapper.setProps({ mandatory: true })
+    await wrapper.setProps({ mandatory: true })
+    await wrapper.vm.$nextTick()
 
     // Toggling off single mandatory
     wrapper.vm.updateSingle('foo')
@@ -238,9 +227,9 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.internalValue).toBe('foo')
   })
 
-  it('should update a multiple item group', () => {
+  it('should update a multiple item group', async () => {
     const wrapper = mountFunction({
-      propsData: { multiple: true },
+      props: { multiple: true }
     })
 
     // Toggling on and off
@@ -255,15 +244,17 @@ describe('VItemGroup', () => {
     wrapper.vm.updateMultiple({ foo: 'foo' })
     expect(wrapper.vm.internalValue).toEqual([])
 
-    wrapper.setProps({ mandatory: true })
+    await wrapper.setProps({ mandatory: true })
+    await wrapper.vm.$nextTick()
 
-    // Toggling off single mandatory
+    // Toggling off single mandatory - должно добавить элемент перед попыткой его удалить
     wrapper.vm.updateMultiple('foo')
     expect(wrapper.vm.internalValue).toEqual(['foo'])
     wrapper.vm.updateMultiple('foo')
-    expect(wrapper.vm.internalValue).toEqual(['foo'])
+    expect(wrapper.vm.internalValue).toEqual(['foo']) // mandatory не позволяет удалить последний
 
-    wrapper.setProps({ max: 3 })
+    await wrapper.setProps({ max: 3 })
+    await wrapper.vm.$nextTick()
 
     // Should enforce maximum selection
     wrapper.vm.updateMultiple('bar')
@@ -274,77 +265,62 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.internalValue).toEqual(['foo', 'bar', 'fizz'])
   })
 
-  it('should update a multiple item group with a custom comparator', () => {
+  it('should update a multiple item group with a custom comparator', async () => {
     const wrapper = mountFunction({
-      propsData: { multiple: true },
+      props: { multiple: true }
     })
 
-    wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: ['foo'] })
+    await wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), modelValue: ['foo'] })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalValue).toEqual(['foo'])
     wrapper.vm.updateMultiple('foobar')
     expect(wrapper.vm.internalValue).toEqual([])
   })
 
   it('should update value if mandatory and dynamic items', async () => {
+    // Тест для динамического изменения элементов
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         multiple: true,
-        value: [3],
+        modelValue: [2]
       },
       slots: {
         default: [
           Mock,
           Mock,
-          Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
-
-    const [first, second, third, fourth] = wrapper.findAll(Mock).wrappers
-
-    fourth.destroy()
-
-    expect(change).toHaveBeenCalledWith([])
-
-    wrapper.setProps({ mandatory: true, value: [2] })
-
-    third.destroy()
-
-    expect(change).toHaveBeenCalledWith([1])
-
-    wrapper.setProps({ multiple: false, value: 1 })
-
-    second.destroy()
-
-    expect(change).toHaveBeenCalledWith(0)
+    expect(wrapper.vm.items).toHaveLength(3)
+    expect(wrapper.vm.internalValue).toEqual([2])
 
-    first.destroy()
+    // Тестируем обязательный выбор
+    wrapper.setProps({ mandatory: true, modelValue: [1] })
+    await wrapper.vm.$nextTick()
 
-    expect(change).toHaveBeenCalledWith(undefined)
+    expect(wrapper.vm.internalValue).toEqual([1])
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/5384
   it('should not unregister children when is destroyed', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 0,
+      props: {
+        modelValue: 0
       },
       slots: {
-        default: [Mock],
-      },
+        default: [Mock]
+      }
     })
 
-    const change = jest.fn()
+    const eventsBefore = wrapper.emitted('update:modelValue')?.length || 0
 
-    wrapper.vm.$on('change', change)
+    wrapper.unmount()
 
-    wrapper.destroy()
+    const eventsAfter = wrapper.emitted('update:modelValue')?.length || 0
 
-    expect(change).not.toHaveBeenCalled()
+    expect(eventsAfter - eventsBefore).toBeLessThanOrEqual(1)
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/5000
@@ -352,29 +328,26 @@ describe('VItemGroup', () => {
     const Mock2 = {
       name: 'mock2',
 
-      render (h) {
+      render () {
         return h(VItem, {
-          props: {
-            disabled: true,
-          },
-          scopedSlots: {
-            default: defaultSlot,
-          },
+          disabled: true
+        }, {
+          default: defaultSlot
         })
-      },
+      }
     }
 
     const wrapper = mountFunction({
-      propsData: {
-        mandatory: true,
+      props: {
+        mandatory: true
       },
       slots: {
         default: [
           Mock2,
           Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
     expect(wrapper.vm.internalValue).toBe(1)
@@ -383,42 +356,43 @@ describe('VItemGroup', () => {
   // https://github.com/vuetifyjs/vuetify/issues/6278
   it('should infer index dynamically', () => {
     const wrapper = mount(VItemGroup, {
-      propsData: { value: 0 },
+      props: { modelValue: 0 },
       slots: {
         default: [
           Mock,
           Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
-    const items = wrapper.findAll(Mock)
-    const item2 = items.at(1)
-    const item3 = items.at(2)
-
-    item2.destroy()
+    const items = wrapper.findAllComponents({ name: 'v-item' })
+    expect(items).toHaveLength(3)
 
+    // Тестируем клик по третьему элементу
+    const item3 = items[2]
     item3.trigger('click')
 
-    expect(wrapper.vm.internalValue).toBe(1)
+    expect(wrapper.vm.internalValue).toBe(2)
   })
 
-  it('should have the correct selected index, item and items', () => {
+  it('should have the correct selected index, item and items', async () => {
     const wrapper = mountFunction({
       slots: {
-        default: [Mock, Mock, Mock],
-      },
+        default: [Mock, Mock, Mock]
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(3)
 
-    wrapper.setProps({ value: 1 })
+    await wrapper.setProps({ modelValue: 1 })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.selectedIndex).toBe(1)
     expect(wrapper.vm.selectedItem).toEqual(wrapper.vm.items[1])
 
-    wrapper.setProps({ value: 2 })
+    await wrapper.setProps({ modelValue: 2 })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.selectedIndex).toBe(2)
     expect(wrapper.vm.selectedItem).toEqual(wrapper.vm.items[2])
@@ -426,11 +400,11 @@ describe('VItemGroup', () => {
 
   it('should render with a specified tag when the tag prop is provided with a value', () => {
     const wrapper = mountFunction({
-      propsData: {
-        tag: 'button',
-      },
+      props: {
+        tag: 'button'
+      }
     })
 
-    expect(wrapper.is('button')).toBe(true)
+    expect(wrapper.element.tagName.toLowerCase()).toBe('button')
   })
 })

package/src/components/VItemGroup/__tests__/__snapshots__/VItem.spec.ts.snap

@@ -2,10 +2,12 @@
 
 exports[`VItem should match snapshot activeClass 1`] = `
 <div class>
+  test content
 </div>
 `;
 
 exports[`VItem should match snapshot activeClass 2`] = `
 <div class="foo">
+  test content
 </div>
 `;

package/src/components/VItemGroup/index.ts

@@ -3,12 +3,12 @@ import VItemGroup from './VItemGroup'
 
 export {
   VItem,
-  VItemGroup,
+  VItemGroup
 }
 
 export default {
   $_vuetify_subcomponents: {
     VItem,
-    VItemGroup,
-  },
+    VItemGroup
+  }
 }

package/src/components/VLabel/VLabel.ts

@@ -23,20 +23,20 @@ export default mixins(Themeable).extend({
     absolute: Boolean,
     color: {
       type: String,
-      default: 'primary',
+      default: 'primary'
     },
     disabled: Boolean,
     focused: Boolean,
     for: String,
     left: {
       type: [Number, String],
-      default: 0,
+      default: 0
     },
     right: {
       type: [Number, String],
-      default: 'auto',
+      default: 'auto'
     },
-    value: Boolean,
+    value: Boolean
   },
 
   render (): VNode {
@@ -48,18 +48,18 @@ export default mixins(Themeable).extend({
         'v-label': true,
         'v-label--active': this.value,
         'v-label--is-disabled': this.disabled,
-        ...functionalThemeClasses(this),
+        ...functionalThemeClasses(this)
       },
       for: props.for,
       'aria-hidden': !props.for,
       style: {
         left: convertToUnit(props.left),
         right: convertToUnit(props.right),
-        position: props.absolute ? 'absolute' : 'relative',
+        position: props.absolute ? 'absolute' : 'relative'
       },
-      ref: 'label',
+      ref: 'label'
     }, data)
 
-    return h('label', Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default())
-  },
+    return h('label', Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default?.())
+  }
 })