diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts index 7bf6f3c70..ffb68ec22 100644 --- a/src/baseWrapper.ts +++ b/src/baseWrapper.ts @@ -46,8 +46,9 @@ export default abstract class BaseWrapper selector: K ): DOMWrapper find(selector: string | RefSelector): DOMWrapper - find(selector: string | RefSelector): DOMWrapper - find(selector: string | RefSelector): DOMWrapper { + find(selector: string): DOMWrapper + find(selector: RefSelector): DOMWrapper + find(selector: string | RefSelector): DOMWrapper { // allow finding the root element if (!isElement(this.element)) { return createWrapperError('DOMWrapper') @@ -61,7 +62,7 @@ export default abstract class BaseWrapper const result = currentComponent.refs[selector.ref] - if (result instanceof HTMLElement) { + if (result instanceof Node) { return createDOMWrapper(result) } else { return createWrapperError('DOMWrapper') @@ -110,8 +111,9 @@ export default abstract class BaseWrapper selector: T | Exclude ): VueWrapper> // searching for functional component results in DOMWrapper + findComponent(selector: T): DOMWrapper findComponent( - selector: T | string + selector: string ): DOMWrapper // searching by name or ref always results in VueWrapper findComponent( @@ -154,7 +156,10 @@ export default abstract class BaseWrapper selector: T | Exclude ): VueWrapper>[] findAllComponents( - selector: T | string + selector: T + ): DOMWrapper[] + findAllComponents( + selector: string ): DOMWrapper[] findAllComponents(selector: NameSelector): VueWrapper[] findAllComponents( @@ -223,7 +228,8 @@ export default abstract class BaseWrapper selector: K ): Omit, 'exists'> get(selector: string): Omit, 'exists'> - get(selector: string): Omit, 'exists'> { + get(selector: RefSelector): Omit, 'exists'> + get(selector: string | RefSelector): Omit, 'exists'> { const result = this.find(selector) if (result.exists()) { return result diff --git a/src/config.ts b/src/config.ts index 004e601cf..b921e1717 100644 --- a/src/config.ts +++ b/src/config.ts @@ -17,7 +17,7 @@ interface Plugin { options: O } -class Pluggable> { +class Pluggable> { installedPlugins: Plugin[] = [] install(handler: (instance: Instance) => Record): void diff --git a/src/interfaces/wrapperLike.ts b/src/interfaces/wrapperLike.ts index b5d4405d2..3ba2bc9ee 100644 --- a/src/interfaces/wrapperLike.ts +++ b/src/interfaces/wrapperLike.ts @@ -18,7 +18,8 @@ export default interface WrapperLike { selector: K ): DOMWrapper find(selector: string | RefSelector): DOMWrapper - find(selector: string | RefSelector): DOMWrapper + find(selector: string): DOMWrapper + find(selector: RefSelector): DOMWrapper findAll( selector: K @@ -50,8 +51,11 @@ export default interface WrapperLike { selector: T | Exclude ): VueWrapper>[] findAllComponents( - selector: T | string + selector: string ): DOMWrapper[] + findAllComponents( + selector: T + ): DOMWrapper[] findAllComponents(selector: NameSelector): VueWrapper[] findAllComponents( selector: T | FindAllComponentsSelector @@ -65,6 +69,7 @@ export default interface WrapperLike { selector: K ): Omit, 'exists'> get(selector: string): Omit, 'exists'> + get(selector: RefSelector): Omit, 'exists'> get(selector: string): Omit, 'exists'> getComponent(selector: string): Omit @@ -75,10 +80,6 @@ export default interface WrapperLike { getComponent( selector: T | string ): Omit, 'exists'> - // searching by name or ref always results in VueWrapper - getComponent( - selector: NameSelector | RefSelector - ): Omit getComponent( selector: T | FindComponentSelector ): Omit, 'exists'> diff --git a/src/wrapperFactory.ts b/src/wrapperFactory.ts index c9c18893c..af1cd04d9 100644 --- a/src/wrapperFactory.ts +++ b/src/wrapperFactory.ts @@ -7,7 +7,7 @@ export enum WrapperType { VueWrapper } -type DOMWrapperFactory = (element: T) => DOMWrapperType +type DOMWrapperFactory = (element: T) => DOMWrapperType type VueWrapperFactory = ( app: App | null, vm: T, diff --git a/test-dts/findComponent.d-test.ts b/test-dts/findComponent.d-test.ts index 78d4f66bc..deb64e1d1 100644 --- a/test-dts/findComponent.d-test.ts +++ b/test-dts/findComponent.d-test.ts @@ -41,7 +41,7 @@ expectType>>( // find by type - functional const functionalComponentByType = wrapper.findComponent(FuncComponent) -expectType>(functionalComponentByType) +expectType>(functionalComponentByType) // find by string const componentByString = wrapper.findComponent('.foo') diff --git a/tests/find.spec.ts b/tests/find.spec.ts index 493b6625a..f165f6384 100644 --- a/tests/find.spec.ts +++ b/tests/find.spec.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, nextTick } from 'vue' +import { defineComponent, h, nextTick, Fragment } from 'vue' import { mount, VueWrapper } from '../src' import SuspenseComponent from './components/Suspense.vue' @@ -15,15 +15,29 @@ describe('find', () => { expect(wrapper.find('#my-span').exists()).toBe(true) }) - it('find DOM element by ref', () => { - const Component = defineComponent({ - render() { - return h('div', {}, [h('span', { ref: 'span', id: 'my-span' })]) - } + describe('find DOM element by ref', () => { + it('works for root element', () => { + const Component = defineComponent({ + render() { + return h('div', {}, [h('span', { ref: 'span', id: 'my-span' })]) + } + }) + const wrapper = mount(Component) + expect(wrapper.find({ ref: 'span' }).exists()).toBe(true) + expect(wrapper.find({ ref: 'span' }).attributes('id')).toBe('my-span') + }) + + it('works when ref is pointing to non-element node', () => { + const Component = defineComponent({ + render() { + return h('div', null, h(Fragment, { ref: 'plain' }, ['hello'])) + } + }) + + const wrapper = mount(Component) + expect(wrapper.find({ ref: 'plain' }).exists()).toBe(true) + expect(wrapper.find({ ref: 'plain' }).element).toBeInstanceOf(Text) }) - const wrapper = mount(Component) - expect(wrapper.find({ ref: 'span' }).exists()).toBe(true) - expect(wrapper.find({ ref: 'span' }).attributes('id')).toBe('my-span') }) it('find using multiple root nodes', () => {