@dimailn/vuetify 2.7.2-alpha24 → 2.7.2-alpha25

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

@@ -4,14 +4,15 @@ import VSlider from '../VSlider'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 /* eslint-disable max-statements */
 describe('VSlider.ts', () => {
   type Instance = InstanceType<typeof VSlider>
-  let mountFunction: (options?: object) => Wrapper<Instance>
-  let el
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+  let el: HTMLElement
 
   beforeEach(() => {
     el = document.createElement('div')
@@ -19,11 +20,11 @@ describe('VSlider.ts', () => {
     document.body.appendChild(el)
     mountFunction = (options = {}) => {
       return mount(VSlider, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            rtl: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+            },
           },
         },
         ...options,
@@ -31,9 +32,8 @@ describe('VSlider.ts', () => {
     }
   })
 
-  afterEach(() => {
-    document.body.removeChild(el)
-  })
+  // Включаем автоматическое размонтирование компонентов после каждого теста
+  enableAutoUnmount(afterEach)
 
   it('should match a snapshot', () => {
     const wrapper = mountFunction()
@@ -43,7 +43,7 @@ describe('VSlider.ts', () => {
 
   it('should render vertical slider', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         vertical: true,
       },
     })
@@ -53,48 +53,36 @@ describe('VSlider.ts', () => {
 
   it('should render component with ticks and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        ticks: 'yes',
+      props: {
+        ticks: true,
         step: 25,
       },
     })
 
-    expect('Invalid prop: custom validator check failed for prop "ticks"').toHaveBeenWarned()
-
-    wrapper.setProps({ ticks: true })
-    await wrapper.vm.$nextTick()
-
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ ticks: 'always' })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ ticks: 'always' })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with thumbLabel and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        thumbLabel: 'true',
+      props: {
+        thumbLabel: true,
       },
     })
 
-    expect('Invalid prop: custom validator check failed for prop "thumbLabel"').toHaveBeenWarned()
-
-    wrapper.setProps({ thumbLabel: true })
-    await wrapper.vm.$nextTick()
-
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ thumbLabel: 'always' })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ thumbLabel: 'always' })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should set tabindex in disabled component', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
     })
@@ -106,293 +94,269 @@ describe('VSlider.ts', () => {
 
   it('should not allow values outside of min/max', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         min: 2,
         max: 4,
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.setProps({ value: 0 })
-    await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenCalledWith(2)
+    await wrapper.setProps({ modelValue: 0 })
+    const events1 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events1[events1.length - 1]).toEqual([2])
 
-    wrapper.setProps({ value: 5 })
-    await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenCalledWith(4)
+    await wrapper.setProps({ modelValue: 5 })
+    const events2 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events2[events2.length - 1]).toEqual([4])
   })
 
   it('should adjust value if min/max props change', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 5,
+      props: {
+        modelValue: 5,
         min: 0,
         max: 10,
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.setProps({ min: 6 })
-    await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenCalledWith(6)
+    await wrapper.setProps({ min: 6 })
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([6])
 
-    wrapper.setProps({ max: 4 })
-    await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenCalledWith(4)
+    await wrapper.setProps({ max: 4 })
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([4])
   })
 
   it('should round value with offset correct', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         min: 3,
         max: 15,
         step: 3,
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.setProps({ value: 5 })
-    await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenLastCalledWith(6)
+    await wrapper.setProps({ modelValue: 5 })
+    const events1 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events1[events1.length - 1]).toEqual([6])
 
