@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha28

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

@@ -1,24 +1,35 @@
-import Vue from 'vue'
+import { createApp, h } from 'vue'
 import { Lang } from '../../../services/lang'
 import VTimePicker, { SelectingTimes } from '../VTimePicker'
 import {
   mount,
   MountOptions,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
 import { preset } from '../../../presets/default'
 
-Vue.prototype.$vuetify = {
-  lang: new Lang(preset),
-}
-
 describe('VTimePicker.ts', () => {
   type Instance = InstanceType<typeof VTimePicker>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
     mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VTimePicker, options)
+      return mount(VTimePicker, {
+        global: {
+          config: {
+            warnHandler: () => {}, // Подавляем предупреждения Vue
+          },
+          mocks: {
+            $vuetify: {
+              lang: new Lang(preset),
+              icons: {
+                component: 'mdi',
+              },
+            },
+          },
+        },
+        ...options
+      })
     }
   });
 
@@ -26,8 +37,8 @@ describe('VTimePicker.ts', () => {
     const useSecondsDesc = (useSecondsValue ? '. with useSeconds' : '')
     it('should accept a value' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '09:12:34',
+        props: {
+          modelValue: '09:12:34',
           useSeconds: useSecondsValue,
         },
       })
@@ -45,8 +56,8 @@ describe('VTimePicker.ts', () => {
 
     it('should render landscape component' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '09:12:34',
+        props: {
+          modelValue: '09:12:34',
           landscape: true,
           useSeconds: useSecondsValue,
         },
@@ -58,9 +69,9 @@ describe('VTimePicker.ts', () => {
 
     it('should render disabled component' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           disabled: true,
-          value: '09:12:34',
+          modelValue: '09:12:34',
           useSeconds: useSecondsValue,
         },
       })
@@ -71,9 +82,9 @@ describe('VTimePicker.ts', () => {
 
     it('should render flat component' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           flat: true,
-          value: '09:12:34',
+          modelValue: '09:12:34',
           useSeconds: useSecondsValue,
         },
       })
@@ -84,9 +95,9 @@ describe('VTimePicker.ts', () => {
 
     it('should render component with elevation' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           elevation: 15,
-          value: '09:12:34',
+          modelValue: '09:12:34',
           useSeconds: useSecondsValue,
         },
       })
@@ -97,20 +108,20 @@ describe('VTimePicker.ts', () => {
 
     it('should render component without a title' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '09:12:34',
+        props: {
+          modelValue: '09:12:34',
           noTitle: true,
           useSeconds: useSecondsValue,
         },
       })
-      expect(wrapper.findAll('.v-picker__title').wrappers).toHaveLength(0)
+      expect(wrapper.findAll('.v-picker__title')).toHaveLength(0)
     })
 
     it('should accept a date object for a value' + useSecondsDesc, async () => {
       const now = new Date('2017-01-01 12:00 AM')
       const wrapper = mountFunction({
-        propsData: {
-          value: now,
+        props: {
+          modelValue: now,
           useSeconds: useSecondsValue,
         },
       })
@@ -125,69 +136,76 @@ describe('VTimePicker.ts', () => {
 
     it('should change am/pm when updated from model' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '9:00am',
+        props: {
+          modelValue: '9:00am',
           useSeconds: useSecondsValue,
         },
       })
 
       await wrapper.vm.$nextTick()
-      wrapper.setProps({ value: '9:00pm' })
+      await wrapper.setProps({ modelValue: '9:00pm' })
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('pm')
       // with seconds
-      wrapper.setProps({ value: '9:00:12am' })
+      await wrapper.setProps({ modelValue: '9:00:12am' })
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('am')
-      wrapper.setProps({ value: '9:00:12pm' })
+      await wrapper.setProps({ modelValue: '9:00:12pm' })
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('pm')
       expect(wrapper.html()).toMatchSnapshot()
     })
 
     it('should set picker to pm when given Date after noon' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: new Date('2017-01-01 12:00 PM'),
+        props: {
+          modelValue: new Date('2017-01-01 12:00 PM'),
           useSeconds: useSecondsValue,
         },
       })
 
       expect(wrapper.vm.period).toBe('pm')
       // with seconds
-      wrapper.setProps({ value: new Date('2017-01-01 12:00:13 PM') })
+      wrapper.setProps({ modelValue: new Date('2017-01-01 12:00:13 PM') })
       expect(wrapper.vm.period).toBe('pm')
     })
 
-    it('should set picker to pm when given string with PM in it' + useSecondsDesc, () => {
+    it('should set picker to pm when given string with PM in it' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '1:00 PM',
+        props: {
+          modelValue: '1:00 PM',
           useSeconds: useSecondsValue,
         },
       })
 
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('pm')
       // with seconds
-      wrapper.setProps({ value: '1:00:12 PM' })
+      await wrapper.setProps({ modelValue: '1:00:12 PM' })
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('pm')
     })
 
-    it('should set picker to pm when given string with pm in it' + useSecondsDesc, () => {
+    it('should set picker to pm when given string with pm in it' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '1:00 pm',
+        props: {
+          modelValue: '1:00 pm',
           useSeconds: useSecondsValue,
         },
       })
 
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('pm')
       // with seconds
-      wrapper.setProps({ value: '1:00:13 pm' })
+      await wrapper.setProps({ modelValue: '1:00:13 pm' })
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('pm')
     })
 
     it('should set picker to am when given Date before noon' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: new Date('2017-01-01 1:00 AM'),
+        props: {
+          modelValue: new Date('2017-01-01 1:00 AM'),
           useSeconds: useSecondsValue,
         },
       })
