@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VSelect/__tests__/VSelect2.spec.ts

@@ -1,3 +1,6 @@
+// Libraries
+import { defineComponent, h } from 'vue'
+
 // Components
 import VSelect from '../VSelect'
 
@@ -5,95 +8,103 @@ import VSelect from '../VSelect'
 import { keyCodes } from '../../../util/helpers'
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { waitAnimationFrame } from '../../../../test'
 
+const createMountFunction = () => (options = {}) => mount(VSelect, {
+  global: {
+    mocks: {
+      $vuetify: {
+        lang: { t: (val: string) => val },
+        theme: { dark: false },
+        icons: { component: 'mdi' }
+      }
+    }
+  },
+  ...options
+})
+
+// eslint-disable-next-line max-statements
 describe('VSelect.ts', () => {
   type Instance = InstanceType<typeof VSelect>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
   let el
 
   beforeEach(() => {
     el = document.createElement('div')
     el.setAttribute('data-app', 'true')
     document.body.appendChild(el)
-    mountFunction = (options = {}) => {
-      return mount(VSelect, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-            theme: {
-              dark: false,
-            },
-          },
-        },
-        ...options,
-      })
-    }
+    mountFunction = createMountFunction()
   })
 
   afterEach(() => {
     document.body.removeChild(el)
   })
 
-  it('should use slotted prepend-item', () => {
+  enableAutoUnmount(afterEach)
+
+  it('should use slotted prepend-item', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
-        items: ['foo'],
+        attach: false,
+        items: ['foo']
       },
       slots: {
-        'prepend-item': [{
-          render: h => h('div', 'foo'),
-        }],
-      },
+        'prepend-item': () => h('div', 'foo')
+      }
     })
 
-    const list = wrapper.find('.v-list')
+    // Активируем меню через клик на слот
+    const slot = wrapper.find('.v-input__slot')
+    slot.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    // Список рендерится в document.body через Teleport/Portal
+    const bodyList = document.querySelector('.v-list')
 
     expect(wrapper.vm.$slots['prepend-item']).toBeTruthy()
-    expect(list.html()).toMatchSnapshot()
+    expect(bodyList).toBeTruthy()
+    expect(bodyList.outerHTML).toMatchSnapshot()
   })
 
-  it('should use slotted append-item', () => {
+  it('should use slotted append-item', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
-        items: ['foo'],
+        items: ['foo']
       },
       slots: {
-        'append-item': [{
-          render: h => h('div', 'foo'),
-        }],
-      },
+        'append-item': () => h('div', 'foo')
+      }
     })
 
-    const list = wrapper.find('.v-list')
+    // Активируем меню через клик на слот
+    const slot = wrapper.find('.v-input__slot')
+    slot.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const bodyList = document.querySelector('.v-list')
 
     expect(wrapper.vm.$slots['append-item']).toBeTruthy()
