Skip to content

test(TransitionGroup): test for TransitionGroup #1269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 25, 2020
Merged

test(TransitionGroup): test for TransitionGroup #1269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7d8ab86
fix(TransitionGroup): fix some bug
underfin May 16, 2020
eebf65b
fix(TransitionGroup): add events test
underfin May 17, 2020
cce5959
fix: revert
underfin May 31, 2020
f656a7a
test: move transition group
yyx990803 Jun 25, 2020
9a8005f
refactor: extract shared util
yyx990803 Jun 25, 2020
58f4533
chore: rebase
yyx990803 Jun 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 8 additions & 11 deletions packages/runtime-dom/src/components/TransitionGroup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,24 +47,21 @@ const TransitionGroupImpl = {
const state = useTransitionState()
let prevChildren: VNode[]
let children: VNode[]
let hasMove: boolean | null = null

onUpdated(() => {
// children is guaranteed to exist after initial render
if (!prevChildren.length) {
return
}
const moveClass = props.moveClass || `${props.name || 'v'}-move`
// Check if move transition is needed. This check is cached per-instance.
hasMove =
hasMove === null
? (hasMove = hasCSSTransform(
prevChildren[0].el as ElementWithTransition,
instance.vnode.el as Node,
moveClass
))
: hasMove
if (!hasMove) {

if (
!hasCSSTransform(
prevChildren[0].el as ElementWithTransition,
instance.vnode.el as Node,
moveClass
)
) {
Copy link
Member Author

@underfin underfin May 31, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This need check when every update triggle.Because maybe has dynamic name which has css transform.
Well. we can reset value of hasMove when re-invoke render with returned by setup.But this can be more directly and clearly.

return
}

Expand Down
26 changes: 10 additions & 16 deletions packages/vue/__tests__/Transition.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,21 @@ import { h, createApp, Transition } from 'vue'

describe('e2e: Transition', () => {
mockWarn()
const { page, html, classList, isVisible } = setupPuppeteer()
const {
page,
html,
classList,
isVisible,
timeout,
nextFrame
} = setupPuppeteer()
const baseUrl = `file://${path.resolve(__dirname, './transition.html')}`

const duration = 50
const buffer = 5

const transitionFinish = (time = duration) => timeout(time + buffer)

const classWhenTransitionStart = () =>
page().evaluate(() => {
(document.querySelector('#toggleBtn') as any)!.click()
Expand All @@ -19,21 +28,6 @@ describe('e2e: Transition', () => {
})
})

const transitionFinish = (time = duration) =>
new Promise(r => {
setTimeout(r, time + buffer)
})

const nextFrame = () => {
return page().evaluate(() => {
return new Promise(resolve => {
requestAnimationFrame(() => {
requestAnimationFrame(resolve)
})
})
})
}

beforeEach(async () => {
await page().goto(baseUrl)
await page().waitFor('#app')
Expand Down
Loading