diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts index 42eeed23d..fab7027ef 100644 --- a/src/baseWrapper.ts +++ b/src/baseWrapper.ts @@ -80,24 +80,22 @@ export default abstract class BaseWrapper } } - const elements = this.findAllDOMElements(selector) + const elements = this.findAll(selector) if (elements.length > 0) { - return createDOMWrapper(elements[0]) + return elements[0] } return createWrapperError('DOMWrapper') } - findAll( + abstract findAll( selector: K ): DOMWrapper[] - findAll( + abstract findAll( selector: K ): DOMWrapper[] - findAll(selector: string): DOMWrapper[] - findAll(selector: string): DOMWrapper[] { - return this.findAllDOMElements(selector).map(createDOMWrapper) - } + abstract findAll(selector: string): DOMWrapper[] + abstract findAll(selector: string): DOMWrapper[] // searching by string without specifying component results in WrapperLike object findComponent(selector: string): WrapperLike diff --git a/src/domWrapper.ts b/src/domWrapper.ts index 9744342b6..605f25d40 100644 --- a/src/domWrapper.ts +++ b/src/domWrapper.ts @@ -1,7 +1,11 @@ import { config } from './config' import BaseWrapper from './baseWrapper' import WrapperLike from './interfaces/wrapperLike' -import { registerFactory, WrapperType } from './wrapperFactory' +import { + createDOMWrapper, + registerFactory, + WrapperType +} from './wrapperFactory' import { RefSelector } from './types' import { isRefSelector } from './utils' import { createWrapperError } from './errorWrapper' @@ -40,6 +44,23 @@ export class DOMWrapper extends BaseWrapper { return result } + findAll( + selector: K + ): DOMWrapper[] + findAll( + selector: K + ): DOMWrapper[] + findAll(selector: string): DOMWrapper[] + findAll(selector: string): DOMWrapper[] { + if (!(this.wrapperElement instanceof Element)) { + return [] + } + return Array.from( + this.wrapperElement.querySelectorAll(selector), + createDOMWrapper + ) + } + findAllComponents(selector: any): any { const results = super.findAllComponents(selector) return results.filter((r: WrapperLike) => this.element.contains(r.element)) diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts index adb977761..f789cdd16 100644 --- a/src/vueWrapper.ts +++ b/src/vueWrapper.ts @@ -15,6 +15,7 @@ import { mergeDeep } from './utils' import { getRootNodes } from './utils/getRootNodes' import { emitted, recordEvent } from './emit' import BaseWrapper from './baseWrapper' +import type { DOMWrapper } from './domWrapper' import { createDOMWrapper, registerFactory, @@ -81,6 +82,17 @@ export class VueWrapper< return this.vm.$ } + findAll( + selector: K + ): DOMWrapper[] + findAll( + selector: K + ): DOMWrapper[] + findAll(selector: string): DOMWrapper[] + findAll(selector: string): DOMWrapper[] { + return this.findAllDOMElements(selector).map(createDOMWrapper) + } + private attachNativeEventListener(): void { const vm = this.vm if (!vm) return diff --git a/tests/components/ParentComponent.vue b/tests/components/ParentComponent.vue new file mode 100644 index 000000000..d3c1f2eac --- /dev/null +++ b/tests/components/ParentComponent.vue @@ -0,0 +1,7 @@ + diff --git a/tests/find.spec.ts b/tests/find.spec.ts index 414b401f5..c54dc091b 100644 --- a/tests/find.spec.ts +++ b/tests/find.spec.ts @@ -1,7 +1,7 @@ import { defineComponent, h, nextTick, Fragment } from 'vue' - import { mount, VueWrapper } from '../src' import SuspenseComponent from './components/Suspense.vue' +import ParentComponent from './components/ParentComponent.vue' import MultipleRootRender from './components/MultipleRootRender.vue' describe('find', () => { @@ -93,18 +93,6 @@ describe('find', () => { expect(wrapper.find('.foo').exists()).toBe(true) }) - it('returns the root element from dom wrapper if it matches', () => { - const Component = defineComponent({ - render() { - return h('div', { class: 'foo' }, 'text') - } - }) - - const wrapper = mount(Component) - const domWrapper = wrapper.find('.foo') - expect(domWrapper.find('.foo').exists()).toBe(true) - }) - it('can be chained', () => { const Component = defineComponent({ render() { @@ -347,4 +335,36 @@ describe('findAll', () => { expect(wrapper.findAll('a')).toHaveLength(3) }) }) + + // https://github.com/vuejs/test-utils/issues/1233 + it('finds 3 children', () => { + const wrapper = mount(ParentComponent) + + const parent = wrapper.get('.parent') + + expect(parent.findAll('div').length).toBe(3) + }) + + it('finds itself on Vue wrapper', () => { + const wrapper = mount(ParentComponent) + + const parent = wrapper.get('div') + + expect(parent.classes()).toContain('parent') + }) + + it('does not find itself on DOM node', () => { + const wrapper = mount(ParentComponent) + + const parent = wrapper.get('.parent') + + expect(parent.find('div').classes()).toContain('first') + }) + + // https://github.com/vuejs/test-utils/issues/1233 + it('finds all divs with findAll', () => { + const wrapper = mount(ParentComponent) + + expect(wrapper.findAll('div').length).toBe(4) + }) })