fix(find): do not find DOM node by ref if it is not inside element

vuejs · Nov 30, 2021 · b118e9a · b118e9a
1 parent 125ea2f
commit b118e9a
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 13 deletions.
diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts
@@ -45,9 +45,8 @@ export default abstract class BaseWrapper<ElementType extends Node>
   find<K extends keyof SVGElementTagNameMap>(
     selector: K
   ): DOMWrapper<SVGElementTagNameMap[K]>
-  find<T extends Element>(selector: string | RefSelector): DOMWrapper<T>
-  find(selector: string): DOMWrapper<Element>
-  find(selector: RefSelector): DOMWrapper<Node>
+  find<T extends Element = Element>(selector: string): DOMWrapper<T>
+  find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>
   find(selector: string | RefSelector): DOMWrapper<Node> {
     // allow finding the root element
     if (!isElement(this.element)) {
@@ -227,9 +226,13 @@ export default abstract class BaseWrapper<ElementType extends Node>
   get<K extends keyof SVGElementTagNameMap>(
     selector: K
   ): Omit<DOMWrapper<SVGElementTagNameMap[K]>, 'exists'>
-  get<T extends Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>
-  get(selector: RefSelector): Omit<DOMWrapper<Node>, 'exists'>
-  get(selector: string | RefSelector): Omit<DOMWrapper<Element>, 'exists'> {
+  get<T extends Element = Element>(
+    selector: string
+  ): Omit<DOMWrapper<T>, 'exists'>
+  get<T extends Node = Node>(
+    selector: string | RefSelector
+  ): Omit<DOMWrapper<T>, 'exists'>
+  get(selector: string | RefSelector): Omit<DOMWrapper<Node>, 'exists'> {
     const result = this.find(selector)
     if (result.exists()) {
       return result

diff --git a/src/domWrapper.ts b/src/domWrapper.ts
@@ -3,6 +3,9 @@ import BaseWrapper from './baseWrapper'
 import WrapperLike from './interfaces/wrapperLike'
 import { isElement } from './utils/isElement'
 import { registerFactory, WrapperType } from './wrapperFactory'
+import { RefSelector } from './types'
+import { isRefSelector } from './utils'
+import { createWrapperError } from './errorWrapper'
 
 export class DOMWrapper<NodeType extends Node> extends BaseWrapper<NodeType> {
   constructor(element: NodeType) {
@@ -21,6 +24,17 @@ export class DOMWrapper<NodeType extends Node> extends BaseWrapper<NodeType> {
       : this.element.toString()
   }
 
+  find(selector: string | RefSelector): DOMWrapper<any> {
+    const result = super.find(selector)
+    if (result.exists() && isRefSelector(selector)) {
+      return this.element.contains(result.element)
+        ? result
+        : createWrapperError('DOMWrapper')
+    }
+
+    return result
+  }
+
   findAllComponents(selector: any): any {
     const results = super.findAllComponents(selector)
     return results.filter((r: WrapperLike) => this.element.contains(r.element))

diff --git a/src/interfaces/wrapperLike.ts b/src/interfaces/wrapperLike.ts
@@ -17,9 +17,8 @@ export default interface WrapperLike {
   find<K extends keyof SVGElementTagNameMap>(
     selector: K
   ): DOMWrapper<SVGElementTagNameMap[K]>
-  find<T extends Element>(selector: string | RefSelector): DOMWrapper<T>
-  find(selector: string): DOMWrapper<Element>
-  find(selector: RefSelector): DOMWrapper<Node>
+  find<T extends Element = Element>(selector: string): DOMWrapper<T>
+  find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>
 
   findAll<K extends keyof HTMLElementTagNameMap>(
     selector: K
@@ -68,9 +67,12 @@ export default interface WrapperLike {
   get<K extends keyof SVGElementTagNameMap>(
     selector: K
   ): Omit<DOMWrapper<SVGElementTagNameMap[K]>, 'exists'>
-  get<T extends Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>
-  get(selector: RefSelector): Omit<DOMWrapper<Node>, 'exists'>
-  get(selector: string): Omit<DOMWrapper<Element>, 'exists'>
+  get<T extends Element = Element>(
+    selector: string
+  ): Omit<DOMWrapper<T>, 'exists'>
+  get<T extends Node = Node>(
+    selector: string | RefSelector
+  ): Omit<DOMWrapper<T>, 'exists'>
 
   getComponent<T extends never>(selector: string): Omit<WrapperLike, 'exists'>
   getComponent<T extends DefinedComponent>(

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,4 +1,4 @@
-import { GlobalMountOptions } from './types'
+import { GlobalMountOptions, RefSelector } from './types'
 import { ComponentOptions, ConcreteComponent, FunctionalComponent } from 'vue'
 import { config } from './config'
 
@@ -107,3 +107,9 @@ export function hasOwnProperty<O extends {}, P extends PropertyKey>(
 ): obj is O & Record<P, unknown> {
   return obj.hasOwnProperty(prop)
 }
+
+export function isRefSelector(
+  selector: string | RefSelector
+): selector is RefSelector {
+  return typeof selector === 'object' && 'ref' in selector
+}
diff --git a/tests/find.spec.ts b/tests/find.spec.ts
@@ -38,6 +38,21 @@ describe('find', () => {
       expect(wrapper.find({ ref: 'plain' }).exists()).toBe(true)
       expect(wrapper.find({ ref: 'plain' }).element).toBeInstanceOf(Text)
     })
+
+    it('does not find ref located in the same component but not in current DOM wrapper', () => {
+      const Component = defineComponent({
+        render() {
+          return h('div', [
+            h('span', { ref: 'span', id: 'my-span' }),
+            h('div', { class: 'search-target' })
+          ])
+        }
+      })
+      const wrapper = mount(Component)
+      expect(
+        wrapper.find('.search-target').find({ ref: 'span' }).exists()
+      ).toBe(false)
+    })
   })
 
   it('find using multiple root nodes', () => {