Skip to content

Commit 3048952

Browse files
edison1105edison1105
committed
test: add more tests
1 parent bbe4452 commit 3048952

File tree

2 files changed

+440
-9
lines changed

2 files changed

+440
-9
lines changed

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

Lines changed: 335 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -903,25 +903,351 @@ describe('vapor transition', () => {
903903
)
904904
})
905905

906+
describe.todo('transition with KeepAlive', () => {})
907+
describe.todo('transition with Suspense', () => {})
908+
describe.todo('transition with Teleport', () => {})
909+
906910
describe('transition with v-show', () => {
907-
test.todo('named transition with v-show', async () => {}, E2E_TIMEOUT)
908-
test.todo('transition events with v-show', async () => {}, E2E_TIMEOUT)
909-
test.todo('onLeaveCancelled (v-show only)', async () => {}, E2E_TIMEOUT)
910-
test.todo('transition on appear with v-show', async () => {}, E2E_TIMEOUT)
911+
test(
912+
'named transition with v-show',
913+
async () => {
914+
const btnSelector = '.show-named > button'
915+
const containerSelector = '.show-named > div'
916+
const childSelector = `${containerSelector} > div`
917+
918+
expect(await html(containerSelector)).toBe(
919+
'<div class="test">content</div>',
920+
)
921+
expect(await isVisible(childSelector)).toBe(true)
922+
923+
// leave
924+
expect(
925+
(await transitionStart(btnSelector, childSelector)).classNames,
926+
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
927+
await nextFrame()
928+
expect(await classList(childSelector)).toStrictEqual([
929+
'test',
930+
'test-leave-active',
931+
'test-leave-to',
932+
])
933+
await transitionFinish()
934+
expect(await isVisible(childSelector)).toBe(false)
935+
936+
// enter
937+
expect(
938+
(await transitionStart(btnSelector, childSelector)).classNames,
939+
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
940+
await nextFrame()
941+
expect(await classList(childSelector)).toStrictEqual([
942+
'test',
943+
'test-enter-active',
944+
'test-enter-to',
945+
])
946+
await transitionFinish()
947+
expect(await html(containerSelector)).toBe(
948+
'<div class="test" style="">content</div>',
949+
)
950+
},
951+
E2E_TIMEOUT,
952+
)
953+
954+
test(
955+
'transition events with v-show',
956+
async () => {
957+
const btnSelector = '.show-events > button'
958+
const containerSelector = '.show-events > div'
959+
const childSelector = `${containerSelector} > div`
960+
961+
expect(await html(containerSelector)).toBe(
962+
'<div class="test">content</div>',
963+
)
964+
965+
// leave
966+
expect(
967+
(await transitionStart(btnSelector, childSelector)).classNames,
968+
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
969+
970+
let calls = await page().evaluate(() => {
971+
return (window as any).getCalls('show')
972+
})
973+
expect(calls).toStrictEqual(['beforeLeave', 'onLeave'])
974+
await nextFrame()
975+
expect(await classList(childSelector)).toStrictEqual([
976+
'test',
977+
'test-leave-active',
978+
'test-leave-to',
979+
])
980+
calls = await page().evaluate(() => {
981+
return (window as any).getCalls('show')
982+
})
983+
expect(calls).not.contain('afterLeave')
984+
await transitionFinish()
985+
expect(await isVisible(childSelector)).toBe(false)
986+
calls = await page().evaluate(() => {
987+
return (window as any).getCalls('show')
988+
})
989+
expect(calls).toStrictEqual(['beforeLeave', 'onLeave', 'afterLeave'])
990+
991+
// clear calls
992+
await page().evaluate(() => {
993+
;(window as any).resetCalls('show')
994+
})
995+
996+
// enter
997+
expect(
998+
(await transitionStart(btnSelector, childSelector)).classNames,
999+
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
1000+
await nextFrame()
1001+
expect(await classList(childSelector)).toStrictEqual([
1002+
'test',
1003+
'test-enter-active',
1004+
'test-enter-to',
1005+
])
1006+
calls = await page().evaluate(() => {
1007+
return (window as any).getCalls('show')
1008+
})
1009+
expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
1010+
await transitionFinish()
1011+
expect(await html(containerSelector)).toBe(
1012+
'<div class="test" style="">content</div>',
1013+
)
1014+
calls = await page().evaluate(() => {
1015+
return (window as any).getCalls('show')
1016+
})
1017+
expect(calls).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
1018+
},
1019+
E2E_TIMEOUT,
1020+
)
1021+
1022+
test(
1023+
'onLeaveCancelled (v-show only)',
1024+
async () => {
1025+
const btnSelector = '.show-leave-cancelled > button'
1026+
const containerSelector = '.show-leave-cancelled > div'
1027+
const childSelector = `${containerSelector} > div`
1028+
1029+
expect(await html(containerSelector)).toBe(
1030+
'<div class="test">content</div>',
1031+
)
1032+
1033+
// leave
1034+
expect(
1035+
(await transitionStart(btnSelector, childSelector)).classNames,
1036+
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
1037+
await nextFrame()
1038+
expect(await classList(childSelector)).toStrictEqual([
1039+
'test',
1040+
'test-leave-active',
1041+
'test-leave-to',
1042+
])
1043+
1044+
// cancel (enter)
1045+
expect(
1046+
(await transitionStart(btnSelector, childSelector)).classNames,
1047+
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
1048+
let calls = await page().evaluate(() => {
1049+
return (window as any).getCalls('showLeaveCancel')
1050+
})
1051+
expect(calls).toStrictEqual(['leaveCancelled'])
1052+
await nextFrame()
1053+
expect(await classList(childSelector)).toStrictEqual([
1054+
'test',
1055+
'test-enter-active',
1056+
'test-enter-to',
1057+
])
1058+
await transitionFinish()
1059+
expect(await isVisible(childSelector)).toBe(true)
1060+
},
1061+
E2E_TIMEOUT,
1062+
)
1063+
1064+
test.todo(
1065+
'transition on appear with v-show',
1066+
async () => {
1067+
const btnSelector = '.show-appear > button'
1068+
const containerSelector = '.show-appear > div'
1069+
const childSelector = `${containerSelector} > div`
1070+
},
1071+
E2E_TIMEOUT,
1072+
)
1073+
9111074
test.todo(
9121075
'transition events should not call onEnter with v-show false',
9131076
async () => {},
9141077
E2E_TIMEOUT,
9151078
)
1079+
9161080
test.todo('transition on appear with v-show', async () => {}, E2E_TIMEOUT)
9171081
})
9181082

9191083
describe('explicit durations', () => {
920-
test.todo('single value', async () => {}, E2E_TIMEOUT)
921-
test.todo('enter with explicit durations', async () => {}, E2E_TIMEOUT)
922-
test.todo('leave with explicit durations', async () => {}, E2E_TIMEOUT)
923-
test.todo('separate enter and leave', async () => {}, E2E_TIMEOUT)
924-
test.todo('warn invalid durations', async () => {}, E2E_TIMEOUT)
1084+
test(
1085+
'single value',
1086+
async () => {
1087+
const btnSelector = '.duration-single-value > button'
1088+
const containerSelector = '.duration-single-value > div'
1089+
const childSelector = `${containerSelector} > div`
1090+
1091+
expect(await html(containerSelector)).toBe(
1092+
'<div class="test">content</div>',
1093+
)
1094+
1095+
// leave
1096+
expect(
1097+
(await transitionStart(btnSelector, childSelector)).classNames,
1098+
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
1099+
await nextFrame()
1100+
expect(await classList(childSelector)).toStrictEqual([
1101+
'test',
1102+
'test-leave-active',
1103+
'test-leave-to',
1104+
])
1105+
await transitionFinish(duration * 2)
1106+
expect(await html(containerSelector)).toBe('')
1107+
1108+
// enter
1109+
expect(
1110+
(await transitionStart(btnSelector, childSelector)).classNames,
1111+
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
1112+
await nextFrame()
1113+
expect(await classList(childSelector)).toStrictEqual([
1114+
'test',
1115+
'test-enter-active',
1116+
'test-enter-to',
1117+
])
1118+
await transitionFinish(duration * 2)
1119+
expect(await html(containerSelector)).toBe(
1120+
'<div class="test">content</div>',
1121+
)
1122+
},
1123+
E2E_TIMEOUT,
1124+
)
1125+
1126+
test(
1127+
'enter with explicit durations',
1128+
async () => {
1129+
const btnSelector = '.duration-enter > button'
1130+
const containerSelector = '.duration-enter > div'
1131+
const childSelector = `${containerSelector} > div`
1132+
1133+
expect(await html(containerSelector)).toBe(
1134+
'<div class="test">content</div>',
1135+
)
1136+
1137+
// leave
1138+
expect(
1139+
(await transitionStart(btnSelector, childSelector)).classNames,
1140+
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
1141+
await nextFrame()
1142+
expect(await classList(childSelector)).toStrictEqual([
1143+
'test',
1144+
'test-leave-active',
1145+
'test-leave-to',
1146+
])
1147+
await transitionFinish()
1148+
expect(await html(containerSelector)).toBe('')
1149+
1150+
// enter
1151+
expect(
1152+
(await transitionStart(btnSelector, childSelector)).classNames,
1153+
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
1154+
await nextFrame()
1155+
expect(await classList(childSelector)).toStrictEqual([
1156+
'test',
1157+
'test-enter-active',
1158+
'test-enter-to',
1159+
])
1160+
await transitionFinish(duration * 2)
1161+
expect(await html(containerSelector)).toBe(
1162+
'<div class="test">content</div>',
1163+
)
1164+
},
1165+
E2E_TIMEOUT,
1166+
)
1167+
1168+
test(
1169+
'leave with explicit durations',
1170+
async () => {
1171+
const btnSelector = '.duration-leave > button'
1172+
const containerSelector = '.duration-leave > div'
1173+
const childSelector = `${containerSelector} > div`
1174+
1175+
expect(await html(containerSelector)).toBe(
1176+
'<div class="test">content</div>',
1177+
)
1178+
1179+
// leave
1180+
expect(
1181+
(await transitionStart(btnSelector, childSelector)).classNames,
1182+
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
1183+
await nextFrame()
1184+
expect(await classList(childSelector)).toStrictEqual([
1185+
'test',
1186+
'test-leave-active',
1187+
'test-leave-to',
1188+
])
1189+
await transitionFinish(duration * 2)
1190+
expect(await html(containerSelector)).toBe('')
1191+
1192+
// enter
1193+
expect(
1194+
(await transitionStart(btnSelector, childSelector)).classNames,
1195+
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
1196+
await nextFrame()
1197+
expect(await classList(childSelector)).toStrictEqual([
1198+
'test',
1199+
'test-enter-active',
1200+
'test-enter-to',
1201+
])
1202+
await transitionFinish()
1203+
expect(await html(containerSelector)).toBe(
1204+
'<div class="test">content</div>',
1205+
)
1206+
},
1207+
E2E_TIMEOUT,
1208+
)
1209+
1210+
test(
1211+
'separate enter and leave',
1212+
async () => {
1213+
const btnSelector = '.duration-enter-leave > button'
1214+
const containerSelector = '.duration-enter-leave > div'
1215+
const childSelector = `${containerSelector} > div`
1216+
1217+
expect(await html(containerSelector)).toBe(
1218+
'<div class="test">content</div>',
1219+
)
1220+
1221+
// leave
1222+
expect(
1223+
(await transitionStart(btnSelector, childSelector)).classNames,
1224+
).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
1225+
await nextFrame()
1226+
expect(await classList(childSelector)).toStrictEqual([
1227+
'test',
1228+
'test-leave-active',
1229+
'test-leave-to',
1230+
])
1231+
await transitionFinish(duration * 2)
1232+
expect(await html(containerSelector)).toBe('')
1233+
1234+
// enter
1235+
expect(
1236+
(await transitionStart(btnSelector, childSelector)).classNames,
1237+
).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
1238+
await nextFrame()
1239+
expect(await classList(childSelector)).toStrictEqual([
1240+
'test',
1241+
'test-enter-active',
1242+
'test-enter-to',
1243+
])
1244+
await transitionFinish(duration * 4)
1245+
expect(await html(containerSelector)).toBe(
1246+
'<div class="test">content</div>',
1247+
)
1248+
},
1249+
E2E_TIMEOUT,
1250+
)
9251251
})
9261252

9271253
test(

0 commit comments

Comments
 (0)