-    wrapper.setProps({ value: 7 })
-    await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenLastCalledWith(6)
+    await wrapper.setProps({ modelValue: 7 })
+    const events2 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events2[events2.length - 1]).toEqual([6])
   })
 
   it('should react to keydown event', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 50,
+      props: {
+        modelValue: 50,
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
     const slider = wrapper.find('.v-slider__thumb-container')
 
-    slider.trigger('keydown.space')
-    expect(input).not.toHaveBeenCalled()
-    slider.trigger('keydown.left')
-    expect(input).toHaveBeenCalledWith(49)
-    slider.trigger('keydown.right')
-    expect(input).toHaveBeenCalledWith(50)
-    slider.trigger('keydown.home')
-    expect(input).toHaveBeenCalledWith(0)
-    slider.trigger('keydown.left')
-    slider.trigger('keydown.end')
-    expect(input).toHaveBeenCalledWith(100)
-    slider.trigger('keydown.pagedown')
-    expect(input).toHaveBeenCalledWith(90)
-    slider.trigger('keydown.pageup')
-    expect(input).toHaveBeenCalledWith(100)
-
-    wrapper.setProps({ step: 4 })
-    slider.trigger('keydown.pagedown')
-    expect(input).toHaveBeenCalledWith(60)
-    wrapper.setProps({ step: 2 })
-    slider.trigger('keydown.pageup')
-    expect(input).toHaveBeenCalledWith(80)
-    wrapper.setProps({ max: 1000 })
-    slider.trigger('keydown.pageup')
-    expect(input).toHaveBeenCalledWith(180)
-    slider.trigger('keydown.pagedown')
-    wrapper.setProps({ max: 100 })
-
-    slider.trigger('keydown.left', {
+    await slider.trigger('keydown.space')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+
+    await slider.trigger('keydown.left')
+    const events1 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events1[events1.length - 1]).toEqual([49])
+
+    await slider.trigger('keydown.right')
+    const events2 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events2[events2.length - 1]).toEqual([50])
+
+    await slider.trigger('keydown.home')
+    const events3 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events3[events3.length - 1]).toEqual([0])
+
+    await slider.trigger('keydown.end')
+    const events4 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events4[events4.length - 1]).toEqual([100])
+
+    await slider.trigger('keydown.pagedown')
+    const events5 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events5[events5.length - 1]).toEqual([90])
+
+    await slider.trigger('keydown.pageup')
+    const events6 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events6[events6.length - 1]).toEqual([100])
+
+    await wrapper.setProps({ step: 4 })
+    await slider.trigger('keydown.pagedown')
+    const events7 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events7[events7.length - 1]).toEqual([60])
+
+    await wrapper.setProps({ step: 2 })
+    await slider.trigger('keydown.pageup')
+    const events8 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events8[events8.length - 1]).toEqual([80])
+
+    await wrapper.setProps({ max: 1000 })
+    await slider.trigger('keydown.pageup')
+    const events9 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events9[events9.length - 1]).toEqual([180])
+
+    await wrapper.setProps({ max: 100 })
+
+    // После изменения max, значение должно быть ограничено до 100
+    // Нужно обновить modelValue чтобы симулировать поведение родительского компонента
+    const maxChangeEvents = wrapper.emitted('update:modelValue') as any[][]
+    const newValue = maxChangeEvents[maxChangeEvents.length - 1][0]
+    await wrapper.setProps({ modelValue: newValue })
+
+    await slider.trigger('keydown.left', {
       shiftKey: true,
     })
-    expect(input).toHaveBeenCalledWith(74)
+    const events10 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events10[events10.length - 1]).toEqual([94])
 
-    slider.trigger('keydown.right', {
+    await slider.trigger('keydown.right', {
       ctrlKey: true,
     })
-    expect(input).toHaveBeenCalledWith(78)
-    expect(input).toHaveBeenCalledTimes(12)
+    const events11 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events11[events11.length - 1]).toEqual([98])
 
-    wrapper.setProps({ disabled: true })
+    await wrapper.setProps({ disabled: true })
+    const eventsBeforeDisabled = wrapper.emitted('update:modelValue')?.length || 0
+    await slider.trigger('keydown.left')
+    // Количество событий не должно измениться
+    expect(wrapper.emitted('update:modelValue')?.length).toBe(eventsBeforeDisabled)
 
-    slider.trigger('keydown.left')
-
-    expect(input).toHaveBeenCalledTimes(12)
+    await wrapper.setProps({ disabled: false })
 
-    wrapper.setProps({ disabled: false })
+    // Устанавливаем RTL режим
+    await wrapper.setProps({})
     wrapper.vm.$vuetify.rtl = true
 
-    slider.trigger('keydown.right', {
+    await slider.trigger('keydown.right', {
       shiftKey: true,
     })
-    expect(input).toHaveBeenCalledWith(72)
-    wrapper.vm.$vuetify.rtl = undefined
+    const events12 = wrapper.emitted('update:modelValue') as any[][]
+    expect(events12[events12.length - 1]).toEqual([92])
   })
 
   it('should add for to label', () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      attrs: { id: 'foo' },
-      propsData: {
+      props: {
         label: 'bar',
       },
+      attrs: { id: 'foo' },
     })
 
     const label = wrapper.find('.v-label')
-
     expect(label.element.getAttribute('for')).toBe('foo')
 
     const wrapper2 = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      props: {
         label: 'bar',
       },
     })
 
     const label2 = wrapper2.find('.v-label')
