@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha27

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

@@ -5,8 +5,11 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
+enableAutoUnmount(afterEach)
+
 describe('VDatePickerDateTable.ts', () => {
   type Instance = InstanceType<typeof VDatePickerDateTable>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
@@ -14,10 +17,12 @@ describe('VDatePickerDateTable.ts', () => {
     mountFunction = (options?: MountOptions<Instance>) => {
       return mount(VDatePickerDateTable, {
         ...options,
-        mocks: {
-          $vuetify: {
-            rtl: false,
-            lang: new Lang(preset),
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              lang: new Lang(preset),
+            },
           },
         },
       })
@@ -26,10 +31,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
       },
     })
 
@@ -38,10 +43,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render readonly component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         readonly: true,
       },
     })
@@ -51,10 +56,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render disabled component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         disabled: true,
       },
     })
@@ -64,10 +69,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render component with showWeek and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2018-02',
         current: '2005-07',
-        value: null,
+        modelValue: null,
         firstDayOfWeek: 2,
         showWeek: true,
       },
@@ -77,12 +82,12 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render component and match snapshot for multiple selection', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
         multiple: true,
         selectedDates: ['2005-11-03', '2005-11-05', '2005-11-08'],
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
       },
     })
 
@@ -91,10 +96,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render component with events (array) and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         events: ['2005-05-03'],
         eventColor: 'red',
       },
@@ -105,10 +110,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render component with events (function) and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         events: date => date === '2005-05-03',
         eventColor: 'red',
       },
@@ -119,10 +124,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render component with events colored by object and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         events: ['2005-05-03', '2005-05-04'],
         eventColor: { '2005-05-03': 'red', '2005-05-04': 'blue lighten-1' },
       },
@@ -133,10 +138,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should render component with events colored by function and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         events: ['2005-05-03', '2005-05-04'],
         eventColor: date => ({ '2005-05-03': 'red' }[date]),
       },
@@ -147,10 +152,10 @@ describe('VDatePickerDateTable.ts', () => {
 
   it('should match snapshot with first day of week', function () {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         firstDayOfWeek: 2,
       },
     })
@@ -160,159 +165,140 @@ describe('VDatePickerDateTable.ts', () => {
 
   it.skip('should watch tableDate value and run transition', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
       },
     })
 
-    wrapper.setProps({
+    await wrapper.setProps({
       tableDate: '2005-06',
     })
     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 () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
       },
     })
 
-    wrapper.setProps({
+    await wrapper.setProps({
       tableDate: '2005-04',
     })
     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 date button is clicked', () => {
+  it('should emit event when date button is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.findAll('tbody button').at(0).trigger('click')
-    expect(input).toHaveBeenCalledWith('2005-05-01')
+    await wrapper.findAll('tbody button')[0].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['2005-05-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-05',
         current: '2005-07',
-        value: '2005-11-03',
+        modelValue: '2005-11-03',
         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-05',
         scrollable: true,
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('wheel', { deltaY: 1 })
-    expect(tableDate).toHaveBeenCalledWith('2005-06')
+    await wrapper.trigger('wheel', { deltaY: 1 })
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual(['2005-06'])
   })
 
-  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-05',
       },
     })
 
-    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-05',
         scrollable: true,
         min: '2005-05',
       },
     })
 
-    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-05',
         scrollable: true,
         min: '2005-03',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('wheel', { deltaY: -50 })
-    expect(tableDate).toHaveBeenCalledWith('2005-04')
+    await wrapper.trigger('wheel', { deltaY: -50 })
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual(['2005-04'])
   })
 
   // 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-05',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
-    wrapper.trigger('touchstart')
-    wrapper.trigger('touchend')
-    expect(tableDate).toHaveBeenCalledWith('2005-06')
+    await wrapper.trigger('touchstart')
+    await wrapper.trigger('touchend')
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual(['2005-06'])
   })
 
   it('should change tableDate when touch is called', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tableDate: '2005-05',
       },
     })
 
-    const tableDate = jest.fn()
-    wrapper.vm.$on('update:table-date', tableDate)
-
     wrapper.vm.touch(1, wrapper.vm.calculateTableDate)
-    expect(tableDate).toHaveBeenCalledWith('2005-06')
+    expect(wrapper.emitted('update:table-date')).toBeTruthy()
+    expect(wrapper.emitted('update:table-date')[0]).toEqual(['2005-06'])
     wrapper.vm.touch(-1, wrapper.vm.calculateTableDate)
-    expect(tableDate).toHaveBeenCalledWith('2005-04')
+    expect(wrapper.emitted('update:table-date')[1]).toEqual(['2005-04'])
   })
 })

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

@@ -5,29 +5,39 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
-import Vue from 'vue'
 
