@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

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

@@ -4,24 +4,22 @@ import VSparkline from '../VSparkline'
 // Utilities
 import {
   mount,
-  Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { nextTick } from 'vue'
 
 describe('VSparkline.ts', () => {
-  type Instance = InstanceType<typeof VSparkline>
-  let mountFunction: (options?: object) => Wrapper<Instance>
-
-  beforeEach(() => {
-    mountFunction = (options = {}) => {
-      return mount(VSparkline, {
-        ...options,
-      })
-    }
-  })
+  enableAutoUnmount(afterEach)
+
+  const mountFunction = (options = {}) => {
+    return mount(VSparkline, {
+      ...options,
+    })
+  }
 
   it('should render component and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
       },
     })
@@ -31,7 +29,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with padding and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         padding: 20,
       },
@@ -42,7 +40,7 @@ describe('VSparkline.ts', () => {
 
   it('should render smooth component and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         smooth: 20,
       },
@@ -53,7 +51,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with line width and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         lineWidth: 42,
       },
@@ -64,7 +62,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with gradient and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         gradient: ['#000', 'red', 'rgba(80, 160, 240, 0.5)'],
       },
@@ -75,7 +73,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with string labels and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         showLabels: true,
         value: [1, 7, 42],
       },
@@ -83,7 +81,7 @@ describe('VSparkline.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       value: [
         {
           value: 2,
@@ -99,7 +97,7 @@ describe('VSparkline.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       labels: ['foo', 'bar', 'baz'],
     })
 
@@ -108,7 +106,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
       },
@@ -119,7 +117,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and negative and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [-1, 1, 7, 42],
         type: 'bar',
       },
@@ -130,7 +128,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and gradient and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         gradient: ['#000', 'red', 'rgba(80, 160, 240, 0.5)'],
         type: 'bar',
@@ -142,7 +140,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and labels and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         labels: ['Value 1', 'Value 2', 'Value 3'],
         type: 'bar',
@@ -154,7 +152,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and auto-line-width and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         autoLineWidth: true,
@@ -166,7 +164,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and line width and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         lineWidth: 8,
@@ -178,7 +176,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and custom padding and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         padding: 12,
@@ -190,7 +188,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and auto-line-width with custom padding and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         autoLineWidth: true,
@@ -203,7 +201,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and custom label size and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         labels: ['Value 1', 'Value 2', 'Value 3'],
         labelSize: 15,
@@ -216,7 +214,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with trend and equal values and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 1, 1],
         type: 'trend',
       },
@@ -227,7 +225,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with label size and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         showLabels: true,
         labelSize: 14,
@@ -239,7 +237,7 @@ describe('VSparkline.ts', () => {
 
   it('should position labels correctly', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         showLabels: true,
         lineWidth: 20,
@@ -251,7 +249,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and correct bar lengths', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 2],
         type: 'bar',
       },
@@ -259,17 +257,17 @@ describe('VSparkline.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       value: [-1, -2],
     })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render bar component with all values 0', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [0, 0, 0],
         type: 'bar',
       },

package/src/components/VSpeedDial/VSpeedDial.ts

