/
element.spec.ts
118 lines (97 loc) · 3.28 KB
/
element.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { describe, expect, it } from 'vitest'
import { defineComponent, h } from 'vue'
import { mount } from '../src'
const MultiRootText = defineComponent({
render: () => [h('div', {}, 'foo'), h('div', {}, 'bar'), h('div', {}, 'baz')]
})
const ReturnSlot = defineComponent({
render() {
return this.$slots.default!({})
}
})
describe('element', () => {
it('returns element when mounting single root node', () => {
const Component = defineComponent({
render() {
return h('div', {}, 'element content')
}
})
const wrapper = mount(Component)
expect(wrapper.element.nodeName).toBe('DIV')
})
it('returns the VTU root element when mounting component with slot', () => {
const NestedComponent = defineComponent({
template: `<h1><slot></slot></h1>`
})
const RootComponent = defineComponent({
components: { NestedComponent },
template: `<nested-component>test</nested-component>`
})
const wrapper = mount(RootComponent)
expect(wrapper.element.tagName).toBe('H1')
expect(wrapper.html()).toBe('<h1>test</h1>')
})
it('returns the VTU root element when mounting multiple root nodes', () => {
const wrapper = mount(MultiRootText)
expect(wrapper.element.innerHTML).toBe(
'<div>foo</div><div>bar</div><div>baz</div>'
)
})
it('returns correct element for root component with multiple roots', () => {
const Parent = defineComponent({
components: { MultiRootText },
template: '<MultiRootText/>'
})
const wrapper = mount(Parent)
expect(wrapper.findComponent(MultiRootText).text()).toBe('foobarbaz')
expect(wrapper.text()).toBe('foobarbaz')
})
it('returns correct element for root slot', () => {
const Parent = defineComponent({
components: { ReturnSlot },
template: `
<ReturnSlot>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</ReturnSlot>`
})
const wrapper = mount(Parent)
expect(wrapper.element.innerHTML).toBe(
'<div>foo</div><div>bar</div><div>baz</div>'
)
})
it('should return element for multi root functional component', () => {
const Foo = () => h(MultiRootText)
const wrapper = mount(Foo)
expect(wrapper.element.innerHTML).toBe(
'<div>foo</div><div>bar</div><div>baz</div>'
)
})
it('returns correct element for root slot with functional component', () => {
const wrapper = mount(() =>
h(ReturnSlot, {}, () => [
h('div', {}, 'foo'),
h('div', {}, 'bar'),
h('div', {}, 'baz')
])
)
expect(wrapper.element.innerHTML).toBe(
'<div>foo</div><div>bar</div><div>baz</div>'
)
})
it('returns correct element for root slot with nested component', () => {
const wrapper = mount(() => h(ReturnSlot, {}, () => h(MultiRootText)))
expect(wrapper.element.innerHTML).toBe(
'<div>foo</div><div>bar</div><div>baz</div>'
)
})
it('returns correct element for component which renders other component with array of vnodes in default slot', () => {
const Nested = {
template: '<div class="nested-root"><slot></slot></div>'
}
const Root = () => h(Nested, {}, [h('div', {}, 'foo'), h('div', {}, 'bar')])
const wrapper = mount(Root)
expect(wrapper.element.innerHTML).toBe('<div>foo</div><div>bar</div>')
})
})