-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
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): skip page render early on error or navigation (#20719)
- Loading branch information
Showing
10 changed files
with
202 additions
and
12 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
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,68 @@ | ||
| import Browser from '../utils/browser' | ||
| import { loadFixture, getPort, Nuxt, waitFor } from '../utils' | ||
|
|
||
| let port | ||
| const browser = new Browser() | ||
| const url = route => 'http://localhost:' + port + route | ||
|
|
||
| let nuxt = null | ||
| let page = null | ||
|
|
||
| describe('basic browser navigation', () => { | ||
| beforeAll(async () => { | ||
| const config = await loadFixture('basic') | ||
| nuxt = new Nuxt(config) | ||
| await nuxt.ready() | ||
|
|
||
| port = await getPort() | ||
| await nuxt.server.listen(port, 'localhost') | ||
|
|
||
| await browser.start({ | ||
| // slowMo: 50, | ||
| // headless: false | ||
| }) | ||
| }) | ||
|
|
||
| const TEST_PATHS = [ | ||
| 'asyncData-error', | ||
| 'asyncData-throw', | ||
| 'middleware-asyncData-error', | ||
| 'middleware-asyncData-throw' | ||
| ] | ||
|
|
||
| for (const path of TEST_PATHS) { | ||
| test(`Navigate away from /navigation/${path}`, async () => { | ||
| page = await browser.page(url('/')) | ||
| expect(await page.$text('h1')).toBe('Index page') | ||
|
|
||
| await page.nuxt.navigate('/navigation') | ||
| expect(await page.$text('h3')).toContain('Click one of the links below') | ||
|
|
||
| await page.nuxt.navigate(`/navigation/${path}`, /* waitEnd */false) | ||
| await waitFor(nuxt.options.loading.throttle + 100) | ||
| const loading = await page.nuxt.loadingData() | ||
| expect(loading.show).toBe(true) | ||
|
|
||
| await page.nuxt.go(-1) | ||
| await page.waitForFunction( | ||
| '$nuxt.$loading.$data.show === false' | ||
| ) | ||
| expect(await page.$text('h1')).toBe('Index page') | ||
|
|
||
| await waitFor(2000) | ||
|
|
||
| expect(await page.$text('h1')).toBe('Index page') | ||
| }) | ||
| } | ||
|
|
||
| // Close server and ask nuxt to stop listening to file changes | ||
| 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,3 @@ | ||
| export default async function () { | ||
| await new Promise(resolve => setTimeout(resolve, 2000)) | ||
| } |
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,27 @@ | ||
| <template> | ||
| <div> | ||
| <h3>Click one of the links below and navigate back in history before the page has fully loaded. Pass if no error page shown.</h3> | ||
| <ul> | ||
| <li v-for="test in tests" :key="test"> | ||
| <nuxt-link :to="'navigation/' + test"> | ||
| {{ test }} | ||
| </nuxt-link> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| computed: { | ||
| tests () { | ||
| return [ | ||
| 'asyncData-error', | ||
| 'asyncData-throw', | ||
| 'middleware-asyncData-error', | ||
| 'middleware-asyncData-throw' | ||
| ] | ||
| } | ||
| } | ||
| } | ||
| </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> | ||
| <h1>Async Data Error</h1> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| async asyncData ({ error }) { | ||
| await new Promise(resolve => setTimeout(resolve, 2000)) | ||
| error({ statusCode: 401, message: 'Not allowed here' }) | ||
| } | ||
| } | ||
| </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> | ||
| <h1>Async Throw Error</h1> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| async asyncData () { | ||
| await new Promise(resolve => setTimeout(resolve, 2000)) | ||
| throw new Error('crash') | ||
| } | ||
| } | ||
| </script> |
11 changes: 11 additions & 0 deletions
11
test/fixtures/basic/pages/navigation/middleware-asyncData-error.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,11 @@ | ||
| <template> | ||
| <h1>Async Data Error</h1> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| middleware: ['slow'], | ||
| asyncData ({ error, route }) { | ||
| error({ statusCode: 401, message: 'Not allowed here' }) | ||
| } | ||
| } | ||
| </script> |
11 changes: 11 additions & 0 deletions
11
test/fixtures/basic/pages/navigation/middleware-asyncData-throw.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,11 @@ | ||
| <template> | ||
| <h1>Async Throw Error</h1> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| middleware: ['slow'], | ||
| asyncData () { | ||
| throw new Error('crash') | ||
| } | ||
| } | ||
| </script> |