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): preview mode fetch (#10489)
- Loading branch information
Showing
12 changed files
with
323 additions
and
11 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,107 @@ | ||
import http from 'http' | ||
import { resolve } from 'path' | ||
import serveStatic from 'serve-static' | ||
import finalhandler from 'finalhandler' | ||
import { Builder, Generator, getPort, loadFixture, Nuxt, waitFor } from '../utils' | ||
|
||
let port | ||
const url = route => 'http://localhost:' + port + route | ||
const rootDir = resolve(__dirname, '..', 'fixtures/full-static-with-preview') | ||
const distDir = resolve(rootDir, '.nuxt-generate') | ||
|
||
let builder | ||
let server = null | ||
let generator = null | ||
|
||
describe('full-static-with-preview', () => { | ||
beforeAll(async () => { | ||
const config = await loadFixture('full-static-with-preview', { | ||
generate: { | ||
static: false, | ||
dir: '.nuxt-generate' | ||
} | ||
}) | ||
const nuxt = new Nuxt(config) | ||
await nuxt.ready() | ||
|
||
builder = new Builder(nuxt) | ||
builder.build = jest.fn() | ||
generator = new Generator(nuxt, builder) | ||
|
||
await generator.generate() | ||
|
||
const serve = serveStatic(distDir) | ||
server = http.createServer((req, res) => { | ||
serve(req, res, finalhandler(req, res)) | ||
}) | ||
|
||
port = await getPort() | ||
server.listen(port) | ||
}) | ||
|
||
test('/', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/')) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called</p>') | ||
}) | ||
|
||
test('preview: /', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/?preview=true')) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called-in-preview</p>') | ||
}) | ||
|
||
test('/with-component', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/with-component')) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called</p>') | ||
expect(html).toContain('<p>component-fetch-called</p>') | ||
}) | ||
|
||
test('preview: /with-component', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/with-component?preview=true')) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called-in-preview</p>') | ||
expect(html).toContain('<p>component-fetch-called-in-preview</p>') | ||
}) | ||
|
||
test('/with-nested-components', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/with-nested-components')) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called</p>') | ||
expect(html).toContain('<p>component-fetch-called</p>') | ||
expect(html).toContain('<p>sub-component-fetch-called</p>') | ||
}) | ||
|
||
test('preview: /with-nested-components', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/with-nested-components?preview=true')) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called-in-preview</p>') | ||
expect(html).toContain('<p>component-fetch-called-in-preview</p>') | ||
expect(html).toContain('<p>sub-component-fetch-called-in-preview</p>') | ||
}) | ||
|
||
test('/async-data-dependent-fetch', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/async-data-dependent-fetch')) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called</p>') | ||
expect(html).toContain('<p>component-1-fetch-called</p>') | ||
expect(html).toContain('<p>component-2-fetch-called</p>') | ||
expect(html).toContain('<p>component-3-fetch-called</p>') | ||
}) | ||
|
||
test('preview: /async-data-dependent-fetch', async () => { | ||
const window = await generator.nuxt.server.renderAndGetWindow(url('/async-data-dependent-fetch?preview=true')) | ||
await waitFor(100) | ||
const html = window.document.body.innerHTML | ||
expect(html).toContain('<p>page-fetch-called-in-preview</p>') | ||
expect(html).toContain('<p>component-1-fetch-called-in-preview</p>') | ||
expect(html).toContain('<p>component-2-fetch-called-in-preview</p>') | ||
expect(html).toContain('<p>component-3-fetch-called-in-preview</p>') | ||
}) | ||
|
||
// Close server and ask nuxt to stop listening to file changes | ||
afterAll(async () => { | ||
await server.close() | ||
}) | ||
}) |
24 changes: 24 additions & 0 deletions
24
test/fixtures/full-static-with-preview/components/ComponentRenderer.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,24 @@ | ||
<template> | ||
<component :is="component.name" v-bind="component.props"> | ||
<template v-if="component.components"> | ||
<ComponentRenderer | ||
v-for="nestedComponent in component.components" | ||
:key="nestedComponent.id" | ||
:component="nestedComponent" | ||
/> | ||
</template> | ||
</component> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: 'ComponentRenderer', | ||
props: { | ||
component: { | ||
type: Object, | ||
required: true | ||
} | ||
} | ||
} | ||
</script> |
29 changes: 29 additions & 0 deletions
29
test/fixtures/full-static-with-preview/components/ComponentWithFetch.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,29 @@ | ||
<template> | ||
<div> | ||
<p>{{ text }}</p> | ||
<slot /> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
props: { | ||
name: { | ||
type: String, | ||
default: 'component' | ||
} | ||
}, | ||
data () { | ||
return { | ||
text: '' | ||
} | ||
}, | ||
fetch () { | ||
this.text = `${this.name}-fetch-called` | ||
if (this.$preview) { | ||
this.text = `${this.name}-fetch-called-in-preview` | ||
} | ||
} | ||
} | ||
</script> |
3 changes: 3 additions & 0 deletions
3
test/fixtures/full-static-with-preview/full-static-with-preview.test.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,3 @@ | ||
import { buildFixture } from '../../utils/build' | ||
|
||
buildFixture('full-static-with-preview') |
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,7 @@ | ||
export default { | ||
target: 'static', | ||
components: true, | ||
plugins: [ | ||
'~/plugins/preview.client.js' | ||
] | ||
} |
59 changes: 59 additions & 0 deletions
59
test/fixtures/full-static-with-preview/pages/async-data-dependent-fetch.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,59 @@ | ||
<template> | ||
<div> | ||
<p>{{ text }}</p> | ||
<ComponentRenderer | ||
v-for="component in components" | ||
:key="component.id" | ||
:component="component" | ||
/> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
const fetchData = () => { | ||
return new Promise((resolve) => { | ||
setTimeout(() => resolve([ | ||
{ | ||
id: 1, | ||
name: 'ComponentWithFetch', | ||
props: { name: 'component-1' }, | ||
components: [ | ||
{ | ||
id: 2, | ||
name: 'ComponentWithFetch', | ||
props: { name: 'component-2' }, | ||
components: [] | ||
}, | ||
{ | ||
id: 3, | ||
name: 'ComponentWithFetch', | ||
props: { name: 'component-3' }, | ||
components: [] | ||
} | ||
] | ||
} | ||
]), 10) | ||
}) | ||
} | ||
export default { | ||
name: 'Page', | ||
async asyncData () { | ||
const components = await fetchData() | ||
return { components } | ||
}, | ||
data () { | ||
return { | ||
text: '' | ||
} | ||
}, | ||
fetch () { | ||
this.text = 'page-fetch-called' | ||
if (this.$preview) { | ||
this.text = 'page-fetch-called-in-preview' | ||
} | ||
} | ||
} | ||
</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,22 @@ | ||
<template> | ||
<div> | ||
<p>{{ text }}</p> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
data () { | ||
return { | ||
text: '' | ||
} | ||
}, | ||
fetch () { | ||
this.text = 'page-fetch-called' | ||
if (this.$preview) { | ||
this.text = 'page-fetch-called-in-preview' | ||
} | ||
} | ||
} | ||
</script> |
23 changes: 23 additions & 0 deletions
23
test/fixtures/full-static-with-preview/pages/with-component.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,23 @@ | ||
<template> | ||
<div> | ||
<p>{{ text }}</p> | ||
<ComponentWithFetch /> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
data () { | ||
return { | ||
text: '' | ||
} | ||
}, | ||
fetch () { | ||
this.text = 'page-fetch-called' | ||
if (this.$preview) { | ||
this.text = 'page-fetch-called-in-preview' | ||
} | ||
} | ||
} | ||
</script> |
25 changes: 25 additions & 0 deletions
25
test/fixtures/full-static-with-preview/pages/with-nested-components.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,25 @@ | ||
<template> | ||
<div> | ||
<p>{{ text }}</p> | ||
<ComponentWithFetch> | ||
<ComponentWithFetch name="sub-component" /> | ||
</ComponentWithFetch> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
data () { | ||
return { | ||
text: '' | ||
} | ||
}, | ||
fetch () { | ||
this.text = 'page-fetch-called' | ||
if (this.$preview) { | ||
this.text = 'page-fetch-called-in-preview' | ||
} | ||
} | ||
} | ||
</script> |
5 changes: 5 additions & 0 deletions
5
test/fixtures/full-static-with-preview/plugins/preview.client.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,5 @@ | ||
export default function ({ query, enablePreview }) { | ||
if (query.preview) { | ||
enablePreview() | ||
} | ||
} |