|
1 | | -// describe('scopeId runtime support', () => { |
2 | | -// test('should attach scopeId', () => { |
3 | | -// const App = { |
4 | | -// __scopeId: 'parent', |
5 | | -// render: () => h('div', [h('div')]), |
6 | | -// } |
7 | | -// const root = nodeOps.createElement('div') |
8 | | -// render(h(App), root) |
9 | | -// expect(serializeInner(root)).toBe(`<div parent><div parent></div></div>`) |
10 | | -// }) |
11 | | - |
12 | | -// test('should attach scopeId to components in parent component', () => { |
13 | | -// const Child = { |
14 | | -// __scopeId: 'child', |
15 | | -// render: () => h('div'), |
16 | | -// } |
17 | | -// const App = { |
18 | | -// __scopeId: 'parent', |
19 | | -// render: () => h('div', [h(Child)]), |
20 | | -// } |
21 | | - |
22 | | -// const root = nodeOps.createElement('div') |
23 | | -// render(h(App), root) |
24 | | -// expect(serializeInner(root)).toBe( |
25 | | -// `<div parent><div child parent></div></div>`, |
26 | | -// ) |
27 | | -// }) |
28 | | - |
29 | | -// // #5148 |
30 | | -// test('should attach scopeId to suspense content', async () => { |
31 | | -// const deps: Promise<any>[] = [] |
32 | | -// const Child = { |
33 | | -// async setup() { |
34 | | -// const p = new Promise(r => setTimeout(r, 1)) |
35 | | -// deps.push(p.then(() => Promise.resolve())) |
36 | | - |
37 | | -// await p |
38 | | -// return () => h('div', 'async') |
39 | | -// }, |
40 | | -// } |
41 | | - |
42 | | -// const Wrapper = { |
43 | | -// setup(_: any, { slots }: any) { |
44 | | -// return () => slots.default({ Component: h(Child) }) |
45 | | -// }, |
46 | | -// } |
47 | | - |
48 | | -// const App = { |
49 | | -// __scopeId: 'parent', |
50 | | -// setup() { |
51 | | -// return () => |
52 | | -// h(Wrapper, null, { |
53 | | -// default: withCtx(({ Component }: any) => |
54 | | -// h(Suspense, null, { |
55 | | -// default: h(Component), |
56 | | -// fallback: h('div', 'fallback'), |
57 | | -// }), |
58 | | -// ), |
59 | | -// }) |
60 | | -// }, |
61 | | -// } |
62 | | - |
63 | | -// const root = nodeOps.createElement('div') |
64 | | -// render(h(App), root) |
65 | | -// expect(serializeInner(root)).toBe(`<div parent>fallback</div>`) |
66 | | - |
67 | | -// await Promise.all(deps) |
68 | | -// await nextTick() |
69 | | -// expect(serializeInner(root)).toBe(`<div parent>async</div>`) |
70 | | -// }) |
71 | | - |
72 | | -// // :slotted basic |
73 | | -// test('should work on slots', () => { |
74 | | -// const Child = { |
75 | | -// __scopeId: 'child', |
76 | | -// render(this: any) { |
77 | | -// return h('div', renderSlot(this.$slots, 'default')) |
78 | | -// }, |
79 | | -// } |
80 | | -// const Child2 = { |
81 | | -// __scopeId: 'child2', |
82 | | -// render: () => h('span'), |
83 | | -// } |
84 | | -// const App = { |
85 | | -// __scopeId: 'parent', |
86 | | -// render: () => { |
87 | | -// return h( |
88 | | -// Child, |
89 | | -// withCtx(() => { |
90 | | -// return [h('div'), h(Child2)] |
91 | | -// }), |
92 | | -// ) |
93 | | -// }, |
94 | | -// } |
95 | | -// const root = nodeOps.createElement('div') |
96 | | -// render(h(App), root) |
97 | | -// // slot content should have: |
98 | | -// // - scopeId from parent |
99 | | -// // - slotted scopeId (with `-s` postfix) from child (the tree owner) |
100 | | -// expect(serializeInner(root)).toBe( |
101 | | -// `<div child parent>` + |
102 | | -// `<div parent child-s></div>` + |
103 | | -// // component inside slot should have: |
104 | | -// // - scopeId from template context |
105 | | -// // - slotted scopeId from slot owner |
106 | | -// // - its own scopeId |
107 | | -// `<span child2 parent child-s></span>` + |
108 | | -// `</div>`, |
109 | | -// ) |
110 | | -// }) |
111 | | - |
112 | | -// // #2892 |
113 | | -// test(':slotted on forwarded slots', async () => { |
114 | | -// const Wrapper = { |
115 | | -// __scopeId: 'wrapper', |
116 | | -// render(this: any) { |
117 | | -// // <div class="wrapper"><slot/></div> |
118 | | -// return h('div', { class: 'wrapper' }, [ |
119 | | -// renderSlot( |
120 | | -// this.$slots, |
121 | | -// 'default', |
122 | | -// {}, |
123 | | -// undefined, |
124 | | -// true /* noSlotted */, |
125 | | -// ), |
126 | | -// ]) |
127 | | -// }, |
128 | | -// } |
129 | | - |
130 | | -// const Slotted = { |
131 | | -// __scopeId: 'slotted', |
132 | | -// render(this: any) { |
133 | | -// // <Wrapper><slot/></Wrapper> |
134 | | -// return h(Wrapper, null, { |
135 | | -// default: withCtx(() => [renderSlot(this.$slots, 'default')]), |
136 | | -// }) |
137 | | -// }, |
138 | | -// } |
139 | | - |
140 | | -// // simulate hoisted node |
141 | | -// pushScopeId('root') |
142 | | -// const hoisted = h('div', 'hoisted') |
143 | | -// popScopeId() |
144 | | - |
145 | | -// const Root = { |
146 | | -// __scopeId: 'root', |
147 | | -// render(this: any) { |
148 | | -// // <Slotted><div>hoisted</div><div>{{ dynamic }}</div></Slotted> |
149 | | -// return h(Slotted, null, { |
150 | | -// default: withCtx(() => { |
151 | | -// return [hoisted, h('div', 'dynamic')] |
152 | | -// }), |
153 | | -// }) |
154 | | -// }, |
155 | | -// } |
156 | | - |
157 | | -// const root = nodeOps.createElement('div') |
158 | | -// render(h(Root), root) |
159 | | -// expect(serializeInner(root)).toBe( |
160 | | -// `<div wrapper slotted root class="wrapper">` + |
161 | | -// `<div root slotted-s>hoisted</div>` + |
162 | | -// `<div root slotted-s>dynamic</div>` + |
163 | | -// `</div>`, |
164 | | -// ) |
165 | | - |
166 | | -// const Root2 = { |
167 | | -// __scopeId: 'root', |
168 | | -// render(this: any) { |
169 | | -// // <Slotted> |
170 | | -// // <Wrapper> |
171 | | -// // <div>hoisted</div><div>{{ dynamic }}</div> |
172 | | -// // </Wrapper> |
173 | | -// // </Slotted> |
174 | | -// return h(Slotted, null, { |
175 | | -// default: withCtx(() => [ |
176 | | -// h(Wrapper, null, { |
177 | | -// default: withCtx(() => [hoisted, h('div', 'dynamic')]), |
178 | | -// }), |
179 | | -// ]), |
180 | | -// }) |
181 | | -// }, |
182 | | -// } |
183 | | -// const root2 = nodeOps.createElement('div') |
184 | | -// render(h(Root2), root2) |
185 | | -// expect(serializeInner(root2)).toBe( |
186 | | -// `<div wrapper slotted root class="wrapper">` + |
187 | | -// `<div wrapper root slotted-s class="wrapper">` + |
188 | | -// `<div root>hoisted</div>` + |
189 | | -// `<div root>dynamic</div>` + |
190 | | -// `</div>` + |
191 | | -// `</div>`, |
192 | | -// ) |
193 | | -// }) |
194 | | - |
195 | | -// // #1988 |
196 | | -// test('should inherit scopeId through nested HOCs with inheritAttrs: false', () => { |
197 | | -// const App = { |
198 | | -// __scopeId: 'parent', |
199 | | -// render: () => { |
200 | | -// return h(Child) |
201 | | -// }, |
202 | | -// } |
203 | | - |
204 | | -// function Child() { |
205 | | -// return h(Child2, { class: 'foo' }) |
206 | | -// } |
207 | | - |
208 | | -// function Child2() { |
209 | | -// return h('div') |
210 | | -// } |
211 | | -// Child2.inheritAttrs = false |
212 | | - |
213 | | -// const root = nodeOps.createElement('div') |
214 | | -// render(h(App), root) |
215 | | - |
216 | | -// expect(serializeInner(root)).toBe(`<div parent></div>`) |
217 | | -// }) |
218 | | - |
219 | | -// test('should inherit scopeId through nested DEV_ROOT_FRAGMENT with inheritAttrs: false', async () => { |
220 | | -// const Parent = { |
221 | | -// __scopeId: 'parent', |
222 | | -// render() { |
223 | | -// return h(Child, { class: 'foo' }) |
224 | | -// }, |
225 | | -// } |
226 | | - |
227 | | -// const ok = ref(true) |
228 | | -// const Child = defineComponent({ |
229 | | -// inheritAttrs: false, |
230 | | -// render() { |
231 | | -// return ( |
232 | | -// openBlock(), |
233 | | -// createBlock( |
234 | | -// Fragment, |
235 | | -// null, |
236 | | -// [ |
237 | | -// createCommentVNode('comment1'), |
238 | | -// ok.value |
239 | | -// ? (openBlock(), createBlock('div', { key: 0 }, 'div1')) |
240 | | -// : (openBlock(), |
241 | | -// createBlock( |
242 | | -// Fragment, |
243 | | -// { key: 1 }, |
244 | | -// [ |
245 | | -// createCommentVNode('comment2'), |
246 | | -// createVNode('div', null, 'div2'), |
247 | | -// ], |
248 | | -// PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT, |
249 | | -// )), |
250 | | -// ], |
251 | | -// PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT, |
252 | | -// ) |
253 | | -// ) |
254 | | -// }, |
255 | | -// }) |
256 | | - |
257 | | -// const root = nodeOps.createElement('div') |
258 | | -// render(h(Parent), root) |
259 | | -// expect(serializeInner(root)).toBe(`<!--comment1--><div parent>div1</div>`) |
260 | | - |
261 | | -// ok.value = false |
262 | | -// await nextTick() |
263 | | -// expect(serializeInner(root)).toBe( |
264 | | -// `<!--comment1--><!--comment2--><div parent>div2</div>`, |
265 | | -// ) |
266 | | -// }) |
267 | | -// }) |
| 1 | +import { |
| 2 | + createComponent, |
| 3 | + createSlot, |
| 4 | + defineVaporComponent, |
| 5 | + setInsertionState, |
| 6 | + template, |
| 7 | +} from '../src' |
| 8 | +import { makeRender } from './_utils' |
| 9 | + |
| 10 | +const define = makeRender() |
| 11 | + |
| 12 | +describe('scopeId', () => { |
| 13 | + test('should attach scopeId to child component', () => { |
| 14 | + const Child = defineVaporComponent({ |
| 15 | + __scopeId: 'child', |
| 16 | + setup() { |
| 17 | + return template('<div child></div>', true)() |
| 18 | + }, |
| 19 | + }) |
| 20 | + |
| 21 | + const { html } = define({ |
| 22 | + __scopeId: 'parent', |
| 23 | + setup() { |
| 24 | + const t0 = template('<div parent></div>', true) |
| 25 | + const n1 = t0() as any |
| 26 | + setInsertionState(n1) |
| 27 | + createComponent(Child) |
| 28 | + return n1 |
| 29 | + }, |
| 30 | + }).render() |
| 31 | + expect(html()).toBe(`<div parent=""><div child="" parent=""></div></div>`) |
| 32 | + }) |
| 33 | + |
| 34 | + test('should attach scopeId to nested child component', () => { |
| 35 | + const Child = defineVaporComponent({ |
| 36 | + __scopeId: 'child', |
| 37 | + setup() { |
| 38 | + return template('<div child></div>', true)() |
| 39 | + }, |
| 40 | + }) |
| 41 | + |
| 42 | + const Parent = defineVaporComponent({ |
| 43 | + __scopeId: 'parent', |
| 44 | + setup() { |
| 45 | + return createComponent(Child) |
| 46 | + }, |
| 47 | + }) |
| 48 | + |
| 49 | + const { html } = define({ |
| 50 | + __scopeId: 'app', |
| 51 | + setup() { |
| 52 | + const t0 = template('<div app></div>', true) |
| 53 | + const n1 = t0() as any |
| 54 | + setInsertionState(n1) |
| 55 | + createComponent(Parent) |
| 56 | + return n1 |
| 57 | + }, |
| 58 | + }).render() |
| 59 | + expect(html()).toBe( |
| 60 | + `<div app=""><div child="" parent="" app=""></div></div>`, |
| 61 | + ) |
| 62 | + }) |
| 63 | + |
| 64 | + test.todo('should attach scopeId to suspense content', async () => {}) |
| 65 | + |
| 66 | + // :slotted basic |
| 67 | + test('should work on slots', () => { |
| 68 | + const Child = defineVaporComponent({ |
| 69 | + __scopeId: 'child', |
| 70 | + setup() { |
| 71 | + const n1 = template('<div child></div>', true)() as any |
| 72 | + setInsertionState(n1) |
| 73 | + createSlot('default', null) |
| 74 | + return n1 |
| 75 | + }, |
| 76 | + }) |
| 77 | + |
| 78 | + const Child2 = defineVaporComponent({ |
| 79 | + __scopeId: 'child2', |
| 80 | + setup() { |
| 81 | + return template('<span child2></span>', true)() |
| 82 | + }, |
| 83 | + }) |
| 84 | + |
| 85 | + const { html } = define({ |
| 86 | + __scopeId: 'parent', |
| 87 | + setup() { |
| 88 | + const n2 = createComponent( |
| 89 | + Child, |
| 90 | + null, |
| 91 | + { |
| 92 | + default: () => { |
| 93 | + const n0 = template('<div parent></div>')() |
| 94 | + const n1 = createComponent(Child2) |
| 95 | + return [n0, n1] |
| 96 | + }, |
| 97 | + }, |
| 98 | + true, |
| 99 | + ) |
| 100 | + return n2 |
| 101 | + }, |
| 102 | + }).render() |
| 103 | + |
| 104 | + expect(html()).toBe( |
| 105 | + `<div child="" parent="">` + |
| 106 | + `<div parent="" child-s=""></div>` + |
| 107 | + // component inside slot should have: |
| 108 | + // - scopeId from template context |
| 109 | + // - slotted scopeId from slot owner |
| 110 | + // - its own scopeId |
| 111 | + `<span child2="" child="" parent="" child-s=""></span>` + |
| 112 | + `<!--slot-->` + |
| 113 | + `</div>`, |
| 114 | + ) |
| 115 | + }) |
| 116 | + |
| 117 | + test.todo(':slotted on forwarded slots', async () => {}) |
| 118 | +}) |
0 commit comments