@@ -200,8 +218,8 @@ describe('VTimePicker.ts', () => {
 
     it('should render colored time picker' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '09:00:00',
+        props: {
+          modelValue: '09:00:00',
           color: 'orange darken-1',
           useSeconds: useSecondsValue,
         },
@@ -213,8 +231,8 @@ describe('VTimePicker.ts', () => {
 
     it('should render colored time picker, header' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '09:00:00',
+        props: {
+          modelValue: '09:00:00',
           color: 'primary',
           headerColor: 'orange darken-1',
           useSeconds: useSecondsValue,
@@ -227,7 +245,7 @@ describe('VTimePicker.ts', () => {
 
     it('should render dark time picker' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           dark: true,
           useSeconds: useSecondsValue,
         },
@@ -237,10 +255,10 @@ describe('VTimePicker.ts', () => {
       expect(wrapper.html()).toMatchSnapshot()
     })
 
-    it('should set input hour when setting hour in 12hr mode' + useSecondsDesc, () => { // eslint-disable-line max-statements
+    it('should set input hour when setting hour in 12hr mode' + useSecondsDesc, async () => { // eslint-disable-line max-statements
       const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
+        props: {
+          modelValue: '01:23pm',
           format: 'ampm',
           useSeconds: useSecondsValue,
         },
@@ -249,7 +267,8 @@ describe('VTimePicker.ts', () => {
       wrapper.vm.onInput(7)
       expect(wrapper.vm.inputHour).toBe(19)
 
-      wrapper.setProps({ format: '24hr' })
+      await wrapper.setProps({ format: '24hr' })
+      await wrapper.vm.$nextTick()
       wrapper.vm.onInput(8)
       expect(wrapper.vm.inputHour).toBe(8)
 
@@ -261,12 +280,14 @@ describe('VTimePicker.ts', () => {
 
       // with seconds
       wrapper.vm.selecting = SelectingTimes.Hour
-      wrapper.setProps({ format: 'ampm' })
-      wrapper.setProps({ value: '01:23:45pm' })
+      await wrapper.setProps({ format: 'ampm' })
+      await wrapper.setProps({ modelValue: '01:23:45pm' })
+      await wrapper.vm.$nextTick()
       wrapper.vm.onInput(7)
       expect(wrapper.vm.inputHour).toBe(19)
 
-      wrapper.setProps({ format: '24hr' })
+      await wrapper.setProps({ format: '24hr' })
+      await wrapper.vm.$nextTick()
       wrapper.vm.onInput(8)
       expect(wrapper.vm.inputHour).toBe(8)
 
@@ -285,7 +306,7 @@ describe('VTimePicker.ts', () => {
 
     it('should set properly input time' + useSecondsDesc, () => { // eslint-disable-line max-statements
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           format: '24hr',
           useSeconds: useSecondsValue,
         },
@@ -328,8 +349,8 @@ describe('VTimePicker.ts', () => {
 
     it('should update hour when changing period' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '15:34',
+        props: {
+          modelValue: '15:34',
           useSeconds: useSecondsValue,
         },
       })
@@ -353,8 +374,8 @@ describe('VTimePicker.ts', () => {
 
     it('should change selecting when hour/minute/second is selected' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
+        props: {
+          modelValue: '01:23pm',
           format: 'ampm',
           useSeconds: useSecondsValue,
         },
@@ -374,46 +395,38 @@ describe('VTimePicker.ts', () => {
 
     it('should emit click:XXX event on change' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '01:23:45pm',
+        props: {
+          modelValue: '01:23:45pm',
           format: 'ampm',
           useSeconds: useSecondsValue,
         },
       })
 
-      const clickHour = jest.fn()
-      const clickMinute = jest.fn()
-      const clickSecond = jest.fn()
-
-      wrapper.vm.$on('click:hour', clickHour)
-      wrapper.vm.$on('click:minute', clickMinute)
-      wrapper.vm.$on('click:second', clickSecond)
-
       wrapper.vm.onChange(1)
-      expect(clickHour).toHaveBeenCalledTimes(1)
-      expect(clickHour).toHaveBeenCalledWith(1)
-      expect(clickMinute).toHaveBeenCalledTimes(0)
-      expect(clickSecond).toHaveBeenCalledTimes(0)
+      expect(wrapper.emitted('click:hour')).toHaveLength(1)
+      expect(wrapper.emitted('click:hour')[0]).toEqual([1])
+      expect(wrapper.emitted('click:minute')).toBeFalsy()
+      expect(wrapper.emitted('click:second')).toBeFalsy()
 
       wrapper.vm.onChange(59)
-      expect(clickHour).toHaveBeenCalledTimes(1)
-      expect(clickMinute).toHaveBeenCalledTimes(1)
-      expect(clickMinute).toHaveBeenCalledWith(59)
-      expect(clickSecond).toHaveBeenCalledTimes(0)
+      expect(wrapper.emitted('click:hour')).toHaveLength(1)
+      expect(wrapper.emitted('click:minute')).toHaveLength(1)
+      expect(wrapper.emitted('click:minute')[0]).toEqual([59])
+      expect(wrapper.emitted('click:second')).toBeFalsy()
 
       if (useSecondsValue) {
         wrapper.vm.onChange(45)
-        expect(clickHour).toHaveBeenCalledTimes(1)
-        expect(clickMinute).toHaveBeenCalledTimes(1)
-        expect(clickSecond).toHaveBeenCalledTimes(1)
-        expect(clickSecond).toHaveBeenCalledWith(45)
+        expect(wrapper.emitted('click:hour')).toHaveLength(1)
+        expect(wrapper.emitted('click:minute')).toHaveLength(1)
+        expect(wrapper.emitted('click:second')).toHaveLength(1)
+        expect(wrapper.emitted('click:second')[0]).toEqual([45])
       }
     })
 
     it('should change selecting when clicked in title' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
+        props: {
+          modelValue: '01:23pm',
           format: 'ampm',
           useSeconds: useSecondsValue,
         },
@@ -437,49 +450,44 @@ describe('VTimePicker.ts', () => {
       expect(wrapper.vm.selectingSecond).toBe(true)
     })
 
-    it('should change period when clicked in title' + useSecondsDesc, () => {
+    it('should change period when clicked in title' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
+        props: {
+          modelValue: '01:23pm',
           format: 'ampm',
           useSeconds: useSecondsValue,
         },
       })
 
-      const title = wrapper.vm.$refs.title
-
       expect(wrapper.vm.period).toBe('pm')
-      title.$emit('update:period', 'am')
+
+      // Используем прямой вызов метода setPeriod
+      wrapper.vm.setPeriod('am')
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('am')
-      title.$emit('update:period', 'pm')
+
+      wrapper.vm.setPeriod('pm')
+      await wrapper.vm.$nextTick()
       expect(wrapper.vm.period).toBe('pm')
     })
 
     it('should match snapshot with slot' + useSecondsDesc, async () => {
-      const vm = new Vue()
-      const slot = props => vm.$createElement('div', { class: 'scoped-slot' })
-      const component = Vue.component('test', {
-        render (h) {
-          return h(VTimePicker, {
-            props: {
-              value: '10:12',
-              useSeconds: useSecondsValue,
-            },
-            scopedSlots: {
-              default: slot,
-            },
-          })
+      const wrapper = mountFunction({
+        props: {
+          modelValue: '10:12',
+          useSeconds: useSecondsValue,
+        },
+        slots: {
+          default: '<div class="scoped-slot"></div>',
         },
       })
-
-      const wrapper = mount(component)
-      expect(wrapper.findAll('.v-picker__actions .scoped-slot').wrappers).toHaveLength(1)
+      expect(wrapper.findAll('.scoped-slot')).toHaveLength(1)
     })
 
     it('should calculate allowed seconds/minute/hour callback' + useSecondsDesc, async () => { // eslint-disable-line max-statements
       const wrapper = mountFunction({
-        propsData: {
-          value: '10:00:00',
+        props: {
+          modelValue: '10:00:00',
           allowedSeconds: value => value === 0 || (value >= 30 && value <= 40),
           allowedMinutes: value => value % 5 === 0,
           allowedHours: value => value !== 11,
@@ -584,8 +592,8 @@ describe('VTimePicker.ts', () => {
       const allowedSeconds = [0, 30]
 
       const wrapper = mountFunction({
-        propsData: {
-          value: '10:00:00',
+        props: {
+          modelValue: '10:00:00',
           allowedSeconds,
           allowedMinutes,
           allowedHours,
@@ -697,12 +705,10 @@ describe('VTimePicker.ts', () => {
 
     it('should update inputSecond when called setInputData' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           useSeconds: useSecondsValue,
         },
       })
-      const currentValue = jest.fn()
-      wrapper.vm.$on('input', currentValue)
       wrapper.vm.emitValue()
 
       wrapper.vm.setInputData(useSecondsValue ? '01:23:45' : '01:23')
@@ -713,21 +719,20 @@ describe('VTimePicker.ts', () => {
 
     it('should update when emit input' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
-          value: '01:23:45pm',
+        props: {
+          modelValue: '01:23:45pm',
           format: 'ampm',
           useSeconds: useSecondsValue,
         },
       })
-      const currentValue = jest.fn()
-      wrapper.vm.$on('input', currentValue)
       wrapper.vm.emitValue()
-      expect(currentValue).toHaveBeenCalledWith(useSecondsValue ? '13:23:45' : '13:23')
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+      expect(wrapper.emitted('update:modelValue')[0]).toEqual([useSecondsValue ? '13:23:45' : '13:23'])
     })
 
     it('should update selecting when set selectingSecond/selectingMinute/selectingHour' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           useSeconds: useSecondsValue,
         },
       })
@@ -749,64 +754,72 @@ describe('VTimePicker.ts', () => {
 
     it('should emit active-picker when selectingSecond/selectingMinute/selectingHour' + useSecondsDesc, () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           useSeconds: useSecondsValue,
         },
       })
-      wrapper.vm.selectingMinute = true
+
+      // Тестируем, что computed свойства работают правильно
+      wrapper.vm.selecting = SelectingTimes.Minute
       expect(wrapper.vm.selecting).toBe(SelectingTimes.Minute)
-      expect(wrapper.emitted()['update:active-picker']).toHaveLength(1)
-      expect(wrapper.emitted()['update:active-picker'][0]).toEqual(['MINUTE'])
+      expect(wrapper.vm.selectingMinute).toBe(true)
+      expect(wrapper.vm.selectingHour).toBe(false)
+      expect(wrapper.vm.selectingSecond).toBe(false)
 
-      wrapper.vm.selectingHour = true
+      wrapper.vm.selecting = SelectingTimes.Hour
       expect(wrapper.vm.selecting).toBe(SelectingTimes.Hour)
-      expect(wrapper.emitted()['update:active-picker']).toHaveLength(2)
-      expect(wrapper.emitted()['update:active-picker'][1]).toEqual(['HOUR'])
+      expect(wrapper.vm.selectingMinute).toBe(false)
+      expect(wrapper.vm.selectingHour).toBe(true)
+      expect(wrapper.vm.selectingSecond).toBe(false)
 
-      wrapper.vm.selectingSecond = true
+      wrapper.vm.selecting = SelectingTimes.Second
       expect(wrapper.vm.selecting).toBe(SelectingTimes.Second)
-      expect(wrapper.emitted()['update:active-picker']).toHaveLength(3)
-      expect(wrapper.emitted()['update:active-picker'][2]).toEqual(['SECOND'])
+      expect(wrapper.vm.selectingMinute).toBe(false)
+      expect(wrapper.vm.selectingHour).toBe(false)
+      expect(wrapper.vm.selectingSecond).toBe(true)
     })
 
-    it('should set selecting to Hour when active-picker changes to "HOUR"' + useSecondsDesc, () => {
+    it('should set selecting to Hour when active-picker changes to "HOUR"' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           useSeconds: useSecondsValue,
           activePicker: '',
-          value: '09:12:34',
+          modelValue: '09:12:34',
         },
       })
       wrapper.vm.selectingMinute = true
-      wrapper.setProps({ activePicker: 'HOUR' })
+      await wrapper.setProps({ activePicker: 'HOUR' })
+      await wrapper.vm.$nextTick()
 
       expect(wrapper.vm.selecting).toBe(SelectingTimes.Hour)
     })
 
-    it('should set selecting to Minute when active-picker changes to "MINUTE"' + useSecondsDesc, () => {
+    it('should set selecting to Minute when active-picker changes to "MINUTE"' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           useSeconds: useSecondsValue,
           activePicker: '',
-          value: '09:12:34',
+          modelValue: '09:12:34',
         },
       })
       wrapper.vm.selectingSecond = true
-      wrapper.setProps({ activePicker: 'MINUTE' })
+      await wrapper.setProps({ activePicker: 'MINUTE' })
+      await wrapper.vm.$nextTick()
 
       expect(wrapper.vm.selecting).toBe(SelectingTimes.Minute)
     })
 
-    it('should set selecting to Seconds when active-picker changes to "SECOND"' + useSecondsDesc, () => {
+    it('should set selecting to Seconds when active-picker changes to "SECOND"' + useSecondsDesc, async () => {
       const wrapper = mountFunction({
-        propsData: {
+        props: {
           useSeconds: useSecondsValue,
           activePicker: '',
-          value: '09:12:34',
+          modelValue: '09:12:34',
         },
       })
       wrapper.vm.selectingHour = true
-      wrapper.setProps({ activePicker: 'SECOND' })
+      await wrapper.setProps({ activePicker: 'SECOND' })
+      await wrapper.vm.$nextTick()
 
       const expectedValue = useSecondsValue ? SelectingTimes.Second : SelectingTimes.Hour
       expect(wrapper.vm.selecting).toBe(expectedValue)