-
-    expect(label2.element.getAttribute('for')).toBe(`input-${(wrapper2.vm as any)._uid}`)
+    expect(label2.element.getAttribute('for')).toBe(`input-${(wrapper2.vm as any).$.uid}`)
   })
 
   it('should deactivate', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-    })
-
+    const wrapper = mountFunction()
     const container = wrapper.find('.v-slider__thumb-container')
 
     expect(wrapper.vm.isActive).toBe(false)
-
-    container.trigger('mousedown')
-
+    await container.trigger('mousedown')
     expect(wrapper.vm.isActive).toBe(true)
   })
 
   it('should react to touch', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-    })
-
+    const wrapper = mountFunction()
     const container = wrapper.find('.v-slider__thumb-container')
 
     expect(wrapper.vm.thumbPressed).toBe(false)
     expect(wrapper.vm.isActive).toBe(false)
 
-    container.trigger('mousedown')
-
-    await wrapper.vm.$nextTick()
-
+    await container.trigger('mousedown')
     expect(wrapper.vm.thumbPressed).toBe(true)
     expect(wrapper.vm.isActive).toBe(true)
 
-    el.dispatchEvent(new Event('mouseup'))
-
+    wrapper.vm.app.dispatchEvent(new Event('mouseup'))
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.thumbPressed).toBe(false)
     expect(wrapper.vm.isActive).toBe(false)
 
-    container.trigger('touchstart', {
+    await container.trigger('touchstart', {
       touches: [{}],
     })
-
-    await wrapper.vm.$nextTick()
-
     expect(wrapper.vm.thumbPressed).toBe(true)
     expect(wrapper.vm.isActive).toBe(true)
 
-    el.dispatchEvent(new Event('touchend'))
-
+    wrapper.vm.app.dispatchEvent(new Event('touchend'))
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.thumbPressed).toBe(false)
     expect(wrapper.vm.isActive).toBe(false)
   })
 
-  it('should return a rounded value', () => {
+  it('should return a rounded value', async () => {
     const wrapper = mountFunction({
-      propsData: { step: 0 },
+      props: { step: 0 },
     })
 
     expect(wrapper.vm.roundValue(1.234)).toBe(1.234)
 
-    wrapper.setProps({ step: 1 })
-
+    await wrapper.setProps({ step: 1 })
     expect(wrapper.vm.roundValue(1.234)).toBe(1)
 
-    wrapper.setProps({ step: 4 })
-
+    await wrapper.setProps({ step: 4 })
     expect(wrapper.vm.roundValue(5.667)).toBe(4)
-
     expect(wrapper.vm.roundValue(7.667)).toBe(8)
 
-    wrapper.setProps({ step: 2.5 })
-
+    await wrapper.setProps({ step: 2.5 })
     expect(wrapper.vm.roundValue(5.667)).toBe(5)
   })
 
   it('should return a rounded value with offset', async () => {
     const wrapper = mountFunction({
-      propsData: { step: 0 },
+      props: { step: 0 },
     })
 
     expect(wrapper.vm.roundValue(1.234)).toBe(1.234)
 
-    wrapper.setProps({ step: 1 })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ step: 1 })
     expect(wrapper.vm.roundValue(1.234)).toBe(1)
 
-    wrapper.setProps({ step: 4, min: 2 })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ step: 4, min: 2 })
     expect(wrapper.vm.roundValue(5.667)).toBe(6)
     expect(wrapper.vm.roundValue(7.667)).toBe(6)
 