-Vue.prototype.$vuetify = {
-  icons: {
-    values: {
-      next: 'mdi-chevron-right',
-      prev: 'mdi-chevron-left',
-    },
-  },
-}
+enableAutoUnmount(afterEach)
 
 describe('VDatePickerHeader.ts', () => {
   type Instance = InstanceType<typeof VDatePickerHeader>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  
   beforeEach(() => {
+    // Mock console.warn to suppress Vue warnings
+    jest.spyOn(console, 'warn').mockImplementation((...args: any[]) => {
+      if (args[0]?.includes?.('Component is missing template or render function')) {
+        return
+      }
+      if (args[0]?.includes?.('Invalid prop: type check failed')) {
+        return
+      }
+      // Call original warn for other messages
+      console.warn(...args)
+    })
     mountFunction = (options?: MountOptions<Instance>) => {
       return mount(VDatePickerHeader, {
         ...options,
-        mocks: {
-          $vuetify: {
-            rtl: false,
-            lang: new Lang(preset),
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              lang: new Lang(preset),
+              icons: {
+                component: 'mdi',
+              },
+            },
           },
         },
       })
@@ -36,8 +46,8 @@ describe('VDatePickerHeader.ts', () => {
 
   it('should render component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
       },
     })
 
@@ -46,8 +56,8 @@ describe('VDatePickerHeader.ts', () => {
 
   it('should render disabled component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
         disabled: true,
       },
     })
@@ -57,8 +67,8 @@ describe('VDatePickerHeader.ts', () => {
 
   it('should render readonly component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
         readonly: true,
       },
     })
@@ -68,8 +78,8 @@ describe('VDatePickerHeader.ts', () => {
 
   it('should render component in RTL mode and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
       },
     })
     wrapper.vm.$vuetify.rtl = true
@@ -81,55 +91,75 @@ describe('VDatePickerHeader.ts', () => {
 
   it('should render component with year value and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005',
+      props: {
+        modelValue: '2005',
+      },
+    })
+
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].element.textContent).toBe('2005')
+  })
+
+  it('should handle undefined modelValue', () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: undefined as any,
       },
     })
 
-    expect(wrapper.findAll('.v-date-picker-header__value div').at(0).element.textContent).toBe('2005')
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].element.textContent).toBe('')
+  })
+
+  it('should handle null modelValue', () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: null as any,
+      },
+    })
+
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].element.textContent).toBe('')
   })
 
   it('should render prev/next icons', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005',
+      props: {
+        modelValue: '2005',
         prevIcon: 'foo',
         nextIcon: 'bar',
       },
     })
 
-    expect(wrapper.findAll('.v-icon').at(0).element.textContent).toBe('foo')
-    expect(wrapper.findAll('.v-icon').at(1).element.textContent).toBe('bar')
+    expect(wrapper.findAll('.v-icon')[0].element.textContent).toBe('foo')
+    expect(wrapper.findAll('.v-icon')[1].element.textContent).toBe('bar')
   })
 
   it('should render component with own formatter and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
         format: value => `(${value})`,
       },
     })
 
-    expect(wrapper.findAll('.v-date-picker-header__value div').at(0).element.textContent).toBe('(2005-11)')
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].element.textContent).toBe('(2005-11)')
   })
 
   it('should render colored component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
         color: 'green lighten-1',
       },
     })
 
-    const div = wrapper.findAll('.v-date-picker-header__value div').at(0)
+    const div = wrapper.findAll('.v-date-picker-header__value div')[0]
     expect(div.classes('green--text')).toBe(true)
     expect(div.classes('text--lighten-1')).toBe(true)
   })
 
   it('should render component with default slot and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
       },
       slots: {
         default: '<span>foo</span>',
@@ -139,48 +169,43 @@ describe('VDatePickerHeader.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should trigger event on selector click', () => {
+  it('should trigger event on selector click', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-11',
+      props: {
+        modelValue: '2005-11',
       },
     })
 
-    const toggle = jest.fn()
-    wrapper.vm.$on('toggle', toggle)
-
-    wrapper.findAll('.v-date-picker-header__value button').at(0).trigger('click')
-    expect(toggle).toHaveBeenCalled()
+    await wrapper.findAll('.v-date-picker-header__value button')[0].trigger('click')
+    expect(wrapper.emitted('toggle')).toBeTruthy()
   })
 
-  it('should trigger event on arrows click', () => {
+  it('should trigger event on arrows click', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-12',
+      props: {
+        modelValue: '2005-12',
       },
     })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
-    wrapper.findAll('button.v-btn').at(0).trigger('click')
-    expect(input).toHaveBeenCalledWith('2005-11')
+    await wrapper.findAll('button.v-btn')[0].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2005-11'])
 
-    wrapper.findAll('button.v-btn').at(1).trigger('click')
-    expect(input).toHaveBeenCalledWith('2006-01')
+    await wrapper.findAll('button.v-btn')[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['2006-01'])
   })
 
-  it('should calculate prev/next value', () => {
+  it('should calculate prev/next value', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: '2005-12',
+      props: {
+        modelValue: '2005-12',
       },
     })
     expect(wrapper.vm.calculateChange(-1)).toBe('2005-11')
     expect(wrapper.vm.calculateChange(+1)).toBe('2006-01')
 
-    wrapper.setProps({
-      value: '2005',
+    await wrapper.setProps({
+      modelValue: '2005',
     })
     expect(wrapper.vm.calculateChange(-1)).toBe('2004')
     expect(wrapper.vm.calculateChange(+1)).toBe('2006')
@@ -188,31 +213,31 @@ describe('VDatePickerHeader.ts', () => {
 
   it.skip('should watch value and run transition', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 2005,
+      props: {
+        modelValue: 2005,
       },
     })
 
-    wrapper.setProps({
-      value: 2006,
+    await wrapper.setProps({
+      modelValue: 2006,
     })
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-transition-enter')).toBe(true)
-    expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-transition-enter-active')).toBe(true)
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].classes('tab-transition-enter')).toBe(true)
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].classes('tab-transition-enter-active')).toBe(true)
   })
 
   it.skip('should watch value and run reverse transition', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: 2005,
+      props: {
+        modelValue: 2005,
       },
     })
 
-    wrapper.setProps({
-      value: 2004,
+    await wrapper.setProps({
+      modelValue: 2004,
     })
     await wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-reverse-transition-enter')).toBe(true)
-    expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-reverse-transition-enter-active')).toBe(true)
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].classes('tab-reverse-transition-enter')).toBe(true)
+    expect(wrapper.findAll('.v-date-picker-header__value div')[0].classes('tab-reverse-transition-enter-active')).toBe(true)
   })
 })