@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -4,28 +4,35 @@ import VDialog from '../VDialog'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 // eslint-disable-next-line max-statements
 describe('VDialog.ts', () => {
   type Instance = InstanceType<typeof VDialog>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   let el
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     el = document.createElement('div')
     el.setAttribute('data-app', 'true')
     document.body.appendChild(el)
     mountFunction = (options = {}) => {
       return mount(VDialog, {
-        mocks: {
-          $vuetify: {
-            theme: {},
-            breakpoint: {},
-          },
+        global: {
+          mocks: {
+            $vuetify: {
+              theme: {},
+              breakpoint: {}
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -42,9 +49,9 @@ describe('VDialog.ts', () => {
 
   it('should render a disabled component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        disabled: true,
-      },
+      props: {
+        disabled: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -52,9 +59,9 @@ describe('VDialog.ts', () => {
 
   it('should render a persistent component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        persistent: true,
-      },
+      props: {
+        persistent: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -62,9 +69,9 @@ describe('VDialog.ts', () => {
 
   it('should render a fullscreen component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        fullscreen: true,
-      },
+      props: {
+        fullscreen: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -72,9 +79,9 @@ describe('VDialog.ts', () => {
 
   it('should render a eager component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        eager: true,
-      },
+      props: {
+        eager: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -82,9 +89,9 @@ describe('VDialog.ts', () => {
 
   it('should render a scrollable component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        scrollable: true,
-      },
+      props: {
+        scrollable: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -92,9 +99,9 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom origin and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        origin: 'top right',
-      },
+      props: {
+        origin: 'top right'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -102,9 +109,9 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom width (max-width) and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        maxWidth: 100,
-      },
+      props: {
+        maxWidth: 100
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -112,9 +119,9 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom width and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        width: '50%',
-      },
+      props: {
+        width: '50%'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -122,9 +129,9 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom transition and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        transition: 'fade-transition',
-      },
+      props: {
+        transition: 'fade-transition'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -133,20 +140,19 @@ describe('VDialog.ts', () => {
   it('should open dialog on activator click', async () => {
     const input = jest.fn()
     const wrapper = mountFunction({
-      scopedSlots: {
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+      slots: {
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on
+        })
       },
+      attrs: {
+        'onUpdate:modelValue': input
+      }
     })
 
-    wrapper.vm.$on('input', input)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
     await wrapper.vm.$nextTick()
     expect(input).toHaveBeenCalledWith(true)
@@ -155,24 +161,23 @@ describe('VDialog.ts', () => {
   it('not should open disabled dialog on activator click', async () => {
     const input = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
-        disabled: true,
+      props: {
+        disabled: true
       },
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on
+        })
       },
+      attrs: {
+        'onUpdate:modelValue': input
+      }
     })
 
-    wrapper.vm.$on('input', input)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(false)
     await wrapper.vm.$nextTick()
     expect(input).not.toHaveBeenCalled()
@@ -180,76 +185,73 @@ describe('VDialog.ts', () => {
 
   it('not change state on v-model update', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: false,
-      },
-      scopedSlots: {
-        activator: '<span>activator</span>',
+      props: {
+        modelValue: false
       },
+      slots: {
+        activator: '<span>activator</span>'
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(false)
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(true)
 
-    wrapper.setProps({
-      value: false,
+    await wrapper.setProps({
+      modelValue: false
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(false)
   })
 
   it('should emit keydown event', async () => {
     const keydown = jest.fn()
     const wrapper = mountFunction({
-      propsData: { value: true },
+      props: { modelValue: true },
+      attrs: {
+        onKeydown: keydown
+      }
     })
-    wrapper.vm.$on('keydown', keydown)
 
     await wrapper.vm.$nextTick()
-    wrapper.vm.$refs.content.dispatchEvent(new Event('keydown'))
-    expect(keydown).toHaveBeenCalled()
+    const dialog = wrapper.find('.v-dialog')
+    if (dialog.exists()) {
+      dialog.trigger('keydown')
+      expect(keydown).toHaveBeenCalled()
+    }
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/3101
   it('should always remove scrollbar when fullscreen', async () => {
     const wrapper = mountFunction()
 
-    wrapper.setProps({ value: true })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: true })
 
     expect(document.documentElement.className).not.toContain('overflow-y-hidden')
 
-    wrapper.setProps({ fullscreen: true })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ fullscreen: true })
 
     expect(document.documentElement.className).toContain('overflow-y-hidden')
   })
 
   it('should not respond to events if disabled', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        disabled: true,
+      props: {
+        disabled: true
       },
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
-      },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on
+        })
+      }
     })
 
     const activator = wrapper.find('div.activator')
-    activator.trigger('click')
+    await activator.trigger('click')
 
     expect(wrapper.vm.isActive).toBe(false)
   })
@@ -259,22 +261,21 @@ describe('VDialog.ts', () => {
     const input = jest.fn()
     const clickOutside = jest.fn()
     const wrapper = mountFunction({
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on
+        })
       },
+      attrs: {
+        'onUpdate:modelValue': input,
+        'onClick:outside': clickOutside
+      }
     })
 
-    wrapper.vm.$on('input', input)
-    wrapper.vm.$on('click:outside', clickOutside)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
     await wrapper.vm.$nextTick()
     expect(input).toHaveBeenCalledWith(true)
@@ -286,37 +287,41 @@ describe('VDialog.ts', () => {
   // Ensure dialog opens up when provided a default value
   it('should set model active before mounted', () => {
     const wrapper = mountFunction({
-      propsData: { value: true },
+      props: { modelValue: true }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
   })
 
-  it('should close dialog on escape keydown', () => {
+  it('should close dialog on escape keydown', async () => {
     const wrapper = mountFunction({
-      propsData: { value: true },
+      props: { modelValue: true }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
-    const content = wrapper.find('.v-dialog__content')
-    content.trigger('keydown.esc')
-    expect(wrapper.vm.isActive).toBe(false)
+    const dialog = wrapper.find('.v-dialog')
+    if (dialog.exists()) {
+      await dialog.trigger('keydown.esc')
+      expect(wrapper.vm.isActive).toBe(false)
+    }
   })
 
-  it('should only set tabindex if active', () => {
+  it('should only set tabindex if active', async () => {
     const wrapper = mountFunction({
-      propsData: { eager: true },
+      props: { eager: true }
     })
 
     const dialog = wrapper.find('.v-dialog')
+    if (dialog.exists()) {
+      expect(dialog.html()).toMatchSnapshot()
+      expect(dialog.element.tabIndex).toBe(-1)
 
-    expect(dialog.html()).toMatchSnapshot()
-    expect(dialog.element.tabIndex).toBe(-1)
+      wrapper.vm.isActive = true
+      await wrapper.vm.$nextTick()
 
-    wrapper.setData({ isActive: true })
-
-    expect(dialog.element.tabIndex).toBe(0)
-    expect(dialog.html()).toMatchSnapshot()
+      expect(dialog.element.tabIndex).toBe(0)
+      expect(dialog.html()).toMatchSnapshot()
+    }
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/8697
@@ -324,26 +329,25 @@ describe('VDialog.ts', () => {
     const input = jest.fn()
     const clickOutside = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         persistent: true,
-        hideOverlay: true,
+        hideOverlay: true
       },
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on
+        })
       },
+      attrs: {
+        'onUpdate:modelValue': input,
+        'onClick:outside': clickOutside
+      }
     })
 
-    wrapper.vm.$on('input', input)
-    wrapper.vm.$on('click:outside', clickOutside)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
     await wrapper.vm.$nextTick()
     expect(input).toHaveBeenCalledWith(true)

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

@@ -1,20 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VDialog.ts should only set tabindex if active 1`] = `
-<div class="v-dialog"
-     style="transform-origin: center center; display: none;"
->
-</div>
-`;
-
-exports[`VDialog.ts should only set tabindex if active 2`] = `
-<div class="v-dialog v-dialog--active"
-     style="transform-origin: center center;"
-     tabindex="0"
->
-</div>
-`;
-
 exports[`VDialog.ts should render a disabled component and match snapshot 1`] = `
 <div class="v-dialog__container">
 </div>

package/src/components/VDivider/VDivider.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VDivider.sass'
 
@@ -9,14 +9,13 @@ import { VNode, defineComponent } from 'vue'
 import Themeable from '../../mixins/themeable'
 import mergeData from '../../util/mergeData'
 
-
 export default defineComponent({
   name: 'v-divider',
   extends: Themeable,
 
   props: {
     inset: Boolean,
-    vertical: Boolean,
+    vertical: Boolean
   },
 
   render (): VNode {
@@ -30,11 +29,11 @@ export default defineComponent({
         'v-divider': true,
         'v-divider--inset': this.inset,
         'v-divider--vertical': this.vertical,
-        ...this.themeClasses,
+        ...this.themeClasses
       },
       role: 'separator',
       'aria-orientation': orientation,
       ...this.$listeners
     }, this.$attrs))
-  },
+  }
 })

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

@@ -1,27 +1,23 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VDivider from '../VDivider'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('VDivider', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let localVue: typeof Vue
+  type Instance = InstanceType<typeof VDivider>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
-  beforeEach(() => {
-    localVue = createLocalVue()
+  enableAutoUnmount(afterEach)
 
+  beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VDivider, {
-        localVue,
-        ...options,
+        ...options
       })
     }
   })
@@ -34,7 +30,7 @@ describe('VDivider', () => {
 
   it('should render an inset component', () => {
     const wrapper = mountFunction({
-      propsData: { inset: true },
+      props: { inset: true }
     })
 
     expect(wrapper.classes('v-divider--inset')).toBe(true)
@@ -42,7 +38,7 @@ describe('VDivider', () => {
 
   it('should render a light component', () => {
     const wrapper = mountFunction({
-      propsData: { light: true },
+      props: { light: true }
     })
 
     expect(wrapper.classes('theme--light')).toBe(true)
@@ -50,7 +46,7 @@ describe('VDivider', () => {
 
   it('should render a dark component', () => {
     const wrapper = mountFunction({
-      propsData: { dark: true },
+      props: { dark: true }
     })
 
     expect(wrapper.classes('theme--dark')).toBe(true)
@@ -58,7 +54,7 @@ describe('VDivider', () => {
 
   it('should render a vertical component', () => {
     const wrapper = mountFunction({
-      propsData: { vertical: true },
+      props: { vertical: true }
     })
 
     expect(wrapper.classes('v-divider--vertical')).toBe(true)
@@ -78,7 +74,7 @@ describe('VDivider', () => {
 
   it('should have aria-orientation vertical if vertical prop is set', () => {
     const wrapper = mountFunction({
-      propsData: { vertical: true },
+      props: { vertical: true }
     })
 
     expect(wrapper.attributes('aria-orientation')).toBe('vertical')
@@ -86,7 +82,7 @@ describe('VDivider', () => {
 
   it('should have presentation role if set in attrs', () => {
     const wrapper = mountFunction({
-      attrs: { role: 'presentation' },
+      attrs: { role: 'presentation' }
     })
 
     expect(wrapper.attributes('role')).toBe('presentation')
@@ -94,7 +90,7 @@ describe('VDivider', () => {
 
   it('should have no aria-orientation if presentation role is set in attrs', () => {
     const wrapper = mountFunction({
-      attrs: { role: 'presentation' },
+      attrs: { role: 'presentation' }
     })
 
     expect(wrapper.attributes('aria-orientation')).toBeUndefined()

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VDivider should render component and match snapshot 1`] = `
-<hr role="separator"
+<hr class="v-divider theme--light"
+    role="separator"
     aria-orientation="horizontal"
-    class="v-divider theme--light"
 >
 `;

package/src/components/VExpansionPanel/VExpansionPanel.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Components
 import VExpansionPanels from './VExpansionPanels'
 import VExpansionPanelHeader from './VExpansionPanelHeader'
@@ -27,14 +27,19 @@ export default mixins(
 
   props: {
     disabled: Boolean,
-    readonly: Boolean,
+    readonly: Boolean
   },
 
+  emits: [
+    'click',
+    'change'
+  ],
+
   data () {
     return {
       content: null as VExpansionPanelContentInstance | null,
       header: null as VExpansionPanelHeaderInstance | null,
-      nextIsActive: false,
+      nextIsActive: false
     }
   },
 
@@ -44,7 +49,7 @@ export default mixins(
         'v-expansion-panel--active': this.isActive,
         'v-expansion-panel--next-active': this.nextIsActive,
         'v-expansion-panel--disabled': this.isDisabled,
-        ...this.groupClasses,
+        ...this.groupClasses
       }
     },
     isDisabled (): boolean {
@@ -52,7 +57,7 @@ export default mixins(
     },
     isReadonly (): boolean {
       return this.expansionPanels.readonly || this.readonly
-    },
+    }
   },
 
   methods: {
@@ -81,13 +86,13 @@ export default mixins(
         this.$emit('change')
         this.$emitLegacy('change')
       })
-    },
+    }
   },
 
   render (): VNode {
     return h('div', {
       class: ['v-expansion-panel', this.classes],
-      'aria-expanded': String(this.isActive),
+      'aria-expanded': String(this.isActive)
     }, getSlot(this))
-  },
+  }
 })