@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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

@@ -1,34 +1,41 @@
-// Libraries
-import Vue from 'vue'
-
-// Plugins
-import Router from 'vue-router'
-
+/* eslint-disable max-statements */
 // Components
 import VBtn from '../VBtn'
 
 // Utilities
-import {
-  createLocalVue,
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-// import { compileToFunctions } from 'vue-template-compiler'
-
-describe('VBtn.ts', () => { // eslint-disable-line max-statements
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let router: Router
-  let localVue: typeof Vue
+import { mount, enableAutoUnmount, VueWrapper } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { nextTick } from 'vue'
+import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
+
+// Auto cleanup after each test
+enableAutoUnmount(afterEach)
+
+describe('VBtn.ts', () => {
+  // eslint-disable-line max-statements
+  let mountFunction: (options?: object) => VueWrapper<any>
+  let router: any
 
   beforeEach(() => {
-    // router = new Router()
-    // localVue = createLocalVue()
-    // localVue.use(Router)
+    router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        { path: '/', component: { template: '<div>Home</div>' } },
+        { path: '/foobar', component: { template: '<div>Foobar</div>' } },
+        { path: '/fizzbuzz', component: { template: '<div>Fizzbuzz</div>' } },
+        { path: '/foo', component: { template: '<div>Foo</div>' } },
+      ],
+    })
 
     mountFunction = (options = {}) => {
       return mount(VBtn, {
-        // localVue,
-        // router,
+        global: {
+          plugins: [router],
+          components: {
+            'router-link': Vue3RouterLinkStub,
+          },
+          ...options.global,
+        },
         ...options,
       })
     }
@@ -39,248 +46,261 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
   })
 
   it('should render component with color prop and match snapshot', () => {
-    expect(mountFunction({
+    expect(
+      mountFunction({
+        props: {
+          color: 'green darken-1',
+        },
+      }).html()
+    ).toMatchSnapshot()
+
+    expect(
+      mountFunction({
+        props: {
+          color: 'green darken-1',
+          text: true,
+        },
+      }).html()
+    ).toMatchSnapshot()
+  })
+
+  it('should render component with loader slot and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        loading: true,
+      },
+      slots: {
+        loader: '<span>loader</span>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should register and unregister', async () => {
+    const register = jest.fn()
+    const unregister = jest.fn()
+
+    const wrapper = mountFunction({
+      global: {
+        provide: {
+          btnToggle: {
+            register,
+            unregister,
+          },
+        },
+      },
+    })
+
+    expect(register).toHaveBeenCalled()
+    wrapper.unmount()
+    await nextTick()
+    expect(unregister).toHaveBeenCalled()
+  })
+  it('should use custom active-class', () => {
+    const wrapper = mountFunction({
       props: {
-        color: 'green darken-1',
+        modelValue: true,
+        activeClass: 'foo',
       },
-    }).html()).toMatchSnapshot()
+    })
+
+    expect(wrapper.classes('foo')).toBe(true)
+  })
 
-    expect(mountFunction({
+  it('should have v-btn--plain class when plain prop is set to true', () => {
+    const wrapper = mountFunction({
       props: {
-        color: 'green darken-1',
-        text: true,
+        plain: true,
       },
-    }).html()).toMatchSnapshot()
+    })
+
+    expect(wrapper.classes('v-btn--plain')).toBe(true)
   })
 
-  it('should render component with loader slot and match snapshot', () => {
+  it('should have the correct icon classes', async () => {
     const wrapper = mountFunction({
       props: {
-        loading: true
+        icon: true,
       },
-      slots: {
-      loader: [{template: '<span>loader</span>' }],
+    })
+    expect(wrapper.classes('v-btn--icon')).toBe(true)
+
+    await wrapper.setProps({ icon: false })
+
+    expect(wrapper.classes('v-btn--icon')).toBe(false)
+  })
+
+  it('should have the correct elevation', async () => {
+    // eslint-disable-line max-statements
+    const wrapper = mountFunction()
+
+    await wrapper.setProps({ disabled: true })
+    expect(wrapper.classes('elevation-2')).toBe(false)
+    expect(wrapper.classes('v-btn--disabled')).toBe(true)
+
+    await wrapper.setProps({ disabled: false, elevation: 24 })
+    expect(wrapper.classes('elevation-24')).toBe(true)
+
+    await wrapper.setProps({ elevation: 2 })
+    expect(wrapper.classes('elevation-2')).toBe(true)
+  })
+
+  it('should stringify non string|number values', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 'foo',
+      },
+    })
+
+    expect(wrapper.attributes('value')).toBe('foo')
+
+    await wrapper.setProps({ value: 2 })
+    expect(wrapper.attributes('value')).toBe('2')
+
+    await wrapper.setProps({ value: { foo: 'bar' } })
+    expect(wrapper.attributes('value')).toBe('{"foo":"bar"}')
+  })
+
+  it('should not add color classes if disabled', async () => {
+    const wrapper = mountFunction({
+      props: {
+        color: 'primary darken-2',
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({
+      disabled: true,
+    })
+    expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with loader and match snapshot', () => {
+  it.skip('should retain focus when clicked', async () => {
+    const wrapper = mountFunction({
+      props: {
+        retainFocusOnClick: true,
+      },
+    })
+    const blur = jest.fn()
+
+    wrapper.element.blur = blur
+
+    // Create a click event with detail to trigger the blur logic
+    const clickEvent = new MouseEvent('click', { detail: 1 })
+    wrapper.element.dispatchEvent(clickEvent)
+    await wrapper.vm.$nextTick()
+
+    expect(blur).not.toHaveBeenCalled()
+
+    await wrapper.setProps({ retainFocusOnClick: false })
+    wrapper.element.dispatchEvent(clickEvent)
+    await wrapper.vm.$nextTick()
+
+    expect(blur).toHaveBeenCalled()
+  })
+
+  // Test attributes inheritance and merging
+  it('should handle attributes inheritance correctly', () => {
     const wrapper = mount(VBtn, {
+      global: {
+        plugins: [router],
+      },
+      attrs: {
+        'data-test': 'my-button',
+        'aria-label': 'Test button',
+        id: 'custom-id',
+        class: 'custom-class another-class',
+      },
+      props: {
+        color: 'primary',
+      },
+    })
+
+    // Check that component receives attrs
+    expect(wrapper.vm.$attrs['data-test']).toBe('my-button')
+    expect(wrapper.vm.$attrs['aria-label']).toBe('Test button')
+    expect(wrapper.vm.$attrs.id).toBe('custom-id')
+
+    // Check class merging
+    expect(wrapper.classes()).toContain('custom-class')
+    expect(wrapper.classes()).toContain('another-class')
+    expect(wrapper.classes()).toContain('v-btn')
+  })
+
+  it('should render loader when loading prop is true', () => {
+    const wrapper = mountFunction({
       props: {
         loading: true,
       },
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.classes('v-btn--loading')).toBe(true)
+    expect(wrapper.find('.v-btn__loader').exists()).toBe(true)
+  })
+  it('should compute button states and classes correctly', () => {
+    // Test multiple button variants and their classes
+    const variants = [
+      { props: {}, classes: ['v-btn'], hasBg: true, isElevated: true, isRound: false },
+      { props: { text: true }, classes: ['v-btn--text'], hasBg: false, isElevated: false, isRound: false },
+      { props: { plain: true }, classes: ['v-btn--plain'], hasBg: false, isElevated: false, isRound: false },
+      { props: { outlined: true }, classes: ['v-btn--outlined'], hasBg: false, isElevated: false, isRound: false },
+      { props: { icon: true }, classes: ['v-btn--icon'], hasBg: false, isElevated: false, isRound: true },
+      { props: { fab: true }, classes: ['v-btn--fab'], hasBg: true, isElevated: true, isRound: true },
+      { props: { block: true }, classes: ['v-btn--block'], hasBg: true, isElevated: true, isRound: false },
+      { props: { rounded: true }, classes: ['v-btn--rounded'], hasBg: true, isElevated: true, isRound: false },
+      { props: { disabled: true }, classes: ['v-btn--disabled'], hasBg: true, isElevated: false, isRound: false },
+    ]
+
+    variants.forEach(({ props, classes, hasBg, isElevated, isRound }) => {
+      const wrapper = mountFunction({ props })
+
+      // Check classes
+      classes.forEach(className => {
+        expect(wrapper.classes(className)).toBe(true)
+      })
+
+      // Check computed properties
+      expect(wrapper.vm.hasBg).toBe(hasBg)
+      expect(wrapper.vm.isElevated).toBe(isElevated)
+      expect(wrapper.vm.isRound).toBe(isRound)
+    })
+  })
+
+  it('should compute ripple correctly', () => {
+    // Should have ripple by default
+    let wrapper = mountFunction()
+    expect(wrapper.vm.computedRipple).toBe(true)
+
+    // Should not have ripple when disabled
+    wrapper = mountFunction({
+      props: { disabled: true },
+    })
+    expect(wrapper.vm.computedRipple).toBe(false)
+
+    // Should have circle ripple for icon buttons
+    wrapper = mountFunction({
+      props: { icon: true },
+    })
+    expect(wrapper.vm.computedRipple).toEqual({ circle: true })
+
+    // Should have circle ripple for fab buttons
+    wrapper = mountFunction({
+      props: { fab: true },
+    })
+    expect(wrapper.vm.computedRipple).toEqual({ circle: true })
   })
+  it('should add router class when to prop is provided', () => {
+    const wrapper = mountFunction({
+      props: {
+        to: '/test-route',
+      },
+      slots: {
+        default: () => 'Router Button',
+      },
+    })
 
-  // it('should render tile button and match snapshot', () => {
-  //   const wrapper = mount(VBtn, {
-  //     propsData: {
-  //       tile: true,
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should render an <a> tag when using href prop', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       href: 'http://www.google.com',
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should render specified tag when using tag prop', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       tag: 'a',
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should register and unregister', () => {
-  //   const register = jest.fn()
-  //   const unregister = jest.fn()
-
-  //   const wrapper = mountFunction({
-  //     provide: {
-  //       btnToggle: {
-  //         register,
-  //         unregister,
-  //       },
-  //     },
-  //   })
-
-  //   expect(register).toHaveBeenCalled()
-  //   wrapper.destroy()
-  //   expect(unregister).toHaveBeenCalled()
-  // })
-
-  // it('should emit a click event', async () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       href: '#!',
-  //     },
-  //   })
-
-  //   const click = jest.fn()
-  //   wrapper.vm.$on('click', click)
-  //   wrapper.trigger('click')
-
-  //   wrapper.setProps({ href: undefined, to: '/foo' })
-  //   wrapper.trigger('click')
-
-  //   expect(click.mock.calls).toHaveLength(2)
-  // })
-
-  // it('should use custom active-class', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       inputValue: true,
-  //       activeClass: 'foo',
-  //     },
-  //   })
-
-  //   expect(wrapper.classes('foo')).toBe(true)
-  // })
-
-  // it('should have v-btn--plain class when plain prop is set to true', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       plain: true,
-  //     },
-  //   })
-
-  //   expect(wrapper.classes('v-btn--plain')).toBe(true)
-  // })
-
-  // it('should have the correct icon classes', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       icon: true,
-  //     },
-  //   })
-  //   expect(wrapper.classes('v-btn--icon')).toBe(true)
-
-  //   wrapper.setProps({ icon: false })
-
-  //   expect(wrapper.classes('v-btn--icon')).toBe(false)
-  // })
-
-  // it('should have the correct elevation', async () => { // eslint-disable-line max-statements
-  //   const wrapper = mountFunction()
-
-  //   wrapper.setProps({ disabled: true })
-  //   expect(wrapper.classes('elevation-2')).toBe(false)
-  //   expect(wrapper.classes('v-btn--disabled')).toBe(true)
-
-  //   wrapper.setProps({ disabled: false, elevation: 24 })
-  //   expect(wrapper.classes('elevation-24')).toBe(true)
-
-  //   wrapper.setProps({ elevation: 2 })
-  //   expect(wrapper.classes('elevation-2')).toBe(true)
-  // })
-
-  // it('should toggle on route change if provided a to prop', async () => {
-  //   const toggle = jest.fn()
-  //   const register = jest.fn()
-  //   const unregister = jest.fn()
-  //   const wrapper = mountFunction({
-  //     provide: {
-  //       btnToggle: {
-  //         activeClass: 'foobar',
-  //         register,
-  //         unregister,
-  //       },
-  //     },
-  //     methods: { toggle },
-  //     ref: 'link',
-  //   })
-
-  //   router.push('/foobar')
-
-  //   await wrapper.vm.$nextTick()
-  //   expect(toggle).not.toHaveBeenCalled()
-
-  //   wrapper.setProps({ to: 'fizzbuzz' })
-
-  //   router.push('/fizzbuzz')
-
-  //   await wrapper.vm.$nextTick()
-  //   expect(toggle).toHaveBeenCalled()
-  // })
-
-  // it('should call toggle when used in button group', () => {
-  //   const register = jest.fn()
-  //   const unregister = jest.fn()
-  //   const toggle = jest.fn()
-  //   const wrapper = mountFunction({
-  //     provide: {
-  //       btnToggle: { register, unregister },
-  //     },
-  //     methods: { toggle },
-  //   })
-
-  //   wrapper.trigger('click')
-  //   expect(toggle).toHaveBeenCalled()
-  // })
-
-  // it('should stringify non string|number values', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       value: 'foo',
-  //     },
-  //   })
-
-  //   expect(wrapper.attributes('value')).toBe('foo')
-
-  //   wrapper.setProps({ value: 2 })
-  //   expect(wrapper.attributes('value')).toBe('2')
-
-  //   wrapper.setProps({ value: { foo: 'bar' } })
-  //   expect(wrapper.attributes('value')).toBe('{"foo":"bar"}')
-  // })
-
-  // it('should not add color classes if disabled', () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       color: 'primary darken-2',
-  //     },
-  //   })
-
-  //   expect(wrapper.html()).toMatchSnapshot()
-
-  //   wrapper.setProps({
-  //     disabled: true,
-  //   })
-  //   expect(wrapper.html()).toMatchSnapshot()
-  // })
-
-  // it('should retain focus when clicked', async () => {
-  //   const wrapper = mountFunction({
-  //     propsData: {
-  //       retainFocusOnClick: true,
-  //     },
-  //   })
-  //   const event = new MouseEvent('click', { detail: 1 })
-  //   const blur = jest.fn()
-
-  //   wrapper.element.blur = blur
-  //   wrapper.element.dispatchEvent(event)
-
-  //   expect(blur).not.toHaveBeenCalled()
-
-  //   wrapper.setProps({ retainFocusOnClick: false })
-  //   wrapper.element.dispatchEvent(event)
-
-  //   expect(blur).toHaveBeenCalled()
-  // })
+    expect(wrapper.classes('v-btn--router')).toBe(true)
+  })
 })

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VBtn.ts should not add color classes if disabled 1`] = `
-<button type="button"
-        class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default primary darken-2"
+<button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default primary darken-2"
+        type="button"
 >
   <span class="v-btn__content">
   </span>
@@ -10,27 +10,18 @@ exports[`VBtn.ts should not add color classes if disabled 1`] = `
 `;
 
 exports[`VBtn.ts should not add color classes if disabled 2`] = `
-<button type="button"
-        class="v-btn v-btn--disabled v-btn--has-bg theme--light v-size--default"
-        disabled="disabled"
+<button class="v-btn v-btn--disabled v-btn--has-bg theme--light v-size--default"
+        type="button"
+        disabled
 >
   <span class="v-btn__content">
   </span>
 </button>
 `;
 
-exports[`VBtn.ts should render an <a> tag when using href prop 1`] = `
-<a href="http://www.google.com"
-   class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
->
-  <span class="v-btn__content">
-  </span>
-</a>
-`;
-
 exports[`VBtn.ts should render component and match snapshot 1`] = `
-<button type="button"
-        class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+<button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+        type="button"
 >
   <span class="v-btn__content">
   </span>
@@ -38,8 +29,8 @@ exports[`VBtn.ts should render component and match snapshot 1`] = `
 `;
 
 exports[`VBtn.ts should render component with color prop and match snapshot 1`] = `
-<button type="button"
-        class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default green darken-1"
+<button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default green darken-1"
+        type="button"
 >
   <span class="v-btn__content">
   </span>
@@ -47,52 +38,17 @@ exports[`VBtn.ts should render component with color prop and match snapshot 1`]
 `;
 
 exports[`VBtn.ts should render component with color prop and match snapshot 2`] = `
-<button type="button"
-        class="v-btn v-btn--text theme--light v-size--default green--text text--darken-1"
+<button class="v-btn v-btn--text theme--light v-size--default green--text text--darken-1"
+        type="button"
 >
   <span class="v-btn__content">
   </span>
 </button>
 `;
 
-exports[`VBtn.ts should render component with loader and match snapshot 1`] = `
-<button type="button"
-        class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
->
-  <span class="v-btn__content">
-  </span>
-  <span class="v-btn__loader">
-    <div role="progressbar"
-         aria-valuemin="0"
-         aria-valuemax="100"
-         class="v-progress-circular v-progress-circular--indeterminate"
-         style="height: 23px; width: 23px;"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg"
-           viewbox="21.904761904761905 21.904761904761905 43.80952380952381 43.80952380952381"
-           style="transform: rotate(0deg);"
-      >
-        <circle fill="transparent"
-                cx="43.80952380952381"
-                cy="43.80952380952381"
-                r="20"
-                stroke-width="3.8095238095238093"
-                stroke-dasharray="125.664"
-                stroke-dashoffset="125.66370614359172px"
-                class="v-progress-circular__overlay"
-        >
-        </circle>
-      </svg>
-      <div class="v-progress-circular__info">
-      </div>
-    </div>
-  </span>
-</button>
-`;
-
 exports[`VBtn.ts should render component with loader slot and match snapshot 1`] = `
-<button type="button"
-        class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
+<button class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
+        type="button"
 >
   <span class="v-btn__content">
   </span>
@@ -103,19 +59,3 @@ exports[`VBtn.ts should render component with loader slot and match snapshot 1`]
   </span>
 </button>
 `;
-
-exports[`VBtn.ts should render specified tag when using tag prop 1`] = `
-<a class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default">
-  <span class="v-btn__content">
-  </span>
-</a>
-`;
-
-exports[`VBtn.ts should render tile button and match snapshot 1`] = `
-<button type="button"
-        class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--tile theme--light v-size--default"
->
-  <span class="v-btn__content">
-  </span>
-</button>
-`;