@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha27

package/src/components/VDatePicker/__tests__/VDatePickerMonthTable.spec.ts

@@ -6,8 +6,11 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
+enableAutoUnmount(afterEach)
+
 describe('VDatePickerMonthTable.ts', () => {
   type Instance = InstanceType<typeof VDatePickerMonthTable>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
@@ -15,9 +18,11 @@ describe('VDatePickerMonthTable.ts', () => {
     mountFunction = (options?: MountOptions<Instance>) => {
       return mount(VDatePickerMonthTable, {
         ...options,
-        mocks: {
-          $vuetify: {
-            lang: new Lang(preset),
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: new Lang(preset),
+            },
           },
         },
       })
@@ -26,10 +31,10 @@ describe('VDatePickerMonthTable.ts', () => {
 
   it('should render component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         current: '2005-05',
-        value: '2005-11',
+        modelValue: '2005-11',
       },
     })
 
@@ -38,10 +43,10 @@ describe('VDatePickerMonthTable.ts', () => {
 
   it('should render component and match snapshot (multiple)', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         current: '2005-05',
-        value: ['2005-11', '2005-10'],
+        modelValue: ['2005-11', '2005-10'],
       },
     })
 
@@ -50,165 +55,146 @@ describe('VDatePickerMonthTable.ts', () => {
 
   it.skip('should watch tableDate value and run transition', async () => { // TODO: make this one work
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         current: '2005-05',
-        value: '2005-11',
+        modelValue: '2005-11',
       },
     })
 
-    wrapper.setProps({
+    await wrapper.setProps({
       tableDate: '2006',
     })
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('table').at(0).element.className).toBe('tab-transition-enter tab-transition-enter-active')
+    expect(wrapper.findAll('table')[0].element.className).toBe('tab-transition-enter tab-transition-enter-active')
   })
 
   it.skip('should watch tableDate value and run reverse transition', async () => { // TODO: make this one work
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         current: '2005-05',
-        value: '2005-11',
+        modelValue: '2005-11',
       },
     })
 
-    wrapper.setProps({
+    await wrapper.setProps({
       tableDate: '2004',
     })
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('table').at(0).element.className).toBe('tab-reverse-transition-enter tab-reverse-transition-enter-active')
+    expect(wrapper.findAll('table')[0].element.className).toBe('tab-reverse-transition-enter tab-reverse-transition-enter-active')
   })
 
-  it('should emit event when month button is clicked', () => {
+  it('should emit event when month button is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         current: '2005-05',
-        value: '2005-11',
+        modelValue: '2005-11',
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.findAll('tbody button').at(0).trigger('click')
-    expect(input).toHaveBeenCalledWith('2005-01')
+    await wrapper.findAll('tbody button')[0].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['2005-01'])
   })
 
-  it('should not emit event when disabled month button is clicked', () => {
+  it('should not emit event when disabled month button is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         current: '2005-05',
-        value: '2005-11',
+        modelValue: '2005-11',
         allowedDates: () => false,
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.findAll('tbody button').at(0).trigger('click')
-    expect(input).not.toHaveBeenCalled()
+    await wrapper.findAll('tbody button')[0].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
   })
 
-  it('should emit tableDate event when scrolled and scrollable', () => {
+  it('should emit tableDate event when scrolled and scrollable', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         scrollable: true,
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('wheel', { deltaY: 1 })
-    expect(tableDate).toHaveBeenCalledWith('2006')
+    await wrapper.trigger('wheel', { deltaY: 1 })
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual(['2006'])
   })
 
-  it('should not emit tableDate event when scrolled and not scrollable', () => {
+  it('should not emit tableDate event when scrolled and not scrollable', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('wheel', { deltaY: 1 })
-    expect(tableDate).not.toHaveBeenCalled()
+    await wrapper.trigger('wheel', { deltaY: 1 })
+    expect(wrapper.emitted('update:table-date')).toBeFalsy()
   })
 
-  it('should not emit tableDate event when scrollable but tableDate less than min', () => {
+  it('should not emit tableDate event when scrollable but tableDate less than min', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         scrollable: true,
         min: '2005',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('wheel', { deltaY: -50 })
-    expect(tableDate).not.toHaveBeenCalled()
+    await wrapper.trigger('wheel', { deltaY: -50 })
+    expect(wrapper.emitted('update:table-date')).toBeFalsy()
   })
 
-  it('should emit tableDate event when scrollable and tableDate greater than min', () => {
+  it('should emit tableDate event when scrollable and tableDate greater than min', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         scrollable: true,
         min: '2003',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('wheel', { deltaY: -50 })
-    expect(tableDate).toHaveBeenCalledWith('2004')
+    await wrapper.trigger('wheel', { deltaY: -50 })
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual(['2004'])
   })
 
   // TODO
-  it.skip('should emit tableDate event when swiped', () => {
+  it.skip('should emit tableDate event when swiped', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('touchstart')
-    wrapper.trigger('touchend')
-    expect(tableDate).toHaveBeenCalledWith(2006)
+    await wrapper.trigger('touchstart')
+    await wrapper.trigger('touchend')
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual([2006])
   })
 
   it('should change tableDate when touch is called', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
     wrapper.vm.touch(1, wrapper.vm.calculateTableDate)
-    expect(tableDate).toHaveBeenCalledWith('2006')
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual(['2006'])
     wrapper.vm.touch(-1, wrapper.vm.calculateTableDate)
-    expect(tableDate).toHaveBeenCalledWith('2004')
+    expect(wrapper.emitted('update:table-date')[1]).toEqual(['2004'])
   })
 
   it('should render component with events (array) and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         events: ['2005-07', '2005-11'],
         eventColor: 'red',
@@ -220,7 +206,7 @@ describe('VDatePickerMonthTable.ts', () => {
 
   it('should render component with events (function) and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         events: date => date === '2005-07' || date === '2005-11',
         eventColor: 'red',
@@ -232,7 +218,7 @@ describe('VDatePickerMonthTable.ts', () => {
 
   it('should render component with events colored by object and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         events: ['2005-07', '2005-11'],
         eventColor: { '2005-07': 'red', '2005-11': 'blue lighten-1' },
@@ -244,7 +230,7 @@ describe('VDatePickerMonthTable.ts', () => {
 
   it('should render component with events colored by function and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005',
         events: ['2005-07', '2005-11'],
         eventColor: date => ({ '2005-07': 'red', '2005-11': 'blue lighten-1' }[date]),

package/src/components/VDatePicker/__tests__/VDatePickerTitle.spec.ts

@@ -3,20 +3,39 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VDatePickerTitle.ts', () => {
   type Instance = InstanceType<typeof VDatePickerTitle>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VDatePickerTitle, options)
+      return mount(VDatePickerTitle, {
+        ...options,
+        global: {
+          mocks: {
+            $vuetify: {
+              icons: {
+                values: {
+                  next: 'mdi-chevron-right',
+                  prev: 'mdi-chevron-left',
+                },
+                component: 'mdi',
+              },
+            },
+          },
+        },
+      })
     }
   })
 
   it('should render component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         year: '1234',
         date: '2005-11-01',
       },
@@ -27,7 +46,7 @@ describe('VDatePickerTitle.ts', () => {
 
   it('should render disabled component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         year: '1234',
         date: '2005-11-01',
         disabled: true,
@@ -39,7 +58,7 @@ describe('VDatePickerTitle.ts', () => {
 
   it('should render readonly component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         year: '1234',
         date: '2005-11-01',
         readonly: true,
@@ -51,7 +70,7 @@ describe('VDatePickerTitle.ts', () => {
 
   it('should render component when selecting year and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         year: '1234',
         date: '2005-11-01',
         selectingYear: true,
@@ -63,60 +82,61 @@ describe('VDatePickerTitle.ts', () => {
 
   it('should render year icon', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         year: '1234',
         yearIcon: 'year',
         date: '2005-11-01',
       },
     })
 
-    expect(wrapper.findAll('.v-date-picker-title__year').at(0).html()).toMatchSnapshot()
+    expect(wrapper.findAll('.v-date-picker-title__year')[0].html()).toMatchSnapshot()
   })
 
-  it('should emit input event on year/date click', () => {
+  it('should emit input event on year/date click', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         year: '1234',
         yearIcon: 'year',
         date: '2005-11-01',
       },
     })
 
-    const input = jest.fn(value => wrapper.setProps({ selectingYear: value }))
-    wrapper.vm.$on('update:selecting-year', input)
-
-    wrapper.findAll('.v-date-picker-title__date').at(0).trigger('click')
-    expect(input).not.toHaveBeenCalled()
-    wrapper.findAll('.v-date-picker-title__year').at(0).trigger('click')
-    expect(input).toHaveBeenCalledWith(true)
-    wrapper.findAll('.v-date-picker-title__date').at(0).trigger('click')
-    expect(input).toHaveBeenCalledWith(false)
-    wrapper.findAll('.v-date-picker-title__year').at(0).trigger('click')
-    wrapper.findAll('.v-date-picker-title__year').at(0).trigger('click')
-    expect(input).toHaveBeenCalledWith(false)
+    // Клик по дате не должен эмитить событие
+    await wrapper.findAll('.v-date-picker-title__date')[0].trigger('click')
+    expect(wrapper.emitted('update:selecting-year')).toBeFalsy()
+
+    // Клик по году должен эмитить true
+    await wrapper.findAll('.v-date-picker-title__year')[0].trigger('click')
+    expect(wrapper.emitted('update:selecting-year')).toHaveLength(1)
+    expect(wrapper.emitted('update:selecting-year')[0]).toEqual([true])
+
+    // Клик по дате должен эмитить false (переключение обратно)
+    await wrapper.findAll('.v-date-picker-title__date')[0].trigger('click')
+    expect(wrapper.emitted('update:selecting-year')).toHaveLength(2)
+    expect(wrapper.emitted('update:selecting-year')[1]).toEqual([false])
   })
 
-  it('should have the correct transition', () => {
+  it('should have the correct transition', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         year: '2018',
         date: 'Tue, Mar 3',
-        value: '2018-03-03',
+        modelValue: '2018-03-03',
       },
     })
 
     expect(wrapper.vm.isReversing).toBe(false)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       date: 'Wed, Mar 4',
-      value: '2018-03-04',
+      modelValue: '2018-03-04',
     })
 
     expect(wrapper.vm.isReversing).toBe(false)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       date: 'Wed, Mar 3',
-      value: '2018-03-03',
+      modelValue: '2018-03-03',
     })
 
     expect(wrapper.vm.isReversing).toBe(true)

package/src/components/VDatePicker/__tests__/VDatePickerYears.spec.ts

@@ -3,8 +3,11 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
+enableAutoUnmount(afterEach)
+
 describe('VDatePickerYears.ts', () => {
   type Instance = InstanceType<typeof VDatePickerYears>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
@@ -12,11 +15,13 @@ describe('VDatePickerYears.ts', () => {
     mountFunction = (options?: MountOptions<Instance>) => {
       return mount(VDatePickerYears, {
         ...options,
-        mocks: {
-          $vuetify: {
-            rtl: false,
-            lang: {
-              t: () => {},
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              lang: {
+                t: () => {},
+              },
             },
           },
         },
@@ -26,8 +31,8 @@ describe('VDatePickerYears.ts', () => {
 
   it('should render component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2000',
+      props: {
+        modelValue: '2000',
       },
     })
 
@@ -36,51 +41,49 @@ describe('VDatePickerYears.ts', () => {
 
   it('should respect min/max props', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         min: 1234,
         max: 1238,
       },
     })
 
-    expect(wrapper.findAll('li:first-child').at(0).element.textContent).toBe('1238')
-    expect(wrapper.findAll('li:last-child').at(0).element.textContent).toBe('1234')
+    expect(wrapper.findAll('li:first-child')[0].element.textContent).toBe('1238')
+    expect(wrapper.findAll('li:last-child')[0].element.textContent).toBe('1234')
   })
 
   it('should not allow min to be greater then max', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         min: 1238,
         max: 1234,
       },
     })
     expect(wrapper.findAll('li')).toHaveLength(1)
-    expect(wrapper.findAll('li').at(0).element.textContent).toBe('1234')
-    expect(wrapper.findAll('li').at(0).element.textContent).toBe('1234')
+    expect(wrapper.findAll('li')[0].element.textContent).toBe('1234')
+    expect(wrapper.findAll('li')[0].element.textContent).toBe('1234')
   })
 
   it('should emit event on year click', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 1999,
+      props: {
+        modelValue: 1999,
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.findAll('li.active + li').at(0).trigger('click')
-    expect(input).toHaveBeenCalledWith(1998)
+    await wrapper.findAll('li.active + li')[0].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1998])
   })
 
   it('should format years', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         format: year => `(${year})`,
         min: 1001,
         max: 1001,
       },
     })
 
-    expect(wrapper.findAll('li').at(0).element.textContent).toBe('(1001)')
+    expect(wrapper.findAll('li')[0].element.textContent).toBe('(1001)')
   })
 })