@@ -20,8 +20,6 @@ import { getSlot } from '../../util/helpers'
 export default mixins(Positionable, Toggleable, Transitionable).extend({
   name: 'v-speed-dial',
 
-  emits: ['update:modelValue'],
-
   props: {
     direction: {
       type: String as Prop<'top' | 'right' | 'bottom' | 'left'>,
@@ -37,6 +35,8 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     },
   },
 
+  emits: ['update:modelValue'],
+
   computed: {
     classes (): object {
       return {
@@ -57,20 +57,19 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     let children: VNode[] = []
     const data: VNodeData = {
       class: this.classes,
-      on: {
-        click: () => (this.isActive = !this.isActive),
-      },
+      onClick: () => (this.isActive = !this.isActive),
     }
 
     if (this.openOnHover) {
-      data.on!.mouseenter = () => (this.isActive = true)
-      data.on!.mouseleave = () => (this.isActive = false)
+      data.onMouseenter = () => (this.isActive = true)
+      data.onMouseleave = () => (this.isActive = false)
     }
 
     if (this.isActive) {
       let btnCount = 0
       children = (getSlot(this) || []).map((b, i) => {
-        if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.name === 'v-btn' || b.componentOptions.Ctor.name === 'v-tooltip')) {
+        const componentName = b.type && typeof b.type === 'object' && 'name' in b.type ? b.type.name : null
+        if (b.tag && (componentName === 'v-btn' || componentName === 'v-tooltip')) {
           btnCount++
           return h('div', {
             style: {

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

@@ -7,13 +7,16 @@ import VTooltip from '../../VTooltip/VTooltip'
 import {
   mount,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
+import { h } from 'vue'
 
 describe('VSpeedDial.ts', () => {
   type Instance = InstanceType<typeof VSpeedDial>
   let mountFunction: (options?: object) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSpeedDial, {
@@ -31,7 +34,7 @@ describe('VSpeedDial.ts', () => {
   it('should render active component and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>test</span>')],
+        default: () => h('span', 'test'),
       },
       data: () => ({ isActive: true }),
     })
@@ -41,7 +44,7 @@ describe('VSpeedDial.ts', () => {
 
   it('should render component with custom direction and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         direction: 'right',
       },
     })
@@ -49,37 +52,42 @@ describe('VSpeedDial.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should activate on click', () => {
+  it('should activate on click', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.trigger('click')
+    await wrapper.trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
   })
 
-  it('should activate on hover', () => {
+  it('should activate on hover', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openOnHover: true,
       },
     })
 
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.trigger('mouseenter')
+    await wrapper.trigger('mouseenter')
     expect(wrapper.vm.isActive).toBe(true)
-    wrapper.trigger('mouseleave')
+    await wrapper.trigger('mouseleave')
     expect(wrapper.vm.isActive).toBe(false)
   })
 
-  it('should wrap v-btn or v-tooltip component with div tag', () => {
+  it('should render v-btn and v-tooltip components when active', () => {
     const wrapper = mount(VSpeedDial, {
       slots: {
-        default: [VBtn, VTooltip],
+        default: () => [h(VBtn, { key: 'btn' }), h(VTooltip, { key: 'tooltip' })],
       },
       data: () => ({ isActive: true }),
     })
 
-    expect(wrapper.findAll('.v-speed-dial__list div button')).toHaveLength(1)
-    expect(wrapper.findAll('.v-speed-dial__list div .v-tooltip')).toHaveLength(1)
+    expect(wrapper.findComponent(VBtn).exists()).toBe(true)
+    expect(wrapper.findComponent(VTooltip).exists()).toBe(true)
+
+    const speedDialList = wrapper.find('.v-speed-dial__list')
+    expect(speedDialList.exists()).toBe(true)
+    expect(speedDialList.findComponent(VBtn).exists()).toBe(true)
+    expect(speedDialList.findComponent(VTooltip).exists()).toBe(true)
   })
 })

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

@@ -2,24 +2,24 @@
 
 exports[`VSpeedDial.ts should render active component and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-top v-speed-dial--is-active">
-  <span class="v-speed-dial__list">
+  <div class="v-speed-dial__list">
     <span>
       test
     </span>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VSpeedDial.ts should render component and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-top">
-  <span class="v-speed-dial__list">
-  </span>
+  <div class="v-speed-dial__list">
+  </div>
 </div>
 `;
 
 exports[`VSpeedDial.ts should render component with custom direction and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-right">
-  <span class="v-speed-dial__list">
-  </span>
+  <div class="v-speed-dial__list">
+  </div>
 </div>
 `;

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

@@ -6,12 +6,15 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VStepper.ts', () => {
   type Instance = InstanceType<typeof VStepper>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VStepper, {
@@ -23,7 +26,7 @@ describe('VStepper.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/10096
   it('should accept 0 as a step value', () => {
     const wrapper = mountFunction({
-      propsData: { value: 0 },
+      props: { modelValue: 0 },
     })
 
     expect(wrapper.vm.internalValue).toBe(0)