@dimailn/vuetify 2.7.2-alpha53 → 2.7.2-alpha55

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

@@ -0,0 +1,118 @@
+// Components
+import VSelect from '../VSelect'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  enableAutoUnmount
+} from '@vue/test-utils'
+import { h } from 'vue'
+
+const statusItems = [{ text: 'Новый', value: 'new' }]
+
+const baseProps = {
+  items: statusItems,
+  modelValue: 'new',
+  placeholder: 'Выберите статус',
+  label: ''
+}
+
+describe('VSelect placeholder при value', () => {
+  type Instance = InstanceType<typeof VSelect>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+  let el: HTMLDivElement
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      el = document.createElement('div')
+      el.setAttribute('data-app', 'true')
+      document.body.appendChild(el)
+
+      return mount(VSelect, {
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (val: string) => val
+              },
+              theme: {
+                dark: false
+              },
+              icons: {
+                component: 'mdi'
+              }
+            }
+          }
+        },
+        attachTo: el,
+        ...options
+      })
+    }
+  })
+
+  afterEach(() => {
+    if (el?.parentNode) {
+      document.body.removeChild(el)
+    }
+  })
+
+  enableAutoUnmount(afterEach)
+
+  function textInput (wrapper: VueWrapper<Instance>) {
+    return wrapper.find('input[type="text"]')
+  }
+
+  it('при value: isDirty и текст выбора корректны', () => {
+    const wrapper = mountFunction({ props: baseProps })
+
+    expect(wrapper.vm.isDirty).toBe(true)
+    expect(wrapper.find('.v-select__selection--comma').text()).toBe('Новый')
+  })
+
+  it('при value: на text-input нет атрибута placeholder', () => {
+    const wrapper = mountFunction({ props: baseProps })
+    const input = textInput(wrapper)
+
+    expect(input.exists()).toBe(true)
+    expect(input.attributes('placeholder')).toBeUndefined()
+  })
+
+  it('при пустом value: placeholder на text-input есть', () => {
+    const wrapper = mountFunction({
+      props: {
+        ...baseProps,
+        modelValue: null
+      }
+    })
+    const input = textInput(wrapper)
+
+    expect(wrapper.vm.isDirty).toBe(false)
+    expect(input.attributes('placeholder')).toBe('Выберите статус')
+  })
+
+  it('со слотом #selection при value: placeholder на input отсутствует', () => {
+    const wrapper = mountFunction({
+      props: baseProps,
+      slots: {
+        selection: ({ item }: { item: { text: string } }) => h('span', item.text)
+      }
+    })
+    const input = textInput(wrapper)
+
+    expect(wrapper.text()).toContain('Новый')
+    expect(input.attributes('placeholder')).toBeUndefined()
+  })
+
+  it('при persistentPlaceholder и value: placeholder на input отсутствует', () => {
+    const wrapper = mountFunction({
+      props: {
+        ...baseProps,
+        persistentPlaceholder: true
+      }
+    })
+    const input = textInput(wrapper)
+
+    expect(input.attributes('placeholder')).toBeUndefined()
+  })
+})

package/src/components/VTabs/__tests__/VTab.spec.ts

@@ -80,11 +80,9 @@ describe('VTab.ts', () => {
     // explicitly mock class added
     // by vue router
     if (wrapper.vm.$refs.link) {
-      (wrapper.vm.$refs.link as any)._vnode = {
-        data: {
-          class: { 'bar v-tab--active': true }
-        }
-      }
+      const linkRef = wrapper.vm.$refs.link as any
+      const linkEl = linkRef.$el || linkRef
+      linkEl.classList.add('bar', 'v-tab--active')
     }
     (wrapper.vm as any).$route.path = '/foo'
 

package/src/components/VTreeview/VTreeview.ts

@@ -1,5 +1,5 @@
 import type { PropType, VNode } from 'vue'
-import { h } from 'vue'
+import { h, markRaw } from 'vue'
 import type { VNodeChildrenArrayContents } from '../../types/vue-internal'
 // Styles
 import './VTreeview.sass'
@@ -320,7 +320,7 @@ export default mixins(
     register (node: VTreeviewNodeInstance) {
       const key = getObjectValueByPath(node.item, this.itemKey)
 
-      this.nodes[key].vnode = node
+      this.nodes[key].vnode = markRaw(node)
 
       this.updateVnodeState(key)
     },

package/src/mixins/routable/__tests__/routable.spec.ts

@@ -168,11 +168,8 @@ describe('routable.ts', () => {
 
     expect(toggle).not.toHaveBeenCalled()
 
-    ;(wrapper.vm.$refs.link as any)._vnode = {
-      data: {
-        class: { 'bar v-tab--active': true }
-      }
-    }
+    const linkEl = wrapper.vm.$refs.link as HTMLElement
+    linkEl.classList.add('bar', 'v-tab--active')
 
     wrapper.vm.onRouteChange()
     await nextTick()

package/src/mixins/routable/index.ts

@@ -6,7 +6,6 @@ import { defineComponent, resolveComponent } from 'vue'
 import Ripple, { RippleOptions } from '../../directives/ripple'
 
 // Utilities
-import { getObjectValueByPath } from '../../util/helpers'
 
 export default defineComponent({
   name: 'routable',
@@ -148,11 +147,13 @@ export default defineComponent({
       const activeClass = `${this.activeClass || ''} ${this.proxyClass || ''}`.trim()
       const exactActiveClass = `${this.exactActiveClass || ''} ${this.proxyClass || ''}`.trim() || activeClass
 
-      const path = '_vnode.data.class.' + (this.exact ? exactActiveClass : activeClass)
+      const activeClasses = (this.exact ? exactActiveClass : activeClass).split(' ')
 
       this.$nextTick(() => {
         /* istanbul ignore else */
-        const isLinkActive = Boolean(getObjectValueByPath(this.$refs.link, path))
+        const el = (this.$refs.link as any).$el || this.$refs.link
+        const isLinkActive = activeClasses.every(c => el?.classList?.contains(c))
+
         if (isLinkActive !== this.isActive) {
           this.toggle()
         }