@dimailn/vuetify 2.7.2-alpha28 → 2.7.2-alpha29

package/src/components/VDataTable/VVirtualTable.ts

@@ -153,8 +153,7 @@ export default baseMixins.extend({
 
   render (): VNode {
     return h('div', {
-      class: 'v-data-table v-virtual-table',
-      class: this.classes,
+      class: ['v-data-table', 'v-virtual-table', this.classes],
     }, [
       getSlot(this, 'top'),
       this.genWrapper(),

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

@@ -130,20 +130,25 @@ describe('VDataTable.ts', () => {
     document.body.setAttribute('data-app', 'true')
 
     mountFunction = (options?: MountingOptions<Instance>) => {
+      const vuetifyInstance = {
+        breakpoint: new Breakpoint(preset),
+        lang: new Lang(preset),
+        theme: {
+          dark: false,
+        },
+        icons: {},
+      }
+
       return mount(VDataTable, {
         global: {
           config: {
             globalProperties: {
-              $vuetify: {
-                breakpoint: new Breakpoint(preset),
-                lang: new Lang(preset),
-                theme: {
-                  dark: false,
-                },
-                icons: {}
-              }
-            }
-          }
+              $vuetify: vuetifyInstance,
+            },
+          },
+          mocks: {
+            $vuetify: vuetifyInstance,
+          },
         },
         ...options,
       })
@@ -183,7 +188,6 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
   it('should render with foot slot', () => {
@@ -199,10 +203,9 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
-  it.skip('should render virtual table', () => {
+  it('should render virtual table', () => {
     const wrapper = mountFunction({
       props: {
         headers: testHeaders,
@@ -232,7 +235,6 @@ describe('VDataTable.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-
     const expandIcon = wrapper.findAll('.v-data-table__expand-icon')[0]
     if (expandIcon) {
       expandIcon.trigger('click')
@@ -254,7 +256,6 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
   it('should render with item.expanded scoped slot', async () => {
@@ -273,7 +274,6 @@ describe('VDataTable.ts', () => {
     await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
   it('should render with group.summary scoped slot', () => {
@@ -290,7 +290,6 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
   it('should render with item scoped slot', () => {
@@ -306,7 +305,6 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
   it('should render with grouped rows', () => {
@@ -320,7 +318,6 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
   it('should render with group scoped slot', () => {
@@ -337,19 +334,19 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-
   })
 
   it('should render loading state', () => {
     const wrapper = mountFunction({
       props: {
         loading: true,
+        checkboxColor: 'primary',
+        color: 'primary',
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-
     const wrapper2 = mountFunction({
       props: {
         headers: testHeaders,
@@ -361,7 +358,6 @@ describe('VDataTable.ts', () => {
     })
 
     expect(wrapper2.html()).toMatchSnapshot()
-
   })
 
   it.each([

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

@@ -86,11 +86,11 @@ describe('VEditDialog.ts', () => {
 
     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)
   })
@@ -126,22 +126,27 @@ describe('VEditDialog.ts', () => {
 
     // 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(['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)
+    await wrapper.vm.$nextTick()
     expect(wrapper.emitted('update:return-value')?.[1]).toEqual(['test'])
     expect(wrapper.props('returnValue')).toBe('test')
 

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

@@ -25,13 +25,15 @@ describe('VSimpleTable.ts', () => {
     }
   })
 
+  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: () => [
-          h('tr', [h('th', 'Foo'), h('th', 'Bar')]),
-          h('tr', [h('td', 'baz'), h('td', 'qux')]),
-        ],
+        default: createDefaultSlots,
       },
     })
 
@@ -43,23 +45,19 @@ describe('VSimpleTable.ts', () => {
   it('should render with custom wrapper', () => {
     const wrapper = mountFunction({
       slots: {
-        default: () => [
-          h('tr', [h('th', 'Foo'), h('th', 'Bar')]),
-          h('tr', [h('td', 'baz'), h('td', 'qux')]),
-        ],
+        default: createDefaultSlots,
         wrapper: () => h('div', {
           class: 'custom-wrapper',
-          'data-test': '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)
 
@@ -91,10 +89,7 @@ describe('VSimpleTable.ts', () => {
   it('should render with custom height', () => {
     const wrapper = mountFunction({
       slots: {
-        default: () => [
-          h('tr', [h('th', 'Foo'), h('th', 'Bar')]),
-          h('tr', [h('td', 'baz'), h('td', 'qux')]),
-        ],
+        default: createDefaultSlots,
       },
       props: {
         height: 1000,