From 757d5d46dad6a8b0698a944602f45b8bc59dde7b Mon Sep 17 00:00:00 2001 From: Dmitriy <32272181+Kolobok12309@users.noreply.github.com> Date: Wed, 9 Sep 2020 13:32:10 +0300 Subject: [PATCH] fix(vue-app): missing layout in error page with `splittedChunks.layout` (#8016) --- packages/vue-app/template/App.js | 29 +++++++---- packages/vue-app/template/client.js | 5 +- test/dev/unicode-base.size-limit.test.js | 2 +- test/e2e/error.test.js | 10 ++++ test/e2e/split-layouts-error.test.js | 51 +++++++++++++++++++ test/fixtures/error/pages/about.vue | 16 ++++++ .../layouts/error-layout.vue | 12 +++++ .../split-layouts-error/layouts/error.vue | 18 +++++++ .../split-layouts-error/nuxt.config.js | 7 +++ .../split-layouts-error/pages/about.vue | 8 +++ .../split-layouts-error/pages/error.vue | 12 +++++ .../split-layouts-error/pages/index.vue | 14 +++++ .../split-layouts-error/pages/info.vue | 24 +++++++++ .../split-layouts-error.test.js | 3 ++ 14 files changed, 199 insertions(+), 12 deletions(-) create mode 100644 test/e2e/split-layouts-error.test.js create mode 100644 test/fixtures/split-layouts-error/layouts/error-layout.vue create mode 100644 test/fixtures/split-layouts-error/layouts/error.vue create mode 100644 test/fixtures/split-layouts-error/nuxt.config.js create mode 100644 test/fixtures/split-layouts-error/pages/about.vue create mode 100644 test/fixtures/split-layouts-error/pages/error.vue create mode 100644 test/fixtures/split-layouts-error/pages/index.vue create mode 100644 test/fixtures/split-layouts-error/pages/info.vue create mode 100644 test/fixtures/split-layouts-error/split-layouts-error.test.js diff --git a/packages/vue-app/template/App.js b/packages/vue-app/template/App.js index 0744e91730..a39b67c749 100644 --- a/packages/vue-app/template/App.js +++ b/packages/vue-app/template/App.js @@ -129,11 +129,9 @@ export default { <% } %> }, <% } %> - <% if (loading) { %> watch: { 'nuxt.err': 'errorChanged' }, - <% } %> <% if (features.clientOnline) { %> computed: { isOffline () { @@ -215,18 +213,29 @@ export default { <% if (loading) { %>this.$loading.finish()<% } %> <% } %> }, - <% if (loading) { %> - errorChanged () { - if (this.nuxt.err && this.$loading) { - if (this.$loading.fail) { - this.$loading.fail(this.nuxt.err) + <% if (splitChunks.layouts) { %>async <% } %>errorChanged () { + if (this.nuxt.err) { + <% if (loading) { %> + if (this.$loading) { + if (this.$loading.fail) { + this.$loading.fail(this.nuxt.err) + } + if (this.$loading.finish) { + this.$loading.finish() + } } - if (this.$loading.finish) { - this.$loading.finish() + <% } %> + let errorLayout = (NuxtError.options || NuxtError).layout; + + if (typeof errorLayout === 'function') { + errorLayout = errorLayout(this.context) } + <% if (splitChunks.layouts) { %> + await this.loadLayout(errorLayout) + <% } %> + this.setLayout(errorLayout) } }, - <% } %> <% if (features.layouts) { %> <% if (splitChunks.layouts) { %> setLayout (layout) { diff --git a/packages/vue-app/template/client.js b/packages/vue-app/template/client.js index 51c1c366b6..7647d1cb03 100644 --- a/packages/vue-app/template/client.js +++ b/packages/vue-app/template/client.js @@ -613,7 +613,7 @@ function normalizeComponents (to, ___) { } <% if (features.layouts) { %> -function setLayoutForNextPage (to) { +<% if (splitChunks.layouts) { %>async <% } %>function setLayoutForNextPage (to) { // Set layout let hasError = Boolean(this.$options.nuxt.err) if (this._hadError && this._dateLastError === this.$options.nuxt.dateErr) { @@ -626,6 +626,9 @@ function setLayoutForNextPage (to) { if (typeof layout === 'function') { layout = layout(app.context) } + <% if (splitChunks.layouts) { %> + await this.loadLayout(layout) + <% } %> this.setLayout(layout) } <% } %> diff --git a/test/dev/unicode-base.size-limit.test.js b/test/dev/unicode-base.size-limit.test.js index 3dd5fbe91c..dfee61f0aa 100644 --- a/test/dev/unicode-base.size-limit.test.js +++ b/test/dev/unicode-base.size-limit.test.js @@ -20,7 +20,7 @@ describe('nuxt minimal vue-app bundle size limit', () => { it('should stay within the size limit range', async () => { const filter = filename => filename === 'vue-app.nuxt.js' const legacyResourcesSize = await getResourcesSize(distDir, 'client', { filter }) - const LEGACY_JS_RESOURCES_KB_SIZE = 16.6 + const LEGACY_JS_RESOURCES_KB_SIZE = 17.1 expect(legacyResourcesSize.uncompressed).toBeWithinSize(LEGACY_JS_RESOURCES_KB_SIZE) }) }) diff --git a/test/e2e/error.test.js b/test/e2e/error.test.js index cb2f5d468f..f34c8efdd3 100644 --- a/test/e2e/error.test.js +++ b/test/e2e/error.test.js @@ -42,6 +42,16 @@ describe('basic browser', () => { expect(await page.$text('h1')).toBe('About') }) + test('/about error layout after click', async () => { + const transitionPromise = page.evaluate(async ($nuxt) => { + await new Promise(resolve => $nuxt.$once('triggerScroll', resolve)) + }, page.$nuxt) + + await page.click('button') + await transitionPromise + expect(await page.$text('header')).toBe('Error layout') + }) + test('/info prints empty page', async () => { await page.nuxt.navigate('/info') diff --git a/test/e2e/split-layouts-error.test.js b/test/e2e/split-layouts-error.test.js new file mode 100644 index 0000000000..0009a3abe7 --- /dev/null +++ b/test/e2e/split-layouts-error.test.js @@ -0,0 +1,51 @@ +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 + +describe('split layouts error layout', () => { + beforeAll(async () => { + const config = await loadFixture('split-layouts-error') + nuxt = new Nuxt(config) + await nuxt.ready() + + port = await getPort() + await nuxt.server.listen(port, 'localhost') + await browser.start() + page = await browser.page(url('/')) + }) + + test('Open /', async () => { + expect(await page.$text('h1')).toBe('Error Loop incoming page') + }) + + test('/info has error layout', async () => { + await page.nuxt.navigate('/info') + + const transitionPromise = page.evaluate(async ($nuxt) => { + await new Promise(resolve => $nuxt.$once('triggerScroll', resolve)) + }, page.$nuxt) + await page.click('button') + + await transitionPromise + + expect(await page.$text('header')).toBe('Error layout') + }) + + test('/error has error layout after router push', async () => { + await page.nuxt.navigate('/error') + + expect(await page.$text('header')).toBe('Error layout') + }) + + test('/error has error layout after page load', async () => { + const localPage = await browser.page(url('/error')) + + expect(await localPage.$text('header')).toBe('Error layout') + }) +}) diff --git a/test/fixtures/error/pages/about.vue b/test/fixtures/error/pages/about.vue index 71e48bb1a0..2bb16499d8 100644 --- a/test/fixtures/error/pages/about.vue +++ b/test/fixtures/error/pages/about.vue @@ -1,8 +1,24 @@ + + diff --git a/test/fixtures/split-layouts-error/layouts/error-layout.vue b/test/fixtures/split-layouts-error/layouts/error-layout.vue new file mode 100644 index 0000000000..91cee17bd5 --- /dev/null +++ b/test/fixtures/split-layouts-error/layouts/error-layout.vue @@ -0,0 +1,12 @@ + + + diff --git a/test/fixtures/split-layouts-error/layouts/error.vue b/test/fixtures/split-layouts-error/layouts/error.vue new file mode 100644 index 0000000000..b9441b040e --- /dev/null +++ b/test/fixtures/split-layouts-error/layouts/error.vue @@ -0,0 +1,18 @@ + + + diff --git a/test/fixtures/split-layouts-error/nuxt.config.js b/test/fixtures/split-layouts-error/nuxt.config.js new file mode 100644 index 0000000000..e3327b2c04 --- /dev/null +++ b/test/fixtures/split-layouts-error/nuxt.config.js @@ -0,0 +1,7 @@ +export default { + build: { + splitChunks: { + layouts: true + } + } +} diff --git a/test/fixtures/split-layouts-error/pages/about.vue b/test/fixtures/split-layouts-error/pages/about.vue new file mode 100644 index 0000000000..71e48bb1a0 --- /dev/null +++ b/test/fixtures/split-layouts-error/pages/about.vue @@ -0,0 +1,8 @@ + diff --git a/test/fixtures/split-layouts-error/pages/error.vue b/test/fixtures/split-layouts-error/pages/error.vue new file mode 100644 index 0000000000..ae025a8ec5 --- /dev/null +++ b/test/fixtures/split-layouts-error/pages/error.vue @@ -0,0 +1,12 @@ + + + diff --git a/test/fixtures/split-layouts-error/pages/index.vue b/test/fixtures/split-layouts-error/pages/index.vue new file mode 100644 index 0000000000..d55b18d8e0 --- /dev/null +++ b/test/fixtures/split-layouts-error/pages/index.vue @@ -0,0 +1,14 @@ + diff --git a/test/fixtures/split-layouts-error/pages/info.vue b/test/fixtures/split-layouts-error/pages/info.vue new file mode 100644 index 0000000000..d4721a25b6 --- /dev/null +++ b/test/fixtures/split-layouts-error/pages/info.vue @@ -0,0 +1,24 @@ + + + diff --git a/test/fixtures/split-layouts-error/split-layouts-error.test.js b/test/fixtures/split-layouts-error/split-layouts-error.test.js new file mode 100644 index 0000000000..16d39f4420 --- /dev/null +++ b/test/fixtures/split-layouts-error/split-layouts-error.test.js @@ -0,0 +1,3 @@ +import { buildFixture } from '../../utils/build' + +buildFixture('split-layouts-error')