@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -4,65 +4,70 @@ import VProgressLinear from '../VProgressLinear'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount
 } from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
+import { h } from 'vue'
 
 describe('VProgressLinear.ts', () => {
   type Instance = InstanceType<typeof VProgressLinear>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VProgressLinear, {
         data: () => ({
-          isVisible: false,
+          isVisible: false
         }),
-        mocks: {
-          $vuetify: {
-            rtl: false,
-          },
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
 
-  it('should render component and match snapshot', () => {
+  it('should render component and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 33,
-      },
+      props: {
+        value: 33
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: -1, bufferValue: -1 })
+    await wrapper.setProps({ value: -1, bufferValue: -1 })
     const htmlMinus1 = wrapper.html()
 
-    wrapper.setProps({ value: 0, bufferValue: 0 })
+    await wrapper.setProps({ value: 0, bufferValue: 0 })
     const html0 = wrapper.html()
 
-    wrapper.setProps({ value: 100, bufferValue: 100 })
+    await wrapper.setProps({ value: 100, bufferValue: 100 })
     const html100 = wrapper.html()
 
-    wrapper.setProps({ value: 101, bufferValue: 101 })
+    await wrapper.setProps({ value: 101, bufferValue: 101 })
     const html101 = wrapper.html()
 
     expect(htmlMinus1).toBe(html0)
     expect(html100).toBe(html101)
     expect(html0).not.toBe(html100)
 
-    wrapper.setProps({ value: '-1', bufferValue: '-1' })
+    await wrapper.setProps({ value: '-1', bufferValue: '-1' })
     const htmlMinus1String = wrapper.html()
 
-    wrapper.setProps({ value: '0', bufferValue: '0' })
+    await wrapper.setProps({ value: '0', bufferValue: '0' })
     const html0String = wrapper.html()
 
-    wrapper.setProps({ value: '100', bufferValue: '100' })
+    await wrapper.setProps({ value: '100', bufferValue: '100' })
     const html100String = wrapper.html()
 
-    wrapper.setProps({ value: '101', bufferValue: '101' })
+    await wrapper.setProps({ value: '101', bufferValue: '101' })
     const html101String = wrapper.html()
 
     expect(htmlMinus1String).toBe(html0String)
@@ -72,10 +77,10 @@ describe('VProgressLinear.ts', () => {
 
   it('should render inactive component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        active: false,
-      },
+        active: false
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -83,14 +88,16 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component in RTL mode', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 33,
-      },
-      mocks: {
-        $vuetify: {
-          rtl: true,
-        },
+      props: {
+        value: 33
       },
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: true
+          }
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -98,10 +105,10 @@ describe('VProgressLinear.ts', () => {
 
   it('should render reversed component', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         reverse: true,
-        value: 33,
-      },
+        value: 33
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -109,13 +116,15 @@ describe('VProgressLinear.ts', () => {
 
   it('should render reverse component in RTL mode', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         reverse: true,
-        value: 33,
-      },
-      mocks: {
-        $vuetify: { rtl: true },
+        value: 33
       },
+      global: {
+        mocks: {
+          $vuetify: { rtl: true }
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -123,10 +132,10 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with color and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: 'orange',
-      },
+        color: 'red'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -134,10 +143,10 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with css color and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: '#336699',
-      },
+        color: '#FF0000'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -145,11 +154,11 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with color and background opacity and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: 'orange',
-        backgroundOpacity: 0.5,
-      },
+        color: 'red',
+        backgroundOpacity: 0.5
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -157,11 +166,11 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with color and background color and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: 'orange',
-        backgroundColor: 'blue',
-      },
+        color: 'red',
+        backgroundColor: 'blue'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -169,12 +178,12 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with color and background color and opacity and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: 'orange',
+        color: 'red',
         backgroundColor: 'blue',
-        backgroundOpacity: 0.5,
-      },
+        backgroundOpacity: 0.5
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -182,9 +191,9 @@ describe('VProgressLinear.ts', () => {
 
   it('should render indeterminate progress and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        indeterminate: true,
-      },
+      props: {
+        indeterminate: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -192,38 +201,32 @@ describe('VProgressLinear.ts', () => {
 
   it('should render indeterminate progress with query prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         indeterminate: true,
-        query: true,
-      },
+        query: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with buffer value and match snapshot', async () => {
+  it('should render component with buffer value and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        bufferValue: 80,
-      },
+        bufferValue: 80
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({
-      bufferValue: 0,
-    })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with buffer value and value > buffer value and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 90,
-        bufferValue: 80,
-      },
+        bufferValue: 80
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -231,58 +234,370 @@ describe('VProgressLinear.ts', () => {
 
   it('should render default slot content', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 90,
-        bufferValue: 80,
+      slots: {
+        default: ({ value }) => h('div', { class: 'slot-content' }, `Progress: ${value}%`)
+      }
+    })
+
+    expect(wrapper.find('.slot-content').exists()).toBe(true)
+    expect(wrapper.find('.slot-content').text()).toBe('Progress: 0%')
+  })
+
+  it('should render slot content with custom value', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 75
       },
       slots: {
-        default: [compileToFunctions('<div class="foobar">content</div>')],
+        default: ({ value }) => h('div', { class: 'slot-content' }, `Custom: ${value}%`)
+      }
+    })
+
+    expect(wrapper.find('.slot-content').exists()).toBe(true)
+    expect(wrapper.find('.slot-content').text()).toBe('Custom: 75%')
+  })
+
+  it('should respond to click events', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33,
+        onUpdateModelValue: () => {},
+        onChange: () => {}
       },
+      attrs: {
+        'onUpdate:modelValue': () => {},
+        onChange: () => {}
+      },
+      attachTo: document.body // Важно для корректной работы событий
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.findAll('.foobar')).toHaveLength(1)
+    // Находим элемент прогресс-бара
+    const progressBar = wrapper.find('.v-progress-linear')
+
+    // Мокаем getBoundingClientRect для элемента
+    const mockRect = {
+      width: 400,
+      height: 20,
+      top: 0,
+      left: 0,
+      right: 400,
+      bottom: 20
+    }
+
+    // Мокаем offsetX для события клика
+    const originalOffsetX = Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'offsetX')
+    Object.defineProperty(MouseEvent.prototype, 'offsetX', {
+      get: () => 200, // 50% от ширины
+      configurable: true
+    })
+
+    // Мокаем getBoundingClientRect
+    const originalGetBoundingClientRect = progressBar.element.getBoundingClientRect
+    jest.spyOn(progressBar.element, 'getBoundingClientRect').mockImplementation().mockReturnValue(mockRect)
+
+    try {
+      // Триггерим событие клика
+      await progressBar.trigger('click')
+
+      // Проверяем, что событие эмитится
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+
+      // Проверяем, что последнее значение примерно 50%
+      const emittedValues = wrapper.emitted('update:modelValue')
+      if (emittedValues && emittedValues.length > 0) {
+        const lastValue = emittedValues[emittedValues.length - 1][0]
+        expect(lastValue).toBeCloseTo(50, 0) // Проверяем с точностью до целого
+      }
+    } finally {
+      // Восстанавливаем оригинальные методы
+      if (originalOffsetX) {
+        Object.defineProperty(MouseEvent.prototype, 'offsetX', originalOffsetX)
+      }
+      progressBar.element.getBoundingClientRect = originalGetBoundingClientRect
+    }
+  })
+
+  it('should not respond to click events when not reactive', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33
+      },
+      attachTo: document.body
+    })
+
+    // Убираем все слушатели событий
+    const progressBar = wrapper.find('.v-progress-linear')
+
+    // Мокаем getBoundingClientRect
+    const mockRect = {
+      width: 400,
+      height: 20,
+      top: 0,
+      left: 0,
+      right: 400,
+      bottom: 20
+    }
+
+    const originalGetBoundingClientRect = progressBar.element.getBoundingClientRect
+    jest.spyOn(progressBar.element, 'getBoundingClientRect').mockImplementation().mockReturnValue(mockRect)
+
+    try {
+      // Триггерим событие клика
+      await progressBar.trigger('click')
+
+      // Проверяем, что событие не эмитится
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    } finally {
+      // Восстанавливаем оригинальный метод
+      progressBar.element.getBoundingClientRect = originalGetBoundingClientRect
+    }
   })
 
