@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

package/src/components/VDataIterator/__tests__/VDataFooter.spec.ts

@@ -1,40 +1,36 @@
+import { h } from 'vue'
 import VDataFooter from '../VDataFooter'
 import { Lang } from '../../../services/lang'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
-import Vue from 'vue'
 import { preset } from '../../../presets/default'
 
-Vue.prototype.$vuetify = {
-  icons: {
-    values: {
-      prev: 'mdi-chevron-left',
-      next: 'mdi-chevron-right',
-      dropdown: 'mdi-menu-down',
-      first: 'mdi-page-first',
-      last: 'mdi-page-last',
-    },
-  },
-}
-
 describe('VDataFooter.ts', () => {
   type Instance = InstanceType<typeof VDataFooter>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  // Включаем автоматическое размонтирование после каждого теста
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     document.body.setAttribute('data-app', '')
 
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VDataFooter, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: new Lang(preset),
-            theme: {
-              dark: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              icons: {
+                component: null,
+              },
+              lang: new Lang(preset),
+              theme: {
+                dark: false,
+              },
             },
           },
         },
@@ -45,7 +41,7 @@ describe('VDataFooter.ts', () => {
 
   it('should render with custom itemsPerPage', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         itemsPerPageOptions: [50, 100],
         options: {
           page: 4,
@@ -67,7 +63,7 @@ describe('VDataFooter.ts', () => {
 
   it('should render in RTL mode', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         options: {
           page: 4,
           itemsPerPage: 10,
@@ -82,12 +78,17 @@ describe('VDataFooter.ts', () => {
         },
         showFirstLastPage: true,
       },
-      mocks: {
-        $vuetify: {
-          rtl: true,
-          lang: new Lang(preset),
-          theme: {
-            dark: false,
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: true,
+            icons: {
+              component: null,
+            },
+            lang: new Lang(preset),
+            theme: {
+              dark: false,
+            },
           },
         },
       },
@@ -98,7 +99,7 @@ describe('VDataFooter.ts', () => {
 
   it('should render first & last icons with showFirstLastPage', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         options: {
           page: 4,
           itemsPerPage: 10,
@@ -122,7 +123,7 @@ describe('VDataFooter.ts', () => {
     const mock = jest.fn()
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         options: {
           page: 4,
           itemsPerPage: 10,
@@ -135,9 +136,7 @@ describe('VDataFooter.ts', () => {
           pageCount: 10,
           itemsLength: 100,
         },
-      },
-      listeners: {
-        'update:options': mock,
+        'onUpdate:options': mock,
       },
     })
 
@@ -157,7 +156,7 @@ describe('VDataFooter.ts', () => {
 
   it('should show current page if has showCurrentPage', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         options: {
           page: 4,
           itemsPerPage: 10,
@@ -179,7 +178,7 @@ describe('VDataFooter.ts', () => {
 
   it('should disable last page button if no items', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         options: {
           page: 1,
           itemsPerPage: 10,

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

@@ -1,44 +1,41 @@
+import { h } from 'vue'
 import VDataIterator from '../VDataIterator'
 import { Lang } from '../../../services/lang'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
-import Vue from 'vue'
 import { Breakpoint } from '../../../services/breakpoint'
 import { preset } from '../../../presets/default'
 
-Vue.prototype.$vuetify = {
-  icons: {
-    values: {
-      prev: 'mdi-chevron-left',
-      next: 'mdi-chevron-right',
-      dropdown: 'mdi-menu-down',
-      first: 'mdi-page-first',
-      last: 'mdi-page-last',
-    },
-  },
-}
-
 describe('VDataIterator.ts', () => {
   type Instance = InstanceType<typeof VDataIterator>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  // Включаем автоматическое размонтирование после каждого теста
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     document.body.setAttribute('data-app', '')
 
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VDataIterator, {
-        mocks: {
-          $vuetify: {
-            breakpoint: new Breakpoint(preset),
-            lang: new Lang(preset),
-            theme: {
-              dark: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              breakpoint: new Breakpoint(preset),
+              lang: new Lang(preset),
+              theme: {
+                dark: false,
+              },
+              icons: {
+                component: null,
+              },
             },
           },
         },
-        sync: false,
         ...options,
       })
     }
@@ -52,7 +49,7 @@ describe('VDataIterator.ts', () => {
 
   it('should render and match snapshot with data', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           'foo',
           'bar',
@@ -60,7 +57,7 @@ describe('VDataIterator.ts', () => {
           'qux',
         ],
       },
-      scopedSlots: {
+      slots: {
         item (props) {
           return h('div', [props.item])
         },
@@ -72,7 +69,7 @@ describe('VDataIterator.ts', () => {
 
   it('should render valid no-data, loading and no-results states', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [],
         serverItemsLength: 0,
       },
@@ -81,7 +78,7 @@ describe('VDataIterator.ts', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       loading: true,
       items: [],
     })
@@ -89,7 +86,7 @@ describe('VDataIterator.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       loading: false,
       items: ['foo'],
       search: 'something',
@@ -100,166 +97,141 @@ describe('VDataIterator.ts', () => {
   })
 
   it('should emit when selection happens', async () => {
-    const input = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         itemKey: 'id',
         items: [
           { id: 1, text: 'foo' },
           { id: 2, text: 'bar' },
         ],
       },
-      listeners: {
-        input,
-      },
-      scopedSlots: {
-        item (props) {
-          return h('div', {
-            attrs: {
-              id: props.item.text,
-            },
-            on: {
-              click: () => props.select(true),
-            },
-          }, [props.item.text])
-        },
+      slots: {
+        item: (props: any) => h('div', {
+          id: props.item.text,
+          onClick: () => props.select(true),
+        }, [props.item.text]),
       },
     })
 
+    await wrapper.vm.$nextTick()
+
     const foo = wrapper.find('#foo')
-    foo.element.click()
+    expect(foo.exists()).toBe(true)
+    await foo.trigger('click')
 
     await wrapper.vm.$nextTick()
 
-    expect(input).toHaveBeenCalledWith([{ id: 1, text: 'foo' }])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[{ id: 1, text: 'foo' }]])
   })
 
   it('should emit when expansion happens', async () => {
-    const input = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         itemKey: 'id',
         items: [
           { id: 1, text: 'foo' },
           { id: 2, text: 'bar' },
         ],
       },
-      listeners: {
-        'update:expanded': input,
-      },
-      scopedSlots: {
-        item (props) {
-          return h('div', {
-            attrs: {
-              id: props.item.text,
-            },
-            on: {
-              click: () => props.expand(true),
-            },
-          }, [props.item.text])
-        },
+      slots: {
+        item: (props: any) => h('div', {
+          id: props.item.text,
+          onClick: () => props.expand(true),
+        }, [props.item.text]),
       },
     })
 
-    const foo = wrapper.find('#bar')
-    foo.element.click()
+    await wrapper.vm.$nextTick()
+
+    const bar = wrapper.find('#bar')
+    expect(bar.exists()).toBe(true)
+    await bar.trigger('click')
 
     await wrapper.vm.$nextTick()
 
-    expect(input).toHaveBeenCalledWith([{ id: 2, text: 'bar' }])
+    expect(wrapper.emitted('update:expanded')).toBeTruthy()
+    expect(wrapper.emitted('update:expanded')?.[0]).toEqual([[{ id: 2, text: 'bar' }]])
   })
 
   it('should select all', async () => {
-    const input = jest.fn()
     const items = [
       { id: 'foo' },
       { id: 'bar' },
     ]
-    const toggleSelectAll = jest.fn()
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
       },
-      listeners: {
-        input,
-        'toggle-select-all': toggleSelectAll,
-      },
-      scopedSlots: {
-        header (props) {
-          return h('div', {
-            attrs: {
-              id: 'header',
-            },
-            on: {
-              click: () => props.toggleSelectAll(true),
-            },
-          })
-        },
+      slots: {
+        header: (props: any) => h('div', {
+          id: 'header',
+          onClick: () => props.toggleSelectAll(true),
+        }),
       },
     })
 
+    await wrapper.vm.$nextTick()
+
     const header = wrapper.find('#header')
-    header.element.click()
+    expect(header.exists()).toBe(true)
+    await header.trigger('click')
 
     await wrapper.vm.$nextTick()
 
-    expect(input).toHaveBeenCalledWith(items)
-    expect(toggleSelectAll).toHaveBeenCalledWith({ items, value: true })
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([items])
+    expect(wrapper.emitted('toggle-select-all')).toBeTruthy()
+    expect(wrapper.emitted('toggle-select-all')?.[0]).toEqual([{ items, value: true }])
   })
 
   it('should update expansion from the outside', async () => {
-    const mock = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 'foo' },
           { id: 'bar' },
         ],
       },
-      listeners: {
-        'update:expanded': mock,
-      },
     })
 
-    wrapper.setProps({
+    await wrapper.setProps({
       expanded: [{ id: 'foo' }],
     })
     await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'foo' }])
+    expect(wrapper.emitted('update:expanded')).toBeTruthy()
+    expect(wrapper.emitted('update:expanded')?.slice(-1)[0]).toEqual([[{ id: 'foo' }]])
 
-    wrapper.setProps({
+    await wrapper.setProps({
       expanded: [{ id: 'bar' }],
     })
     await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'bar' }])
+    expect(wrapper.emitted('update:expanded')?.slice(-1)[0]).toEqual([[{ id: 'bar' }]])
   })
 
   it('should update selection from the outside', async () => {
-    const mock = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 'foo' },
           { id: 'bar' },
         ],
       },
-      listeners: {
-        input: mock,
-      },
     })
 
-    wrapper.setProps({
-      value: [{ id: 'foo' }],
+    await wrapper.setProps({
+      modelValue: [{ id: 'foo' }],
     })
     await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'foo' }])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.slice(-1)[0]).toEqual([[{ id: 'foo' }]])
 
-    wrapper.setProps({
-      value: [{ id: 'bar' }],
+    await wrapper.setProps({
+      modelValue: [{ id: 'bar' }],
     })
     await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'bar' }])
+    expect(wrapper.emitted('update:modelValue')?.slice(-1)[0]).toEqual([[{ id: 'bar' }]])
   })
 
   it('should check if all items are selected', async () => {
@@ -269,16 +241,16 @@ describe('VDataIterator.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
       },
-      scopedSlots: {
+      slots: {
         header: render,
       },
     })
 
-    wrapper.setProps({
-      value: items,
+    await wrapper.setProps({
+      modelValue: items,
     })
     await wrapper.vm.$nextTick()
 
@@ -295,16 +267,16 @@ describe('VDataIterator.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
       },
-      scopedSlots: {
+      slots: {
         header: render,
       },
     })
 
-    wrapper.setProps({
-      value: items.slice(1),
+    await wrapper.setProps({
+      modelValue: items.slice(1),
     })
     await wrapper.vm.$nextTick()
 
@@ -316,7 +288,7 @@ describe('VDataIterator.ts', () => {
 
   it('should hide footer', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         hideDefaultFooter: true,
       },
     })
@@ -326,9 +298,8 @@ describe('VDataIterator.ts', () => {
 
   // https://github.com/vuetifyjs/vuetify/issues/8886
   it('should emit page-count event', async () => {
-    const pageCount = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           'foo',
           'bar',
@@ -337,12 +308,9 @@ describe('VDataIterator.ts', () => {
         ],
         itemsPerPage: 1,
       },
-      listeners: {
-        pageCount,
-      },
     })
 
-    wrapper.setProps({ itemsPerPage: 4 })
+    await wrapper.setProps({ itemsPerPage: 4 })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.emitted('page-count')).toEqual([[4], [1]])