@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

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

@@ -6,29 +6,38 @@ import {
   mount,
   Wrapper,
   MountOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VAutocomplete.ts', () => {
   type Instance = InstanceType<typeof VAutocomplete>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     document.body.setAttribute('data-app', 'true')
 
     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,10 +52,10 @@ 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',
       },
     })
 
@@ -62,10 +71,16 @@ describe('VAutocomplete.ts', () => {
     element.value = 'fo'
     input.trigger('input')
 
-    const item = wrapper.find('.v-list-item')
+    await wrapper.vm.$nextTick()
 
-    item.trigger('click')
+    const item = wrapper.find('.v-list-item')
+    if (item.exists()) {
+      item.trigger('click')
+      await wrapper.vm.$nextTick()
+    }
 
+    // Force update the input value after selection
+    wrapper.vm.setSearch()
     await wrapper.vm.$nextTick()
 
     expect(element.value).toBe('foo')
@@ -73,9 +88,9 @@ describe('VAutocomplete.ts', () => {
 
   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,
       },
@@ -102,9 +117,9 @@ 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,
       },
@@ -127,12 +142,12 @@ 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',
       },
     })
 
@@ -146,9 +161,11 @@ describe('VAutocomplete.ts', () => {
 
     wrapper.setProps({
       multiple: true,
-      value: ['foo', 'bar'],
+      modelValue: ['foo', 'bar'],
     })
 
+    await wrapper.vm.$nextTick()
+
     input.trigger('keydown.backspace')
     input.trigger('keydown.backspace')
 
@@ -157,9 +174,9 @@ 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',
       },
     })
 
@@ -173,7 +190,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should close menu when append icon is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo', 'bar'],
       },
     })
@@ -191,7 +208,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should open menu when append icon is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo', 'bar'],
       },
     })
@@ -207,42 +224,39 @@ describe('VAutocomplete.ts', () => {
 
   // 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(onSearch).toHaveBeenCalledTimes(0)
+    expect(wrapper.emitted('update:search-input')).toBeFalsy()
 
     wrapper.setData({ internalValue: 'bar' })
 
     await wrapper.vm.$nextTick()
 
-    expect(onSearch).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('update:search-input')).toHaveLength(1)
 
     wrapper.setData({ internalValue: 'foo' })
 
     await wrapper.vm.$nextTick()
 
-    expect(onSearch).toHaveBeenCalledTimes(2)
+    expect(wrapper.emitted('update:search-input')).toHaveLength(1)
 
     wrapper.setData({ internalValue: 'foo' })
 
     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',
       },
     })
 
@@ -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 wrapper.vm.$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 wrapper.vm.$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 wrapper.vm.$nextTick()
+    const friends = wrapper.vm.internalValue as string[]
+    const index = friends.indexOf('Sandra Adams')
+    if (index >= 0) friends.splice(index, 1)
+    await wrapper.vm.$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 wrapper.vm.$nextTick()
+    const newFriends = ['Ali Connors']
+    wrapper.vm.setValue(newFriends)
+    await wrapper.vm.$nextTick()
+    chips = wrapper.findAll('.v-chip')
+    expect(chips).toHaveLength(1)
+    expect(chips[0].text()).toBe('Ali Connors')
+  })
 })

package/src/components/VBadge/VBadge.ts

@@ -17,6 +17,7 @@ import {
   convertToUnit,
   getSlot,
 } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 const Toggleable = ToggleableFactory('modelValue', 'update:modelValue')
 
@@ -119,6 +120,18 @@ export default defineComponent({
     },
   },
 
