@dimailn/vuetify 2.7.2-alpha23 → 2.7.2-alpha25

package/src/components/VTabs/__tests__/VTab.spec.ts

@@ -4,9 +4,9 @@ import VTab from '../VTab'
 // Utilities
 import {
   mount,
-  RouterLinkStub,
   VueWrapper,
 } from '@vue/test-utils'
+import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
 
 describe('VTab.ts', () => {
   type Instance = InstanceType<typeof VTab>
@@ -38,7 +38,7 @@ describe('VTab.ts', () => {
           },
         },
         stubs: {
-          'router-link': RouterLinkStub,
+          'router-link': Vue3RouterLinkStub,
         },
       },
     })
@@ -63,7 +63,7 @@ describe('VTab.ts', () => {
           $route: { path: '/' },
         },
         stubs: {
-          'router-link': RouterLinkStub,
+          'router-link': Vue3RouterLinkStub,
         },
       },
     })

package/src/components/VTabs/__tests__/VTabsBar.spec.ts

@@ -5,9 +5,9 @@ import VTabsBar from '../VTabsBar'
 // Utilities
 import {
   mount,
-  RouterLinkStub,
   VueWrapper,
 } from '@vue/test-utils'
+import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
 import { h, nextTick } from 'vue'
 
 describe('VTabsBar.ts', () => {
@@ -21,7 +21,7 @@ describe('VTabsBar.ts', () => {
             warnHandler: () => {}, // Подавляем предупреждения Vue
           },
           stubs: {
-            RouterLink: RouterLinkStub,
+            RouterLink: Vue3RouterLinkStub,
           },
           mocks: {
             $vuetify: {

package/src/components/VTooltip/VTooltip.ts

@@ -1,4 +1,4 @@
-import {h, Transition} from 'vue'
+import { h, Transition, vShow, withDirectives, VNode } from 'vue'
 import './VTooltip.sass'
 
 // Mixins
@@ -13,7 +13,6 @@ import { convertToUnit, keyCodes, getSlotType } from '../../util/helpers'
 import { consoleError } from '../../util/console'
 
 // Types
-import { VNode } from 'vue'
 import mixins from '../../util/mixins'
 
 /* @vue/component */
@@ -137,7 +136,7 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
 
   beforeMount () {
     this.$nextTick(() => {
-      this.value && this.callActivate()
+      this.modelValue && this.callActivate()
     })
   },
 
@@ -197,23 +196,24 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
       }, [content])
     },
     genContent () {
-      return h(
-        'div',
-        this.setBackgroundColor(this.color, {
-          class: ['v-tooltip__content', {
-            [this.contentClass]: true,
-            menuable__content__active: this.isActive,
-            'v-tooltip__content--fixed': this.activatorFixed,
-          }],
-          style: this.styles,
-          attrs: this.getScopeIdAttrs(),
-          directives: [{
-            name: 'show',
-            value: this.isContentActive,
-          }],
-          ref: 'content',
-        }),
-        this.getContentSlot()
+      return withDirectives(
+        h(
+          'div',
+          this.setBackgroundColor(this.color, {
+            class: ['v-tooltip__content', {
+              [this.contentClass]: true,
+              menuable__content__active: this.isActive,
+              'v-tooltip__content--fixed': this.activatorFixed,
+            }],
+            style: this.styles,
+            attrs: this.getScopeIdAttrs(),
+            ref: 'content',
+          }),
+          this.getContentSlot()
+        ),
+        [
+          [vShow, this.isContentActive]
+        ]
       )
     },
   },

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

@@ -1,13 +1,16 @@
 import VTooltip from '../VTooltip'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  enableAutoUnmount,
+  VueWrapper,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VTooltip', () => {
   type Instance = InstanceType<typeof VTooltip>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     document.body.setAttribute('data-app', 'true')
@@ -19,15 +22,13 @@ describe('VTooltip', () => {
 
   it('should render component with top and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         top: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -35,24 +36,21 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with left and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         left: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -60,24 +58,21 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeFalsy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with bottom and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         bottom: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -85,24 +80,21 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with right and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         right: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -110,39 +102,34 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeFalsy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with custom eager and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with value=true and match snapshot', async () => {
+  it('should render component with modelValue=true and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: true,
-      },
-      scopedSlots: {
-        activator: '<span>activator</span>',
+      props: {
+        modelValue: true,
       },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -152,16 +139,14 @@ describe('VTooltip', () => {
 
   it('should render component with min/max width and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: true,
+      props: {
+        modelValue: true,
         minWidth: 100,
         maxWidth: 200,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -170,7 +155,7 @@ describe('VTooltip', () => {
 
   it('should render component with zIndex prop and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         zIndex: 42,
       },
     })
@@ -181,43 +166,45 @@ describe('VTooltip', () => {
   it('should display tooltip after mouseenter and hide after mouseleave', async () => {
     jest.useFakeTimers()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 123,
         closeDelay: 321,
       },
-      scopedSlots: {
-        activator: '<span v-on="props.on" class="activator">activator</span>',
-      },
       slots: {
-        default: '<span class="content">content</span>',
+        activator: ({ on }: any) => h('span', { ...on, class: 'activator' }, 'activator'),
+        default: () => h('span', { class: 'content' }, 'content'),
       },
     })
 
     const activator = wrapper.find('.activator')
-    const cb = jest.fn()
-    wrapper.vm.$on('input', cb)
 
-    activator.trigger('mouseenter')
+    await activator.trigger('mouseenter')
     jest.runAllTimers()
     await wrapper.vm.$nextTick()
-    expect((setTimeout as any).mock.calls[0][1]).toBe(123)
-    expect(cb).toHaveBeenCalledWith(true)
 
-    activator.trigger('mouseleave')
+    // Check if tooltip became active
+    expect(wrapper.vm.isActive).toBe(true)
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true])
+
+    await activator.trigger('mouseleave')
     jest.runAllTimers()
     await wrapper.vm.$nextTick()
-    expect((setTimeout as any).mock.calls[1][1]).toBe(321)
-    expect(cb).toHaveBeenCalledWith(false)
+
+    expect(wrapper.vm.isActive).toBe(false)
+    expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false])
+
+    jest.useRealTimers()
   })
 
   it(`should warn if activator isn't scoped`, () => {
     mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
       },
       slots: {
-        activator: '<span>activator</span>',
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -227,15 +214,13 @@ describe('VTooltip', () => {
   it(`should open and close`, () => {
     jest.useFakeTimers()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         closeDelay: 0,
       },
-      scopedSlots: {
-        activator: '<span v-on="props.on" class="activator">activator</span>',
-      },
       slots: {
-        default: '<span class="content">content</span>',
+        activator: ({ on }: any) => h('span', { ...on, class: 'activator' }, 'activator'),
+        default: () => h('span', { class: 'content' }, 'content'),
       },
     })
 

package/src/mixins/activatable/index.ts

@@ -92,7 +92,8 @@ export default baseMixins.extend({
         attrs: {
           ...this.genActivatorListeners(),
           ...this.genActivatorAttributes(),
-        }
+        },
+        on: this.genActivatorListeners()
       })) || []
 
       node = Array.isArray(node) ? node : [node]

package/src/mixins/bootable/__tests__/bootable.spec.ts

@@ -4,18 +4,22 @@ import Bootable from '../index'
 // Utilities
 import {
   mount,
-  Wrapper,
+  enableAutoUnmount,
+  VueWrapper,
 } from '@vue/test-utils'
+import { h, nextTick, Comment } from 'vue'
 
 describe('Bootable.ts', () => {
   type Instance = InstanceType<typeof Bootable>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount({
         mixins: [Bootable],
-        render: h => h('div'),
+        render: () => h('div'),
       }, {
         ...options,
       })
@@ -31,13 +35,13 @@ describe('Bootable.ts', () => {
 
     expect(wrapper.vm.isBooted).toBe(false)
     wrapper.vm.isActive = true
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.vm.isBooted).toBe(true)
   })
 
   it('should return lazy content', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
     })
@@ -50,18 +54,20 @@ describe('Bootable.ts', () => {
       }),
     })
 
-    expect(wrapperLazy.vm.showLazyContent(() => 'content')).toMatchObject([{ isComment: true }])
+    const lazyResult = wrapperLazy.vm.showLazyContent(() => 'content')
+    expect(Array.isArray(lazyResult)).toBe(true)
+    expect(lazyResult[0].type).toBe(Comment)
     wrapperLazy.vm.isActive = true
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapperLazy.vm.showLazyContent(() => 'content')).toBe('content')
     wrapperLazy.vm.isActive = false
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapperLazy.vm.showLazyContent(() => 'content')).toBe('content')
   })
 
   it('should show if lazy and active at boot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
     })
