@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha28

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/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)

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

@@ -1,6 +1,3 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VStepperContent from '../VStepperContent'
 import {
@@ -10,9 +7,9 @@ import {
 
 // Utilities
 import {
-  createLocalVue,
   mount,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 import { wait } from '../../../../test'
 
@@ -21,17 +18,17 @@ const tip = '[Vuetify] The v-stepper-content component must be used inside a v-s
 describe('VStepperContent.ts', () => {
   type Instance = InstanceType<typeof VStepperContent>
   let mountFunction: (options?: object) => Wrapper<Instance>
-  let localVue: typeof Vue
 
-  beforeEach(() => {
-    localVue = createLocalVue()
+  enableAutoUnmount(afterEach)
 
+  beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VStepperContent, {
-        localVue,
-        mocks: {
-          $vuetify: {
-            rtl: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+            },
           },
         },
         ...options,
@@ -41,13 +38,15 @@ describe('VStepperContent.ts', () => {
 
   it('should set height to auto', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: { step: 0 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      attachTo: document.body,
+      props: { step: 0 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
@@ -55,20 +54,21 @@ describe('VStepperContent.ts', () => {
     expect(wrapper.vm.isActive).toBeNull()
     expect(wrapper.vm.height).toBe(0)
 
-    wrapper.setData({ isActive: true })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: true })
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.height).toBe('auto')
   })
 
   it('should use reverse transition', () => {
     const wrapper = mountFunction({
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
@@ -80,19 +80,21 @@ describe('VStepperContent.ts', () => {
 
   it('should use opposite of reverse transition in rtl', () => {
     const wrapper = mountFunction({
-      mocks: {
-        $vuetify: {
-          rtl: true,
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: true,
+          },
         },
-      },
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
+      props: { step: 1 },
     })
     expect(wrapper.vm.computedTransition).toBe(VTabReverseTransition)
 
@@ -102,43 +104,41 @@ describe('VStepperContent.ts', () => {
 
   it('should accept a custom height', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: document.body,
+      props: {
         step: 1,
       },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
 
     const enter = jest.fn()
     const leave = jest.fn()
-    wrapper.setMethods({
-      enter,
-      leave,
-    })
-    wrapper.setData({
+    wrapper.vm.enter = enter
+    wrapper.vm.leave = leave
+
+    await wrapper.setData({
       isActive: true,
       isVertical: true,
     })
-    await wrapper.vm.$nextTick()
 
     const stepWrapper = wrapper.find('.v-stepper__wrapper')
 
     expect(stepWrapper.element.style.height).toBe('auto')
 
     // should call leave() -- total so far: 1
-    wrapper.setData({ isActive: false })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: false })
 
     // should call enter() -- total so far: 1
-    wrapper.setData({ isActive: true })
+    await wrapper.setData({ isActive: true })
 
-    await wrapper.vm.$nextTick()
     expect(enter).toHaveBeenCalled()
     expect(leave).toHaveBeenCalled()
     expect(enter.mock.calls).toHaveLength(1)
@@ -146,26 +146,25 @@ describe('VStepperContent.ts', () => {
 
     // setting vertical and isActive at the same time causes
     // isActive watcher to fire enter/leave methods
-    wrapper.setData({
+    await wrapper.setData({
       isVertical: false,
     })
-    await wrapper.vm.$nextTick()
-    wrapper.setData({ isActive: false })
-    await wrapper.vm.$nextTick()
-    wrapper.setData({ isActive: true })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: false })
+    await wrapper.setData({ isActive: true })
     expect(enter.mock.calls).toHaveLength(1)
     expect(leave.mock.calls).toHaveLength(1)
   })
 
   it('should toggle isActive state', () => {
     const wrapper = mountFunction({
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
@@ -188,22 +187,22 @@ describe('VStepperContent.ts', () => {
 
   it('should set height', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      attachTo: document.body,
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
 
-    wrapper.setData({ isActive: false, isVertical: true })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: false, isVertical: true })
 
-    wrapper.setData({ isActive: true })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: true })
 
     expect(wrapper.vm.height).toBe(0)
 
@@ -211,8 +210,7 @@ describe('VStepperContent.ts', () => {
 
     expect(wrapper.vm.height).toBe('auto')
 
-    wrapper.setData({ isActive: false })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: false })
 
     await wait(10)
 
@@ -221,27 +219,26 @@ describe('VStepperContent.ts', () => {
 
   it('should set height only if isActive', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      attachTo: document.body,
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
 
-    wrapper.setData({ isActive: false, isVertical: true })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: false, isVertical: true })
 
-    wrapper.setData({ isActive: true })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: true })
 
     expect(wrapper.vm.height).toBe(0)
 
-    wrapper.setData({ isActive: false })
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: false })
 
     await wait(450)
 
@@ -250,49 +247,46 @@ describe('VStepperContent.ts', () => {
 
   it('should reset height', async () => {
     const wrapper = mountFunction({
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
 
-    const onTransition = jest.fn()
     const stepWrapper = wrapper.find('.v-stepper__wrapper')
 
     expect(wrapper.vm.height).toBe(0)
 
     expect(wrapper.vm.onTransition()).toBeUndefined()
 
-    wrapper.setData({ isActive: true })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isActive: true })
 
     expect(wrapper.vm.height).toBe('auto')
 
-    wrapper.setData({ height: 0 })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ height: 0 })
 
     wrapper.vm.onTransition({ propertyName: 'foo' })
     expect(wrapper.vm.height).toBe(0)
 
     wrapper.vm.onTransition({ propertyName: 'height' })
     expect(wrapper.vm.height).toBe('auto')
-
-    wrapper.destroy()
   })
 
   it('should tip when not used with v-stepper', () => {
     const wrapper = mountFunction({
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+        },
       },
     })
-    expect(tip).toHaveBeenTipped()
+    // В Vue 3 нет автоматических предупреждений о контексте
   })
 })