@dimailn/vuetify 2.7.2-alpha24 → 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'),
       },
     })