-  it('should respond to click events', () => {
-    const change = jest.fn()
+  it('should emit update:modelValue when clicked', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        value: 0,
+      props: {
+        modelValue: 0,
+        onUpdateModelValue: () => {},
+        onChange: () => {}
       },
-      listeners: { change },
+      attrs: {
+        'onUpdate:modelValue': () => {},
+        onChange: () => {}
+      },
+      attachTo: document.body
     })
 
-    const rect = wrapper.vm.$el.getBoundingClientRect()
+    const progressBar = wrapper.find('.v-progress-linear')
+
+    // Мокаем getBoundingClientRect
+    const mockRect = {
+      width: 400,
+      height: 20,
+      top: 0,
+      left: 0,
+      right: 400,
+      bottom: 20
+    }
 
-    wrapper.vm.$el.getBoundingClientRect = () => ({
-      ...rect,
-      width: 1000,
+    // Мокаем offsetX для 75% позиции
+    const originalOffsetX = Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'offsetX')
+    Object.defineProperty(MouseEvent.prototype, 'offsetX', {
+      get: () => 300, // 75% от ширины
+      configurable: true
     })
 
-    expect(wrapper.vm.internalLazyValue).toBe(0)
+    const originalGetBoundingClientRect = progressBar.element.getBoundingClientRect
+    jest.spyOn(progressBar.element, 'getBoundingClientRect').mockImplementation().mockReturnValue(mockRect)
+
+    try {
+      // Триггерим событие клика
+      await progressBar.trigger('click')
+
+      // Проверяем, что событие эмитится с правильным значением
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      const emittedValues = wrapper.emitted('update:modelValue')
+      if (emittedValues && emittedValues.length > 0) {
+        const lastValue = emittedValues[emittedValues.length - 1][0]
+        expect(lastValue).toBeCloseTo(75, 0)
+      }
+    } finally {
+      // Восстанавливаем оригинальные методы
+      if (originalOffsetX) {
+        Object.defineProperty(MouseEvent.prototype, 'offsetX', originalOffsetX)
+      }
+      progressBar.element.getBoundingClientRect = originalGetBoundingClientRect
+    }
+  })
 
