@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

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

@@ -3,18 +3,22 @@ import VBreadcrumbs from '../VBreadcrumbs'
 import VBreadcrumbsItem from '../VBreadcrumbsItem'
 
 // Utilities
-import { compileToFunctions } from 'vue-template-compiler'
+import { h } from 'vue'
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VBreadcrumbs.ts', () => {
   type Instance = InstanceType<typeof VBreadcrumbs>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options = {}) => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
       return mount(VBreadcrumbs, {
         ...options,
       })
@@ -30,7 +34,7 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should render items without slot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
           { text: 'b' },
@@ -45,7 +49,7 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should not complain about identical keys', () => {
     mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
           { text: 'a' },
@@ -58,7 +62,7 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should use slot to render items if present', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
           { text: 'b' },
@@ -66,7 +70,7 @@ describe('VBreadcrumbs.ts', () => {
           { text: 'd' },
         ],
       },
-      scopedSlots: {
+      slots: {
         item (props) {
           return h(VBreadcrumbsItem, {
             key: props.item.text,
@@ -80,7 +84,7 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should use a custom divider slot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
           { text: 'b' },
@@ -89,10 +93,121 @@ describe('VBreadcrumbs.ts', () => {
         ],
       },
       slots: {
-        divider: '/divider/',
+        divider: () => '/divider/',
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should pass HTML attributes from item to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'Home', 'data-testid': 'home-link', 'aria-label': 'Go to home' },
+          { text: 'About', 'data-testid': 'about-link', 'aria-label': 'Go to about' },
+        ],
+      },
+    })
+
+    const homeItem = wrapper.find('[data-testid="home-link"]')
+    const aboutItem = wrapper.find('[data-testid="about-link"]')
+
+    expect(homeItem.exists()).toBe(true)
+    expect(homeItem.attributes('aria-label')).toBe('Go to home')
+    expect(aboutItem.exists()).toBe(true)
+    expect(aboutItem.attributes('aria-label')).toBe('Go to about')
+  })
+
+  it('should pass routable props from item to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'Home', to: '/home', disabled: true, ripple: false },
+          { text: 'About', href: '/about', activeClass: 'custom-active' },
+        ],
+      },
+      global: {
+        mocks: {
+          $route: { path: '/' },
+        },
+        stubs: {
+          'router-link': true,
+        },
+      },
+    })
+
+    const homeItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+    const aboutItem = wrapper.findAllComponents({ name: 'v-breadcrumbs-item' })[1]
+
+    expect(homeItem.props('to')).toBe('/home')
+    expect(homeItem.props('disabled')).toBe(true)
+    expect(homeItem.props('ripple')).toBe(false)
+    expect(aboutItem.props('href')).toBe('/about')
+    expect(aboutItem.props('activeClass')).toBe('custom-active')
+  })
+
+  it('should handle mixed props and attributes correctly', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          {
+            text: 'Dashboard',
+            to: '/dashboard',
+            'data-testid': 'dashboard-link',
+            'aria-current': 'page',
+            class: 'custom-class',
+            style: 'color: red;'
+          },
+        ],
+      },
+      global: {
+        mocks: {
+          $route: { path: '/' },
+        },
+        stubs: {
+          'router-link': true,
+        },
+      },
+    })
+
+    const dashboardItem = wrapper.find('[data-testid="dashboard-link"]')
+
+    expect(dashboardItem.exists()).toBe(true)
+    expect(dashboardItem.attributes('aria-current')).toBe('page')
+    expect(dashboardItem.classes()).toContain('custom-class')
+    expect(dashboardItem.attributes('style')).toBe('color: red;')
+
+    // Проверяем, что routable пропс тоже передался
+    const breadcrumbItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+    expect(breadcrumbItem.props('to')).toBe('/dashboard')
+  })
+
+  it('should not pass invalid props to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          {
+            text: 'Home',
+            invalidProp: 'should-not-be-passed',
+            someRandomValue: 123,
+            'data-valid': 'this-should-be-passed'
+          },
+        ],
+      },
+    })
+
+    const breadcrumbItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+
+    // Проверяем, что валидные пропсы передались
+    expect(breadcrumbItem.props('text')).toBe('Home')
+
+    // Проверяем, что HTML атрибуты передались
+    const homeItem = wrapper.find('[data-valid="this-should-be-passed"]')
+    expect(homeItem.exists()).toBe(true)
+
+    // Проверяем, что невалидные пропсы не передались
+    expect(breadcrumbItem.props('invalidProp')).toBeUndefined()
+    expect(breadcrumbItem.props('someRandomValue')).toBeUndefined()
+  })
 })