@@ -77,8 +83,8 @@ describe('Bootable.ts', () => {
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isBooted).toBe(false)
 
-    wrapper.setData({ isActive: true })
-    await wrapper.vm.$nextTick()
+    wrapper.vm.isActive = true
+    await nextTick()
     expect(wrapper.vm.isBooted).toBe(true)
   })
 })

package/src/mixins/bootable/index.ts

@@ -1,9 +1,10 @@
 // Utilities
 import { removed } from '../../util/console'
-import {h} from 'vue'
 
 // Types
-import  { defineComponent, VNode, App } from 'vue'
+import type { VNode, App } from 'vue'
+
+import { defineComponent, h, Comment } from 'vue'
 interface Toggleable extends App {
   isActive?: boolean
 }
@@ -49,7 +50,7 @@ export default defineComponent({
 
   methods: {
     showLazyContent (content?: () => VNode[]): VNode[] {
-      return (this.hasContent && content) ? content() : [h()]
+      return (this.hasContent && content) ? content() : [h(Comment)]
     },
   },
 })

package/src/mixins/mouse/__tests__/mouse.spec.ts

@@ -2,89 +2,103 @@ import Mouse from '../index'
 
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../util/mixins'
+import { ComponentPublicInstance, h, defineComponent } from 'vue'
 
