@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -1,35 +1,33 @@
 import VData from '../VData'
+import { h } from 'vue'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper
 } from '@vue/test-utils'
 
 describe('VData.ts', () => {
   type Instance = InstanceType<typeof VData>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: any) => {
       return mount(VData, {
-        ...options,
-        sync: false,
+        ...options
       })
     }
   })
 
   it('should render data through default scoped slot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
-        ],
-      },
-      scopedSlots: {
-        default (data) {
-          return h('div', data.items.map(item => h('div', [item.text])))
-        },
+          { id: 2, text: 'bar' }
+        ]
       },
+      slots: {
+        default: (data: any) => h('div', data.items.map((item: any) => h('div', [item.text])))
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -40,33 +38,33 @@ describe('VData.ts', () => {
   it('should ignore items length if using server-items-length', async () => {
     const render = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
-        ],
-      },
-      scopedSlots: {
-        default: render,
+          { id: 2, text: 'bar' }
+        ]
       },
+      slots: {
+        default: render
+      }
     })
 
     await wrapper.vm.$nextTick()
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       pagination: expect.objectContaining({
-        itemsLength: 2,
-      }),
+        itemsLength: 2
+      })
     }))
 
-    wrapper.setProps({
-      serverItemsLength: 10,
+    await wrapper.setProps({
+      serverItemsLength: 10
     })
 
     await wrapper.vm.$nextTick()
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       pagination: expect.objectContaining({
-        itemsLength: 10,
-      }),
+        itemsLength: 10
+      })
     }))
   })
 
@@ -75,30 +73,30 @@ describe('VData.ts', () => {
     const items = [
       { id: 1, text: 'foo', baz: 'one' },
       { id: 2, text: 'bar', baz: 'two' },
-      { id: 3, text: 'baz', baz: 'one' },
+      { id: 3, text: 'baz', baz: 'one' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
-        groupBy: ['baz'],
-      },
-      scopedSlots: {
-        default: render,
+        groupBy: ['baz']
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       groupedItems: [
         {
           name: 'one',
-          items: [items[0], items[2]],
+          items: [items[0], items[2]]
         },
         {
           name: 'two',
-          items: [items[1]],
-        },
-      ],
+          items: [items[1]]
+        }
+      ]
     }))
   })
 
@@ -107,30 +105,30 @@ describe('VData.ts', () => {
     const items = [
       { id: 1, text: 'foo', baz: null },
       { id: 2, text: 'bar', baz: 'one' },
-      { id: 3, text: 'baz' },
+      { id: 3, text: 'baz' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
-        groupBy: ['baz'],
-      },
-      scopedSlots: {
-        default: render,
+        groupBy: ['baz']
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       groupedItems: [
         {
           name: '',
-          items: [items[0], items[2]],
+          items: [items[0], items[2]]
         },
         {
           name: 'one',
-          items: [items[1]],
-        },
-      ],
+          items: [items[1]]
+        }
+      ]
     }))
   })
 
@@ -139,30 +137,30 @@ describe('VData.ts', () => {
     const items = [
       { id: 1, text: 'foo', foo: { bar: 'one' } },
       { id: 2, text: 'bar', foo: { bar: 'two' } },
-      { id: 3, text: 'baz', foo: { bar: 'one' } },
+      { id: 3, text: 'baz', foo: { bar: 'one' } }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
-        groupBy: ['foo.bar'],
-      },
-      scopedSlots: {
-        default: render,
+        groupBy: ['foo.bar']
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       groupedItems: [
         {
           name: 'one',
-          items: [items[0], items[2]],
+          items: [items[0], items[2]]
         },
         {
           name: 'two',
-          items: [items[1]],
-        },
-      ],
+          items: [items[1]]
+        }
+      ]
     }))
   })
 
@@ -171,11 +169,11 @@ describe('VData.ts', () => {
     const items = [
       { id: 1, text: 'foo', value: 1 },
       { id: 2, text: 'bar', value: 4 },
-      { id: 3, text: 'baz', value: 3 },
+      { id: 3, text: 'baz', value: 3 }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         groupBy: ['value'],
         customGroup: function evenOddGrouper (items: any[], groupBy: string[]) {
@@ -185,18 +183,18 @@ describe('VData.ts', () => {
             (rv[group] = rv[group] || []).push(x)
             return rv
           }, {})
-        },
-      },
-      scopedSlots: {
-        default: render,
+        }
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       groupedItems: {
         even: [items[1]],
-        odd: [items[0], items[2]],
-      },
+        odd: [items[0], items[2]]
+      }
     }))
   })
 
