Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(vue-app): use child transition name when navigating to parent (#6946
- Loading branch information
Showing
11 changed files
with
246 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import Browser from '../utils/browser' | ||
import { loadFixture, getPort, Nuxt } from '../utils' | ||
|
||
let port | ||
const browser = new Browser() | ||
const url = route => 'http://localhost:' + port + route | ||
|
||
let nuxt = null | ||
let page = null | ||
|
||
const parseEvents = async (page) => { | ||
const events = await page.evaluate(() => [...document.querySelectorAll('#transition-events li')].map(li => li.textContent)) | ||
return events.map(event => event.split('|')) | ||
} | ||
|
||
describe('page transitions (browser)', () => { | ||
beforeAll(async () => { | ||
const config = await loadFixture('page-transitions') | ||
nuxt = new Nuxt(config) | ||
await nuxt.ready() | ||
|
||
port = await getPort() | ||
await nuxt.server.listen(port, 'localhost') | ||
|
||
await browser.start({ | ||
// slowMo: 50, | ||
// headless: false | ||
}) | ||
}) | ||
|
||
test('Open /', async () => { | ||
page = await browser.page(url('/')) | ||
|
||
expect(await page.$text('h1')).toBe('Index page') | ||
}) | ||
|
||
test('Root page callbacks', async () => { | ||
await page.nuxt.navigate('/callbacks') | ||
const events = await parseEvents(page) | ||
expect(events).toEqual( | ||
[ | ||
['index', 'beforeLeave'], | ||
['index', 'leave'], | ||
['index', 'afterLeave'], | ||
['callbacks', 'beforeEnter'], | ||
['callbacks', 'enter'], | ||
['callbacks', 'afterEnter'] | ||
] | ||
) | ||
}) | ||
|
||
test('Parent -> Child page callbacks', async () => { | ||
await page.nuxt.navigate('/callbacks/child') | ||
const events = await parseEvents(page) | ||
expect(events).toEqual( | ||
[ | ||
['callbacks-child', 'beforeEnter'], | ||
['callbacks-child', 'enter'], | ||
['callbacks-child', 'afterEnter'] | ||
] | ||
) | ||
}) | ||
|
||
test('Child -> Parent page callbacks', async () => { | ||
await page.nuxt.navigate('/callbacks') | ||
const events = await parseEvents(page) | ||
expect(events).toEqual( | ||
[ | ||
['callbacks-child', 'beforeLeave'], | ||
['callbacks-child', 'leave'], | ||
['callbacks-child', 'afterLeave'] | ||
] | ||
) | ||
}) | ||
|
||
test('Root page transition properties', async () => { | ||
await page.nuxt.navigate('/transition-properties') | ||
const transitionsData = await page.nuxt.transitionsData() | ||
expect(transitionsData.length).toBe(1) | ||
expect(transitionsData[0].name).toBe('custom') | ||
expect(transitionsData[0].appear).toBe(true) | ||
expect(transitionsData[0].css).toBe(false) | ||
expect(transitionsData[0].mode).toBe('in-out') | ||
expect(transitionsData[0].duration).toBe(3000) | ||
}) | ||
|
||
test('Parent -> child transition properties', async () => { | ||
await page.nuxt.navigate('/transition-properties/child') | ||
const transitionsData = await page.nuxt.transitionsData() | ||
expect(transitionsData.length).toBe(2) | ||
expect(transitionsData[0].name).toBe('custom') | ||
expect(transitionsData[1].name).toBe('custom-child') | ||
}) | ||
|
||
test('Child -> parent transition properties', async () => { | ||
await page.nuxt.navigate('/transition-properties') | ||
const transitionsData = await page.nuxt.transitionsData() | ||
expect(transitionsData.length).toBe(2) | ||
expect(transitionsData[0].name).toBe('custom') | ||
expect(transitionsData[1].name).toBe('custom-child') | ||
}) | ||
|
||
afterAll(async () => { | ||
await nuxt.close() | ||
}) | ||
|
||
// Stop browser | ||
afterAll(async () => { | ||
await page.close() | ||
await browser.close() | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<template> | ||
<div> | ||
<ul id="transition-events"></ul> | ||
<Nuxt /> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { buildFixture } from '../../utils/build' | ||
|
||
buildFixture('page-transitions') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<template> | ||
<div> | ||
<h1>Callbacks page</h1> | ||
<NuxtChild /> | ||
</div> | ||
</template> | ||
<script> | ||
import { createTransitionObject } from '../utils/transition-properties' | ||
export default { | ||
transition: createTransitionObject('callbacks') | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<template> | ||
<div> | ||
<h1>Callbacks child page</h1> | ||
</div> | ||
</template> | ||
<script> | ||
import { createTransitionObject } from '../../utils/transition-properties' | ||
export default { | ||
transition: createTransitionObject('callbacks-child', 'page', 'true') | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<template> | ||
<div> | ||
<h1>Index page</h1> | ||
</div> | ||
</template> | ||
<script> | ||
import { createTransitionObject } from '../utils/transition-properties' | ||
export default { | ||
transition: createTransitionObject('index') | ||
} | ||
</script> |
18 changes: 18 additions & 0 deletions
18
test/fixtures/page-transitions/pages/transition-properties.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<template> | ||
<div> | ||
<h1>Transition properties page</h1> | ||
<NuxtChild /> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
transition: { | ||
name: 'custom', | ||
appear: true, | ||
css: false, | ||
mode: 'in-out', | ||
duration: 3000 | ||
} | ||
} | ||
</script> |
18 changes: 18 additions & 0 deletions
18
test/fixtures/page-transitions/pages/transition-properties/child.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<template> | ||
<div> | ||
<h1>Transition name child page</h1> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
transition: { | ||
name: 'custom-child' | ||
} | ||
} | ||
</script> | ||
<style> | ||
.custom-child-enter-active, .custom-child-leave-active { | ||
transition: opacity 1s ease; | ||
} | ||
</style> |
34 changes: 34 additions & 0 deletions
34
test/fixtures/page-transitions/utils/transition-properties.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
const addEvent = (componentName, callbackName, clear = false) => { | ||
const ul = document.querySelector('#transition-events') | ||
if (clear) { | ||
ul.innerHTML = '' | ||
} | ||
const li = document.createElement('li') | ||
li.textContent = `${componentName}|${callbackName}` | ||
ul.appendChild(li) | ||
} | ||
|
||
export const createTransitionObject = (componentName, transitionName = 'page', child = false) => ({ | ||
name: transitionName, | ||
|
||
beforeEnter () { | ||
addEvent(componentName, 'beforeEnter', child) | ||
}, | ||
enter (el, done) { | ||
addEvent(componentName, 'enter') | ||
done() | ||
}, | ||
afterEnter () { | ||
addEvent(componentName, 'afterEnter') | ||
}, | ||
beforeLeave () { | ||
addEvent(componentName, 'beforeLeave', true) | ||
}, | ||
leave (el, done) { | ||
addEvent(componentName, 'leave') | ||
done() | ||
}, | ||
afterLeave () { | ||
addEvent(componentName, 'afterLeave') | ||
} | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters