@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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,73 +54,81 @@ 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 })
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.height).toBe('auto')
   })
 
-  it('should use reverse transition', () => {
+  it('should use reverse transition', async () => {
     const wrapper = mountFunction({
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
     expect(wrapper.vm.computedTransition).toBe(VTabTransition)
 
-    wrapper.setData({ isReverse: true })
+    await wrapper.setData({ isReverse: true })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.computedTransition).toBe(VTabReverseTransition)
   })
 
-  it('should use opposite of reverse transition in rtl', () => {
+  it('should use opposite of reverse transition in rtl', async () => {
     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)
 
-    wrapper.setData({ isReverse: true })
+    await wrapper.setData({ isReverse: true })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.computedTransition).toBe(VTabTransition)
   })
 
   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,
     })
@@ -132,13 +139,13 @@ describe('VStepperContent.ts', () => {
     expect(stepWrapper.element.style.height).toBe('auto')
 
     // should call leave() -- total so far: 1
-    wrapper.setData({ isActive: false })
+    await wrapper.setData({ isActive: false })
     await wrapper.vm.$nextTick()
 
     // 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,41 +153,46 @@ 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.setData({ isActive: false })
     await wrapper.vm.$nextTick()
-    wrapper.setData({ isActive: true })
+    await wrapper.setData({ isActive: true })
     await wrapper.vm.$nextTick()
     expect(enter.mock.calls).toHaveLength(1)
     expect(leave.mock.calls).toHaveLength(1)
   })
 
-  it('should toggle isActive state', () => {
+  it('should toggle isActive state', async () => {
     const wrapper = mountFunction({
-      propsData: { step: 1 },
-      provide: {
-        isVertical: false,
-        stepper: {
-          register: () => {},
-          unregister: () => {},
+      props: { step: 1 },
+      global: {
+        provide: {
+          isVertical: false,
+          stepper: {
+            register: () => {},
+            unregister: () => {},
+          },
         },
       },
     })
 
     wrapper.vm.toggle(1, false)
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.isReverse).toBe(false)
 
     wrapper.vm.toggle('1', false)
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.isReverse).toBe(false)
 
     wrapper.vm.toggle(2, true)
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isReverse).toBe(true)
@@ -188,22 +200,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 +223,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 +232,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,31 +260,30 @@ 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.setData({ isActive: true })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.height).toBe('auto')
 
-    wrapper.setData({ height: 0 })
-
+    await wrapper.setData({ height: 0 })
     await wrapper.vm.$nextTick()
 
     wrapper.vm.onTransition({ propertyName: 'foo' })
@@ -282,17 +291,21 @@ describe('VStepperContent.ts', () => {
 
     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()
+
+    expect(wrapper.vm).toBeDefined()
+
+    // Ожидаем предупреждение о том, что компонент должен использоваться внутри v-stepper
+    expect('[Vuetify] The v-stepper-content component must be used inside a v-stepper').toHaveBeenTipped()
   })
 })

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

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 // Components
 import VStepperStep from '../VStepperStep'
 
@@ -8,16 +6,9 @@ import {
   mount,
   Wrapper,
   MountOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
-Vue.prototype.$vuetify = {
-  icons: {
-    values: {
-      complete: 'mdi-check',
-    },
-  },
-}
-
 const tip = '[Vuetify] The v-stepper-step component must be used inside a v-stepper'
 const warning = '[Vue warn]: Injection "stepClick" not found'
 
@@ -25,9 +16,29 @@ describe('VStepperStep.ts', () => {
   type Instance = InstanceType<typeof VStepperStep>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VStepperStep, {
+        global: {
+          mocks: {
+            $vuetify: {
+              icons: {
+                values: {
+                  complete: 'mdi-check',
+                },
+              },
+            },
+          },
+          provide: {
+            stepClick: jest.fn(),
+            stepper: {
+              register: jest.fn(),
+              unregister: jest.fn(),
+            },
+          },
+        },
         ...options,
       })
     }
@@ -35,104 +46,103 @@ describe('VStepperStep.ts', () => {
 
   it('should accept a custom color', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: document.body,
+      props: {
         color: 'pink',
         complete: true,
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(warning).toHaveBeenWarned()
-    expect(tip).toHaveBeenTipped()
   })
 
   it('should accept a custom css color', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: document.body,
+      props: {
         color: '#aabbcc',
         complete: true,
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(warning).toHaveBeenWarned()
-    expect(tip).toHaveBeenTipped()
   })
 
   it('should emit event and invoke stepClick when clicked', async () => {
     const stepClick = jest.fn()
-    const click = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         editable: true,
       },
-      provide: {
-        stepClick,
+      global: {
+        provide: {
+          stepClick,
+          stepper: {
+            register: jest.fn(),
+            unregister: jest.fn(),
+          },
+        },
       },
     })
-    wrapper.vm.$on('click', click)
 
-    wrapper.find('.v-stepper__step').trigger('click')
-    expect(click).toHaveBeenCalledTimes(1)
+    await wrapper.find('.v-stepper__step--editable').trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
     expect(stepClick).toHaveBeenCalledWith(wrapper.vm.step)
-
-    expect(tip).toHaveBeenTipped()
   })
 
   it('should render', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         step: 1,
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(warning).toHaveBeenWarned()
-    expect(tip).toHaveBeenTipped()
   })
 
   it('should render complete step', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         complete: true,
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(warning).toHaveBeenWarned()
-    expect(tip).toHaveBeenTipped()
   })
 
   it('should render step with error', async () => {
     const wrapper = mountFunction({
-      computed: {
-        hasError: () => true,
+      props: {
+        rules: [() => 'Error message'],
+      },
+      global: {
+        provide: {
+          stepClick: jest.fn(),
+          stepper: {
+            register: jest.fn(),
+            unregister: jest.fn(),
+          },
+        },
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(warning).toHaveBeenWarned()
-    expect(tip).toHaveBeenTipped()
   })
 
   it('should render editable step', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         editable: true,
         complete: true,
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(warning).toHaveBeenWarned()
-    expect(tip).toHaveBeenTipped()
   })
 
   it('should toggle', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         step: 3,
       },
     })
@@ -148,8 +158,5 @@ describe('VStepperStep.ts', () => {
     wrapper.vm.toggle(5)
     expect(wrapper.vm.isActive).toBeFalsy()
     expect(wrapper.vm.isInactive).toBeFalsy()
-
-    expect(warning).toHaveBeenWarned()
-    expect(tip).toHaveBeenTipped()
   })
 })

