@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

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

@@ -1,28 +1,32 @@
 // Libraries
-import Vue from 'vue'
+import { h, nextTick } from 'vue'
 
 // Components
 import VToolbar from '../VToolbar'
-import { ExtractVue } from '../../../util/mixins'
 
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
+import { enableAutoUnmount } from '@vue/test-utils'
 
 describe('VToolbar.ts', () => {
-  type Instance = ExtractVue<typeof VToolbar>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VToolbar>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VToolbar, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            breakpoint: {},
+        global: {
+          mocks: {
+            $vuetify: {
+              breakpoint: {
+                smAndDown: false,
+              },
+            },
           },
         },
         ...options,
@@ -32,7 +36,7 @@ describe('VToolbar.ts', () => {
 
   it('should render an extended toolbar', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         extended: true,
       },
     })
@@ -42,7 +46,7 @@ describe('VToolbar.ts', () => {
 
   it('should render an extended toolbar with specific height', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         extended: true,
         extensionHeight: 42,
       },
@@ -51,41 +55,61 @@ describe('VToolbar.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should properly calculate content height', () => {
+  it('should properly calculate content height', async () => {
     const wrapper = mountFunction()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       height: 999,
     })
     expect(wrapper.vm.computedContentHeight).toBe(999)
 
-    wrapper.setProps({
-      height: null,
+    await wrapper.setProps({
+      height: undefined,
       dense: true,
     })
     expect(wrapper.vm.computedContentHeight).toBe(48)
 
-    wrapper.setProps({
-      height: null,
+    await wrapper.setProps({
+      height: undefined,
       dense: false,
       prominent: true,
     })
     expect(wrapper.vm.computedContentHeight).toBe(128)
 
-    wrapper.setProps({
-      height: null,
+    await wrapper.setProps({
+      height: undefined,
       dense: false,
       prominent: false,
     })
-    Vue.set(wrapper.vm.$vuetify.breakpoint, 'smAndDown', true)
-    expect(wrapper.vm.computedContentHeight).toBe(56)
-    Vue.set(wrapper.vm.$vuetify.breakpoint, 'smAndDown', false)
+
+    // Проверяем значение по умолчанию (smAndDown: false)
     expect(wrapper.vm.computedContentHeight).toBe(64)
+
+    // Создаем новый wrapper с smAndDown: true
+    const wrapperMobile = mountFunction({
+      global: {
+        mocks: {
+          $vuetify: {
+            breakpoint: {
+              smAndDown: true,
+            },
+          },
+        },
+      },
+    })
+
+    await wrapperMobile.setProps({
+      height: undefined,
+      dense: false,
+      prominent: false,
+    })
+
+    expect(wrapperMobile.vm.computedContentHeight).toBe(56)
   })
 
   it('should have a custom extension height', () => {
     const wrapper = mountFunction({
-      propsData: { tabs: true },
+      props: { tabs: true },
     })
 
     expect(wrapper.vm.extensionHeight).toBe(48)
@@ -93,7 +117,7 @@ describe('VToolbar.ts', () => {
 
   it('should set height equal to both height and extensionHeight', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         height: 112,
         extended: true,
         extensionHeight: 64,

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()
     })
   },
 
@@ -162,17 +161,17 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
       const listeners = Activatable.methods.genActivatorListeners.call(this)
 
       if (this.openOnFocus) {
-        listeners.focus = (e: Event) => {
+        listeners.onFocus = (e: Event) => {
           this.getActivator(e)
           this.runDelay('open')
         }
-        listeners.blur = (e: Event) => {
+        listeners.onBlur = (e: Event) => {
           this.getActivator(e)
           this.runDelay('close')
         }
       }
 
-      listeners.keydown = (e: KeyboardEvent) => {
+      listeners.onKeydown = (e: KeyboardEvent) => {
         if (e.keyCode === keyCodes.esc) {
           this.getActivator(e)
           this.runDelay('close')
@@ -194,26 +193,27 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
 
       return h(Transition, {
         name: this.computedTransition,
-      }, [content])
+      }, () => [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, {
+            ...this.getScopeIdAttrs(),
+            class: ['v-tooltip__content', {
+              [this.contentClass]: true,
+              menuable__content__active: this.isActive,
+              'v-tooltip__content--fixed': this.activatorFixed,
+            }],
+            style: this.styles,
+            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/components/VTooltip/__tests__/__snapshots__/VTooltip.spec.ts.snap

@@ -10,9 +10,13 @@ exports[`VTooltip should render component with bottom and match snapshot 1`] = `
 
 exports[`VTooltip should render component with bottom and match snapshot 2`] = `
 <span class="v-tooltip v-tooltip--bottom">
-  <span>
-    activator
-  </span>
+  <div class="v-tooltip__content  menuable__content__active"
+       style="left: 0px; max-width: auto; top: 12px; z-index: 8; display: none;"
+  >
+    <span>
+      content
+    </span>
+  </div>
 </span>
 `;
 
@@ -34,13 +38,25 @@ exports[`VTooltip should render component with left and match snapshot 1`] = `
 
 exports[`VTooltip should render component with left and match snapshot 2`] = `
 <span class="v-tooltip v-tooltip--left">
+  <div class="v-tooltip__content  menuable__content__active"
+       style="left: 12px; max-width: auto; top: 12px; z-index: 8; display: none;"
+  >
+    <span>
+      content
+    </span>
+  </div>
+</span>
+`;
+
+exports[`VTooltip should render component with min/max width and match snapshot 1`] = `
+<span class="v-tooltip">
   <span>
     activator
   </span>
 </span>
 `;
 
-exports[`VTooltip should render component with min/max width and match snapshot 1`] = `
+exports[`VTooltip should render component with modelValue=true and match snapshot 1`] = `
 <span class="v-tooltip">
   <span>
     activator
@@ -58,9 +74,13 @@ exports[`VTooltip should render component with right and match snapshot 1`] = `
 
 exports[`VTooltip should render component with right and match snapshot 2`] = `
 <span class="v-tooltip v-tooltip--right">
-  <span>
-    activator
-  </span>
+  <div class="v-tooltip__content  menuable__content__active"
+       style="left: 0px; max-width: auto; top: 12px; z-index: 8; display: none;"
+  >
+    <span>
+      content
+    </span>
+  </div>
 </span>
 `;
 
@@ -74,17 +94,13 @@ exports[`VTooltip should render component with top and match snapshot 1`] = `
 
 exports[`VTooltip should render component with top and match snapshot 2`] = `
 <span class="v-tooltip v-tooltip--top">
-  <span>
-    activator
-  </span>
-</span>
-`;
-
-exports[`VTooltip should render component with value=true and match snapshot 1`] = `
-<span class="v-tooltip">
-  <span>
-    activator
-  </span>
+  <div class="v-tooltip__content  menuable__content__active"
+       style="left: 0px; max-width: auto; top: 12px; z-index: 8; display: none;"
+  >
+    <span>
+      content
+    </span>
+  </div>
 </span>
 `;