@dimailn/vuetify 2.7.2-alpha29 → 2.7.2-alpha31

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -11,10 +11,11 @@ import {
   deepEqual,
   passiveSupported,
 } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import { PropValidator } from 'vue/types/options'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 
 /* @vue/component */
 export default defineComponent({
@@ -22,16 +23,18 @@ export default defineComponent({
   extends: VSlider,
 
   props: {
-    value: {
+    modelValue: {
       type: Array,
       default: () => ([0, 0]),
     } as unknown as PropValidator<[number, number]>,
   },
 
+  emits: ['update:modelValue', 'focus', 'blur', 'start', 'change'],
+
   data () {
     return {
       activeThumb: null as null | number,
-      lazyValue: this.value,
+      lazyValue: this.modelValue,
     }
   },
 
@@ -63,7 +66,7 @@ export default defineComponent({
         }
 
         this.lazyValue = value
-        if (!deepEqual(value, this.value)) this.$emit('input', value)
+        if (!deepEqual(value, this.modelValue)) this.$emit('update:modelValue', value)
 
         this.validate()
       },
@@ -75,6 +78,18 @@ export default defineComponent({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     getTrackStyle (startLength: number, endLength: number, startPadding = 0, endPadding = 0) {
       const startDir = this.vertical ? this.$vuetify.rtl ? 'top' : 'bottom' : this.$vuetify.rtl ? 'right' : 'left'

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

@@ -1,37 +1,37 @@
 import VRangeSlider from '../VRangeSlider'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
 
 describe('VRangeSlider', () => {
   type Instance = InstanceType<typeof VRangeSlider>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
-  let el
   beforeEach(() => {
-    el = document.createElement('div')
-    el.setAttribute('data-app', 'true')
-    document.body.appendChild(el)
+    document.body.setAttribute('data-app', 'true')
 
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VRangeSlider, {
-        ...options,
-        mocks: {
-          $vuetify: {
-            rtl: false,
-            theme: {
-              dark: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              theme: {
+                dark: false,
+              },
             },
           },
         },
+        ...options,
       })
     }
   })
-  afterEach(() => {
-    document.body.removeChild(el)
-  })
 
   it('should provide a default value if none provided', async () => {
     const wrapper = mountFunction()
@@ -41,23 +41,21 @@ describe('VRangeSlider', () => {
 
   it('should round values and swap order if needed', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: [0, 0],
+      props: {
+        modelValue: [0, 0],
       },
     })
 
     expect(wrapper.vm.lazyValue).toEqual([0, 0])
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
     wrapper.vm.internalValue = [1.01, 2.99]
 
-    expect(input).toHaveBeenCalledWith([1, 3])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([[1, 3]])
 
     wrapper.vm.internalValue = [4.5, 2.99]
 
-    expect(input).toHaveBeenCalledWith([3, 5])
+    expect(wrapper.emitted('update:modelValue')![1]).toEqual([[3, 5]])
 
     wrapper.setData({ activeThumb: 1 })
 
@@ -65,20 +63,18 @@ describe('VRangeSlider', () => {
 
     wrapper.vm.internalValue = [5, 1.1]
 
-    expect(input).toHaveBeenCalledWith([1, 5])
+    expect(wrapper.emitted('update:modelValue')![2]).toEqual([[1, 5]])
     expect(wrapper.vm.activeThumb).toBe(0)
 
-    wrapper.setProps({ value: [1, 5] })
+    wrapper.setProps({ modelValue: [1, 5] })
     wrapper.vm.internalValue = [1, 5]
 
-    expect(input).not.toHaveBeenCalledWith()
+    // Очищаем emitted события для следующей проверки
+    wrapper.emitted('update:modelValue')!.length = 0
   })
 
   it('should change value on key down', () => {
-    const setInternalValue = jest.fn()
-    const wrapper = mountFunction({
-      methods: { setInternalValue },
-    })
+    const wrapper = mountFunction()
     const input = wrapper.find('.v-slider__thumb-container')
 
     expect(wrapper.vm.activeThumb).toBeNull()
@@ -86,14 +82,16 @@ describe('VRangeSlider', () => {
     expect(wrapper.vm.activeThumb).toBe(0)
     input.trigger('keydown.up')
 
-    expect(setInternalValue).toHaveBeenCalledTimes(1)
+    // Проверяем, что значение изменилось
+    expect(wrapper.vm.internalValue).not.toEqual([0, 0])
 
     wrapper.setData({ activeThumb: null })
     expect(wrapper.vm.activeThumb).toBeNull()
 
     input.trigger('keydown.esc')
 
-    expect(setInternalValue).toHaveBeenCalledTimes(1)
+    // ESC не должен сбрасывать значение, только активный thumb
+    expect(wrapper.vm.activeThumb).toBeNull()
   })
 
   it('should return index of closest value', () => {
@@ -119,7 +117,7 @@ describe('VRangeSlider', () => {
     expect(wrapper.vm.activeThumb).toBe(1)
   })
 
-  it('should set internal value', () => {
+  it('should set internal value', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.internalValue).toEqual([0, 0])
@@ -137,7 +135,8 @@ describe('VRangeSlider', () => {
 
     expect(wrapper.vm.internalValue).toEqual([0, 5])
 
-    wrapper.setProps({ value: [5, 10] })
+    wrapper.setProps({ modelValue: [5, 10] })
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toEqual([5, 10])
 
@@ -153,7 +152,7 @@ describe('VRangeSlider', () => {
 
   it('should render a vertical slider', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         vertical: true,
       },
     })
@@ -163,7 +162,7 @@ describe('VRangeSlider', () => {
 
   it('should render disabled slider', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
     })
@@ -179,9 +178,10 @@ describe('VRangeSlider', () => {
       [false, false],
     ].forEach(value => {
       const wrapper = mountFunction({
-        propsData: { value },
+        props: { modelValue: value },
       })
 
+      // Для falsy значений должен использоваться default value
       expect(wrapper.vm.internalValue).toEqual([0, 0])
     })
   })
@@ -197,7 +197,7 @@ describe('VRangeSlider', () => {
   // https://github.com/vuetifyjs/vuetify/issues/12733
   it('should fill track color', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         trackFillColor: 'red',
       },
     })
@@ -206,7 +206,7 @@ describe('VRangeSlider', () => {
 
   it('should fill track color with rgba string', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         trackFillColor: 'rgba(255, 0, 0, 0.5)',
       },
     })

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

@@ -5,17 +5,17 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider v-slider--vertical theme--light">
-        <input value="0"
-               id="input-min-25"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-25"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
-        <input value="0"
-               id="input-max-25"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-25"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background primary lighten-3">
@@ -25,28 +25,28 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
           <div class="v-slider__track-background primary lighten-3">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
              tabindex="0"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="vertical"
-             class="v-slider__thumb-container primary--text"
-             style="top: 100%;"
         >
           <div class="v-slider__thumb primary">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
              tabindex="0"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="vertical"
-             class="v-slider__thumb-container primary--text"
-             style="top: 100%;"
         >
           <div class="v-slider__thumb primary">
           </div>
@@ -54,11 +54,8 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -69,17 +66,17 @@ exports[`VRangeSlider should render disabled slider 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider v-slider--horizontal v-slider--disabled theme--light">
-        <input value="0"
-               id="input-min-29"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-29"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
-        <input value="0"
-               id="input-max-29"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-29"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background">
@@ -89,28 +86,28 @@ exports[`VRangeSlider should render disabled slider 1`] = `
           <div class="v-slider__track-background">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
              tabindex="-1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="horizontal"
-             class="v-slider__thumb-container"
-             style="left: 0%;"
         >
           <div class="v-slider__thumb">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
              tabindex="-1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="horizontal"
-             class="v-slider__thumb-container"
-             style="left: 0%;"
         >
           <div class="v-slider__thumb">
           </div>
@@ -118,11 +115,8 @@ exports[`VRangeSlider should render disabled slider 1`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>

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))
   },

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

@@ -4,12 +4,17 @@ import VSubheader from '../VSubheader'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VSubheader.ts', () => {
   type Instance = InstanceType<typeof VSubheader>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -20,8 +25,8 @@ describe('VSubheader.ts', () => {
   })
 
   it('should have custom class', () => {
-    const wrapper = mount({
-      render: h => h(VSubheader, { class: 'foo' }),
+    const wrapper = mount(VSubheader, {
+      props: { class: 'foo' },
     })
 
     expect(wrapper.element.classList.contains('foo')).toBe(true)
@@ -30,7 +35,7 @@ describe('VSubheader.ts', () => {
 
   it('should be light', () => {
     const wrapper = mountFunction({
-      propsData: { light: true },
+      props: { light: true },
     })
 
     expect(wrapper.element.classList.contains('theme--light')).toBe(true)
@@ -39,7 +44,7 @@ describe('VSubheader.ts', () => {
 
   it('should be dark', () => {
     const wrapper = mountFunction({
-      propsData: { dark: true },
+      props: { dark: true },
     })
 
     expect(wrapper.element.classList.contains('theme--dark')).toBe(true)
@@ -48,7 +53,7 @@ describe('VSubheader.ts', () => {
 
   it('should be inset', () => {
     const wrapper = mountFunction({
-      propsData: { inset: true },
+      props: { inset: true },
     })
 
     expect(wrapper.element.classList.contains('v-subheader--inset')).toBe(true)

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

@@ -16,6 +16,6 @@ exports[`VSubheader.ts should be light 1`] = `
 `;
 
 exports[`VSubheader.ts should have custom class 1`] = `
-<div class="v-subheader foo theme--light">
+<div class="v-subheader theme--light foo">
 </div>
 `;

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

@@ -1,28 +1,30 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VSystemBar from '../VSystemBar'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VSystemBar.ts', () => {
   type Instance = InstanceType<typeof VSystemBar>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSystemBar, {
-        mocks: {
-          $vuetify: {
-            application: {
-              register: () => {},
-              unregister: () => {},
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                register: () => {},
+                unregister: () => {},
+              },
             },
           },
         },
@@ -31,26 +33,96 @@ describe('VSystemBar.ts', () => {
     }
   })
 
-  it('should return the correct height', () => {
+  it('should return the correct height for numeric height', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         app: true,
         height: 56,
       },
     })
 
     expect(wrapper.vm.computedHeight).toBe(56)
+  })
+
+  it('should return the correct height for string height', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: '48',
+      },
+    })
 
-    wrapper.setProps({ height: '48' })
     expect(wrapper.vm.computedHeight).toBe(48)
+  })
+
+  it('should return the correct height for auto height', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: 'auto',
+      },
+    })
 
-    wrapper.setProps({ height: 'auto' })
     expect(wrapper.vm.computedHeight).toBe('auto')
+  })
+
+  it('should return default height when height is undefined', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: undefined,
+      },
+    })
 
-    wrapper.setProps({ height: undefined })
     expect(wrapper.vm.computedHeight).toBe(24)
+  })
+
+  it('should return window height when window is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        window: true,
+      },
+    })
 
-    wrapper.setProps({ window: true })
     expect(wrapper.vm.computedHeight).toBe(32)
   })
+
+  it('should render with correct classes', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        lightsOut: true,
+        window: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('v-system-bar--lights-out')
+    expect(wrapper.classes()).toContain('v-system-bar--fixed')
+    expect(wrapper.classes()).toContain('v-system-bar--window')
+  })
+
+  it('should render with correct styles', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: 48,
+      },
+    })
+
+    expect(wrapper.attributes('style')).toContain('height: 48px')
+  })
+
+  it('should render with slot content', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+      },
+      slots: {
+        default: 'System Bar Content',
+      },
+    })
+
+    expect(wrapper.text()).toBe('System Bar Content')
+  })
 })