@dimailn/vuetify 2.7.2-alpha31 → 2.7.2-alpha33

package/src/services/goto/__tests__/goto.spec.ts

@@ -1,5 +1,6 @@
 // Lib
-import { mount } from '@vue/test-utils'
+import { mount, enableAutoUnmount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
 
 // Components
 import VBtn from '../../../components/VBtn'
@@ -8,6 +9,9 @@ import VBtn from '../../../components/VBtn'
 import goTo, { Goto } from '../index'
 import { Application } from '../../application/index'
 
+// Utils
+import { getOffset, getContainer } from '../util'
+
 // Types
 import { VuetifyServiceContract } from 'vuetify/types/services'
 
@@ -15,6 +19,8 @@ describe('$vuetify.goTo', () => {
   (global as any).performance = require('perf_hooks').performance
   let framework: Record<string, VuetifyServiceContract> = {}
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     framework = {
       application: new Application(),
@@ -63,7 +69,146 @@ describe('$vuetify.goTo', () => {
     await expect(goTo(btn.vm, { duration: 0 })).resolves.not.toBeUndefined()
   })
 
+  it('should work with Vue 3 component wrapper from Vue Test Utils', async () => {
+    const TestComponent = defineComponent({
+      template: '<div>Test Component</div>',
+    })
+    const wrapper = mount(TestComponent)
+
+    await expect(goTo(wrapper.vm, { duration: 0 })).resolves.not.toBeUndefined()
+  })
+
+  it('should work with raw HTMLElement', async () => {
+    const element = document.createElement('div')
+    document.body.appendChild(element)
+
+    await expect(goTo(element, { duration: 0 })).resolves.not.toBeUndefined()
+
+    document.body.removeChild(element)
+  })
+
+  it('should work with CSS selector string', async () => {
+    const element = document.createElement('div')
+    element.id = 'test-goto-element'
+    document.body.appendChild(element)
+
+    await expect(goTo('#test-goto-element', { duration: 0 })).resolves.not.toBeUndefined()
+
+    document.body.removeChild(element)
+  })
+
+  it('should work with number offset', async () => {
+    await expect(goTo(100, { duration: 0 })).resolves.not.toBeUndefined()
+  })
+
+  it('should use VueComponent as container', async () => {
+    const TestComponent = defineComponent({
+      template: '<div style="height: 1000px; overflow: auto"><div style="height: 2000px;">Content</div></div>',
+    })
+    const wrapper = mount(TestComponent)
+
+    await expect(goTo(100, { container: wrapper.vm, duration: 0 })).resolves.not.toBeUndefined()
+  })
+
   it('should instantiate and return goto', () => {
     expect(new Goto()).toEqual(goTo)
   })
 })
+
+describe('goto utilities', () => {
+  let utilsFramework: Record<string, VuetifyServiceContract> = {}
+
+  beforeEach(() => {
+    utilsFramework = {
+      application: new Application(),
+    }
+    goTo.framework = utilsFramework
+  })
+
+  describe('getOffset', () => {
+    it('should return number when target is number', () => {
+      expect(getOffset(100)).toBe(100)
+    })
+
+    it('should return offset for HTMLElement', () => {
+      const element = document.createElement('div')
+      element.style.position = 'absolute'
+      element.style.top = '50px'
+      document.body.appendChild(element)
+
+      expect(getOffset(element)).toBeGreaterThanOrEqual(0)
+
+      document.body.removeChild(element)
+    })
+
+    it('should return offset for Vue 3 component', () => {
+      const TestComponent = defineComponent({
+        template: '<div>Test</div>',
+      })
+      const wrapper = mount(TestComponent)
+
+      expect(getOffset(wrapper.vm)).toBeGreaterThanOrEqual(0)
+    })
+
+    it('should return offset for CSS selector', () => {
+      const element = document.createElement('div')
+      element.id = 'test-offset-element'
+      document.body.appendChild(element)
+
+      expect(getOffset('#test-offset-element')).toBeGreaterThanOrEqual(0)
+
+      document.body.removeChild(element)
+    })
+
+    it('should throw error for invalid selector', () => {
+      expect(() => getOffset('#nonexistent-element'))
+        .toThrow('Target element "#nonexistent-element" not found.')
+    })
+
+    it('should throw error for invalid target type', () => {
+      expect(() => getOffset({ invalid: 'target' }))
+        .toThrow('Target must be a Number/Selector/HTMLElement/VueComponent')
+    })
+  })
+
+  describe('getContainer', () => {
+    it('should return HTMLElement for valid container', () => {
+      const element = document.createElement('div')
+      document.body.appendChild(element)
+
+      expect(getContainer(element)).toBe(element)
+
+      document.body.removeChild(element)
+    })
+
+    it('should return HTMLElement for Vue 3 component container', () => {
+      const TestComponent = defineComponent({
+        template: '<div>Test Container</div>',
+      })
+      const wrapper = mount(TestComponent)
+
+      const result = getContainer(wrapper.vm)
+      expect(result).toBeInstanceOf(HTMLElement)
+    })
+
+    it('should return HTMLElement for CSS selector container', () => {
+      const element = document.createElement('div')
+      element.id = 'test-container-element'
+      document.body.appendChild(element)
+
+      expect(getContainer('#test-container-element')).toBe(element)
+
+      document.body.removeChild(element)
+    })
+
+    it('should throw error for invalid container selector', () => {
+      expect(() => getContainer('#nonexistent-container'))
+        .toThrow('Container element "#nonexistent-container" not found.')
+    })
+
+    it('should throw error for invalid container type', () => {
+      expect(() => getContainer(42))
+        .toThrow('Container must be a Selector/HTMLElement/VueComponent')
+    })
+  })
+})

package/src/services/goto/util.ts

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 // Return target's cumulative offset from the top
 export function getOffset (target: any): number {
   if (typeof target === 'number') {
@@ -34,17 +32,58 @@ export function getContainer (container: any): HTMLElement {
 }
 
 function type (el: any) {
-  return el == null ? el : el.constructor.name
+  if (el == null) return el
+  // Vue 3 component detection
+  if (isVue3Component(el)) return 'VueComponent'
+  return el.constructor?.name || 'Unknown'
+}
+
+// Helper function to detect Vue 3 component instances
+function isVue3Component (el: any): boolean {
+  // Check for Vue 3 component instance properties
+  return !!(el && (
+    // Direct component instance with $el
+    el.$el ||
+    // Component instance with appContext (Vue 3 runtime)
+    el.appContext ||
+    // Component proxy with type property (from Vue Test Utils)
+    (el.type && (el.type.name || el.type.__name)) ||
+    // Component with setupState (Composition API)
+    el.setupState ||
+    // Component with ctx property (internal Vue 3)
+    (el.ctx && el.ctx.type)
+  ))
 }
 
 function $ (el: any): HTMLElement | null {
   if (typeof el === 'string') {
     return document.querySelector<HTMLElement>(el)
-  } else if (el && el._isVue) {
-    return (el as Vue).$el as HTMLElement
   } else if (el instanceof HTMLElement) {
     return el
+  } else if (isVue3Component(el)) {
+    return extractElementFromVue3Component(el)
   } else {
     return null
   }
 }
+
+// Helper function to extract HTMLElement from Vue 3 component
+function extractElementFromVue3Component (component: any): HTMLElement | null {
+  if (component.$el instanceof HTMLElement) {
+    return component.$el
+  }
+
+  if (component.element instanceof HTMLElement) {
+    return component.element
+  }
+
+  if (component.ctx?.vnode?.el instanceof HTMLElement) {
+    return component.ctx.vnode.el
+  }
+
+  if (component.vnode?.el instanceof HTMLElement) {
+    return component.vnode.el
+  }
+
+  return null
+}