Skip to content

Commit 1f80ee7

Browse files
edison1105edison1105
committed
test: add e2e tests
1 parent 5a45e7a commit 1f80ee7

File tree

10 files changed

+385
-80
lines changed

10 files changed

+385
-80
lines changed

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

+239
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
import path from 'node:path'
2+
import {
3+
E2E_TIMEOUT,
4+
setupPuppeteer,
5+
} from '../../../packages/vue/__tests__/e2e/e2eUtils'
6+
import connect from 'connect'
7+
import sirv from 'sirv'
8+
import { expect } from 'vitest'
9+
const { page, nextFrame, timeout, html, transitionStart, waitForElement } =
10+
setupPuppeteer()
11+
12+
const duration = process.env.CI ? 200 : 50
13+
const buffer = process.env.CI ? 50 : 20
14+
const transitionFinish = (time = duration) => timeout(time + buffer)
15+
16+
describe('vapor transition-group', () => {
17+
let server: any
18+
const port = '8196'
19+
beforeAll(() => {
20+
server = connect()
21+
.use(sirv(path.resolve(import.meta.dirname, '../dist')))
22+
.listen(port)
23+
process.on('SIGTERM', () => server && server.close())
24+
})
25+
26+
afterAll(() => {
27+
server.close()
28+
})
29+
30+
beforeEach(async () => {
31+
const baseUrl = `http://localhost:${port}/transition-group/`
32+
await page().goto(baseUrl)
33+
await page().waitForSelector('#app')
34+
})
35+
36+
test(
37+
'enter',
38+
async () => {
39+
const btnSelector = '.enter > button'
40+
const containerSelector = '.enter > div'
41+
42+
expect(await html(containerSelector)).toBe(
43+
`<div class="test">a</div>` +
44+
`<div class="test">b</div>` +
45+
`<div class="test">c</div>`,
46+
)
47+
48+
expect(
49+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
50+
).toBe(
51+
`<div class="test">a</div>` +
52+
`<div class="test">b</div>` +
53+
`<div class="test">c</div>` +
54+
`<div class="test test-enter-from test-enter-active">d</div>` +
55+
`<div class="test test-enter-from test-enter-active">e</div>`,
56+
)
57+
58+
await nextFrame()
59+
expect(await html(containerSelector)).toBe(
60+
`<div class="test">a</div>` +
61+
`<div class="test">b</div>` +
62+
`<div class="test">c</div>` +
63+
`<div class="test test-enter-active test-enter-to">d</div>` +
64+
`<div class="test test-enter-active test-enter-to">e</div>`,
65+
)
66+
67+
await transitionFinish()
68+
expect(await html(containerSelector)).toBe(
69+
`<div class="test">a</div>` +
70+
`<div class="test">b</div>` +
71+
`<div class="test">c</div>` +
72+
`<div class="test">d</div>` +
73+
`<div class="test">e</div>`,
74+
)
75+
},
76+
E2E_TIMEOUT,
77+
)
78+
79+
test(
80+
'leave',
81+
async () => {
82+
const btnSelector = '.leave > button'
83+
const containerSelector = '.leave > div'
84+
85+
expect(await html(containerSelector)).toBe(
86+
`<div class="test">a</div>` +
87+
`<div class="test">b</div>` +
88+
`<div class="test">c</div>`,
89+
)
90+
91+
expect(
92+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
93+
).toBe(
94+
`<div class="test test-leave-from test-leave-active">a</div>` +
95+
`<div class="test">b</div>` +
96+
`<div class="test test-leave-from test-leave-active">c</div>`,
97+
)
98+
99+
await nextFrame()
100+
expect(await html(containerSelector)).toBe(
101+
`<div class="test test-leave-active test-leave-to">a</div>` +
102+
`<div class="test">b</div>` +
103+
`<div class="test test-leave-active test-leave-to">c</div>`,
104+
)
105+
await transitionFinish()
106+
expect(await html(containerSelector)).toBe(`<div class="test">b</div>`)
107+
},
108+
E2E_TIMEOUT,
109+
)
110+
111+
test(
112+
'enter + leave',
113+
async () => {
114+
const btnSelector = '.enter-leave > button'
115+
const containerSelector = '.enter-leave > div'
116+
117+
expect(await html(containerSelector)).toBe(
118+
`<div class="test">a</div>` +
119+
`<div class="test">b</div>` +
120+
`<div class="test">c</div>`,
121+
)
122+
123+
expect(
124+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
125+
).toBe(
126+
`<div class="test test-leave-from test-leave-active">a</div>` +
127+
`<div class="test">b</div>` +
128+
`<div class="test">c</div>` +
129+
`<div class="test test-enter-from test-enter-active">d</div>`,
130+
)
131+
132+
await nextFrame()
133+
expect(await html(containerSelector)).toBe(
134+
`<div class="test test-leave-active test-leave-to">a</div>` +
135+
`<div class="test">b</div>` +
136+
`<div class="test">c</div>` +
137+
`<div class="test test-enter-active test-enter-to">d</div>`,
138+
)
139+
await transitionFinish()
140+
expect(await html(containerSelector)).toBe(
141+
`<div class="test">b</div>` +
142+
`<div class="test">c</div>` +
143+
`<div class="test">d</div>`,
144+
)
145+
},
146+
E2E_TIMEOUT,
147+
)
148+
149+
test(
150+
'appear',
151+
async () => {
152+
const btnSelector = '.appear > button'
153+
const containerSelector = '.appear > div'
154+
const childSelector = `${containerSelector} > div`
155+
156+
// appear
157+
await waitForElement(childSelector, 'a', ['test-appear-active'])
158+
159+
await transitionFinish()
160+
expect(await html(containerSelector)).toBe(
161+
`<div class="test">a</div>` +
162+
`<div class="test">b</div>` +
163+
`<div class="test">c</div>`,
164+
)
165+
166+
// enter
167+
expect(
168+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
169+
).toBe(
170+
`<div class="test">a</div>` +
171+
`<div class="test">b</div>` +
172+
`<div class="test">c</div>` +
173+
`<div class="test test-enter-from test-enter-active">d</div>` +
174+
`<div class="test test-enter-from test-enter-active">e</div>`,
175+
)
176+
177+
await nextFrame()
178+
expect(await html(containerSelector)).toBe(
179+
`<div class="test">a</div>` +
180+
`<div class="test">b</div>` +
181+
`<div class="test">c</div>` +
182+
`<div class="test test-enter-active test-enter-to">d</div>` +
183+
`<div class="test test-enter-active test-enter-to">e</div>`,
184+
)
185+
186+
await transitionFinish()
187+
expect(await html(containerSelector)).toBe(
188+
`<div class="test">a</div>` +
189+
`<div class="test">b</div>` +
190+
`<div class="test">c</div>` +
191+
`<div class="test">d</div>` +
192+
`<div class="test">e</div>`,
193+
)
194+
},
195+
E2E_TIMEOUT,
196+
)
197+
198+
test(
199+
'move',
200+
async () => {
201+
const btnSelector = '.move > button'
202+
const containerSelector = '.move > div'
203+
204+
expect(await html(containerSelector)).toBe(
205+
`<div class="test">a</div>` +
206+
`<div class="test">b</div>` +
207+
`<div class="test">c</div>`,
208+
)
209+
210+
expect(
211+
(await transitionStart(btnSelector, containerSelector)).innerHTML,
212+
).toBe(
213+
`<div class="test group-enter-from group-enter-active">d</div>` +
214+
`<div class="test">b</div>` +
215+
`<div class="test group-move" style="">a</div>` +
216+
`<div class="test group-leave-from group-leave-active group-move" style="">c</div>`,
217+
)
218+
219+
await nextFrame()
220+
expect(await html(containerSelector)).toBe(
221+
`<div class="test group-enter-active group-enter-to">d</div>` +
222+
`<div class="test">b</div>` +
223+
`<div class="test group-move" style="">a</div>` +
224+
`<div class="test group-leave-active group-move group-leave-to" style="">c</div>`,
225+
)
226+
await transitionFinish(duration * 2)
227+
expect(await html(containerSelector)).toBe(
228+
`<div class="test">d</div>` +
229+
`<div class="test">b</div>` +
230+
`<div class="test" style="">a</div>`,
231+
)
232+
},
233+
E2E_TIMEOUT,
234+
)
235+
236+
test.todo('dynamic name', async () => {})
237+
test.todo('events', async () => {})
238+
test.todo('warn unkeyed children', async () => {})
239+
})

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
<a href="/interop/">VDOM / Vapor interop</a>
22
<a href="/todomvc/">Vapor TodoMVC</a>
33
<a href="/transition/">Vapor Transition</a>
4+
<a href="/transition-group/">Vapor TransitionGroup</a>

