diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts index 486db0d8b..5937238e9 100644 --- a/src/vueWrapper.ts +++ b/src/vueWrapper.ts @@ -104,8 +104,11 @@ export class VueWrapper<T extends ComponentPublicInstance> ): DOMWrapper<SVGElementTagNameMap[K]> find<T extends Element>(selector: string): DOMWrapper<T> find(selector: string): DOMWrapper<Element> { - // force using the parentElement to allow finding the root element - const result = this.parentElement.querySelector(selector) + const result = this.parentElement['__vue_app__'] + ? // force using the parentElement to allow finding the root element + this.parentElement.querySelector(selector) + : this.element.querySelector(selector) + if (result) { return new DOMWrapper(result) } @@ -202,7 +205,10 @@ export class VueWrapper<T extends ComponentPublicInstance> ): DOMWrapper<SVGElementTagNameMap[K]>[] findAll<T extends Element>(selector: string): DOMWrapper<T>[] findAll(selector: string): DOMWrapper<Element>[] { - const results = this.parentElement.querySelectorAll(selector) + const results = this.parentElement['__vue_app__'] + ? this.parentElement.querySelectorAll(selector) + : this.element.querySelectorAll(selector) + return Array.from(results).map((element) => new DOMWrapper(element)) } diff --git a/tests/find.spec.ts b/tests/find.spec.ts index 6dae510f8..862047dfe 100644 --- a/tests/find.spec.ts +++ b/tests/find.spec.ts @@ -26,6 +26,32 @@ describe('find', () => { expect(wrapper.find('#my-span').exists()).toBe(true) }) + test('find using current node after findAllComponents', () => { + const ComponentB = defineComponent({ + name: 'ComponentB', + template: '<div><slot></slot></div>' + }) + + const ComponentA = defineComponent({ + name: 'ComponentA', + template: ` + <div> + <component-b v-for="item in [1, 2]" :key="item"> + <input type="text" :value="item"> + </component-b> + </div> + `, + components: { ComponentB } + }) + + const wrapper = mount(ComponentA) + const firstCompB = wrapper.findComponent({ name: 'ComponentB' }) + const lastCompB = wrapper.findAllComponents({ name: 'ComponentB' })[1] + + expect(firstCompB.find('input').element.value).toBe('1') + expect(lastCompB.find('input').element.value).toBe('2') + }) + it('returns the root element in single root element', () => { const Component = defineComponent({ render() { @@ -85,6 +111,32 @@ describe('findAll', () => { expect(wrapper.findAll('.span')).toHaveLength(2) }) + test('findAll using current node after findAllComponents', () => { + const ComponentB = defineComponent({ + name: 'ComponentB', + template: '<div><slot></slot></div>' + }) + + const ComponentA = defineComponent({ + name: 'ComponentA', + template: ` + <div> + <component-b v-for="item in [1, 2]" :key="item"> + <input type="text" :value="item"> + </component-b> + </div> + `, + components: { ComponentB } + }) + + const wrapper = mount(ComponentA) + const firstCompB = wrapper.findComponent({ name: 'ComponentB' }) + const lastCompB = wrapper.findAllComponents({ name: 'ComponentB' })[1] + + expect(firstCompB.findAll('input')[0].element.value).toBe('1') + expect(lastCompB.findAll('input')[0].element.value).toBe('2') + }) + test('works with suspense', async () => { const wrapper = mount(SuspenseComponent)