@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

package/src/components/VList/__tests__/VListItem.spec.ts

@@ -4,16 +4,26 @@ import VListItem from '../VListItem'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
 
 describe('VListItem.ts', () => {
   type Instance = InstanceType<typeof VListItem>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VListItem, {
+        global: {
+          stubs: {
+            'router-link': Vue3RouterLinkStub,
+          },
+          ...options.global,
+        },
         ...options,
       })
     }
@@ -21,80 +31,70 @@ describe('VListItem.ts', () => {
 
   it('should render with a div when inactive is true and href is used', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         href: 'http://www.google.com',
         inactive: true,
       },
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName.toLowerCase()).toBe('div')
     expect(wrapper.classes('v-list-item--link')).toBe(false)
   })
 
   it('should render with a tag when tag is specified', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tag: 'code',
       },
     })
 
-    expect(wrapper.is('code')).toBe(true)
+    expect(wrapper.element.tagName.toLowerCase()).toBe('code')
   })
 
   it('should render with a div when href and to are not used', () => {
     const wrapper = mountFunction()
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName.toLowerCase()).toBe('div')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render with <a> when using href prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         href: 'http://www.google.com',
       },
     })
 
     const a = wrapper.find('a')
 
-    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.element.tagName.toLowerCase()).toBe('a')
     expect(a.element.getAttribute('href')).toBe('http://www.google.com')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should have --link class when href/to prop present or link prop is used', () => {
+  it('should have --link class when href/to prop present or link prop is used', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         href: '/home',
       },
     })
 
     expect(wrapper.classes('v-list-item--link')).toBe(true)
 
-    wrapper.setProps({ href: undefined, to: '/foo' })
+    await wrapper.setProps({ href: undefined, to: '/foo' })
     expect(wrapper.classes('v-list-item--link')).toBe(true)
 
-    wrapper.setProps({ to: undefined, link: true })
+    await wrapper.setProps({ to: undefined, link: true })
     expect(wrapper.classes('v-list-item--link')).toBe(true)
 