+  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: {
     calcPosition (offset: string | number): string {
       return `calc(100% - ${convertToUnit(offset || this.offset)})`

package/src/components/VBanner/VBanner.ts

@@ -17,6 +17,7 @@ import Toggleable from '../../mixins/toggleable'
 // Utilities
 import mixins from '../../util/mixins'
 import { convertToUnit, getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue'
@@ -78,6 +79,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['input', 'update:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     /** @public */
     toggle () {

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

@@ -10,6 +10,7 @@ import {
   mount,
   Wrapper,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 // Types
 import { ExtractVue } from '../../../util/mixins'
@@ -22,16 +23,21 @@ describe('VBanner.ts', () => {
     mountFunction = (options = {}) => {
       return mount(VBanner, {
         ...options,
-        mocks: {
-          $vuetify: {
-            application: {
-              top: 0,
-              bar: 0,
-            },
-            breakpoint: {
-              mobile: true,
-              mobileBreakpoint: 1264,
-              width: 1000,
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                top: 0,
+                bar: 0,
+              },
+              breakpoint: {
+                mobile: true,
+                mobileBreakpoint: 1264,
+                width: 1000,
+              },
+              icons: {
+                component: null,
+              },
             },
           },
         },
@@ -67,7 +73,7 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      propsData: {
+      props: {
         icon: 'mdi-plus',
       },
     })
@@ -79,7 +85,7 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        icon: { render: h => h('span', ['icon']) },
+        icon: () => h('span', ['icon']),
       },
     })
 
@@ -90,7 +96,7 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        actions: { render: h => h('div', [h('button', ['OK']), h('button', ['Cancel'])]) },
+        actions: () => h('div', [h('button', ['OK']), h('button', ['Cancel'])]),
       },
     })
 
@@ -102,19 +108,16 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      propsData: {
+      props: {
         icon: 'mdi-plus',
       },
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('click:icon', fn)
-
     const icon = wrapper.find('.v-banner__icon')
 
-    expect(fn).not.toHaveBeenCalled()
+    expect(wrapper.emitted('click:icon')).toBeFalsy()
     icon.trigger('click')
-    expect(fn).toHaveBeenCalled()
+    expect(wrapper.emitted('click:icon')).toBeTruthy()
   })
 
   it(`should not render icon container if icon property and slot aren't passed`, () => {
@@ -167,16 +170,10 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-      },
-      scopedSlots: {
-        actions (props) {
-          return h('div', {
-            on: {
-              click: props.dismiss,
-            },
-            class: 'test',
-          })
-        },
+        actions: ({ dismiss }) => h('div', {
+          onClick: dismiss,
+          class: 'test',
+        }),
       },
     })
 
@@ -191,9 +188,11 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      mocks: {
-        $vuetify: {
-          breakpoint: new Breakpoint(preset),
+      global: {
+        mocks: {
+          $vuetify: {
+            breakpoint: new Breakpoint(preset),
+          },
         },
       },
     })
@@ -201,16 +200,16 @@ describe('VBanner.ts', () => {
     expect(wrapper.classes('v-banner--is-mobile')).toBeTruthy()
   })
 
-  it('should apply sticky when using the app prop', () => {
+  it('should apply sticky when using the app prop', async () => {
     const wrapper = mountFunction({
-      propsData: { app: true },
+      props: { app: true },
     })
 
     expect(wrapper.vm.isSticky).toBe(true)
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       app: false,
       sticky: true,
     })
@@ -219,7 +218,7 @@ describe('VBanner.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ sticky: false })
+    await wrapper.setProps({ app: false, sticky: false })
 
     expect(wrapper.vm.isSticky).toBe(false)
 

package/src/components/VBanner/__tests__/__snapshots__/VBanner.spec.ts.snap

@@ -114,7 +114,7 @@ exports[`VBanner.ts should render component with icon slot 1`] = `
 `;
 
 exports[`VBanner.ts should render sinle-line component with content 1`] = `
-<div class="v-banner v-sheet theme--light v-banner--is-mobile">
+<div class="v-banner v-sheet theme--light v-banner--is-mobile v-banner--single-line">
   <div class="v-banner__wrapper">
     <div class="v-banner__content">
       <div class="v-banner__text">

package/src/components/VBottomNavigation/VBottomNavigation.ts

@@ -100,6 +100,16 @@ export default mixins(
   },
 
   created () {
+    const breakingProps = [
+      ['inputValue', 'modelValue'],
+      ['onUpdate:input-value', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('active')) {
       breaking('active.sync', 'value or v-model', this)

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

@@ -99,7 +99,7 @@ describe('VBtn.ts', () => {
   it('should use custom active-class', () => {
     const wrapper = mountFunction({
       props: {
-        inputValue: true,
+        modelValue: true,
         activeClass: 'foo',
       },
     })

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

@@ -1,21 +1,49 @@
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
 import VCard from '../VCard'
-import { ExtractVue } from '../../../util/mixins'
 
 describe('VCard.vue', () => {
-  type Instance = ExtractVue<typeof VCard>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VCard>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VCard, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const defaultOptions = {
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              lang: {
+                t: (val: string) => val,
+              },
+              icons: {
+                component: 'mdi',
+              },
+            },
+            $activeClass: 'v-card--active',
+          },
+        },
+        slots: {},
+      }
+
+      // Объединяем опции правильно
+      const mergedOptions = {
+        ...defaultOptions,
         ...options,
-      })
+        slots: {
+          ...defaultOptions.slots,
+          ...options?.slots,
+        },
+        global: {
+          ...defaultOptions.global,
+          ...options?.global,
+        },
+      }
+
+      return mount(VCard, mergedOptions)
     }
   })
 
@@ -27,14 +55,9 @@ describe('VCard.vue', () => {
 
   it('should render loading card', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         loading: true,
       },
-      mocks: {
-        $vuetify: {
-          rtl: false,
-        },
-      },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -42,10 +65,8 @@ describe('VCard.vue', () => {
 
   it('should render card, which is link', () => {
     const wrapper = mountFunction({
-      // https://github.com/vuejs/vue-test-utils/issues/1130
-      sync: false,
-      listeners: {
-        click: () => {},
+      attrs: {
+        onClick: () => {},
       },
     })
 
@@ -54,7 +75,7 @@ describe('VCard.vue', () => {
 
   it('should render card with img', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         img: 'image.jpg',
       },
     })
@@ -64,7 +85,7 @@ describe('VCard.vue', () => {
 
   it('should render a flat card', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         flat: true,
       },
     })
@@ -74,7 +95,7 @@ describe('VCard.vue', () => {
 
   it('should render a raised card', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         raised: true,
       },
     })
@@ -85,9 +106,7 @@ describe('VCard.vue', () => {
   it('should render a card with custom height', async () => {
     const heightpx = '400px'
     const wrapper = mountFunction({
-      // https://github.com/vuejs/vue-test-utils/issues/1130
-      sync: false,
-      propsData: {
+      props: {
         height: heightpx,
       },
     })
@@ -95,10 +114,9 @@ describe('VCard.vue', () => {
     expect(wrapper.element.style.height).toBe(heightpx)
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       height: 401,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.element.style.height).toBe('401px')
   })
 })

package/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap

@@ -37,10 +37,10 @@ exports[`VCard.vue should render component and match snapshot 1`] = `
 exports[`VCard.vue should render loading card 1`] = `
 <div class="v-card v-card--loading v-sheet theme--light">
   <div class="v-card__progress">
-    <div role="progressbar"
+    <div class="v-progress-linear v-progress-linear--absolute v-progress-linear--visible theme--light"
+         role="progressbar"
          aria-valuemin="0"
          aria-valuemax="100"
-         class="v-progress-linear v-progress-linear--absolute v-progress-linear--visible theme--light"
          style="height: 4px;"
     >
       <div class="v-progress-linear__background primary"

package/src/components/VCarousel/VCarousel.ts

@@ -115,6 +115,17 @@ export default defineComponent({
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('hide-controls')) {
       breaking('hide-controls', ':show-arrows="false"', this)