@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -1,15 +1,17 @@
 // Libraries
-import {h} from 'vue'
+import { h } from 'vue'
 
 // Components
 import VRating from '../VRating'
 
 // Utilities
 import {
-  mount
+  mount,
+  VueWrapper,
+  MountingOptions
 } from '@vue/test-utils'
 import { mergeDeep } from '../../../util/helpers'
-
+import { nextTick } from 'vue'
 
 const $vuetify = {
   rtl: false,
@@ -20,18 +22,17 @@ const $vuetify = {
     }
   },
   lang: {
-    t: str => str,
-  },
+    t: str => str
+  }
 }
 
 describe('VRating.ts', () => {
-  // type Instance = ExtractVue<typeof VRating>
-  let mountFunction//: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VRating>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
 
   beforeEach(() => {
-    mountFunction = (options: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VRating, mergeDeep({
-        // https://github.com/vuejs/vue-test-utils/issues/1130
         global: {
           config: {
             globalProperties: {
@@ -39,7 +40,7 @@ describe('VRating.ts', () => {
               $createElement: h
             }
           }
-        },
+        }
       }, options))
     }
   })
@@ -47,21 +48,21 @@ describe('VRating.ts', () => {
   it('should not register directives if readonly or !ripple', async () => {
     const wrapper = mountFunction({
       props: {
-        readonly: true,
-      },
+        readonly: true
+      }
     })
 
     expect(wrapper.vm.directives[0][1].isDirActive).toBe(false)
 
     wrapper.setProps({ readonly: false })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.directives[0][1].isDirActive).toBe(true)
 
     wrapper.setProps({ ripple: false })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.directives[0][1].isDirActive).toBe(false)
   })
@@ -72,7 +73,7 @@ describe('VRating.ts', () => {
     expect(wrapper.vm.internalValue).toBe(0)
 
     wrapper.setProps({ modelValue: 1 })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
 
@@ -82,7 +83,7 @@ describe('VRating.ts', () => {
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.emitted()).toHaveProperty('update:modelValue')
     expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(2)
@@ -94,7 +95,7 @@ describe('VRating.ts', () => {
     expect(wrapper.vm.internalValue).toBe(0)
 
     wrapper.setProps({ modelValue: 1, clearable: false })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
 
@@ -102,17 +103,17 @@ describe('VRating.ts', () => {
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
 
     wrapper.setProps({ clearable: true })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(0)
   })
@@ -120,25 +121,25 @@ describe('VRating.ts', () => {
   it('should not react to events when readonly', async () => {
     const wrapper = mountFunction({
       props: {
-        readonly: true,
-      },
+        readonly: true
+      }
     })
 
     const icon = wrapper.find('.v-icon')
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.emitted()).not.toHaveProperty('update:modelValue')
 
     wrapper.setProps({ readonly: false })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.emitted()).toHaveProperty('update:modelValue')
     expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(1)
@@ -149,8 +150,8 @@ describe('VRating.ts', () => {
 
     const wrapper = mountFunction({
       props: {
-        hover: true,
-      },
+        hover: true
+      }
     })
 
     const icons = wrapper.findAll('.v-icon')
@@ -180,20 +181,20 @@ describe('VRating.ts', () => {
 
     wrapper.setProps({ halfIncrements: true })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
     }, 1)).toBe(1.5)
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 6,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
     }, 1)).toBe(2)
   })
 
@@ -204,7 +205,7 @@ describe('VRating.ts', () => {
         config: {
           globalProperties: {
             $vuetify: {
-              rtl: true,
+              rtl: true
             }
           }
         }
@@ -212,38 +213,31 @@ describe('VRating.ts', () => {
     })
 
     const event = new MouseEvent('hover')
-    expect(wrapper.vm.genHoverIndex(event, 1)).toBe(1.5)
-
-    wrapper.setProps({ halfIncrements: true })
-
-    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.genHoverIndex(event, 1)).toBe(2)
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
-    }, 1)).toBe(2)
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
+    }, 1)).toBe(1.5)
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 6,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
-    }, 1)).toBe(1.5)
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
+    }, 1)).toBe(2)
   })
 
   it('should render a scoped slot', () => {
     const itemSlot = () => [h('span', 'foobar')]
 
     const component = {
-      render: () => h(VRating, {}, {item: itemSlot})
+      render: () => h(VRating, {}, { item: itemSlot })
     }
 
-    const wrapper = mount(component, {
-      // https://github.com/vuejs/vue-test-utils/issues/1130
-      sync: false,
-    })
+    const wrapper = mount(component)
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -252,7 +246,7 @@ describe('VRating.ts', () => {
     const wrapper = mountFunction({
       props: {
         halfIncrements: true,
-        hover: true,
+        hover: true
       }
     })
     const onMouseEnter = jest.fn()
@@ -269,7 +263,7 @@ describe('VRating.ts', () => {
   it('should reset hoverIndex on mouse leave', () => {
     jest.useFakeTimers()
     const wrapper = mountFunction({
-      propsData: { hover: true },
+      props: { hover: true }
     })
 
     const icon = wrapper.find('.v-icon')

package/src/components/VResponsive/VResponsive.ts

@@ -1,4 +1,4 @@
-import {h, mergeProps} from 'vue'
+import { h, mergeProps } from 'vue'
 import './VResponsive.sass'
 
 // Mixins
@@ -17,7 +17,7 @@ export default mixins(Measurable).extend({
 
   props: {
     aspectRatio: [String, Number] as NumberOrNumberString,
-    contentClass: String,
+    contentClass: String
   },
 
   computed: {
@@ -34,27 +34,27 @@ export default mixins(Measurable).extend({
 
       return h('div', {
         style: this.aspectStyle,
-        class: 'v-responsive__sizer',
+        class: 'v-responsive__sizer'
       })
-    },
+    }
   },
 
   methods: {
     genContent (): VNode {
       return h('div', {
-        class: ['v-responsive__content', this.contentClass],
+        class: ['v-responsive__content', this.contentClass]
       }, getSlot(this))
-    },
+    }
   },
 
   render (): VNode {
     return h('div', mergeProps({
       class: 'v-responsive',
-      style: this.measurableStyles,
+      style: this.measurableStyles
     }, this.$attrs)
     , [
       this.__cachedSizer,
-      this.genContent(),
+      this.genContent()
     ])
-  },
+  }
 })

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

@@ -4,24 +4,29 @@ import VResponsive from '../VResponsive'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VResponsive.ts', () => {
   type Instance = InstanceType<typeof VResponsive>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VResponsive, {
-        ...options,
+        ...options
       })
     }
   })
 
   it('should force aspect ratio', () => {
     const wrapper = mountFunction({
-      propsData: { aspectRatio: 16 / 9 },
+      props: { aspectRatio: 16 / 9 }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -30,8 +35,8 @@ describe('VResponsive.ts', () => {
   it('should render content', () => {
     const wrapper = mountFunction({
       slots: {
-        default: { render: h => h('div', ['content']) },
-      },
+        default: () => h('div', ['content'])
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -39,7 +44,7 @@ describe('VResponsive.ts', () => {
 
   it('should set height', () => {
     const wrapper = mountFunction({
-      propsData: { height: 100, maxHeight: 200 },
+      props: { height: 100, maxHeight: 200 }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

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

@@ -2,8 +2,8 @@
 
 exports[`VResponsive.ts should force aspect ratio 1`] = `
 <div class="v-responsive">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
   >
   </div>
   <div class="v-responsive__content">