@dimailn/vuetify 2.7.2-alpha21 → 2.7.2-alpha23

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

@@ -4,13 +4,16 @@ 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 = {}) => {
@@ -18,9 +21,11 @@ describe('VProgressLinear.ts', () => {
         data: () => ({
           isVisible: false,
         }),
-        mocks: {
-          $vuetify: {
-            rtl: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+            },
           },
         },
         ...options,
@@ -28,41 +33,41 @@ describe('VProgressLinear.ts', () => {
     }
   })
 
-  it('should render component and match snapshot', () => {
+  it('should render component and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      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,7 +77,7 @@ describe('VProgressLinear.ts', () => {
 
   it('should render inactive component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
         active: false,
       },
@@ -83,12 +88,14 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component in RTL mode', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
       },
-      mocks: {
-        $vuetify: {
-          rtl: true,
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: true,
+          },
         },
       },
     })
@@ -98,7 +105,7 @@ describe('VProgressLinear.ts', () => {
 
   it('should render reversed component', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         reverse: true,
         value: 33,
       },
@@ -109,12 +116,14 @@ describe('VProgressLinear.ts', () => {
 
   it('should render reverse component in RTL mode', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         reverse: true,
         value: 33,
       },
-      mocks: {
-        $vuetify: { rtl: true },
+      global: {
+        mocks: {
+          $vuetify: { rtl: true },
+        },
       },
     })
 
@@ -123,9 +132,9 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with color and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: 'orange',
+        color: 'red',
       },
     })
 
@@ -134,9 +143,9 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with css color and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: '#336699',
+        color: '#FF0000',
       },
     })
 
@@ -145,9 +154,9 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with color and background opacity and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: 'orange',
+        color: 'red',
         backgroundOpacity: 0.5,
       },
     })
@@ -157,9 +166,9 @@ describe('VProgressLinear.ts', () => {
 
   it('should render component with color and background color and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
-        color: 'orange',
+        color: 'red',
         backgroundColor: 'blue',
       },
     })
@@ -169,9 +178,9 @@ 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,
       },
@@ -182,7 +191,7 @@ describe('VProgressLinear.ts', () => {
 
   it('should render indeterminate progress and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         indeterminate: true,
       },
     })
@@ -192,7 +201,7 @@ describe('VProgressLinear.ts', () => {
 
   it('should render indeterminate progress with query prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         indeterminate: true,
         query: true,
       },
@@ -201,26 +210,20 @@ describe('VProgressLinear.ts', () => {
     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,
       },
     })
 
     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,
       },
@@ -231,58 +234,362 @@ 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,
       },
+      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
+    progressBar.element.getBoundingClientRect = jest.fn().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
+    progressBar.element.getBoundingClientRect = jest.fn().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,
+      },
+      attrs: {
+        'onUpdate:modelValue': () => {},
+        onChange: () => {},
       },
-      listeners: { change },
+      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 для 75% позиции
+    const originalOffsetX = Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'offsetX')
+    Object.defineProperty(MouseEvent.prototype, 'offsetX', {
+      get: () => 300, // 75% от ширины
+      configurable: true
     })
 
-    const rect = wrapper.vm.$el.getBoundingClientRect()
+    const originalGetBoundingClientRect = progressBar.element.getBoundingClientRect
+    progressBar.element.getBoundingClientRect = jest.fn().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.vm.$el.getBoundingClientRect = () => ({
-      ...rect,
-      width: 1000,
+  it('should handle edge cases in click events', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 0,
+      },
+      attrs: {
+        'onUpdate:modelValue': () => {},
+        onChange: () => {},
+      },
+      attachTo: document.body,
     })
 
-    expect(wrapper.vm.internalLazyValue).toBe(0)
+    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
+    progressBar.element.getBoundingClientRect = jest.fn().mockReturnValue(mockRect)
+
+    try {
+      // Клик по левому краю (0%)
+      const originalOffsetXLeft = Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'offsetX')
+      Object.defineProperty(MouseEvent.prototype, 'offsetX', {
+        get: () => 0,
+        configurable: true
+      })
+
+      await progressBar.trigger('click')
 
-    wrapper.trigger('click', { offsetX: 200 })
+      // Проверяем, что значение 0%
+      const emittedValuesLeft = wrapper.emitted('update:modelValue')
+      if (emittedValuesLeft && emittedValuesLeft.length > 0) {
+        const lastValue = emittedValuesLeft[emittedValuesLeft.length - 1][0]
+        expect(lastValue).toBeCloseTo(0, 0)
+      }
 
-    expect(wrapper.vm.internalLazyValue).toBe(20)
+      // Клик по правому краю (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: {
+      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,
+      },
+      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
+    progressBar.element.getBoundingClientRect = jest.fn().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)
   })
 })