‎packages-private/vapor-e2e-test/transition-group/App.vue

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script vapor lang="ts">
2+
import { ref } from 'vue'
3+
const items = ref(['a', 'b', 'c'])
4+
const enterClick = () => items.value.push('d', 'e')
5+
const leaveClick = () => items.value = ['b']
6+
const enterLeaveClick = () => items.value = ['b', 'c', 'd']
7+
const moveClick = () => items.value = ['d', 'b', 'a']
8+
</script>
9+
10+
<template>
11+
<div>
12+
<div class="enter">
13+
<button @click="enterClick">enter button</button>
14+
<div>
15+
<transition-group name="test">
16+
<div v-for="item in items" :key="item" class="test">{{ item }}</div>
17+
</transition-group>
18+
</div>
19+
</div>
20+
<div class="leave">
21+
<button @click="leaveClick">leave button</button>
22+
<div>
23+
<transition-group name="test">
24+
<div v-for="item in items" :key="item" class="test">{{ item }}</div>
25+
</transition-group>
26+
</div>
27+
</div>
28+
<div class="enter-leave">
29+
<button @click="enterLeaveClick">enter-leave button</button>
30+
<div>
31+
<transition-group name="test">
32+
<div v-for="item in items" :key="item" class="test">{{ item }}</div>
33+
</transition-group>
34+
</div>
35+
</div>
36+
<div class="appear">
37+
<button @click="enterClick">appear button</button>
38+
<div>
39+
<transition-group appear appear-from-class="test-appear-from" appear-to-class="test-appear-to"
40+
appear-active-class="test-appear-active" name="test">
41+
<div v-for="item in items" :key="item" class="test">{{ item }}</div>
42+
</transition-group>
43+
</div>
44+
</div>
45+
<div class="move">
46+
<button @click="moveClick">move button</button>
47+
<div>
48+
<transition-group name="group">
49+
<div v-for="item in items" :key="item" class="test">{{ item }}</div>
50+
</transition-group>
51+
</div>
52+
</div>
53+
</div>
54+
</template>

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

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<script type="module" src="./main.ts"></script>
2+
<div id="app"></div>

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createVaporApp, vaporInteropPlugin } from 'vue'
2+
import App from './App.vue'
3+
import '../../../packages/vue/__tests__/e2e/style.css'
4+
5+
createVaporApp(App).mount('#app')

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createVaporApp, vaporInteropPlugin } from 'vue'
22
import App from './App.vue'
3+
import '../../../packages/vue/__tests__/e2e/style.css'
34
import './style.css'
45

56
createVaporApp(App).use(vaporInteropPlugin).mount('#app')

‎packages-private/vapor-e2e-test/vite.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export default defineConfig({
1515
interop: resolve(import.meta.dirname, 'interop/index.html'),
1616
todomvc: resolve(import.meta.dirname, 'todomvc/index.html'),
1717
transition: resolve(import.meta.dirname, 'transition/index.html'),
18+
transitionGroup: resolve(
19+
import.meta.dirname,
20+
'transition-group/index.html',
21+
),
1822
},
1923
},
2024
},

‎packages/compiler-vapor/src/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export function isTransitionTag(tag: string): boolean {
115115
}
116116

117117
export function isTransitionGroupTag(tag: string): boolean {
118-
tag = tag.toLowerCase()
118+
tag = tag.toLowerCase().replace(/-/g, '')
119119
return tag === 'transitiongroup' || tag === 'vaportransitiongroup'
120120
}
121121

0 commit comments

Comments
 (0)