Skip to content

Commit bba328a

Browse files
edison1105edison1105
authored
feat(vapor): vapor transition + transition-group (#12962)
1 parent c4f41ee commit bba328a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+4837
-282
lines changed

‎packages-private/vapor-e2e-test/__tests__/transition-group.spec.ts‎

Lines changed: 406 additions & 0 deletions
Large diffs are not rendered by default.

‎packages-private/vapor-e2e-test/__tests__/transition.spec.ts‎

Lines changed: 1660 additions & 0 deletions
Large diffs are not rendered by default.

‎packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts‎

Lines changed: 180 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,23 @@ import {
55
} from '../../../packages/vue/__tests__/e2e/e2eUtils'
66
import connect from 'connect'
77
import sirv from 'sirv'
8+
const {
9+
page,
10+
click,
11+
text,
12+
enterValue,
13+
html,
14+
transitionStart,
15+
waitForElement,
16+
nextFrame,
17+
timeout,
18+
} = setupPuppeteer()
819

9-
describe('vdom / vapor interop', () => {
10-
const { page, click, text, enterValue } = setupPuppeteer()
20+
const duration = process.env.CI ? 200 : 50
21+
const buffer = process.env.CI ? 50 : 20
22+
const transitionFinish = (time = duration) => timeout(time + buffer)
1123

24+
describe('vdom / vapor interop', () => {
1225
let server: any
1326
const port = '8193'
1427
beforeAll(() => {
@@ -22,12 +35,15 @@ describe('vdom / vapor interop', () => {
2235
server.close()
2336
})
2437

38+
beforeEach(async () => {
39+
const baseUrl = `http://localhost:${port}/interop/`
40+
await page().goto(baseUrl)
41+
await page().waitForSelector('#app')
42+
})
43+
2544
test(
2645
'should work',
2746
async () => {
28-
const baseUrl = `http://localhost:${port}/interop/`
29-
await page().goto(baseUrl)
30-
3147
expect(await text('.vapor > h2')).toContain('Vapor component in VDOM')
3248

3349
expect(await text('.vapor-prop')).toContain('hello')
@@ -81,4 +97,163 @@ describe('vdom / vapor interop', () => {
8197
},
8298
E2E_TIMEOUT,
8399
)
100+
101+
describe('vdom transition', () => {
102+
test(
103+
'render vapor component',
104+
async () => {
105+
const btnSelector = '.trans-vapor > button'
106+
const containerSelector = '.trans-vapor > div'
107+
108+
expect(await html(containerSelector)).toBe(`<div>vapor compA</div>`)
109+
110+
// comp leave
111+
expect(
112+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
113+
).toBe(
114+
`<div class="v-leave-from v-leave-active">vapor compA</div><!---->`,
115+
)
116+
117+
await nextFrame()
118+
expect(await html(containerSelector)).toBe(
119+
`<div class="v-leave-active v-leave-to">vapor compA</div><!---->`,
120+
)
121+
122+
await transitionFinish()
123+
expect(await html(containerSelector)).toBe(`<!---->`)
124+
125+
// comp enter
126+
expect(
127+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
128+
).toBe(`<div class="v-enter-from v-enter-active">vapor compA</div>`)
129+
130+
await nextFrame()
131+
expect(await html(containerSelector)).toBe(
132+
`<div class="v-enter-active v-enter-to">vapor compA</div>`,
133+
)
134+
135+
await transitionFinish()
136+
expect(await html(containerSelector)).toBe(
137+
`<div class="">vapor compA</div>`,
138+
)
139+
},
140+
E2E_TIMEOUT,
141+
)
142+
143+
test(
144+
'switch between vdom/vapor component (out-in mode)',
145+
async () => {
146+
const btnSelector = '.trans-vdom-vapor-out-in > button'
147+
const containerSelector = '.trans-vdom-vapor-out-in > div'
148+
const childSelector = `${containerSelector} > div`
149+
150+
expect(await html(containerSelector)).toBe(`<div>vdom comp</div>`)
151+
152+
// switch to vapor comp
153+
// vdom comp leave
154+
expect(
155+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
156+
).toBe(
157+
`<div class="fade-leave-from fade-leave-active">vdom comp</div><!---->`,
158+
)
159+
160+
await nextFrame()
161+
expect(await html(containerSelector)).toBe(
162+
`<div class="fade-leave-active fade-leave-to">vdom comp</div><!---->`,
163+
)
164+
165+
// vapor comp enter
166+
await waitForElement(childSelector, 'vapor compA', [
167+
'fade-enter-from',
168+
'fade-enter-active',
169+
])
170+
171+
await nextFrame()
172+
expect(await html(containerSelector)).toBe(
173+
`<div class="fade-enter-active fade-enter-to">vapor compA</div>`,
174+
)
175+
176+
await transitionFinish()
177+
expect(await html(containerSelector)).toBe(
178+
`<div class="">vapor compA</div>`,
179+
)
180+
181+
// switch to vdom comp
182+
// vapor comp leave
183+
expect(
184+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
185+
).toBe(
186+
`<div class="fade-leave-from fade-leave-active">vapor compA</div><!---->`,
187+
)
188+
189+
await nextFrame()
190+
expect(await html(containerSelector)).toBe(
191+
`<div class="fade-leave-active fade-leave-to">vapor compA</div><!---->`,
192+
)
193+
194+
// vdom comp enter
195+
await waitForElement(childSelector, 'vdom comp', [
196+
'fade-enter-from',
197+
'fade-enter-active',
198+
])
199+
200+
await nextFrame()
201+
expect(await html(containerSelector)).toBe(
202+
`<div class="fade-enter-active fade-enter-to">vdom comp</div>`,
203+
)
204+
205+
await transitionFinish()
206+
expect(await html(containerSelector)).toBe(
207+
`<div class="">vdom comp</div>`,
208+
)
209+
},
210+
E2E_TIMEOUT,
211+
)
212+
})
213+
214+
describe('vdom transition-group', () => {
215+
test(
216+
'render vapor component',
217+
async () => {
218+
const btnSelector = '.trans-group-vapor > button'
219+
const containerSelector = '.trans-group-vapor > div'
220+
221+
expect(await html(containerSelector)).toBe(
222+
`<div><div>a</div></div>` +
223+
`<div><div>b</div></div>` +
224+
`<div><div>c</div></div>`,
225+
)
226+
227+
// insert
228+
expect(
229+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
230+
).toBe(
231+
`<div><div>a</div></div>` +
232+
`<div><div>b</div></div>` +
233+
`<div><div>c</div></div>` +
234+
`<div class="test-enter-from test-enter-active"><div>d</div></div>` +
235+
`<div class="test-enter-from test-enter-active"><div>e</div></div>`,
236+
)
237+
238+
await nextFrame()
239+
expect(await html(containerSelector)).toBe(
240+
`<div><div>a</div></div>` +
241+
`<div><div>b</div></div>` +
242+
`<div><div>c</div></div>` +
243+
`<div class="test-enter-active test-enter-to"><div>d</div></div>` +
244+
`<div class="test-enter-active test-enter-to"><div>e</div></div>`,
245+
)
246+
247+
await transitionFinish()
248+
expect(await html(containerSelector)).toBe(
249+
`<div><div>a</div></div>` +
250+
`<div><div>b</div></div>` +
251+
`<div><div>c</div></div>` +
252+
`<div class=""><div>d</div></div>` +
253+
`<div class=""><div>e</div></div>`,
254+
)
255+
},
256+
E2E_TIMEOUT,
257+
)
258+
})
84259
})

‎packages-private/vapor-e2e-test/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
<a href="/interop/">VDOM / Vapor interop</a>
22
<a href="/todomvc/">Vapor TodoMVC</a>
3+
<a href="/transition/">Vapor Transition</a>
4+
<a href="/transition-group/">Vapor TransitionGroup</a>
5+
6+
<style>
7+
a {
8+
display: block;
9+
margin: 10px;
10+
}
11+
</style>

‎packages-private/vapor-e2e-test/interop/App.vue‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
2+
import { ref, shallowRef } from 'vue'
33
import VaporComp from './VaporComp.vue'
4+
import VaporCompA from '../transition/components/VaporCompA.vue'
5+
import VdomComp from '../transition/components/VdomComp.vue'
6+
import VaporSlot from '../transition/components/VaporSlot.vue'
47
58
const msg = ref('hello')
69
const passSlot = ref(true)
10+
11+
const toggleVapor = ref(true)
12+
const interopComponent = shallowRef(VdomComp)
13+
function toggleInteropComponent() {
14+
interopComponent.value =
15+
interopComponent.value === VaporCompA ? VdomComp : VaporCompA
16+
}
17+
18+
const items = ref(['a', 'b', 'c'])
19+
const enterClick = () => items.value.push('d', 'e')
720
</script>
821

922
<template>
@@ -19,4 +32,41 @@ const passSlot = ref(true)
1932

2033
<template #test v-if="passSlot">A test slot</template>
2134
</VaporComp>
35+
36+
<!-- transition interop -->
37+
<div>
38+
<div class="trans-vapor">
39+
<button @click="toggleVapor = !toggleVapor">
40+
toggle vapor component
41+
</button>
42+
<div>
43+
<Transition>
44+
<VaporCompA v-if="toggleVapor" />
45+
</Transition>
46+
</div>
47+
</div>
48+
<div class="trans-vdom-vapor-out-in">
49+
<button @click="toggleInteropComponent">
50+
switch between vdom/vapor component out-in mode
51+
</button>
52+
<div>
53+
<Transition name="fade" mode="out-in">
54+
<component :is="interopComponent"></component>
55+
</Transition>
56+
</div>
57+
</div>
58+
</div>
59+
<!-- transition-group interop -->
60+
<div>
61+
<div class="trans-group-vapor">
62+
<button @click="enterClick">insert items</button>
63+
<div>
64+
<transition-group name="test">
65+
<VaporSlot v-for="item in items" :key="item">
66+
<div>{{ item }}</div>
67+
</VaporSlot>
68+
</transition-group>
69+
</div>
70+
</div>
71+
</div>
2272
</template>

‎packages-private/vapor-e2e-test/interop/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { createApp, vaporInteropPlugin } from 'vue'
22
import App from './App.vue'
3+
import '../transition/style.css'
34

45
createApp(App).use(vaporInteropPlugin).mount('#app')

0 commit comments

Comments
 (0)