Skip to content

Commit 8e05ee4

Browse files
feat: fallback to parent element if current element has multiple roots.
1 parent f871118 commit 8e05ee4

File tree

3 files changed

+67
-30
lines changed

3 files changed

+67
-30
lines changed

src/vue-wrapper.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ export class VueWrapper implements WrapperAPI {
2323
return this.componentVM.$.subTree.shapeFlag === ShapeFlags.ARRAY_CHILDREN
2424
}
2525

26+
get element() {
27+
return this.__hasMultipleRoots
28+
? // get the parent element of the current component
29+
this.componentVM.$el.parentElement
30+
: this.componentVM.$el
31+
}
32+
2633
classes(): string[] {
2734
throw Error('TODO: Implement VueWrapper#classes')
2835
}
@@ -36,15 +43,15 @@ export class VueWrapper implements WrapperAPI {
3643
}
3744

3845
html() {
39-
return this.rootVM.$el.outerHTML
46+
return this.element.outerHTML
4047
}
4148

4249
text() {
43-
return this.rootVM.$el.textContent?.trim()
50+
return this.element.textContent?.trim()
4451
}
4552

4653
find<T extends Element>(selector: string): DOMWrapper<T> | ErrorWrapper {
47-
const result = this.rootVM.$el.querySelector(selector) as T
54+
const result = this.element.querySelector(selector) as T
4855
if (result) {
4956
return new DOMWrapper(result)
5057
}
@@ -53,16 +60,16 @@ export class VueWrapper implements WrapperAPI {
5360
}
5461

5562
findAll<T extends Element>(selector: string): DOMWrapper<T>[] {
56-
const results = (this.rootVM.$el as Element).querySelectorAll<T>(selector)
63+
const results = (this.element as Element).querySelectorAll<T>(selector)
5764
return Array.from(results).map((x) => new DOMWrapper(x))
5865
}
5966

6067
async setChecked(checked: boolean = true) {
61-
return new DOMWrapper(this.rootVM.$el).setChecked(checked)
68+
return new DOMWrapper(this.element).setChecked(checked)
6269
}
6370

6471
trigger(eventString: string) {
65-
const rootElementWrapper = new DOMWrapper(this.rootVM.$el)
72+
const rootElementWrapper = new DOMWrapper(this.element)
6673
return rootElementWrapper.trigger(eventString)
6774
}
6875
}

tests/find.spec.ts

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,56 @@ import { defineComponent, h } from 'vue'
22

33
import { mount } from '../src'
44

5-
test('find', () => {
6-
const Component = defineComponent({
7-
render() {
8-
return h('div', {}, [h('span', { id: 'my-span' })])
9-
}
5+
describe('find', () => {
6+
test('find using single root node', () => {
7+
const Component = defineComponent({
8+
render() {
9+
return h('div', {}, [h('span', { id: 'my-span' })])
10+
}
11+
})
12+
13+
const wrapper = mount(Component)
14+
expect(wrapper.find('#my-span')).toBeTruthy()
1015
})
1116

12-
const wrapper = mount(Component)
13-
expect(wrapper.find('#my-span')).toBeTruthy()
17+
it('find using multiple root nodes', () => {
18+
const Component = defineComponent({
19+
render() {
20+
return [h('div', 'text'), h('span', { id: 'my-span' })]
21+
}
22+
})
23+
24+
const wrapper = mount(Component)
25+
expect(wrapper.find('#my-span')).toBeTruthy()
26+
})
1427
})
1528

16-
test('findAll', () => {
17-
const Component = defineComponent({
18-
render() {
19-
return h('div', {}, [
20-
h('span', { className: 'span' }),
21-
h('span', { className: 'span' })
22-
])
23-
}
29+
describe('findAll', () => {
30+
test('findAll using single root node', () => {
31+
const Component = defineComponent({
32+
render() {
33+
return h('div', {}, [
34+
h('span', { className: 'span' }),
35+
h('span', { className: 'span' })
36+
])
37+
}
38+
})
39+
40+
const wrapper = mount(Component)
41+
expect(wrapper.findAll('.span')).toHaveLength(2)
2442
})
2543

26-
const wrapper = mount(Component)
27-
expect(wrapper.findAll('.span')).toHaveLength(2)
28-
})
44+
test('findAll using multiple root nodes', () => {
45+
const Component = defineComponent({
46+
render() {
47+
return [
48+
h('span', { className: 'span' }),
49+
h('span', { className: 'span' })
50+
]
51+
}
52+
})
53+
54+
const wrapper = mount(Component)
55+
expect(wrapper.findAll('.span')).toHaveLength(2)
56+
})
57+
})

tests/setChecked.spec.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe('setChecked', () => {
1313
const wrapper = mount(Comp)
1414
await wrapper.setChecked()
1515

16-
expect(wrapper.vm.$el.checked).toBe(true)
16+
expect(wrapper.componentVM.$el.checked).toBe(true)
1717
})
1818

1919
it('sets element checked true with no option passed', async () => {
@@ -64,11 +64,12 @@ describe('setChecked', () => {
6464
const listener = jest.fn()
6565
const Comp = defineComponent({
6666
setup() {
67-
return () => h('input', {
68-
onChange: listener,
69-
type: 'checkbox',
70-
checked: true
71-
})
67+
return () =>
68+
h('input', {
69+
onChange: listener,
70+
type: 'checkbox',
71+
checked: true
72+
})
7273
}
7374
})
7475

0 commit comments

Comments
 (0)