package/src/components/VBreadcrumbs/__tests__/VBreadcrumbsItem.spec.ts

@@ -4,15 +4,19 @@ import VBreadcrumbsItem from '../VBreadcrumbsItem'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VBreadcrumbsItem.ts', () => {
   type Instance = InstanceType<typeof VBreadcrumbsItem>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options = {}) => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
       return mount(VBreadcrumbsItem, {
         ...options,
       })
@@ -25,13 +29,13 @@ describe('VBreadcrumbsItem.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with active & link state and match snapshot', () => {
+  it('should render component with active & link state and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         link: true,
       },
     })
-    wrapper.setData({
+    await wrapper.setData({
       isActive: true,
     })
 

package/src/components/VBtn/VBtn.ts

@@ -19,13 +19,11 @@ import Sizeable from '../../mixins/sizeable'
 import mixins, { ExtractVue } from '../../util/mixins'
 import { breaking } from '../../util/console'
 import { getSlot } from '../../util/helpers'
-import mergeData from '../../util/mergeData'
 
 // Types
-import { VNode, withDirectives } from 'vue'
+import { VNode, withDirectives, h } from 'vue'
 import { PropValidator, PropType } from 'vue/types/options'
 import { RippleOptions } from '../../directives/ripple'
-import {h} from 'vue'
 
 const baseMixins = mixins(
   VSheet,
@@ -33,7 +31,7 @@ const baseMixins = mixins(
   Positionable,
   Sizeable,
   GroupableFactory('btnToggle'),
-  ToggleableFactory('inputValue')
+  ToggleableFactory()
   /* @vue/component */
 )
 interface options extends ExtractVue<typeof baseMixins> {
@@ -42,7 +40,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 
 export default baseMixins.extend({
   name: 'v-btn',
-  inheritAttrs: false,
   props: {
     activeClass: {
       type: String,
@@ -69,6 +66,8 @@ export default baseMixins.extend({
     value: null as any as PropType<any>,
   },
 
+  emits: ['click', 'change', 'update:modelValue'],
+
   data: () => ({
     proxyClass: 'v-btn--active',
   }),
@@ -107,7 +106,7 @@ export default baseMixins.extend({
     computedElevation (): string | number | undefined {
       if (this.disabled) return undefined
 
-      return Elevatable.computed.computedElevation.call(this)
+      return this.elevation
     },
     computedRipple (): RippleOptions | boolean {
       const defaultRipple = this.icon || this.fab ? { circle: true } : true
@@ -161,7 +160,6 @@ export default baseMixins.extend({
       this.$emit('click', e)
       this.$emitLegacy('click', e)
 
-
       this.btnToggle && this.toggle()
     },
     genContent (): VNode {
@@ -175,7 +173,7 @@ export default baseMixins.extend({
       }, getSlot(this, 'loader') || [h(VProgressCircular, {
         indeterminate: true,
         size: 23,
-        width: 2
+        width: 2,
       })])
     },
   },
@@ -190,25 +188,35 @@ export default baseMixins.extend({
       ? this.setBackgroundColor
       : this.setTextColor
 
-    let data = {}
+    // Merge component classes with routable classes
+    const mergedClasses = {
+      ...this.classes,
+      ...linkData.class,
+    }
 
     if (tag === 'button') {
-      data.type = this.type
-      data.disabled = this.disabled
+      linkData.type = this.type
+      linkData.disabled = this.disabled
     }
-    data.value = ['string', 'number'].includes(typeof this.value)
+    linkData.value = ['string', 'number'].includes(typeof this.value)
       ? this.value
       : JSON.stringify(this.value)
 
-    data = {
-      ...data,
-      ...linkData
+    const data = {
+      ...linkData,
+      class: mergedClasses,
+      style: this.styles,
     }
 
-    data = mergeData(data, { class: this.$attrs.class })
+    // Apply color styling but preserve Vue's automatic attribute inheritance
+    const finalData = this.disabled ? data : setColor(this.color, data)
+
+    const vnode = typeof tag === 'string'
+      ? h(tag, finalData, children)
+      : h(tag, finalData, () => children)
 
     return withDirectives(
-      h(tag, this.disabled ? data : setColor(this.color, data), children),
+      vnode,
       directives
     )
   },