@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha28

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

@@ -1,39 +1,37 @@
 // Libraries
-import Vue from 'vue'
+import { nextTick } from 'vue'
 
 // Plugins
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 // Components
 import VChip from '../VChip'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VChip.ts', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let router: Router
-  let localVue: typeof Vue
+  let mountFunction: (options?: object) => VueWrapper<any>
 
   beforeEach(() => {
-    router = new Router()
-    localVue = createLocalVue()
-    localVue.use(Router)
-
     mountFunction = (options = {}) => {
       return mount(VChip, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        localVue,
-        router,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
+        global: {
+          config: {
+            warnHandler: () => {}, // Подавляем предупреждения Vue
+          },
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (val: string) => val,
+              },
+              icons: {
+                component: 'mdi',
+              },
             },
           },
         },
@@ -42,6 +40,8 @@ describe('VChip.ts', () => {
     }
   })
 
+  enableAutoUnmount(afterEach)
+
   it('should have a v-chip class', () => {
     const wrapper = mountFunction()
 
@@ -49,25 +49,24 @@ describe('VChip.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should be removable', () => {
+  it('should be removable', async () => {
     const wrapper = mountFunction({
-      propsData: { close: true },
+      props: { close: true },
     })
 
     const close = wrapper.find('.v-chip__close')
 
-    const input = jest.fn(value => wrapper.setProps({ value }))
-    wrapper.vm.$on('click:close', input)
-
     expect(wrapper.html()).toMatchSnapshot()
 
-    close.trigger('click')
-    expect(input).toHaveBeenCalled()
+    await close.trigger('click')
+    expect(wrapper.emitted('click:close')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
   })
 
   it('should render a colored chip', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'blue',
         textColor: 'green',
       },
@@ -79,7 +78,7 @@ describe('VChip.ts', () => {
 
   it('should render a disabled chip', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
     })
@@ -95,7 +94,7 @@ describe('VChip.ts', () => {
 
   it('should render a colored outline chip', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         outlined: true,
         color: 'blue',
       },
@@ -107,7 +106,7 @@ describe('VChip.ts', () => {
 
   it('should render a colored outline chip with text color', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         outlined: true,
         color: 'blue',
         textColor: 'green',
@@ -120,50 +119,51 @@ describe('VChip.ts', () => {
 
   it('should render a chip with filter', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         filter: true,
-        inputValue: true,
+        modelValue: true, // ToggleableFactory использует modelValue для isActive
       },
     })
 
     expect(wrapper.findAll('.v-chip__filter')).toHaveLength(1)
   })
 
-  it('should call toggle event when used in the group', () => {
+  it('should call toggle event when used in the group', async () => {
     const register = jest.fn()
     const unregister = jest.fn()
-    const toggle = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        chipGroup: { register, unregister },
+      global: {
+        provide: {
+          chipGroup: { register, unregister },
+        },
       },
-      methods: { toggle },
     })
 
-    wrapper.trigger('click')
-    expect(toggle).toHaveBeenCalled()
+    // Проверяем, что toggle вызывается при клике
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('click')).toBeTruthy()
   })
 
   it('should conditionally show based on active prop', async () => {
-    const active = jest.fn()
     const wrapper = mountFunction({
-      propsData: { close: true },
+      props: { close: true },
     })
     const close = wrapper.find('.v-chip__close')
 
-    wrapper.vm.$on('update:active', active)
-
-    expect(wrapper.isVisible()).toBe(true)
+    // Initially visible
+    expect(wrapper.element.style.display).not.toBe('none')
 
-    close.trigger('click')
+    await close.trigger('click')
 
-    expect(active).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
 
     // Simulate active.sync behavior
-    wrapper.setProps({ active: false })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ active: false })
+    await nextTick()
 
-    expect(wrapper.isVisible()).toBe(false)
+    // Element should be hidden via v-show directive
+    expect(wrapper.element.style.display).toBe('none')
   })
 })

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

@@ -3,12 +3,12 @@
 exports[`VChip.ts should be removable 1`] = `
 <span class="v-chip v-chip--no-color v-chip--removable theme--light v-size--default">
   <span class="v-chip__content">
-    <button type="button"
+    <button class="v-icon--link v-icon--right v-icon notranslate theme--light v-chip__close"
+            aria-hidden="false"
+            type="button"
+            style="font-size: 18px; height: 18px; width: 18px;"
             aria-label="$vuetify.close"
-            class="v-icon notranslate v-chip__close v-icon--link v-icon--right material-icons theme--light"
-            style="font-size: 18px;"
     >
-      $delete
     </button>
   </span>
 </span>

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

@@ -1,36 +1,29 @@
 // Libraries
-import Vue from 'vue'
-
-// Plugins
-import Router from 'vue-router'
+import { h } from 'vue'
 
 // Components
 import VChipGroup from '../VChipGroup'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VChipGroup.ts', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let router: Router
-  let localVue: typeof Vue
+  let mountFunction: (options?: object) => VueWrapper<any>
 
-  beforeEach(() => {
-    router = new Router()
-    localVue = createLocalVue()
-    localVue.use(Router)
+  enableAutoUnmount(afterEach)
 
+  beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VChipGroup, {
-        localVue,
-        router,
-        mocks: {
-          $vuetify: {
-            breakpoint: {},
+        global: {
+          mocks: {
+            $vuetify: {
+              breakpoint: {},
+            },
           },
         },
         ...options,
@@ -47,7 +40,7 @@ describe('VChipGroup.ts', () => {
 
   it('should render column', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         column: true,
       },
     })
@@ -56,13 +49,13 @@ describe('VChipGroup.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should switch to column', () => {
+  it('should switch to column', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.classes()).not.toContain('v-chip-group--column')
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       column: true,
     })
 

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

@@ -23,7 +23,7 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -61,7 +61,7 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -146,8 +146,8 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -172,7 +172,7 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -210,7 +210,7 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -295,8 +295,8 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -352,7 +352,7 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -390,7 +390,7 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -496,8 +496,8 @@ exports[`VColorPicker.ts should hide sliders 1`] = `
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -534,7 +534,7 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -608,8 +608,8 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
           B
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -646,7 +646,7 @@ exports[`VColorPicker.ts should render color picker 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -684,7 +684,7 @@ exports[`VColorPicker.ts should render color picker 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -769,8 +769,8 @@ exports[`VColorPicker.ts should render color picker 1`] = `
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -807,7 +807,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -845,7 +845,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -930,8 +930,8 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -968,7 +968,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -1006,7 +1006,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -1091,8 +1091,8 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -1129,7 +1129,7 @@ exports[`VColorPicker.ts should show swatches 1`] = `
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -1167,7 +1167,7 @@ exports[`VColorPicker.ts should show swatches 1`] = `
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -1252,8 +1252,8 @@ exports[`VColorPicker.ts should show swatches 1`] = `
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -2108,7 +2108,7 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
         </div>
       </div>
       <div class="v-color-picker__sliders">
-        <div class="v-input v-input--hide-details theme--light v-input__slider">
+        <div class="v-input v-input--hide-details theme--light v-input__slider v-color-picker__hue">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -2146,7 +2146,7 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
             </div>
           </div>
         </div>
-        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider">
+        <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__alpha">
           <div class="v-input__control">
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
@@ -2231,8 +2231,8 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
           A
         </span>
       </div>
-      <button type="button"
-              class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+      <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+              type="button"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"

package/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerEdit.spec.ts.snap

@@ -46,8 +46,8 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
       A
     </span>
   </div>
-  <button type="button"
-          class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -105,8 +105,8 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
       A
     </span>
   </div>
-  <button type="button"
-          class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -128,8 +128,8 @@ exports[`VColorPickerEdit.ts should change mode 3`] = `
       HEX
     </span>
   </div>
-  <button type="button"
-          class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -187,8 +187,8 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
       A
     </span>
   </div>
-  <button type="button"
-          class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+  <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -299,9 +299,9 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
       A
     </span>
   </div>
-  <button type="button"
+  <button class="v-btn v-btn--disabled v-btn--icon v-btn--round theme--light v-size--small"
+          type="button"
           disabled
-          class="v-btn v-btn--disabled v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"