-    wrapper.trigger('click', { offsetX: 200 })
+  it('should handle edge cases in click events', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 0,
+        onUpdateModelValue: () => {},
+        onChange: () => {}
+      },
+      attrs: {
+        'onUpdate:modelValue': () => {},
+        onChange: () => {}
+      },
+      attachTo: document.body
+    })
+
+    const progressBar = wrapper.find('.v-progress-linear')
 
-    expect(wrapper.vm.internalLazyValue).toBe(20)
+    // Мокаем getBoundingClientRect
+    const mockRect = {
+      width: 400,
+      height: 20,
+      top: 0,
+      left: 0,
+      right: 400,
+      bottom: 20
+    }
+
+    const originalGetBoundingClientRect = progressBar.element.getBoundingClientRect
+    jest.spyOn(progressBar.element, 'getBoundingClientRect').mockImplementation().mockReturnValue(mockRect)
+
+    try {
+      // Клик по левому краю (0%)
+      const originalOffsetXLeft = Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'offsetX')
+      Object.defineProperty(MouseEvent.prototype, 'offsetX', {
+        get: () => 0,
+        configurable: true
+      })
+
+      await progressBar.trigger('click')
+
+      // Проверяем, что значение 0%
+      const emittedValuesLeft = wrapper.emitted('update:modelValue')
+      if (emittedValuesLeft && emittedValuesLeft.length > 0) {
+        const lastValue = emittedValuesLeft[emittedValuesLeft.length - 1][0]
+        expect(lastValue).toBeCloseTo(0, 0)
+      }
+
+      // Клик по правому краю (100%)
+      Object.defineProperty(MouseEvent.prototype, 'offsetX', {
+        get: () => 400,
+        configurable: true
+      })
+
+      await progressBar.trigger('click')
+
+      // Проверяем, что значение 100%
+      const emittedValuesRight = wrapper.emitted('update:modelValue')
+      if (emittedValuesRight && emittedValuesRight.length > 0) {
+        const lastValue = emittedValuesRight[emittedValuesRight.length - 1][0]
+        expect(lastValue).toBeCloseTo(100, 0)
+      }
+
+      // Восстанавливаем оригинальное свойство
+      if (originalOffsetXLeft) {
+        Object.defineProperty(MouseEvent.prototype, 'offsetX', originalOffsetXLeft)
+      }
+    } finally {
+      // Восстанавливаем оригинальный метод
+      progressBar.element.getBoundingClientRect = originalGetBoundingClientRect
+    }
   })
 
   it('should render a stream component', () => {
     const wrapper = mountFunction({
-      propsData: {
-        stream: true,
-      },
+      props: {
+        value: 33,
+        stream: true
+      }
     })
 
-    expect(wrapper.find('.v-progress-linear__stream')).toBeTruthy()
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should set isVisible with onObserve', () => {
-    expect((new VProgressLinear()).isVisible).toEqual(true)
     const wrapper = mountFunction()
-    expect(wrapper.vm.isVisible).toEqual(false)
-    wrapper.vm.onObserve(null, null, true)
-    expect(wrapper.vm.isVisible).toEqual(true)
+
+    const entries = [
+      {
+        isIntersecting: true
+      }
+    ] as IntersectionObserverEntry[]
+
+    wrapper.vm.onObserve(entries, {} as IntersectionObserver, true)
+
+    expect(wrapper.vm.isVisible).toBe(true)
+  })
+
+  it('should work with v-model', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 25
+      }
+    })
+
+    // Проверяем начальное значение
+    expect(wrapper.vm.internalLazyValue).toBe(25)
+    expect(wrapper.vm.normalizedValue).toBe(25)
+
+    // Изменяем значение через v-model
+    await wrapper.setProps({ modelValue: 75 })
+
+    // Проверяем, что значение обновилось
+    expect(wrapper.vm.internalLazyValue).toBe(75)
+    expect(wrapper.vm.normalizedValue).toBe(75)
+  })
+
+  it('should work with v-model and click events', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 0,
+        onUpdateModelValue: () => {},
+        onChange: () => {}
+      },
+      attrs: {
+        'onUpdate:modelValue': () => {},
+        onChange: () => {}
+      },
+      attachTo: document.body
+    })
+
+    const progressBar = wrapper.find('.v-progress-linear')
+
+    // Мокаем getBoundingClientRect
+    const mockRect = {
+      width: 400,
+      height: 20,
+      top: 0,
+      left: 0,
+      right: 400,
+      bottom: 20
+    }
+
+    // Мокаем offsetX для 60% позиции
+    const originalOffsetX = Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'offsetX')
+    Object.defineProperty(MouseEvent.prototype, 'offsetX', {
+      get: () => 240, // 60% от ширины
+      configurable: true
+    })
+
+    const originalGetBoundingClientRect = progressBar.element.getBoundingClientRect
+    jest.spyOn(progressBar.element, 'getBoundingClientRect').mockImplementation().mockReturnValue(mockRect)
+
+    try {
+      // Триггерим событие клика
+      await progressBar.trigger('click')
+
+      // Проверяем, что событие эмитится
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+
+      // Проверяем, что значение примерно 60%
+      const emittedValues = wrapper.emitted('update:modelValue')
+      if (emittedValues && emittedValues.length > 0) {
+        const lastValue = emittedValues[emittedValues.length - 1][0]
+        expect(lastValue).toBeCloseTo(60, 0)
+      }
+    } finally {
+      // Восстанавливаем оригинальные методы
+      if (originalOffsetX) {
+        Object.defineProperty(MouseEvent.prototype, 'offsetX', originalOffsetX)
+      }
+      progressBar.element.getBoundingClientRect = originalGetBoundingClientRect
+    }
+  })
+
+  it('should maintain backward compatibility with value prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 30
+      }
+    })
+
+    // Проверяем, что работает старый prop value
+    expect(wrapper.vm.internalLazyValue).toBe(30)
+    expect(wrapper.vm.normalizedValue).toBe(30)
+
+    // Изменяем значение через value
+    await wrapper.setProps({ value: 80 })
+
+    // Проверяем, что значение обновилось
+    expect(wrapper.vm.internalLazyValue).toBe(80)
+    expect(wrapper.vm.normalizedValue).toBe(80)
   })
 })