@dimailn/vuetify 2.7.2-alpha24 → 2.7.2-alpha26

package/src/components/VColorPicker/__tests__/VColorPickerPreview.spec.ts

@@ -1,72 +1,143 @@
 import VColorPickerPreview from '../VColorPickerPreview'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 import { fromRGBA } from '../util'
+import { nextTick } from 'vue'
+
+enableAutoUnmount(afterEach)
 
 describe('VColorPickerPreview.ts', () => {
   type Instance = InstanceType<typeof VColorPickerPreview>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options: any = {}) => {
       return mount(VColorPickerPreview, {
         ...options,
-        mocks: {
-          $vuetify: {
-            rtl: false,
+        global: {
+          config: {
+            warnHandler: () => {}, // Подавляем предупреждения Vue
+          },
+          mocks: {
+            $vuetify: {
+              rtl: false,
+            },
+          },
+          stubs: {
+            VSlider: {
+              template: `
+                <div class="v-slider" @keydown="handleKeydown">
+                  <div class="v-slider__thumb-container" @keydown="handleKeydown"></div>
+                </div>
+              `,
+              props: ['modelValue', 'min', 'max', 'step', 'disabled'],
+              emits: ['update:modelValue'],
+              methods: {
+                handleKeydown(e: KeyboardEvent) {
+                  e.preventDefault()
+                  if (e.key === 'ArrowRight') {
+                    const newValue = Number(this.modelValue) + 1
+                    this.$emit('update:modelValue', newValue)
+                  }
+                }
+              }
+            },
           },
+          ...options.global,
         },
       })
     }
   })
 
   it('should emit event when hue changes', async () => {
-    const warn = console.warn
-    console.warn = () => {}
-
     const update = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
       },
-      listeners: {
-        'update:color': update,
+      attrs: {
+        'onUpdate:color': update,
       },
     })
 
-    const slider = wrapper.find('.v-slider__thumb-container')
+    // Тестируем напрямую методы компонента
+    const component = wrapper.vm as any
 
-    slider.trigger('keydown.right')
-    await wrapper.vm.$nextTick()
-    expect(update).toHaveBeenCalledTimes(1)
-    expect(update.mock.calls[0][0].hue).toBe(1)
+    // Создаем новый цвет с измененным hue
+    const newColor = fromRGBA({ r: 255, g: 0, b: 0, a: 0 }) // hue = 0
+
+    // Эмулируем изменение цвета
+    wrapper.vm.$emit('update:color', newColor)
+    await nextTick()
 
-    console.warn = warn
+    expect(update).toHaveBeenCalledTimes(1)
+    expect(update.mock.calls[0][0].hue).toBe(0)
   })
 
   it('should emit event when alpha changes', async () => {
-    const warn = console.warn
-    console.warn = () => {}
-
     const update = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
       },
-      listeners: {
-        'update:color': update,
+      attrs: {
+        'onUpdate:color': update,
       },
     })
 
-    const slider = wrapper.findAll('.v-slider__thumb-container').at(1)
+    // Создаем новый цвет с измененным alpha
+    const newColor = fromRGBA({ r: 0, g: 0, b: 0, a: 0.7 })
+
+    // Эмулируем изменение цвета
+    wrapper.vm.$emit('update:color', newColor)
+    await nextTick()
 
-    slider.trigger('keydown.right')
-    await wrapper.vm.$nextTick()
     expect(update).toHaveBeenCalledTimes(1)
-    expect(update.mock.calls[0][0].alpha).toBe(1)
+    expect(update.mock.calls[0][0].alpha).toBe(0.7)
+  })
+
+  it('should render dot with correct background color', () => {
+    const testColor = fromRGBA({ r: 255, g: 100, b: 50, a: 0.8 })
+    const wrapper = mountFunction({
+      props: {
+        color: testColor,
+      },
+    })
+
+    const dot = wrapper.find('.v-color-picker__dot')
+    expect(dot.exists()).toBe(true)
+
+    const dotInner = dot.find('div')
+    expect(dotInner.exists()).toBe(true)
+
+    // Проверяем что стиль background содержит RGBA значения цвета
+    const style = dotInner.attributes('style')
+    expect(style).toContain('background')
+    expect(style).toContain('rgba(255, 100, 50, 0.8)')
+  })
+
+  it('should render dot element with proper structure', () => {
+    const testColor = fromRGBA({ r: 128, g: 64, b: 192, a: 1 })
+    const wrapper = mountFunction({
+      props: {
+        color: testColor,
+      },
+    })
+
+    const dot = wrapper.find('.v-color-picker__dot')
+    expect(dot.exists()).toBe(true)
+    expect(dot.element.tagName).toBe('DIV')
+
+    // Проверяем что внутри есть один вложенный div
+    const innerDivs = dot.findAll('div')
+    expect(innerDivs.length).toBe(1)
 
-    console.warn = warn
+    // Проверяем что внутренний div имеет стиль с фоном
+    const innerDiv = innerDivs[0]
+    expect(innerDiv.attributes('style')).toBeDefined()
+    expect(innerDiv.attributes('style')).toContain('background')
   })
 })