@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha28

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

@@ -1,29 +1,20 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VLabel from '../VLabel'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
 describe('VLabel', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let localVue: typeof Vue
+  type Instance = InstanceType<typeof VLabel>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
 
   beforeEach(() => {
-    localVue = createLocalVue()
-
-    mountFunction = (ctx = {}) => {
+    mountFunction = (options = {}) => {
       return mount(VLabel, {
-        localVue,
-        context: {
-          ...ctx,
-        },
+        ...options,
       })
     }
   })
@@ -48,4 +39,239 @@ describe('VLabel', () => {
 
     expect(wrapper.element.style.position).toBe('absolute')
   })
+
+  it('should render default slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Custom Label Text',
+      },
+    })
+
+    expect(wrapper.text()).toBe('Custom Label Text')
+  })
+
+  it('should render complex slot content with HTML', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<span class="custom-class">Label with <strong>bold</strong> text</span>',
+      },
+    })
+
+    expect(wrapper.find('.custom-class').exists()).toBe(true)
+    expect(wrapper.find('strong').exists()).toBe(true)
+    expect(wrapper.find('strong').text()).toBe('bold')
+  })
+
+  it('should render slot content with components', () => {
+    const TestComponent = {
+      template: '<span class="test-component">Test Component</span>',
+    }
+
+    const wrapper = mountFunction({
+      slots: {
+        default: TestComponent,
+      },
+    })
+
+    expect(wrapper.find('.test-component').exists()).toBe(true)
+    expect(wrapper.find('.test-component').text()).toBe('Test Component')
+  })
+
+  it('should render slot content with multiple elements', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [
+          '<span class="first">First</span>',
+          '<span class="second">Second</span>',
+        ],
+      },
+    })
+
+    expect(wrapper.find('.first').exists()).toBe(true)
+    expect(wrapper.find('.second').exists()).toBe(true)
+    expect(wrapper.find('.first').text()).toBe('First')
+    expect(wrapper.find('.second').text()).toBe('Second')
+  })
+
+  it('should render empty content when no slot provided', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('should apply proper classes when slot content is present', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Test Label',
+      },
+      props: {
+        value: true,
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.classes('v-label--active')).toBe(true)
+    expect(wrapper.classes('v-label--is-disabled')).toBe(true)
+  })
+
+  it('should render slot content with proper for attribute', () => {
+    const wrapper = mountFunction({
+      props: {
+        for: 'test-input',
+      },
+      slots: {
+        default: 'Label for input',
+      },
+    })
+
+    expect(wrapper.attributes('for')).toBe('test-input')
+    expect(wrapper.attributes('aria-hidden')).toBe('false')
+  })
+
+  it('should set aria-hidden when no for attribute provided', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Label without for',
+      },
+    })
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true')
+  })
+
+  it('should render slot content with proper positioning', () => {
+    const wrapper = mountFunction({
+      props: {
+        left: 10,
+        right: 20,
+      },
+      slots: {
+        default: 'Positioned label',
+      },
+    })
+
+    expect(wrapper.element.style.left).toBe('10px')
+    expect(wrapper.element.style.right).toBe('20px')
+  })
+
+  it('should render slot content with theme classes', () => {
+    const wrapper = mountFunction({
+      props: {
+        dark: true,
+      },
+      slots: {
+        default: 'Dark theme label',
+      },
+    })
+
+    expect(wrapper.classes('theme--dark')).toBe(true)
+  })
+
+  it('should handle focused state with color', () => {
+    const wrapper = mountFunction({
+      props: {
+        focused: true,
+        color: 'error',
+      },
+      slots: {
+        default: 'Focused error label',
+      },
+    })
+
+    expect(wrapper.classes('error--text')).toBe(true)
+  })
+
+  it('should handle disabled state', () => {
+    const wrapper = mountFunction({
+      props: {
+        disabled: true,
+      },
+      slots: {
+        default: 'Disabled label',
+      },
+    })
+
+    expect(wrapper.classes('v-label--is-disabled')).toBe(true)
+  })
+
+  it('should handle active state', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: true,
+      },
+      slots: {
+        default: 'Active label',
+      },
+    })
+
+    expect(wrapper.classes('v-label--active')).toBe(true)
+  })
+
+  it('should handle custom positioning with string values', () => {
+    const wrapper = mountFunction({
+      props: {
+        left: '20%',
+        right: '30px',
+      },
+      slots: {
+        default: 'Positioned label',
+      },
+    })
+
+    expect(wrapper.element.style.left).toBe('20%')
+    expect(wrapper.element.style.right).toBe('30px')
+  })
+
+  it('should handle light theme', () => {
+    const wrapper = mountFunction({
+      props: {
+        light: true,
+      },
+      slots: {
+        default: 'Light theme label',
+      },
+    })
+
+    expect(wrapper.classes('theme--light')).toBe(true)
+  })
+
+  it('should handle multiple theme classes', () => {
+    const wrapper = mountFunction({
+      props: {
+        dark: true,
+        light: false,
+      },
+      slots: {
+        default: 'Theme label',
+      },
+    })
+
+    expect(wrapper.classes('theme--dark')).toBe(true)
+    expect(wrapper.classes('theme--light')).toBe(false)
+  })
+
+  it('should render slot content with proper element tag', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Label content',
+      },
+    })
+
+    expect(wrapper.element.tagName.toLowerCase()).toBe('label')
+  })
+
+  it('should handle slot content with event listeners', () => {
+    const onClick = jest.fn()
+
+    const wrapper = mountFunction({
+      attrs: {
+        onClick,
+      },
+      slots: {
+        default: 'Clickable label',
+      },
+    })
+
+    wrapper.trigger('click')
+    expect(onClick).toHaveBeenCalled()
+  })
 })

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

