fix: update attachTo type to support SVGElement (vuejs#2375)

Fixes vuejs#2194
nazarepiedady · Jul 18, 2024 · 92a32bc · 92a32bc
1 parent bf00c4c
commit 92a32bc
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/docs/api/index.md b/docs/api/index.md
@@ -14,7 +14,7 @@ Note that when mocking dates/timers with Vitest, this must be called after
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)
@@ -74,7 +74,7 @@ Specify the node to mount the component on. This is not available when using `re
 **Signature:**
 
 ```ts
-attachTo?: HTMLElement | string
+attachTo?: Element | string
 ```
 
 **Details:**
@@ -1882,7 +1882,7 @@ Creates a Wrapper that contains the mounted and rendered Vue component to test w
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)

diff --git a/docs/fr/api/index.md b/docs/fr/api/index.md
@@ -12,7 +12,7 @@ Crée un `Wrapper` qui contient le composant Vue monté et rendu pour le test.
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)
@@ -72,7 +72,7 @@ Spécifie le nœud où monter le composant.
 **Signature&nbsp;:**
 
 ```ts
-attachTo?: HTMLElement | string
+attachTo?: Element | string
 ```
 
 **Utilisation&nbsp;:**
@@ -1870,7 +1870,7 @@ Crée un `Wrapper` qui contient le composant Vue monté et rendu pour le tester
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)

diff --git a/src/types.ts b/src/types.ts
@@ -91,7 +91,7 @@ export interface MountingOptions<Props, Data = {}>
    * Can be a valid CSS selector, or an Element connected to the document.
    * @see https://test-utils.vuejs.org/api/#attachto
    */
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
 }
 
 /**

diff --git a/tests/mountingOptions/attachTo.spec.ts b/tests/mountingOptions/attachTo.spec.ts
@@ -26,6 +26,25 @@ describe('options.attachTo', () => {
     wrapper.unmount()
     expect(document.getElementById('attach-to')).toBeNull()
   })
+  it('attaches to a provided SVGElement', () => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.id = 'root'
+    document.body.appendChild(svg)
+    expect(document.getElementById('root')).not.toBeNull()
+    expect(document.getElementById('attach-to')).toBeNull()
+    const wrapper = mount(TestComponent, {
+      attachTo: svg
+    })
+
+    const root = document.getElementById('root')
+    const rendered = document.getElementById('attach-to')!
+    expect(wrapper.vm.$el.parentNode).not.toBeNull()
+    expect(root).not.toBeNull()
+    expect(rendered).not.toBeNull()
+    expect(rendered.outerHTML).toBe(outerHTML)
+    wrapper.unmount()
+    expect(document.getElementById('attach-to')).toBeNull()
+  })
   it('attaches to a provided CSS selector string', () => {
     const div = document.createElement('div')
     div.id = 'root'