-    wrapper.setProps({ link: false })
+    await wrapper.setProps({ link: false })
     expect(wrapper.classes('v-list-item--link')).toBe(false)
   })
 
   it('should have --link class when click handler present', () => {
     const wrapper = mountFunction({
-      listeners: {
-        click: () => {},
-      },
-    })
-
-    expect(wrapper.classes('v-list-item--link')).toBe(true)
-  })
-
-  it('should have --link class when click.prevent.stop handler present', () => {
-    const wrapper = mountFunction({
-      listeners: {
-        '!click': () => {},
+      props: {
+        link: true,
       },
     })
 
@@ -103,7 +103,7 @@ describe('VListItem.ts', () => {
 
   it('should have --selectable class if the selectable property is true', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         selectable: true,
       },
     })
@@ -111,81 +111,82 @@ describe('VListItem.ts', () => {
     expect(wrapper.classes('v-list-item--selectable')).toBe(true)
   })
 
-  it('should react to keydown.enter', () => {
+  it('should react to keydown.enter', async () => {
     const click = jest.fn()
-    const wrapper = mountFunction({
-      methods: { click },
-    })
+    const wrapper = mountFunction({})
 
-    wrapper.trigger('keydown.enter')
+    // Мокируем метод click компонента
+    wrapper.vm.click = click
+
+    await wrapper.trigger('keydown.enter')
 
     expect(click).toHaveBeenCalled()
   })
 
   it('should react to clicks', async () => {
     const blur = jest.fn()
-    const click = jest.fn()
     const toggle = jest.fn()
-    const wrapper = mountFunction({
-      methods: { toggle },
-    })
+    const wrapper = mountFunction({})
 
     wrapper.vm.$el.blur = blur
-    wrapper.vm.$on('click', click)
+    wrapper.vm.toggle = toggle
 
-    wrapper.trigger('click')
+    await wrapper.trigger('click')
     expect(blur).not.toHaveBeenCalled()
-    expect(click).toHaveBeenCalled()
+    expect(wrapper.emitted('click')).toBeTruthy()
     expect(toggle).toHaveBeenCalled()
 
     wrapper.vm.click({ detail: 1 })
 
     expect(blur).toHaveBeenCalled()
 
-    wrapper.setProps({ to: '/foo' })
+    await wrapper.setProps({ to: '/foo' })
     await wrapper.vm.$nextTick()
 
     expect(toggle).toHaveBeenCalledTimes(2)
-    wrapper.trigger('click')
+    await wrapper.trigger('click')
     expect(toggle).toHaveBeenCalledTimes(2)
   })
 
   it('should inherit listItemGroup activeClass', () => {
     const wrapper = mountFunction({
-      provide: {
-        listItemGroup: {
-          activeClass: 'foobar',
-          register: () => {},
-          unregister: () => {},
+      global: {
+        provide: {
+          listItemGroup: {
+            activeClass: 'foobar',
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
 
-    expect(wrapper.vm.activeClass).toBe('foobar')
+    expect(wrapper.vm.$activeClass).toBe('foobar')
   })
 
-  it('should have the correct aria attributes and tabindex', () => {
+  it('should have the correct aria attributes and tabindex', async () => {
     const wrapper = mountFunction({
-      propsData: { disabled: true },
+      props: { disabled: true },
     })
 
     expect(wrapper.element.getAttribute('aria-disabled')).toBe('true')
     expect(wrapper.element.tabIndex).toBe(-1)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       disabled: false,
-      inputValue: true,
+      modelValue: true,
     })
 
     expect(wrapper.element.getAttribute('aria-disabled')).toBeNull()
     expect(wrapper.element.tabIndex).toBe(-1)
 
-    wrapper.setProps({ link: true })
+    await wrapper.setProps({ link: true })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.element.tabIndex).toBe(0)
   })
 
-  it('should have the correct role', () => {
+  it('should have the correct role', async () => {
     // Custom provided
     const wrapper = mountFunction({
       attrs: { role: 'item' },
@@ -194,27 +195,37 @@ describe('VListItem.ts', () => {
 
     // In nav
     const wrapper2 = mountFunction({
-      provide: { isInNav: true },
+      global: {
+        provide: { isInNav: true },
+      },
     })
     expect(wrapper2.element.getAttribute('role')).toBeNull()
 
     // In list-item-group
     const wrapper3 = mountFunction({
-      provide: { isInGroup: true },
+      global: {
+        provide: { isInGroup: true },
+      },
     })
     expect(wrapper3.element.getAttribute('role')).toBe('option')
+    expect(wrapper3.element.getAttribute('aria-selected')).toBe('false')
 
     // In menu
     const wrapper4 = mountFunction({
-      provide: { isInMenu: true },
+      global: {
+        provide: { isInMenu: true },
+      },
     })
     expect(wrapper4.element.getAttribute('role')).toBeNull()
-    wrapper4.setProps({ href: '#' }) // could be `to` or `link` as well
+    await wrapper4.setProps({ href: '#' }) // could be `to` or `link` as well
     expect(wrapper4.element.getAttribute('role')).toBe('menuitem')
+    expect(wrapper4.element.getAttribute('id')).toMatch(/^list-item-\d+$/)
 
     // In list not a link
     const wrapper5 = mountFunction({
-      provide: { isInList: true },
+      global: {
+        provide: { isInList: true },
+      },
     })
     expect(wrapper5.element.getAttribute('role')).toBe('listitem')
   })
@@ -228,22 +239,90 @@ describe('VListItem.ts', () => {
     wrapper.vm.toggle()
     expect(wrapper.vm.isActive).toBeFalsy()
 
-    const wrapper2 = mountFunction({ propsData: { to: { name: 'test' } }, stubs: ['router-link'] })
+    const wrapper2 = mountFunction({
+      props: { to: { name: 'test' } },
+      global: {
+        stubs: {
+          'router-link': Vue3RouterLinkStub,
+        },
+      },
+    })
 
     expect(wrapper2.vm.isActive).toBeFalsy()
     wrapper2.vm.toggle()
     expect(wrapper2.vm.isActive).toBeTruthy()
   })
 
-  it('should not react to keydown.enter when disabled', () => {
+  it('should not react to keydown.enter when disabled', async () => {
     const click = jest.fn()
     const wrapper = mountFunction({
-      methods: { click },
-      propsData: { disabled: true },
+      global: {
+        mocks: { click },
+      },
+      props: { disabled: true },
     })
 
-    wrapper.trigger('keydown.enter')
+    await wrapper.trigger('keydown.enter')
 
     expect(click).not.toHaveBeenCalled()
   })
+
+  it('should be clickable when href is provided', () => {
+    const wrapper = mountFunction({
+      props: {
+        href: 'http://www.google.com',
+      },
+    })
+
+    expect(wrapper.vm.isClickable).toBe(true)
+  })
+
+  it('should be clickable when to is provided', () => {
+    const wrapper = mountFunction({
+      props: {
+        to: '/home',
+      },
+    })
+
+    expect(wrapper.vm.isClickable).toBe(true)
+  })
+
+  it('should be clickable when in listItemGroup', () => {
+    const wrapper = mountFunction({
+      global: {
+        provide: {
+          listItemGroup: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    expect(wrapper.vm.isClickable).toBe(true)
+  })
+
+  it('should not be clickable when no href, to, or listItemGroup', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.isClickable).toBe(false)
+  })
+
+  it('should be clickable when both href and listItemGroup are present', () => {
+    const wrapper = mountFunction({
+      props: {
+        href: 'http://www.google.com',
+      },
+      global: {
+        provide: {
+          listItemGroup: {
+            register: () => {},
+            unregister: () => {},
+          },
+        },
+      },
+    })
+
+    expect(wrapper.vm.isClickable).toBe(true)
+  })
 })

package/src/components/VList/__tests__/VListItemAvatar.spec.ts

@@ -4,7 +4,8 @@ import VListItemAvatar from '../VListItemAvatar'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 // Types
@@ -12,7 +13,9 @@ import { ExtractVue } from '../../../util/mixins'
 
 describe('VListItemAvatar.ts', () => {
   type Instance = ExtractVue<typeof VListItemAvatar>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {

package/src/components/VList/__tests__/VListItemGroup.spec.ts

@@ -4,12 +4,15 @@ import VListItemGroup from '../VListItemGroup'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VListItemGroup.ts', () => {
   type Instance = InstanceType<typeof VListItemGroup>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {

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

@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VList.ts should render a dense component and match snapshot 1`] = `
-<div role="list"
-     class="v-list v-sheet theme--light v-list--dense"
+<div class="v-sheet theme--light v-list--dense v-list"
+     role="list"
 >
 </div>
 `;
 
 exports[`VList.ts should render a subheader component and match snapshot 1`] = `
-<div role="list"
-     class="v-list v-sheet theme--light v-list--subheader"
+<div class="v-sheet theme--light v-list--subheader v-list"
+     role="list"
 >
 </div>
 `;
 
 exports[`VList.ts should render a threeLine component and match snapshot 1`] = `
-<div role="list"
-     class="v-list v-sheet theme--light v-list--three-line"
+<div class="v-sheet theme--light v-list--three-line v-list"
+     role="list"
 >
 </div>
 `;
 
 exports[`VList.ts should render a twoLine component and match snapshot 1`] = `
-<div role="list"
-     class="v-list v-sheet theme--light v-list--two-line"
+<div class="v-sheet theme--light v-list--two-line v-list"
+     role="list"
 >
 </div>
 `;
 
 exports[`VList.ts should render component and match snapshot 1`] = `
-<div role="list"
-     class="v-list v-sheet theme--light"
+<div class="v-sheet theme--light v-list"
+     role="list"
 >
 </div>
 `;

package/src/components/VList/__tests__/__snapshots__/VListGroup.spec.ts.snap

@@ -2,16 +2,15 @@
 
 exports[`VListGroup.ts should render component and match snapshot 1`] = `
 <div class="v-list-group">
-  <div tabindex="0"
-       aria-expanded="false"
+  <div aria-expanded="false"
        role="button"
-       class="v-list-group__header v-list-item v-list-item--link theme--light"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light v-list-group__header"
   >
-    <div class="v-list-item__icon v-list-group__header__append-icon">
+    <div class="v-list-item__icon v-list-group__header__append-icon v-list-group__header__append-icon">
       <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+         class="v-icon notranslate mdi mdi-chevron-down theme--light"
       >
-        $expand
       </i>
     </div>
   </div>

package/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`VListItem.ts should render with <a> when using href prop 1`] = `
 <a tabindex="0"
-   href="http://www.google.com"
    class="v-list-item v-list-item--link theme--light"
+   href="http://www.google.com"
 >
 </a>
 `;

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

@@ -2,30 +2,27 @@
 import VMain from '../VMain'
 
 // Utilities
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 describe('VMain.ts', () => {
-  type Instance = InstanceType<typeof VMain>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => any
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VMain, {
         ...options,
-        mocks: {
-          $vuetify: {
-            application: {
-              bar: 24,
-              top: 64,
-              left: 256,
-              right: 256,
-              footer: 48,
-              insetFooter: 32,
-              bottom: 56,
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                bar: 24,
+                top: 64,
+                left: 256,
+                right: 256,
+                footer: 48,
+                insetFooter: 32,
+                bottom: 56,
+              },
             },
           },
         },
@@ -38,4 +35,61 @@ describe('VMain.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should render custom tag', () => {
+    const wrapper = mountFunction({
+      props: {
+        tag: 'div'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('should apply correct styles based on vuetify application', () => {
+    const wrapper = mountFunction()
+    const mainElement = wrapper.element
+
+    expect(mainElement.style.paddingTop).toBe('88px') // 64 + 24
+    expect(mainElement.style.paddingRight).toBe('256px')
+    expect(mainElement.style.paddingBottom).toBe('136px') // 48 + 32 + 56
+    expect(mainElement.style.paddingLeft).toBe('256px')
+  })
+
+  it('should render with slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<div>Test content</div>'
+      }
+    })
+
+    expect(wrapper.html()).toContain('Test content')
+  })
+
+  it('should render with complex slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [
+          '<div>First item</div>',
+          '<div>Second item</div>'
+        ]
+      }
+    })
+
+    expect(wrapper.html()).toContain('First item')
+    expect(wrapper.html()).toContain('Second item')
+  })
+
+  it('should have correct CSS classes', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.classes()).toContain('v-main')
+    expect(wrapper.find('.v-main__wrap').exists()).toBe(true)
+  })
+
+  it('should render with default tag', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.element.tagName).toBe('MAIN')
+  })
 })

package/src/components/VMenu/VMenu.ts

@@ -1,4 +1,4 @@
-import {h, Transition, vShow, withDirectives} from 'vue'
+import { h, Transition, vShow, withDirectives } from 'vue'
 // Styles
 import './VMenu.sass'
 
@@ -20,7 +20,7 @@ import Resize from '../../directives/resize'
 
 // Utilities
 import mixins from '../../util/mixins'
-import { removed } from '../../util/console'
+import { removed, breaking } from '../../util/console'
 import {
   convertToUnit,
   keyCodes,
@@ -82,8 +82,18 @@ export default baseMixins.extend({
       type: Object as PropType<Record<string, any>>,
       default: () => ({}),
     },
+    onScroll: {
+      type: Function as PropType<(event: Event) => void>,
+      default: undefined,
+    },
   },
 
+  emits: [
+    'keydown',
+    'update:modelValue',
+    'update:return-value',
+  ],
+
   data () {
     return {
       calculatedTopAuto: 0,
@@ -109,7 +119,7 @@ export default baseMixins.extend({
     },
     calculatedMaxHeight (): string {
       const height = this.auto
-        ? '200px'
+        ? '220px'
         : convertToUnit(this.maxHeight)
 
       return height || '0'
@@ -196,6 +206,16 @@ export default baseMixins.extend({
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', '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('full-width')) {
       removed('full-width', this)
@@ -282,6 +302,7 @@ export default baseMixins.extend({
       return this.isActive &&
         !this._isDestroyed &&
         this.closeOnClick &&
+        this.$refs.content &&
         !this.$refs.content.contains(target)
     },
     genActivatorAttributes () {
@@ -300,7 +321,7 @@ export default baseMixins.extend({
       const listeners = Menuable.methods.genActivatorListeners.call(this)
 
       if (!this.disableKeys) {
-        listeners.keydown = this.onKeyDown
+        listeners.onKeydown = this.onKeyDown;
       }
 
       return listeners