@@ -207,28 +205,28 @@ describe('VData.ts', () => {
       { id: 1, text: 'c' },
       { id: 2, text: 'a' },
       { id: 3, text: 'd' },
-      { id: 4, text: 'b' },
+      { id: 4, text: 'b' }
     ]
 
     const sorted = [
       { id: 2, text: 'a' },
       { id: 4, text: 'b' },
       { id: 1, text: 'c' },
-      { id: 3, text: 'd' },
+      { id: 3, text: 'd' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
-        sortBy: ['text'],
-      },
-      scopedSlots: {
-        default: render,
+        sortBy: ['text']
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: sorted,
+      items: sorted
     }))
   })
 
@@ -239,35 +237,35 @@ describe('VData.ts', () => {
       { id: 1, foo: 'a', bar: 'b' },
       { id: 2, foo: 'b', bar: 'b' },
       { id: 3, foo: 'b', bar: 'a' },
-      { id: 4, foo: 'a', bar: 'a' },
+      { id: 4, foo: 'a', bar: 'a' }
     ]
 
     const sorted = [
       { id: 4, foo: 'a', bar: 'a' },
       { id: 1, foo: 'a', bar: 'b' },
       { id: 3, foo: 'b', bar: 'a' },
-      { id: 2, foo: 'b', bar: 'b' },
+      { id: 2, foo: 'b', bar: 'b' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
-        sortBy: ['foo'],
-      },
-      scopedSlots: {
-        default: render,
+        sortBy: ['foo']
       },
+      slots: {
+        default: render
+      }
     })
 
     await wrapper.vm.$nextTick()
 
-    wrapper.setProps({
-      sortBy: ['foo', 'bar'],
+    await wrapper.setProps({
+      sortBy: ['foo', 'bar']
     })
     await wrapper.vm.$nextTick()
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: sorted,
+      items: sorted
     }))
   })
 
@@ -284,22 +282,22 @@ describe('VData.ts', () => {
       { id: 7, foo: 'g' },
       { id: 8, foo: 'h' },
       { id: 9, foo: 'i' },
-      { id: 10, foo: 'j' },
+      { id: 10, foo: 'j' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         itemsPerPage: 5,
-        page: 2,
-      },
-      scopedSlots: {
-        default: render,
+        page: 2
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: items.slice(5),
+      items: items.slice(5)
     }))
   })
 
@@ -311,22 +309,22 @@ describe('VData.ts', () => {
       { text: 'Bar', id: 2 },
       { text: 'Fizz', id: 3 },
       { text: 'Buzz', id: 4 },
-      { text: 'Fizzbuzz', id: 5 },
+      { text: 'Fizzbuzz', id: 5 }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         sortBy: ['text'],
-        disableSort: true,
-      },
-      scopedSlots: {
-        default: render,
+        disableSort: true
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items,
+      items
     }))
   })
 
@@ -337,32 +335,32 @@ describe('VData.ts', () => {
       { text: 'Bar', id: 2 },
       { text: 'Fizz', id: 3 },
       { text: 'Buzz', id: 4 },
-      { text: 'Fizzbuzz', id: 5 },
+      { text: 'Fizzbuzz', id: 5 }
     ]
 
     const wrapper = mountFunction({
-      propsData: { items },
-      scopedSlots: {
-        default: render,
-      },
+      props: { items },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items,
+      items
     }))
 
-    wrapper.setProps({ itemsPerPage: 2 })
+    await wrapper.setProps({ itemsPerPage: 2 })
     await wrapper.vm.$nextTick()
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: items.slice(0, 2),
+      items: items.slice(0, 2)
     }))
 
-    wrapper.setProps({ disablePagination: true })
+    await wrapper.setProps({ disablePagination: true })
     await wrapper.vm.$nextTick()
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items,
+      items
     }))
   })
 
