diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts index 3972bcf24..b4d854a6e 100644 --- a/src/baseWrapper.ts +++ b/src/baseWrapper.ts @@ -1,3 +1,4 @@ +import { VNode } from 'vue' import { textContent } from './utils' import type { TriggerOptions } from './createDomEvent' import { @@ -217,7 +218,7 @@ export default abstract class BaseWrapper return results.map((c) => c.proxy ? createVueWrapper(null, c.proxy) - : createDOMWrapper(c.vnode.el as Element) + : createDOMWrapper(c.vnode.el as Element, c.subTree as VNode) ) } abstract setValue(value?: any): Promise diff --git a/src/domWrapper.ts b/src/domWrapper.ts index 2d9b62a30..7ac9459e9 100644 --- a/src/domWrapper.ts +++ b/src/domWrapper.ts @@ -1,3 +1,4 @@ +import { VNode } from 'vue' import { config } from './config' import BaseWrapper from './baseWrapper' import WrapperLike from './interfaces/wrapperLike' @@ -11,16 +12,24 @@ import { isRefSelector } from './utils' import { createWrapperError } from './errorWrapper' export class DOMWrapper extends BaseWrapper { - constructor(element: NodeType | null | undefined) { + protected readonly subTree: VNode | null | undefined = null + + constructor(element: NodeType | null | undefined, subTree?: VNode | null) { if (!element) { return createWrapperError('DOMWrapper') } super(element) + this.subTree = subTree + // plugins hook config.plugins.DOMWrapper.extend(this) } getRootNodes() { + if (Array.isArray(this.subTree?.children)) { + // Any type should be fixed + return this.subTree.children.map((node) => (node as any)?.el) + } return [this.wrapperElement] } @@ -64,7 +73,7 @@ export class DOMWrapper extends BaseWrapper { } return Array.from( this.wrapperElement.querySelectorAll(selector), - createDOMWrapper + (element) => createDOMWrapper(element) ) } @@ -155,4 +164,7 @@ export class DOMWrapper extends BaseWrapper { } } -registerFactory(WrapperType.DOMWrapper, (element) => new DOMWrapper(element)) +registerFactory( + WrapperType.DOMWrapper, + (element, subTree) => new DOMWrapper(element, subTree) +) diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts index d4eb17388..f20dc2beb 100644 --- a/src/vueWrapper.ts +++ b/src/vueWrapper.ts @@ -173,7 +173,9 @@ export class VueWrapper< ): DOMWrapper[] findAll(selector: string): DOMWrapper[] findAll(selector: string): DOMWrapper[] { - return this.findAllDOMElements(selector).map(createDOMWrapper) + return this.findAllDOMElements(selector).map((e) => + createDOMWrapper(e) + ) } private attachNativeEventListener(): void { diff --git a/src/wrapperFactory.ts b/src/wrapperFactory.ts index 429773e30..b187e2707 100644 --- a/src/wrapperFactory.ts +++ b/src/wrapperFactory.ts @@ -1,4 +1,4 @@ -import { ComponentPublicInstance, App } from 'vue' +import { ComponentPublicInstance, App, VNode } from 'vue' import type { DOMWrapper as DOMWrapperType } from './domWrapper' import type { VueWrapper as VueWrapperType } from './vueWrapper' @@ -8,7 +8,8 @@ export enum WrapperType { } type DOMWrapperFactory = ( - element: T | null | undefined + element: T | null | undefined, + subTree?: VNode ) => DOMWrapperType type VueWrapperFactory = ( app: App | null, @@ -36,7 +37,7 @@ export function registerFactory( factories[type] = fn } -export const createDOMWrapper: DOMWrapperFactory = (element) => - factories[WrapperType.DOMWrapper]!(element) +export const createDOMWrapper: DOMWrapperFactory = (element, subTree) => + factories[WrapperType.DOMWrapper]!(element, subTree) export const createVueWrapper: VueWrapperFactory = (app, vm, setProps) => factories[WrapperType.VueWrapper]!(app, vm, setProps) diff --git a/tests/element.spec.ts b/tests/element.spec.ts index 9d4d39d6d..c3abcd2bf 100644 --- a/tests/element.spec.ts +++ b/tests/element.spec.ts @@ -60,6 +60,36 @@ describe('element', () => { expect(wrapper.text()).toBe('foobarbaz') }) + it('returns correct output for functional component with multiple text roots', () => { + const Func = () => ['foo', 'bar'] + + const Parent = defineComponent({ + name: 'Parent', + components: { Func }, + template: '
' + }) + const wrapper = mount(Parent) + + expect(wrapper.findComponent(Func).html()).toBe('foo\nbar') + expect(wrapper.findComponent(Func).text()).toBe('foobar') + }) + + it('returns correct output for functional component with multiple element roots', () => { + const Func = () => [h('div', {}, 'foo'), h('div', {}, 'bar')] + + const Parent = defineComponent({ + name: 'Parent', + components: { Func }, + template: '
' + }) + const wrapper = mount(Parent) + + expect(wrapper.findComponent(Func).html()).toBe( + '
foo
\n
bar
' + ) + expect(wrapper.findComponent(Func).text()).toBe('foobar') + }) + it('returns correct element for root slot', () => { const Parent = defineComponent({ components: { ReturnSlot },