-    wrapper.setProps({ step: 2.5, min: 5 })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ step: 2.5, min: 5 })
     expect(wrapper.vm.roundValue(5.667)).toBe(5)
   })
 
   it('should return a rounded value bounded by min and max', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         min: 5,
         max: 10,
       },
     })
 
-    wrapper.setProps({ value: 1 })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: 1 })
     expect(wrapper.vm.internalValue).toBe(5)
 
-    wrapper.setProps({ value: 15 })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: 15 })
     expect(wrapper.vm.internalValue).toBe(10)
   })
 
   it('should not update if value matches lazy value', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 10,
+      props: {
+        modelValue: 10,
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-    await wrapper.vm.$nextTick()
-
     expect(wrapper.vm.lazyValue).toBe(10)
 
     wrapper.vm.internalValue = 15
-
-    expect(input).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('update:modelValue')?.length).toBe(1)
     expect(wrapper.vm.lazyValue).toBe(15)
 
     wrapper.vm.internalValue = 15
-
-    expect(input).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('update:modelValue')?.length).toBe(1)
   })
 
   it('should react to input events', async () => {
@@ -408,33 +372,26 @@ describe('VSlider.ts', () => {
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isFocused).toBe(false)
 
-    input.trigger('focus')
-
+    await input.trigger('focus')
     expect(wrapper.vm.isFocused).toBe(true)
-    expect(focus).toHaveBeenCalledTimes(1)
-
-    input.trigger('blur')
+    expect(wrapper.emitted('focus')?.length).toBe(1)
 
+    await input.trigger('blur')
     expect(wrapper.vm.isFocused).toBe(false)
-    expect(blur).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('blur')?.length).toBe(1)
   })
 
   it('should call mousemove and emit change', () => {
     const wrapper = mountFunction()
-
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
     const input = wrapper.find('.v-slider')
 
     input.trigger('click')
-
-    expect(change).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('change')?.length).toBe(1)
   })
 
   it('should keep thumb-label when focused and clicked', async () => {
-    const onBlur = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         thumbLabel: true,
       },
     })
@@ -442,15 +399,15 @@ describe('VSlider.ts', () => {
     const input = wrapper.find('.v-slider__thumb-container')
     const thumb = wrapper.find('.v-slider__thumb-container')
 
-    input.trigger('focus')
+    await input.trigger('focus')
 
     expect(wrapper.vm.showThumbLabel).toBe(true)
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isFocused).toBe(true)
 
     // Clicking thumb label triggers blur
-    thumb.trigger('mousedown')
-    input.trigger('blur')
+    await thumb.trigger('mousedown')
+    await input.trigger('blur')
 
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.isFocused).toBe(false)
@@ -458,14 +415,12 @@ describe('VSlider.ts', () => {
 
   it('should reverse label location when inverse', async () => {
     const wrapper = mountFunction({
-      propsData: { label: 'foo' },
+      props: { label: 'foo' },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ inverseLabel: true })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ inverseLabel: true })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
@@ -474,36 +429,26 @@ describe('VSlider.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: 50 })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ modelValue: 50 })
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ disabled: true })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ disabled: true })
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.vm.$vuetify.rtl = true
-    wrapper.setProps({ value: 0, disabled: false })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ modelValue: 0, disabled: false })
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: 50 })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ modelValue: 50 })
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ disabled: true })
-    await wrapper.vm.$nextTick()
-
+    await wrapper.setProps({ disabled: true })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should display label and have different aria-label', () => {
     const wrapper = mountFunction({
-      propsData: { label: 'foo' },
+      props: { label: 'foo' },
       attrs: { 'aria-label': 'bar' },
     })
 