@@ -371,37 +369,32 @@ describe('VData.ts', () => {
       { id: 1, text: 'c' },
       { id: 2, text: 'a' },
       { id: 3, text: 'd' },
-      { id: 4, text: 'b' },
+      { id: 4, text: 'b' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
+      props: {
+        items: unsorted
       },
-      scopedSlots: {
-        default (props) {
-          const items = props.items.map(item => h('div', [item.text]))
+      slots: {
+        default: (props: any) => {
+          const items = props.items.map((item: any) => h('div', [item.text]))
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.sort('text'),
-            },
+            id: 'wrapper',
+            onClick: () => props.sort('text')
           }, items)
-        },
-      },
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    const el = wrapper.find('#wrapper').element
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -411,32 +404,27 @@ describe('VData.ts', () => {
       { id: 1, text: 'c', group: 'foo' },
       { id: 2, text: 'a', group: 'bar' },
       { id: 3, text: 'd', group: 'foo' },
-      { id: 4, text: 'b', group: 'bar' },
+      { id: 4, text: 'b', group: 'bar' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
+      props: {
+        items: unsorted
       },
-      scopedSlots: {
-        default (props) {
-          const items = props.items.map(item => h('div', [`${item.group}-${item.text}`]))
+      slots: {
+        default: (props: any) => {
+          const items = props.items.map((item: any) => h('div', [`${item.group}-${item.text}`]))
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.sort(['group', 'text']),
-            },
+            id: 'wrapper',
+            onClick: () => props.sort(['group', 'text'])
           }, items)
-        },
-      },
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    const el = wrapper.find('#wrapper').element
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -447,35 +435,30 @@ describe('VData.ts', () => {
       { id: 1, text: 'c', group: 'foo' },
       { id: 4, text: 'a', group: 'bar' },
       { id: 3, text: 'd', group: 'foo' },
-      { id: 2, text: 'b', group: 'bar' },
+      { id: 2, text: 'b', group: 'bar' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
+      props: {
+        items: unsorted
       },
-      scopedSlots: {
-        default (props) {
+      slots: {
+        default: (props: any) => {
           const items = props.groupedItems
-            ? props.groupedItems.map(group => group.name)
-            : props.items.map(item => item.text)
+            ? props.groupedItems.map((group: any) => group.name)
+            : props.items.map((item: any) => item.text)
 
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.group('group'),
-            },
-          }, items.map(item => h('div', [item])))
-        },
-      },
+            id: 'wrapper',
+            onClick: () => props.group('group')
+          }, items.map((item: any) => h('div', [item])))
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    const el = wrapper.find('#wrapper').element
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -485,16 +468,16 @@ describe('VData.ts', () => {
   it('should handle setting itemsPerPage to zero', async () => {
     const render = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
+          { id: 2, text: 'bar' }
         ],
-        itemsPerPage: 0,
-      },
-      scopedSlots: {
-        default: render,
+        itemsPerPage: 0
       },
+      slots: {
+        default: render
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -504,12 +487,12 @@ describe('VData.ts', () => {
         page: 1,
         pageCount: 1,
         pageStart: 0,
-        pageStop: 0,
-      }),
+        pageStop: 0
+      })
     }))
 
-    wrapper.setProps({
-      itemsPerPage: 1,
+    await wrapper.setProps({
+      itemsPerPage: 1
     })
 
     await wrapper.vm.$nextTick()
@@ -519,8 +502,8 @@ describe('VData.ts', () => {
         page: 1,
         pageCount: 2,
         pageStart: 0,
-        pageStop: 1,
-      }),
+        pageStop: 1
+      })
     }))
   })
 
@@ -530,34 +513,30 @@ describe('VData.ts', () => {
       { id: 1, text: 'c', group: 'foo' },
       { id: 4, text: 'a', group: 'bar' },
       { id: 3, text: 'd', group: 'foo' },
-      { id: 2, text: 'b', group: 'bar' },
+      { id: 2, text: 'b', group: 'bar' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
-        groupBy: ['text'],
+        groupBy: ['text']
       },
-      scopedSlots: {
-        default (props) {
+      slots: {
+        default: (props: any) => {
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.group('group'),
-            },
-          }, props.groupedItems.map(group => h('div', [group.name])))
-        },
-      },
+            id: 'wrapper',
+            onClick: () => props.group('group')
+          }, props.groupedItems.map((group: any) => h('div', [group.name])))
+        }
+      }
     })
 
-    wrapper.setProps({ groupDesc: [false] })
+    await wrapper.setProps({ groupDesc: [false] })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ groupDesc: [true] })
+    await wrapper.setProps({ groupDesc: [true] })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -569,31 +548,31 @@ describe('VData.ts', () => {
     const items = [
       { id: 1, text: 'foo', baz: 'one' },
       { id: 2, text: 'bar', baz: 'two' },
-      { id: 3, text: 'baz', baz: 'one' },
+      { id: 3, text: 'baz', baz: 'one' }
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         groupBy: ['baz'],
-        disableSort: true,
-      },
-      scopedSlots: {
-        default: render,
+        disableSort: true
       },
+      slots: {
+        default: render
+      }
     })
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       groupedItems: [
         {
           name: 'one',
-          items: [items[0], items[2]],
+          items: [items[0], items[2]]
         },
         {
           name: 'two',
-          items: [items[1]],
-        },
-      ],
+          items: [items[1]]
+        }
+      ]
     }))
   })
 })