-const Mock = Mouse.extend({
-  render: h => h('div'),
+const Mock = defineComponent({
+  mixins: [Mouse],
+  render: () => h('div'),
 })
 
 describe('mouse.ts', () => {
-  type Instance = ExtractVue<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = ComponentPublicInstance & InstanceType<typeof Mock>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Mock, options)
     }
   })
 
   it('should generate mouse event handlers', async () => {
-    const noop = e => e
+    const noop = (e: any) => e
     const wrapper = mount(Mock, {
-      listeners: {
-        click: noop,
+      attrs: {
+        onClick: noop,
       },
     })
 
-    expect(typeof wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, noop).click).toBe('function')
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, noop)
+    expect(typeof handlers.click).toBe('function')
   })
 
   it('should generate default mouse event handlers', async () => {
-    const noop = e => e
+    const noop = (e: any) => e
     const wrapper = mount(Mock, {
-      listeners: {
-        'click:foo': noop,
+      attrs: {
+        'onClick:foo': noop,
       },
     })
 
-    expect(typeof wrapper.vm.getDefaultMouseEventHandlers(':foo', noop).click).toBe('function')
-    expect(Object.keys(typeof wrapper.vm.getDefaultMouseEventHandlers('', noop))).toHaveLength(6)
+    const handlers = wrapper.vm.getDefaultMouseEventHandlers(':foo', noop)
+    // Для события click с суффиксом :foo, ключ будет 'click'
+    expect(typeof handlers.click).toBe('function')
+
+    // Тест для пустого суффикса
+    const wrapper2 = mount(Mock, {
+      attrs: {
+        onClick: noop,
+        onMouseenter: noop,
+        onMouseleave: noop,
+        onMousedown: noop,
+        onMouseup: noop,
+        onMousemove: noop,
+      },
+    })
+    const emptySuffixHandlers = wrapper2.vm.getDefaultMouseEventHandlers('', noop)
+    expect(Object.keys(emptySuffixHandlers)).toHaveLength(6)
   })
 
   it('should emit events', async () => {
-    const fn = jest.fn()
     const wrapper = mount(Mock, {
-      listeners: {
-        click: fn,
+      attrs: {
+        onClick: () => {},
       },
     })
 
-    const { click } = wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, () => {})
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, () => ({}))
+    const click = handlers.click
     Array.isArray(click) ? click[0](null) : click(null)
-    expect(fn).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted()).toBeTruthy()
   })
 
   it('should handle prevent modifier', async () => {
-    const fn = jest.fn()
     const wrapper = mount(Mock, {
-      listeners: {
-        click: fn,
+      attrs: {
+        onClick: () => {},
       },
     })
-    const event = { preventDefault: () => {} }
-    const spy = jest.spyOn(event, 'preventDefault')
+    const event = { preventDefault: jest.fn() } as unknown as MouseEvent
 
-    const { click } = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', prevent: true } }, () => {})
-    Array.isArray(click) ? click[0](event as MouseEvent) : click(event as MouseEvent)
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(spy).toHaveBeenCalledTimes(1)
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', prevent: true } }, () => ({}))
+    const click = handlers.click
+    Array.isArray(click) ? click[0](event) : click(event)
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
   })
 
   it('should handle stop modifier', async () => {
-    const fn = jest.fn()
     const wrapper = mount(Mock, {
-      listeners: {
-        click: fn,
+      attrs: {
+        onClick: () => {},
       },
     })
-    const event = { stopPropagation: () => {} }
-    const spy = jest.spyOn(event, 'stopPropagation')
+    const event = { stopPropagation: jest.fn() } as unknown as MouseEvent
 
-    const { click } = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', stop: true } }, () => {})
-    Array.isArray(click) ? click[0](event as MouseEvent) : click(event as MouseEvent)
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(spy).toHaveBeenCalledTimes(1)
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', stop: true } }, () => ({}))
+    const click = handlers.click
+    Array.isArray(click) ? click[0](event) : click(event)
+    expect(event.stopPropagation).toHaveBeenCalledTimes(1)
   })
 })