package/src/components/VStepper/__tests__/__snapshots__/VStepperStep.spec.ts.snap

@@ -5,8 +5,8 @@ exports[`VStepperStep.ts should accept a custom color 1`] = `
      class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
 >
   <span class="v-stepper__step__step pink">
-    <i aria-hidden="true"
-       class="v-icon notranslate mdi mdi-check theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
     >
     </i>
   </span>
@@ -22,8 +22,8 @@ exports[`VStepperStep.ts should accept a custom css color 1`] = `
   <span class="v-stepper__step__step"
         style="background-color: rgb(170, 187, 204); border-color: #aabbcc;"
   >
-    <i aria-hidden="true"
-       class="v-icon notranslate mdi mdi-check theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
     >
     </i>
   </span>
@@ -49,8 +49,8 @@ exports[`VStepperStep.ts should render complete step 1`] = `
      class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
 >
   <span class="v-stepper__step__step primary">
-    <i aria-hidden="true"
-       class="v-icon notranslate mdi mdi-check theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
     >
     </i>
   </span>
@@ -64,10 +64,9 @@ exports[`VStepperStep.ts should render editable step 1`] = `
      class="v-stepper__step v-stepper__step--editable v-stepper__step--inactive v-stepper__step--complete"
 >
   <span class="v-stepper__step__step primary">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light material-icons"
+       aria-hidden="true"
     >
-      $edit
     </i>
   </span>
   <div class="v-stepper__label">
@@ -80,10 +79,9 @@ exports[`VStepperStep.ts should render step with error 1`] = `
      class="v-stepper__step v-stepper__step--inactive v-stepper__step--error error--text"
 >
   <span class="v-stepper__step__step">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-alert"
+       aria-hidden="true"
     >
-      $error
     </i>
   </span>
   <div class="v-stepper__label">

package/src/components/VSubheader/VSubheader.ts

@@ -26,7 +26,7 @@ export default mixins(
       class: ['v-subheader', {
         'v-subheader--inset': this.inset,
         ...this.themeClasses,
-      }, this.$attrs.class],
+      }],
       ...this.$listeners
     }, getSlot(this))
   },