@dimailn/vuetify 2.7.2-alpha27 → 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/VApp/__tests__/VApp.spec.ts

@@ -4,12 +4,12 @@ import VApp from '../VApp'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
 describe('VApp.ts', () => {
   type Instance = InstanceType<typeof VApp>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -21,11 +21,13 @@ describe('VApp.ts', () => {
 
   it('should match a snapshot', () => {
     const wrapper = mountFunction({
-      mocks: {
-        $vuetify: {
-          rtl: false,
-          theme: {
-            dark: false,
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            theme: {
+              dark: false,
+            },
           },
         },
       },
@@ -36,11 +38,13 @@ describe('VApp.ts', () => {
 
   it('should have data-app attribute', () => {
     const wrapper = mountFunction({
-      mocks: {
-        $vuetify: {
-          rtl: false,
-          theme: {
-            dark: false,
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            theme: {
+              dark: false,
+            },
           },
         },
       },
@@ -52,14 +56,16 @@ describe('VApp.ts', () => {
 
   it('should allow a custom id', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         id: 'inspire',
       },
-      mocks: {
-        $vuetify: {
-          rtl: false,
-          theme: {
-            dark: false,
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            theme: {
+              dark: false,
+            },
           },
         },
       },

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VApp.ts should allow a custom id 1`] = `
-<div data-app="true"
-     class="v-application v-application--is-ltr theme--light"
+<div class="v-application v-application--is-ltr theme--light"
+     data-app="true"
      id="inspire"
 >
   <div class="v-application--wrap">
@@ -11,8 +11,8 @@ exports[`VApp.ts should allow a custom id 1`] = `
 `;
 
 exports[`VApp.ts should match a snapshot 1`] = `
-<div data-app="true"
-     class="v-application v-application--is-ltr theme--light"
+<div class="v-application v-application--is-ltr theme--light"
+     data-app="true"
      id="app"
 >
   <div class="v-application--wrap">