@dimailn/vuetify 2.7.2-alpha28 → 2.7.2-alpha29

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

@@ -2,30 +2,27 @@
 import VAlert from '../VAlert'
 
 // Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount, enableAutoUnmount, VueWrapper, config } from '@vue/test-utils'
 
 // Types
 import { ExtractVue } from '../../../util/mixins'
 
 describe('VAlert.ts', () => {
-  type Instance = ExtractVue<typeof VAlert>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = ExtractVue<typeof VAlert>;
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
+      console.log('options', options)
       return mount(VAlert, {
         ...options,
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
+        global: {
+          mocks: {
+            ...config.global.mocks,
           },
+          ...options.global,
         },
       })
     }
@@ -37,16 +34,18 @@ describe('VAlert.ts', () => {
     expect(wrapper.element.style.display).toBe('')
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: false })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: false })
 
+    // Check that isActive is false
+    expect(wrapper.vm.isActive).toBe(false)
+    // Check that element is hidden
     expect(wrapper.element.style.display).toBe('none')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should have a close icon', () => {
     const wrapper = mountFunction({
-      propsData: { dismissible: true },
+      props: { dismissible: true },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -54,66 +53,61 @@ describe('VAlert.ts', () => {
 
   it('should be dismissible', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         dismissible: true,
       },
     })
 
     const icon = wrapper.find('.v-alert__dismissible')
-    const input = jest.fn(show => wrapper.setProps({ show }))
-
-    wrapper.vm.$on('input', input)
 
-    icon.trigger('click')
-    await wrapper.vm.$nextTick()
+    await icon.trigger('click')
 
-    expect(input).toHaveBeenCalledWith(false)
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should have a custom icon', () => {
     const wrapper = mountFunction({
-      propsData: {
-        icon: 'list',
+      props: {
+        icon: 'mdi-list',
       },
     })
 
     const icon = wrapper.find('.v-alert__icon')
 
-    expect(icon.text()).toBe('list')
+    expect(icon.exists()).toBe(true)
+    // С component: null иконки рендерятся как font-иконки с содержимым
+    expect(icon.classes()).toContain('v-icon')
+    expect(icon.classes()).toContain('v-alert__icon')
   })
 
   it('should have no icon', () => {
     const wrapper = mountFunction()
 
-    expect(wrapper.contains('.v-icon')).toBe(false)
+    expect(wrapper.find('.v-icon').exists()).toBe(false)
   })
 
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  it.skip('should display contextual colors by type', async () => {
+  it('should display contextual colors by type', async () => {
     const wrapper = mountFunction({
-      propsData: { type: 'error' },
+      props: { type: 'error' },
     })
 
     expect(wrapper.classes('error')).toBe(true)
 
-    wrapper.setProps({ type: 'success' })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ type: 'success' })
     expect(wrapper.classes('success')).toBe(true)
 
-    wrapper.setProps({ type: 'warning' })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ type: 'warning' })
     expect(wrapper.classes('warning')).toBe(true)
 
-    wrapper.setProps({ type: 'info' })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ type: 'info' })
     expect(wrapper.classes('info')).toBe(true)
   })
 
   it('should allow overriding color for contextual alert', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'error',
         color: 'primary',
       },
@@ -124,28 +118,33 @@ describe('VAlert.ts', () => {
 
   it('should allow overriding icon for contextual alert', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'error',
-        icon: 'block',
+        icon: 'mdi-block',
       },
     })
 
     const icon = wrapper.find('.v-alert__icon')
 
-    expect(icon.text()).toBe('block')
+    expect(icon.exists()).toBe(true)
+    // С component: null иконки рендерятся как font-иконки с содержимым
+    expect(icon.classes()).toContain('v-icon')
+    expect(icon.classes()).toContain('v-alert__icon')
   })
 
   it('should render custom dismissible icon', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         dismissible: true,
-        closeIcon: 'foo',
+        closeIcon: 'mdi-close',
       },
     })
 
-    const icon = wrapper.find('.v-alert__content + .v-btn')
+    const icon = wrapper.find('.v-alert__content + .v-btn .v-icon')
 