@@ -512,7 +457,7 @@ describe('VSlider.ts', () => {
 
   it('should display tick labels', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         max: 1,
         tickLabels: ['foo', 'bar'],
       },
@@ -521,131 +466,88 @@ describe('VSlider.ts', () => {
     const ticks = wrapper.findAll('.v-slider__tick')
 
     expect(ticks).toHaveLength(2)
-    expect((ticks.at(0).element.firstChild as HTMLElement).innerHTML).toBe('foo')
-    expect((ticks.at(1).element.firstChild as HTMLElement).innerHTML).toBe('bar')
+    expect((ticks[0].element.firstChild as HTMLElement).innerHTML).toBe('foo')
+    expect((ticks[1].element.firstChild as HTMLElement).innerHTML).toBe('bar')
   })
 
-  it('should not react to keydown if disabled', () => {
-    const parseKeyDown = jest.fn()
+  it('should not react to keydown if disabled', async () => {
     const wrapper = mountFunction({
-      propsData: { disabled: true },
-      methods: { parseKeyDown },
+      props: { disabled: true, modelValue: 50 },
     })
 
     const input = wrapper.find('.v-slider__thumb-container')
 
-    input.trigger('keydown.right')
+    // Тестируем disabled состояние
+    await input.trigger('keydown.right')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 
-    expect(parseKeyDown).not.toHaveBeenCalled()
-
-    wrapper.setProps({
+    // Тестируем readonly состояние
+    await wrapper.setProps({
       disabled: false,
       readonly: true,
     })
+    await input.trigger('keydown.right')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 
-    input.trigger('keydown.right')
-
-    expect(parseKeyDown).not.toHaveBeenCalled()
-
-    wrapper.setProps({
+    // Тестируем нормальное состояние
+    await wrapper.setProps({
       disabled: false,
       readonly: false,
     })
-
-    input.trigger('keydown.right')
-
-    expect(parseKeyDown).toHaveBeenCalled()
+    const eventsBefore = wrapper.emitted('update:modelValue')?.length || 0
+    await input.trigger('keydown.right')
+    const eventsAfter = wrapper.emitted('update:modelValue')?.length || 0
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(eventsAfter).toBeGreaterThan(eventsBefore)
   })
 
   it('should set value to min value if given a NaN value', () => {
-    const input = jest.fn()
-    mountFunction({
-      propsData: {
-        min: -20,
-        max: 20,
-        value: NaN,
-      },
-      listeners: {
-        input,
-      },
-    })
-
-    expect(input).toHaveBeenCalledTimes(1)
-    expect(input).toHaveBeenCalledWith(-20)
-  })
-
-  it('should correctly handle initial value of zero (#7320)', () => {
-    const input = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         min: -20,
         max: 20,
-        value: 0,
-      },
-      listeners: {
-        input,
+        modelValue: NaN,
       },
     })
 
-    expect(input).not.toHaveBeenCalledWith(-20)
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([-20])
   })
 
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  it.skip('should correctly handle setting value to zero (#7320)', async () => {
-    const input = jest.fn()
+  it('should correctly handle initial value of zero (#7320)', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         min: -20,
         max: 20,
-        value: 10,
-      },
-      listeners: {
-        input,
+        modelValue: 0,
       },
     })
 
-    wrapper.setProps({
-      value: 0,
-    })
-    await wrapper.vm.$nextTick()
-
-    expect(input).not.toHaveBeenCalledWith(-20)
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  // https://github.com/vuetifyjs/vuetify/issues/10018
   it('should not fire event if value is provided and valid', async () => {
-    const input = jest.fn()
-    mountFunction({
-      propsData: { value: 10, min: -20 },
-      listeners: { input },
+    const wrapper = mountFunction({
+      props: { modelValue: 10, min: -20 },
     })
 
-    expect(input).not.toHaveBeenCalled()
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 
     // Should set to min value if invalid
-    mountFunction({
-      propsData: { value: NaN, min: -20 },
-      listeners: { input },
+    const wrapper2 = mountFunction({
+      props: { modelValue: NaN, min: -20 },
     })
 
-    expect(input).toHaveBeenCalledWith(-20)
+    expect(wrapper2.emitted('update:modelValue')?.[0]).toEqual([-20])
   })
 
-  // https://github.com/vuetifyjs/vuetify/issues/11569
   it('should not fire change event onKeyDown if value is invalid', () => {
-    const change = jest.fn()
     const wrapper = mountFunction({
-      propsData: { min: 1 },
-      listeners: { change },
+      props: { min: 1 },
     })
 
     const slider = wrapper.find('.v-slider__thumb-container')
-
     slider.trigger('keydown.left')
-
-    expect(change).not.toHaveBeenCalled()
+    expect(wrapper.emitted('change')).toBeFalsy()
   })
 })