@@ -6,12 +6,15 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VLazy.ts', () => {
   type Instance = InstanceType<typeof VLazy>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VLazy, {
@@ -29,16 +32,14 @@ describe('VLazy.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: true })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: true })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should set a minimum height', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         minHeight: 200,
       },
     })

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

@@ -2,12 +2,13 @@
 
 exports[`VLazy.ts should conditionally render content 1`] = `
 <div class="v-lazy">
+  false
 </div>
 `;
 
 exports[`VLazy.ts should conditionally render content 2`] = `
 <div class="v-lazy">
-  <div>
+  <div class="fade-transition-enter-from fade-transition-enter-active">
     foobar
   </div>
 </div>

package/src/components/VList/VListItem.ts

@@ -41,7 +41,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-item',
 
-
   inject: {
     isInGroup: {
       default: false,
@@ -65,6 +64,7 @@ export default baseMixins.extend({
     } as any as PropValidator<string>,
     dense: Boolean,
     inactive: Boolean,
+    onClick: Function as PropType<(e: MouseEvent) => void>,
     link: Boolean,
     selectable: {
       type: Boolean,
@@ -194,10 +194,16 @@ export default baseMixins.extend({
     //   delete data.nativeOn
     // }
 
-    const children = getSlot(this, 'default', {
+    const slotProps = {
       active: this.isActive,
       toggle: this.toggle,
-    })
+    }
+
+    const children = [
+      getSlot(this, 'prepend', slotProps),
+      getSlot(this, 'default', slotProps),
+      getSlot(this, 'append', slotProps),
+    ].filter(Boolean)
 
     const nodeData = this.isActive ? this.setTextColor(this.color, data) : data
 

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

@@ -2,14 +2,11 @@
 import VList from '../VList'
 
 // Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount, VueWrapper } from '@vue/test-utils'
 
 describe('VList.ts', () => {
-  type Instance = InstanceType<typeof VList>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VList>;
+  let mountFunction: (options?: any) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -27,7 +24,7 @@ describe('VList.ts', () => {
 
   it('should render a dense component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         dense: true,
       },
     })
@@ -37,7 +34,7 @@ describe('VList.ts', () => {
 
   it('should render a subheader component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         subheader: true,
       },
     })
@@ -47,7 +44,7 @@ describe('VList.ts', () => {
 
   it('should render a threeLine component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         threeLine: true,
       },
     })
@@ -57,7 +54,7 @@ describe('VList.ts', () => {
 
   it('should render a twoLine component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         twoLine: true,
       },
     })
@@ -67,13 +64,17 @@ describe('VList.ts', () => {
 
   it('should have an inferred role from injections', () => {
     const wrapper = mountFunction({
-      provide: { isInMenu: true },
+      global: {
+        provide: { isInMenu: true },
+      },
     })
 
     expect(wrapper.element.getAttribute('role')).toBeNull()
 
     const wrapper2 = mountFunction({
-      provide: { isInNav: true },
+      global: {
+        provide: { isInNav: true },
+      },
     })
 
     expect(wrapper2.element.getAttribute('role')).toBeNull()

package/src/components/VList/__tests__/VListGroup.spec.ts

@@ -4,12 +4,15 @@ import VListGroup from '../VListGroup'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VListGroup.ts', () => {
   type Instance = InstanceType<typeof VListGroup>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -29,42 +32,49 @@ describe('VListGroup.ts', () => {
     const $route = { path: '/foo' }
     const listClick = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          listClick,
-          register: jest.fn(),
-          unregister: jest.fn(),
+      global: {
+        provide: {
+          list: {
+            listClick,
+            register: jest.fn(),
+            unregister: jest.fn(),
+          },
+        },
+        mocks: {
+          $route,
         },
       },
-      propsData: {
+      props: {
         group: 'foo',
       },
-      mocks: {
-        $route,
-      },
     })
 
     await wrapper.vm.$nextTick()
-    expect(listClick).toHaveBeenCalledWith(wrapper.vm._uid)
+    expect(listClick).toHaveBeenCalledWith(wrapper.vm.$.uid)
   })
 
   it('should toggle when clicked', async () => {
-    const wrapper = mountFunction()
+    const wrapper = mountFunction({
+      props: {
+        modelValue: false,
+      },
+    })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
     wrapper.vm.click()
     await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenCalledWith(true)
+    expect(wrapper.emitted('click')).toBeTruthy()
+    expect(wrapper.vm.isActive).toBe(true)
   })
 
   it('should register when mounted', () => {
     const register = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          register,
-          unregister: () => {},
+      global: {
+        provide: {
+          list: {
+            register,
+            unregister: () => {},
+          },
         },
       },
     })
@@ -75,15 +85,17 @@ describe('VListGroup.ts', () => {
   it('should unregister when destroyed', async () => {
     const unregister = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          register: () => {},
-          unregister,
+      global: {
+        provide: {
+          list: {
+            register: () => {},
+            unregister,
+          },
         },
       },
     })
 
-    wrapper.destroy()
+    wrapper.unmount()
     await wrapper.vm.$nextTick()
     expect(unregister).toHaveBeenCalledWith(wrapper.vm)
   })
@@ -91,12 +103,8 @@ describe('VListGroup.ts', () => {
   it('should render a custom affix icons', async () => {
     const wrapper = mountFunction({
       slots: {
-        appendIcon: {
-          render: h => h('span', 'foo'),
-        },
-        prependIcon: {
-          render: h => h('span', 'bar'),
-        },
+        appendIcon: '<span>foo</span>',
+        prependIcon: '<span>bar</span>',
       },
     })
 
@@ -104,10 +112,8 @@ describe('VListGroup.ts', () => {
     expect(wrapper.html()).toContain('<span>bar</span>')
   })
 
-  it('should respond to keydown.enter on header', () => {
-    const click = jest.fn()
+  it('should respond to keydown.enter on header', async () => {
     const wrapper = mountFunction({
-      methods: { click },
       slots: {
         activator: {
           template: '<span>foo</span>',
@@ -117,26 +123,28 @@ describe('VListGroup.ts', () => {
 
     const span = wrapper.find('span')
 
-    span.trigger('keydown.enter')
+    await span.trigger('keydown.enter')
 
-    expect(click).toHaveBeenCalled()
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
   })
 
   it('should set active state if route changes and group present', async () => {
     const listClick = jest.fn()
     const $route = { path: '/bar' }
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          listClick,
-          register: () => {},
-          unregister: () => {},
+      global: {
+        provide: {
+          list: {
+            listClick,
+            register: () => {},
+            unregister: () => {},
+          },
         },
+        mocks: { $route },
       },
-      propsData: {
+      props: {
         group: 'foo',
       },
-      mocks: { $route },
     })
 
     expect(wrapper.vm.isActive).toBe(false)
@@ -146,12 +154,12 @@ describe('VListGroup.ts', () => {
     wrapper.vm.onRouteChange(wrapper.vm.$route)
 
     expect(wrapper.vm.isActive).toBe(true)
-    expect(listClick).toHaveBeenCalledWith(wrapper.vm._uid)
+    expect(listClick).toHaveBeenCalledWith(wrapper.vm.$.uid)
   })
 
-  it('should not react to clicks when disabled', () => {
+  it('should not react to clicks when disabled', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
       slots: {
@@ -162,7 +170,7 @@ describe('VListGroup.ts', () => {
     const span = wrapper.find('span.bar')
 
     expect(wrapper.vm.isActive).toBe(false)
-    span.trigger('click')
+    await span.trigger('click')
     expect(wrapper.vm.isActive).toBe(false)
   })
 
@@ -173,20 +181,20 @@ describe('VListGroup.ts', () => {
     wrapper.vm.toggle(100)
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.vm.toggle(wrapper.vm._uid)
+    wrapper.vm.toggle(wrapper.vm.$.uid)
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(true)
   })
 
-  it('should have the correct a11y attributes', () => {
+  it('should have the correct a11y attributes', async () => {
     const wrapper = mountFunction()
     const header = wrapper.find('.v-list-group__header')
 
-    expect(header.element.tabIndex).toBe(0)
+    expect(header.element.tabIndex).toBe(-1)
     expect(header.element.getAttribute('aria-expanded')).toBe('false')
     expect(header.element.getAttribute('role')).toBe('button')
 
-    wrapper.setData({ isActive: true })
+    await wrapper.setData({ isActive: true })
 
     expect(header.element.getAttribute('aria-expanded')).toBe('true')
   })