-    expect(icon.text()).toBe('foo')
+    expect(icon.exists()).toBe(true)
+    // С component: null иконки рендерятся как font-иконки с содержимым
+    expect(icon.classes()).toContain('v-icon')
   })
 
   it('should show border', async () => {
@@ -155,8 +154,7 @@ describe('VAlert.ts', () => {
     expect(wrapper.classes('v-alert--border')).toBe(false)
 
     for (const border of directions) {
-      wrapper.setProps({ border })
-      await wrapper.vm.$nextTick()
+      await wrapper.setProps({ border })
 
       expect(wrapper.classes('v-alert--border')).toBe(true)
       expect(wrapper.classes(`v-alert--border-${border}`)).toBe(true)
@@ -165,7 +163,7 @@ describe('VAlert.ts', () => {
 
   it('should move color classes to border and icon elements', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'pink',
         border: 'left',
       },
@@ -175,8 +173,7 @@ describe('VAlert.ts', () => {
     expect(wrapper.classes('pink')).toBe(true)
     expect(border.classes('pink')).toBe(false)
 
-    wrapper.setProps({ coloredBorder: true })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ coloredBorder: true })
     expect(wrapper.classes('pink')).toBe(false)
     expect(border.classes('pink')).toBe(true)
     expect(border.classes('v-alert__border--has-color')).toBe(true)
@@ -191,4 +188,35 @@ describe('VAlert.ts', () => {
 
     expect(wrapper.vm.isActive).toBe(false)
   })
+
+  it('should render font icons with proper classes', () => {
+    const wrapper = mountFunction({
+      props: {
+        type: 'error',
+        icon: 'mdi-alert',
+      },
+    })
+
+    const icon = wrapper.find('.v-alert__icon')
+
+    expect(icon.exists()).toBe(true)
+    // С component: null иконки рендерятся как font-иконки с CSS классами
+    // В JSDOM текстовое содержимое не отображается, но классы присутствуют
+    expect(icon.classes()).toContain('v-icon')
+    expect(icon.classes()).toContain('v-alert__icon')
+    expect(icon.classes()).toContain('mdi')
+    expect(icon.classes()).toContain('mdi-alert')
+  })
+
+  it('should translate aria-label correctly', () => {
+    const wrapper = mountFunction({
+      props: { dismissible: true },
+    })
+
+    const button = wrapper.find('.v-alert__dismissible')
+
+    expect(button.exists()).toBe(true)
+    // Проверяем что перевод $vuetify.close работает правильно
+    expect(button.element.getAttribute('aria-label')).toBe('Close')
+  })
 })

package/src/components/VAlert/__tests__/__snapshots__/VAlert.spec.ts.snap

@@ -1,22 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VAlert.ts should be dismissible 1`] = `
-<div role="alert"
-     class="v-alert v-sheet theme--light"
+<div class="v-alert v-sheet theme--light"
+     role="alert"
      style="display: none;"
 >
   <div class="v-alert__wrapper">
     <div class="v-alert__content">
     </div>
-    <button type="button"
-            class="v-alert__dismissible v-btn v-btn--icon v-btn--round theme--light v-size--small"
-            aria-label="$vuetify.close"
+    <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small v-alert__dismissible"
+            type="button"
+            aria-label="Close"
     >
       <span class="v-btn__content">
         <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+           class="v-icon notranslate mdi mdi-close-circle theme--light"
         >
-          $cancel
         </i>
       </span>
     </button>
@@ -25,8 +24,8 @@ exports[`VAlert.ts should be dismissible 1`] = `
 `;
 
 exports[`VAlert.ts should be open by default 1`] = `
-<div role="alert"
-     class="v-alert v-sheet theme--light"
+<div class="v-alert v-sheet theme--light"
+     role="alert"
 >
   <div class="v-alert__wrapper">
     <div class="v-alert__content">
@@ -36,8 +35,8 @@ exports[`VAlert.ts should be open by default 1`] = `
 `;
 
 exports[`VAlert.ts should be open by default 2`] = `
-<div role="alert"
-     class="v-alert v-sheet theme--light"
+<div class="v-alert v-sheet theme--light"
+     role="alert"
      style="display: none;"
 >
   <div class="v-alert__wrapper">
@@ -48,21 +47,20 @@ exports[`VAlert.ts should be open by default 2`] = `
 `;
 
 exports[`VAlert.ts should have a close icon 1`] = `
-<div role="alert"
-     class="v-alert v-sheet theme--light"
+<div class="v-alert v-sheet theme--light"
+     role="alert"
 >
   <div class="v-alert__wrapper">
     <div class="v-alert__content">
     </div>
-    <button type="button"
-            class="v-alert__dismissible v-btn v-btn--icon v-btn--round theme--light v-size--small"
-            aria-label="$vuetify.close"
+    <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small v-alert__dismissible"
+            type="button"
+            aria-label="Close"
     >
       <span class="v-btn__content">
         <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+           class="v-icon notranslate mdi mdi-close-circle theme--light"
         >
-          $cancel
         </i>
       </span>
     </button>

package/src/components/VAutocomplete/VAutocomplete.ts

@@ -29,6 +29,28 @@ export default defineComponent({
   name: 'v-autocomplete',
   extends: VSelect,
 
+  emits: [
+    'update:search-input',
+    'update:modelValue',
+    'change',
+    'focus',
+    'blur',
+    'keydown',
+    'click',
+    'update:list-index',
+    'mousedown',
+    'mouseup',
+    'touchstart',
+    'touchend',
+    'click:prepend',
+    'click:append',
+    'click:append-outer',
+    'click:prepend-inner',
+    'click:clear',
+    'input',
+    'update:error',
+  ],
+
   props: {
     autoSelectFirst: {
       type: Boolean,

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

@@ -4,13 +4,16 @@ import VAutocomplete from '../VAutocomplete'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 import { keyCodes } from '../../../util/helpers'
 
 describe('VAutocomplete.ts', () => {
   type Instance = InstanceType<typeof VAutocomplete>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     document.body.setAttribute('data-app', 'true')
@@ -18,15 +21,18 @@ describe('VAutocomplete.ts', () => {
     mountFunction = (options = {}) => {
       return mount(VAutocomplete, {
         ...options,
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-            theme: {
-              dark: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (val: string) => val,
+              },
+              theme: {
+                dark: false,
+              },
+              icons: {
+                component: null,
+              },
             },
           },
         },
@@ -46,28 +52,23 @@ describe('VAutocomplete.ts', () => {
   })
 
   it('should emit search input changes', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-      },
-    })
+    const wrapper = mountFunction()
 
     const input = wrapper.find('input')
     const element = input.element as HTMLInputElement
 
-    const update = jest.fn()
-    wrapper.vm.$on('update:search-input', update)
-
     element.value = 'test'
     input.trigger('input')
 
     await wrapper.vm.$nextTick()
 
-    expect(update).toHaveBeenCalledWith('test')
+    expect(wrapper.emitted('update:search-input')).toBeTruthy()
+    expect(wrapper.emitted('update:search-input')?.[0]).toEqual(['test'])
   })
 
   it('should filter autocomplete search results', async () => {
     const wrapper = mountFunction({
-      propsData: { items: ['foo', 'bar'] },
+      props: { items: ['foo', 'bar'] },
     })
 
     wrapper.setData({ internalSearch: 'foo' })
@@ -78,7 +79,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should filter numeric primitives', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [1, 2],
       },
     })
@@ -91,7 +92,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should activate when search changes and not active', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [1, 2, 3, 4],
         multiple: true,
       },
@@ -109,7 +110,7 @@ describe('VAutocomplete.ts', () => {
   // https://github.com/vuejs/vue-test-utils/issues/1130
   it.skip('should set searchValue to null when deactivated', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [1, 2, 3, 4],
         multiple: true,
       },
@@ -128,7 +129,7 @@ describe('VAutocomplete.ts', () => {
 
     wrapper.setProps({
       multiple: false,
-      value: 1,
+      modelValue: 1,
     })
 
     await wrapper.vm.$nextTick()
@@ -154,7 +155,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should not duplicate items after items update when caching is turned on', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         cacheItems: true,
         returnObject: true,
         itemText: 'text',
@@ -171,7 +172,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should cache items passed via prop', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         cacheItems: true,
         items: [1, 2, 3, 4],
       },
@@ -186,7 +187,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should not filter text with no items', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
         items: ['foo', 'bar'],
       },
@@ -206,9 +207,9 @@ describe('VAutocomplete.ts', () => {
 
   it('should not display menu when tab focused', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [1, 2],
-        value: 1,
+        modelValue: 1,
       },
     })
 
@@ -225,11 +226,11 @@ describe('VAutocomplete.ts', () => {
   // eslint-disable-next-line max-statements
   it.skip('should change selected index', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: document.body,
+      props: {
         items: ['foo', 'bar', 'fizz'],
         multiple: true,
-        value: ['foo', 'bar', 'fizz'],
+        modelValue: ['foo', 'bar', 'fizz'],
       },
     })
 
@@ -304,7 +305,7 @@ describe('VAutocomplete.ts', () => {
 
     expect(wrapper.vm.selectedIndex).toBe(-1)
 
-    wrapper.setProps({ value: ['foo', 'bar', 'fizz'] })
+    wrapper.setProps({ modelValue: ['foo', 'bar', 'fizz'] })
 
     await wrapper.vm.$nextTick()
 
@@ -313,7 +314,7 @@ describe('VAutocomplete.ts', () => {
     wrapper.vm.selectedIndex = 2
 
     // Simulating removing items when an index already selected
-    wrapper.setProps({ value: ['foo', 'bar'] })
+    wrapper.setProps({ modelValue: ['foo', 'bar'] })
 
     await wrapper.vm.$nextTick()
 
@@ -326,8 +327,8 @@ describe('VAutocomplete.ts', () => {
 
   it('should conditionally show the menu', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
+      attachTo: document.body,
+      props: {
         items: ['foo', 'bar', 'fizz'],
       },
     })
@@ -367,10 +368,10 @@ describe('VAutocomplete.ts', () => {
   // https://github.com/vuejs/vue-test-utils/issues/1130
   it.skip('should have the correct selected item', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['foo', 'bar', 'fizz'],
         multiple: true,
-        value: ['foo'],
+        modelValue: ['foo'],
       },
     })
 
@@ -378,7 +379,7 @@ describe('VAutocomplete.ts', () => {
 
     wrapper.setProps({
       multiple: false,
-      value: 'foo',
+      modelValue: 'foo',
     })
 
     expect(wrapper.vm.selectedItem).toBe('foo')
@@ -386,7 +387,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should reset lazySearch', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         chips: true,
         items: ['foo', 'bar', 'fizz'],
         searchInput: 'foo',
@@ -406,7 +407,7 @@ describe('VAutocomplete.ts', () => {
 
   it('should select input text on focus', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
+      attachTo: document.body,
     })
     const select = jest.fn()
     wrapper.vm.$refs.input.select = select
@@ -430,9 +431,9 @@ describe('VAutocomplete.ts', () => {
   it('should not respond to click', () => {
     const onFocus = jest.fn()
     const wrapper = mountFunction({
-      propsData: { disabled: true },
-      methods: { onFocus },
+      props: { disabled: true },
     })
+    wrapper.vm.onFocus = onFocus
     const slot = wrapper.find('.v-input__slot')
 
     slot.trigger('click')
@@ -457,14 +458,11 @@ describe('VAutocomplete.ts', () => {
     const changeSelectedIndex = jest.fn()
     const onEscDown = jest.fn()
     const onTabDown = jest.fn()
-    const wrapper = mountFunction({
-      methods: {
-        activateMenu,
-        changeSelectedIndex,
-        onEscDown,
-        onTabDown,
-      },
-    })
+    const wrapper = mountFunction()
+    wrapper.vm.activateMenu = activateMenu
+    wrapper.vm.changeSelectedIndex = changeSelectedIndex
+    wrapper.vm.onEscDown = onEscDown
+    wrapper.vm.onTabDown = onTabDown
 
     const input = wrapper.find('input')
     const element = input.element as HTMLInputElement
@@ -509,10 +507,10 @@ describe('VAutocomplete.ts', () => {
 
   it('should not delete item if readonly', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: ['a', 'b', 'c'],
         multiple: true,
-        value: ['a', 'b', 'c'],
+        modelValue: ['a', 'b', 'c'],
       },
     })
     wrapper.vm.changeSelectedIndex(keyCodes.right)