@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

package/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts

@@ -1,4 +1,5 @@
 import VDataTableHeader from '../VDataTableHeader'
+import VDataTableHeaderMobile from '../VDataTableHeaderMobile'
 import { Lang } from '../../../services/lang'
 import ripple from '../../../directives/ripple'
 import VSelect from '../../VSelect/VSelect'
@@ -9,7 +10,6 @@ import {
   MountOptions,
   Wrapper,
 } from '@vue/test-utils'
-import Vue from 'vue'
 
 const testHeaders = [
   {
@@ -25,16 +25,6 @@ const testHeaders = [
   { text: 'Iron (%)', value: 'iron' },
 ]
 
-Vue.prototype.$vuetify = {
-  icons: {},
-  rtl: false,
-  lang: new Lang(preset),
-  theme: {
-    dark: false,
-  },
-}
-Vue.directive('ripple', ripple)
-
 describe('VDataTableHeader.ts', () => {
   type Instance = InstanceType<typeof VDataTableHeader>
   let mountFunction: (options?: MountOptions<Instance>, isMobile?: boolean) => Wrapper<Instance>
@@ -49,10 +39,28 @@ describe('VDataTableHeader.ts', () => {
             ...options,
             // https://github.com/vuejs/vue-test-utils/issues/1130
             sync: false,
-            propsData: {
+            props: {
               headers: testHeaders,
               mobile: isMobile,
-              ...(options || {}).propsData,
+              ...(options || {}).props,
+            },
+            on: {
+              ...(options || {}).on,
+            },
+            global: {
+              mocks: {
+                $vuetify: {
+                  icons: {},
+                  rtl: false,
+                  lang: new Lang(preset),
+                  theme: {
+                    dark: false,
+                  },
+                },
+              },
+              directives: {
+                ripple,
+              },
             },
           })
         }
@@ -65,7 +73,7 @@ describe('VDataTableHeader.ts', () => {
       })
       it('should work with showGroupBy', () => {
         const wrapper = mountFunction({
-          propsData: {
+          props: {
             showGroupBy: true,
           },
         })
@@ -75,7 +83,7 @@ describe('VDataTableHeader.ts', () => {
 
       it('should work with multiSort', () => {
         const wrapper = mountFunction({
-          propsData: {
+          props: {
             options: {
               multiSort: true,
               sortBy: ['iron'],
@@ -89,7 +97,7 @@ describe('VDataTableHeader.ts', () => {
 
       it('should work with sortBy correctly', () => {
         const wrapper = mountFunction({
-          propsData: {
+          props: {
             options: {
               sortBy: ['iron'],
               sortDesc: [true],
@@ -102,7 +110,7 @@ describe('VDataTableHeader.ts', () => {
 
       it('should work with sortDesc correctly', () => {
         const wrapper = mountFunction({
-          propsData: {
+          props: {
             options: {
               sortBy: ['iron', 'carbs'],
               sortDesc: [false, true],
@@ -116,7 +124,7 @@ describe('VDataTableHeader.ts', () => {
       if (isMobile) {
         it('should render with data-table-select header', () => {
           const wrapper = mountFunction({
-            propsData: {
+            props: {
               headers: [...testHeaders, { text: 'test', value: 'data-table-select' }],
             },
           })
@@ -124,22 +132,24 @@ describe('VDataTableHeader.ts', () => {
           expect(wrapper.html()).toMatchSnapshot()
         })
 
-        it('should sort when select changes', () => {
-          const sort = jest.fn()
-          const wrapper = mountFunction({
-            listeners: {
-              sort,
-            },
-          })
-          const select = wrapper.find(VSelect)
+        it('should sort when select changes', async () => {
+          const wrapper = mountFunction()
+
+          const mobileHeader = wrapper.findComponent(VDataTableHeaderMobile)
+          const select = mobileHeader.findComponent(VSelect)
+
+          expect(select.exists()).toBe(true)
+
+          select.vm.$emit('update:modelValue', 'test')
+          await wrapper.vm.$nextTick()
 
-          select.vm.$emit('change', 'test')
-          expect(sort).toHaveBeenLastCalledWith('test')
+          expect(mobileHeader.emitted('sort')).toBeTruthy()
+          expect(mobileHeader.emitted('sort')?.[0]).toEqual(['test'])
         })
 
         it('should apply header class and width for select-all column', () => {
           const wrapper = mount(VDataTableHeader, {
-            propsData: {
+            props: {
               mobile: isMobile,
               headers: [
                 {

package/src/components/VDataTable/__tests__/VEditDialog.spec.ts

@@ -39,7 +39,7 @@ describe('VEditDialog.ts', () => {
 
   it('should render custom button texts', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         cancelText: `I don't want to modify that!`,
         saveText: 'Save it!',
       },
@@ -55,9 +55,9 @@ describe('VEditDialog.ts', () => {
     const close = jest.fn()
 
     const wrapper = mountFunction({
-      listeners: {
-        open,
-        close,
+      props: {
+        onOpen: open,
+        onClose: close,
       },
     })
 
@@ -78,19 +78,19 @@ describe('VEditDialog.ts', () => {
     const close = jest.fn()
 
     const wrapper = mountFunction({
-      listeners: {
-        open,
-        close,
+      props: {
+        onOpen: open,
+        onClose: close,
       },
     })
 
-    const menu = wrapper.find(VMenu)
+    const menu = wrapper.findComponent(VMenu)
 
-    menu.vm.$emit('input', true)
+    menu.vm.$emit('update:modelValue', true)
     await wrapper.vm.$nextTick()
     expect(open).toHaveBeenCalledTimes(1)
 
-    menu.vm.$emit('input', false)
+    menu.vm.$emit('update:modelValue', false)
     await wrapper.vm.$nextTick()
     expect(close).toHaveBeenCalledTimes(1)
   })
@@ -100,8 +100,8 @@ describe('VEditDialog.ts', () => {
 
     const parentWrapper = mount({
       template: `
-        <v-edit-dialog :return-value.sync="val">
-          <template v-slot:input>
+        <v-edit-dialog v-model:return-value="val">
+          <template #input>
             <input v-model="val" class="test"/>
           </template>
         </v-edit-dialog>
@@ -115,30 +115,39 @@ describe('VEditDialog.ts', () => {
       },
       data () {
         return {
-          val: '',
+          val: 'test',
         }
       },
     })
 
-    const wrapper = parentWrapper.find(VEditDialog)
+    const wrapper = parentWrapper.findComponent(VEditDialog)
     const field = parentWrapper.find('input.test')
     const input = wrapper.vm.$refs.content as HTMLElement
 
     // Make sure originalValue gets set
     wrapper.vm.isActive = true
+    await wrapper.vm.$nextTick()
     field.setValue('test')
+    // Update the parent component's val to match the input value
+    parentWrapper.vm.val = 'test'
     input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.esc } as KeyboardEventInit))
+    await wrapper.vm.$nextTick()
     expect(wrapper.emitted('cancel')).toBeTruthy()
-    expect(wrapper.emitted('update:return-value')[0]).toEqual([''])
-    expect(wrapper.props('returnValue')).toBe('')
+    expect(wrapper.emitted('update:return-value')?.[0]).toEqual(['test'])
+    expect(wrapper.props('returnValue')).toBe('test')
 
     wrapper.vm.isActive = true
+    await wrapper.vm.$nextTick()
     field.setValue('test')
+    // Update the parent component's val to match the input value
+    parentWrapper.vm.val = 'test'
     input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.enter } as KeyboardEventInit))
+    await wrapper.vm.$nextTick()
     expect(wrapper.emitted('save')).toBeTruthy()
     expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function))
     jest.advanceTimersByTime(0)
-    expect(wrapper.emitted('update:return-value')[1]).toEqual(['test'])
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('update:return-value')?.[1]).toEqual(['test'])
     expect(wrapper.props('returnValue')).toBe('test')
 
     jest.useRealTimers()
@@ -182,17 +191,17 @@ describe('VEditDialog.ts', () => {
     const saveEvent = jest.fn()
 
     const wrapper = mountFunction({
-      methods: {
-        save,
-      },
       render () {
         return this.genActions()
       },
-      listeners: {
-        save: saveEvent,
+      props: {
+        onSave: saveEvent,
       },
     })
 
+    // Mock the save method
+    wrapper.vm.save = save
+
     expect(wrapper.html()).toMatchSnapshot()
 
     const btn = wrapper.find('.v-btn:last-child')
@@ -204,8 +213,8 @@ describe('VEditDialog.ts', () => {
   it('should cancel', () => {
     const cancel = jest.fn()
     const wrapper = mountFunction({
-      listeners: {
-        cancel,
+      props: {
+        onCancel: cancel,
       },
       data: () => ({
         isActive: true,

package/src/components/VDataTable/__tests__/VSimpleTable.spec.ts

@@ -1,26 +1,39 @@
 import VSimpleTable from '../VSimpleTable'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VSimpleTable.ts', () => {
   type Instance = InstanceType<typeof VSimpleTable>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VSimpleTable, options)
+    mountFunction = (options = {}) => {
+      return mount(VSimpleTable, {
+        global: {
+          config: {
+            warnHandler: () => {}, // Подавляем предупреждения Vue
+          },
+        },
+        ...options,
+      })
     }
   })
 
+  const createDefaultSlots = () => [
+    h('tr', [h('th', 'Foo'), h('th', 'Bar')]),
+    h('tr', [h('td', 'baz'), h('td', 'qux')]),
+  ]
+
   it('should render', () => {
     const wrapper = mountFunction({
       slots: {
-        default: `
-          <tr><th>Foo</th><th>Bar</th></tr>
-          <tr><td>baz</td><td>qux</td></tr>
-        `,
+        default: createDefaultSlots,
       },
     })
 
@@ -32,23 +45,39 @@ describe('VSimpleTable.ts', () => {
   it('should render with custom wrapper', () => {
     const wrapper = mountFunction({
       slots: {
-        wrapper: `
-          <table>
-            <tr><th>Foo</th><th>Bar</th></tr>
-            <tr><td>baz</td><td>qux</td></tr>
-          </table>
-        `,
+        default: createDefaultSlots,
+        wrapper: () => h('div', {
+          class: 'custom-wrapper',
+          'data-test': 'custom-wrapper',
+        }, [
+          h('table', { class: 'custom-table' }, [
+            h('tr', [h('th', 'Custom Header 1'), h('th', 'Custom Header 2')]),
+            h('tr', [h('td', 'Custom Data 1'), h('td', 'Custom Data 2')]),
+          ]),
+        ]),
       },
     })
 
+    // Проверяем, что дефолтный wrapper не используется
+    expect(wrapper.findAll('.v-data-table__wrapper')).toHaveLength(0)
+
+    // Проверяем, что кастомный wrapper присутствует
+    expect(wrapper.findAll('[data-test="custom-wrapper"]')).toHaveLength(1)
+    expect(wrapper.findAll('.custom-wrapper')).toHaveLength(1)
+    expect(wrapper.findAll('.custom-table')).toHaveLength(1)
+
+    // Проверяем содержимое кастомного wrapper
+    expect(wrapper.find('.custom-wrapper').text()).toContain('Custom Header 1')
+    expect(wrapper.find('.custom-wrapper').text()).toContain('Custom Data 1')
+
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render with top & bottom slots', () => {
     const wrapper = mountFunction({
       slots: {
-        top: '<div class="top">Header</div>',
-        bottom: '<div class="bottom">Footer</div>',
+        top: () => h('div', { class: 'top' }, 'Header'),
+        bottom: () => h('div', { class: 'bottom' }, 'Footer'),
       },
     })
 
@@ -60,12 +89,9 @@ describe('VSimpleTable.ts', () => {
   it('should render with custom height', () => {
     const wrapper = mountFunction({
       slots: {
-        default: `
-          <tr><th>Foo</th><th>Bar</th></tr>
-          <tr><td>baz</td><td>qux</td></tr>
-        `,
+        default: createDefaultSlots,
       },
-      propsData: {
+      props: {
         height: 1000,
       },
     })
@@ -73,29 +99,29 @@ describe('VSimpleTable.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should compute classes', () => {
+  it('should compute classes', async () => {
     const wrapper = mountFunction()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       dense: true,
     })
     expect(wrapper.vm.classes).toMatchObject({
       'v-data-table--dense': true,
     })
-    wrapper.setProps({
+    await wrapper.setProps({
       dark: true,
     })
     expect(wrapper.vm.classes).toMatchObject({
       'theme--dark': true,
       'theme--light': false,
     })
-    wrapper.setProps({
+    await wrapper.setProps({
       fixedHeader: true,
     })
     expect(wrapper.vm.classes).toMatchObject({
       'v-data-table--fixed-header': true,
     })
-    wrapper.setProps({
+    await wrapper.setProps({
       fixedHeader: false,
       height: 1000,
     })
@@ -107,8 +133,8 @@ describe('VSimpleTable.ts', () => {
   it('should compute classes with top & bottom slots', () => {
     const wrapper = mountFunction({
       slots: {
-        top: '<div class="top">Header</div>',
-        bottom: '<div class="bottom">Footer</div>',
+        top: () => h('div', { class: 'top' }, 'Header'),
+        bottom: () => h('div', { class: 'bottom' }, 'Footer'),
       },
     })
 

package/src/components/VDataTable/__tests__/VVirtualTable.spec.ts

@@ -1,29 +1,27 @@
 import VVirtualTable from '../VVirtualTable'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import Vue from 'vue'
+import { h } from 'vue'
 
 describe('VVirtualTable.ts', () => {
   type Instance = InstanceType<typeof VVirtualTable>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VVirtualTable, options)
     }
   })
 
   it('should render', () => {
-    const vm = new Vue()
-
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['a', 'b', 'c'],
       },
-      scopedSlots: {
-        items: props => vm.$createElement('div', { class: 'test' }, [JSON.stringify(props)]),
+      slots: {
+        items: (props: any) => h('div', { class: 'test' }, [JSON.stringify(props)]),
       },
     })
 
@@ -32,19 +30,19 @@ describe('VVirtualTable.ts', () => {
 
   it('should re-render when items change', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['a', 'b', 'c'],
       },
-      scopedSlots: {
-        items (props) {
-          return h('div', props.items.map(i => h('div', [i])))
+      slots: {
+        items (props: any) {
+          return h('div', props.items.map((i: any) => h('div', [i])))
         },
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       items: ['d', 'e', 'f'],
     })
 

package/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap

@@ -35,6 +35,36 @@ exports[`Table Row should render with cellClass 1`] = `
 </tr>
 `;
 
+exports[`Table Row should render with regular slots 1`] = `
+<tr>
+  <td class="text-start">
+    <p class="test">
+      $0.68
+    </p>
+  </td>
+  <td class="text-start">
+    <p class="test">
+      $0.65
+    </p>
+  </td>
+</tr>
+`;
+
+exports[`Table Row should render with scoped slots 1`] = `
+<tr>
+  <td class="text-start">
+    <p class="test petrol">
+      0.68
+    </p>
+  </td>
+  <td class="text-start">
+    <p class="test diesel">
+      0.65
+    </p>
+  </td>
+</tr>
+`;
+
 exports[`Table Row should render without slots 1`] = `
 <tr>
   <td class="text-start">