-    expect(list.html()).toMatchSnapshot()
+    expect(bodyList).toBeTruthy()
+    expect(bodyList.outerHTML).toMatchSnapshot()
   })
 
   it('should use scoped slot for selection generation', () => {
     const wrapper = mountFunction({
-      render (h) {
+      render () {
         return h(VSelect, {
-          attrs: {
-            items: ['foo', 'bar'],
-            value: 'foo',
-          },
-          scopedSlots: {
-            selection: ({ item }) => {
-              return h('div', item + ' - from slot')
-            },
-          },
+          items: ['foo', 'bar'],
+          modelValue: 'foo'
+        }, {
+          selection: ({ item }) => {
+            return h('div', item + ' - from slot')
+          }
         })
-      },
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -101,12 +112,12 @@ describe('VSelect.ts', () => {
 
   it('should toggle menu on icon click', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo', 'bar'],
         'menu-props': {
-          offsetY: true,
-        },
-      },
+          offsetY: true
+        }
+      }
     })
 
     const icon = wrapper.find('.v-icon')
@@ -136,10 +147,10 @@ describe('VSelect.ts', () => {
   // https://github.com/vuejs/vue-test-utils/issues/1130
   it.skip('should calculate the counter value', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo'],
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
     expect(wrapper.vm.computedCounterValue).toBe(3)
@@ -147,8 +158,8 @@ describe('VSelect.ts', () => {
     wrapper.setProps({
       items: [{
         text: 'foobarbaz',
-        value: 'foo',
-      }],
+        value: 'foo'
+      }]
     })
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.computedCounterValue).toBe(9)
@@ -156,7 +167,7 @@ describe('VSelect.ts', () => {
     wrapper.setProps({
       items: ['foo', 'bar', 'baz'],
       multiple: true,
-      value: ['foo', 'bar'],
+      modelValue: ['foo', 'bar']
     })
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.computedCounterValue).toBe(2)
@@ -164,42 +175,39 @@ describe('VSelect.ts', () => {
 
   it('should return the correct counter value', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo', 'bar'],
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
     expect(wrapper.vm.computedCounterValue).toBe(3)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       multiple: true,
-      value: ['foo'],
+      modelValue: ['foo']
     })
 
     expect(wrapper.vm.computedCounterValue).toBe(1)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       counterValue: (value?: string): number => 2,
       multiple: false,
-      value: undefined,
+      modelValue: undefined
     })
 
     expect(wrapper.vm.computedCounterValue).toBe(2)
   })
 
-  it('should emit a single change event', async () => {
+  it('should emit a single update:modelValue event', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: el,
+      props: {
         attach: true,
-        items: ['foo', 'bar'],
-      },
+        items: ['foo', 'bar']
+      }
     })
 
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
-
     const menu = wrapper.find('.v-input__slot')
 
     menu.trigger('click')
@@ -211,26 +219,26 @@ describe('VSelect.ts', () => {
     wrapper.vm.blur()
     await wrapper.vm.$nextTick()
 
-    expect(change.mock.calls).toEqual([['foo']])
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    expect(emitted[0]).toEqual(['foo'])
   })
 
-  it('should not emit change event when clicked on the selected item', async () => {
+  it('should not emit update:modelValue event when clicked on the selected item', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-      },
+      props: {
+        items: ['foo', 'bar']
+      }
     })
 
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
-
     wrapper.vm.selectItem('foo')
     await wrapper.vm.$nextTick()
 
     wrapper.vm.selectItem('foo')
     await wrapper.vm.$nextTick()
 
-    expect(change.mock.calls).toHaveLength(1)
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toHaveLength(1)
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/13658
@@ -239,29 +247,31 @@ describe('VSelect.ts', () => {
     const itemA = { text: 'A', value: { foo: null } }
     const itemB = { text: 'B', value: { foo: '' } }
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [itemA, itemB],
-        value: { foo: null },
-      },
+        modelValue: { foo: null }
+      }
     })
-    wrapper.vm.$on('input', onInput)
+    // События теперь тестируются через emitted
 
     wrapper.vm.selectItem(itemA)
     await wrapper.vm.$nextTick()
-    expect(onInput).toHaveBeenCalledTimes(0)
+    let emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeFalsy()
 
     wrapper.vm.selectItem(itemB)
     await wrapper.vm.$nextTick()
-    expect(onInput).toHaveBeenCalledTimes(1)
+    emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toHaveLength(1)
   })
 
   // Inspired by https://github.com/vuetifyjs/vuetify/pull/1425 - Thanks @kevmo314
   it('should open the select when focused and enter, space are pressed', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        items: ['foo', 'bar'],
-      },
+      attachTo: el,
+      props: {
+        items: ['foo', 'bar']
+      }
     })
 
     const input = wrapper.find('input')
@@ -280,12 +290,12 @@ describe('VSelect.ts', () => {
 
   it('should not open the select when readonly and focused and enter, space, up or down are pressed', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: el,
+      props: {
         items: ['foo', 'bar'],
         readonly: true,
-        menuProps: 'eager',
-      },
+        menuProps: 'eager'
+      }
     })
 
     const input = wrapper.find('input')
@@ -303,19 +313,16 @@ describe('VSelect.ts', () => {
 
   it('should clear input value', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: el,
+      props: {
         clearable: true,
         items: ['foo', 'bar'],
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
     const clear = wrapper.find('.v-icon')
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalValue).toBe('foo')
     clear.trigger('click')
@@ -323,17 +330,19 @@ describe('VSelect.ts', () => {
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.internalValue).toBeNull()
-    expect(input).toHaveBeenCalledWith(null)
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    expect(emitted[0]).toEqual([null])
   })
 
   it('should be clearable with prop, dirty and single select', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: el,
+      props: {
         clearable: true,
         items: [1, 2],
-        value: 1,
-      },
+        modelValue: 1
+      }
     })
 
     const clear = wrapper.find('.v-icon')
@@ -350,26 +359,26 @@ describe('VSelect.ts', () => {
 
   it('should be clearable with prop, dirty and multi select', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: el,
+      props: {
         clearable: true,
         items: [1, 2],
         multiple: true,
-        value: [1],
-      },
+        modelValue: [1]
+      }
     })
 
     const clear = wrapper.find('.v-icon')
 
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
-
     await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
 
     clear.trigger('click')
     await wrapper.vm.$nextTick()
-    expect(change).toHaveBeenCalledWith([])
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    expect(emitted[0]).toEqual([[]])
     expect(wrapper.vm.isMenuActive).toBe(false)
   })
 
@@ -377,25 +386,25 @@ describe('VSelect.ts', () => {
     const items = ['foo', 'bar', 'baz']
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
-        value: 'foo',
-      },
+        modelValue: 'foo'
+      }
     })
 
     const wrapper2 = mountFunction({
-      propsData: {
+      props: {
         items,
         multiple: true,
-        value: ['foo', 'bar'],
-      },
+        modelValue: ['foo', 'bar']
+      }
     })
 
     const wrapper3 = mountFunction({
-      propsData: {
+      props: {
         items,
-        value: null,
-      },
+        modelValue: null
+      }
     })
 
     expect(wrapper.vm.selectedItems).toHaveLength(1)
@@ -406,15 +415,15 @@ describe('VSelect.ts', () => {
   // #1704
   it('should populate select when using value as an object', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: el,
+      props: {
         items: [
           { text: 'foo', value: { id: 1 } },
-          { text: 'foo', value: { id: 2 } },
+          { text: 'foo', value: { id: 2 } }
         ],
         multiple: true,
-        value: [{ id: 1 }],
-      },
+        modelValue: [{ id: 1 }]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -427,34 +436,43 @@ describe('VSelect.ts', () => {
   // Discovered when working on #1704
   it('should remove item when re-selecting it', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: el,
+      props: {
         eager: true,
         items: [
           { text: 'bar', value: { id: 1 } },
-          { text: 'foo', value: { id: 2 } },
+          { text: 'foo', value: { id: 2 } }
         ],
         multiple: true,
-        value: [{ id: 1 }],
-      },
+        modelValue: [{ id: 1 }]
+      }
     })
 
     expect(wrapper.vm.selectedItems).toHaveLength(1)
-    wrapper.trigger('click')
-    const item = wrapper.find('div.v-list-item__action')
-    item.trigger('click')
+
+    // Активируем меню через клик на слот
+    const slot = wrapper.find('.v-input__slot')
+    slot.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    // Элементы рендерятся в document.body через Teleport/Portal
+    // Для multiple select кликаем на первый элемент списка (который уже выбран)
+    const listItem = document.querySelector('.v-list-item')
+    expect(listItem).toBeTruthy()
+
+    listItem.click()
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.selectedItems).toHaveLength(0)
   })
 
   it('should open menu when cleared with open-on-clear', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         clearable: true,
         openOnClear: true,
         items: [1],
-        value: 1,
-      },
+        modelValue: 1
+      }
     })
 
     const clear = wrapper.find('.v-input__icon--clear .v-icon')
@@ -469,13 +487,10 @@ describe('VSelect.ts', () => {
   /* eslint-disable-next-line max-statements */
   it('should react to different key down', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        items: [1, 2, 3, 4],
-      },
+      props: {
+        items: [1, 2, 3, 4]
+      }
     })
-    const blur = jest.fn()
-    wrapper.vm.$on('blur', blur)
-
     const event = new Event('keydown')
     event.keyCode = keyCodes.tab
 
@@ -484,7 +499,8 @@ describe('VSelect.ts', () => {
 
     await waitAnimationFrame()
 
-    expect(blur).toHaveBeenCalled()
+    const emitted = wrapper.emitted('blur')
+    expect(emitted).toBeTruthy()
     expect(wrapper.vm.isMenuActive).toBe(false)
 
     // Enter and Space