mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-04-29 00:09:47 -05:00
test: use page.waitForFunction for HMR testing
This commit is contained in:
@@ -5,15 +5,13 @@ const create = require('@vue/cli-test-utils/createTestProject')
|
||||
const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
|
||||
const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
|
||||
|
||||
const sleep = n => new Promise(resolve => setTimeout(resolve, n))
|
||||
|
||||
exports.assertServe = async (name, options) => {
|
||||
test('serve', async () => {
|
||||
const project = await create(name, options)
|
||||
|
||||
await serve(
|
||||
() => project.run('vue-cli-service serve'),
|
||||
async ({ nextUpdate, helpers }) => {
|
||||
async ({ page, nextUpdate, helpers }) => {
|
||||
const msg = `Welcome to Your Vue.js + TypeScript App`
|
||||
expect(await helpers.getText('h1')).toMatch(msg)
|
||||
|
||||
@@ -21,8 +19,9 @@ exports.assertServe = async (name, options) => {
|
||||
const file = await project.read(`src/App.vue`)
|
||||
project.write(`src/App.vue`, file.replace(msg, `Updated`))
|
||||
await nextUpdate() // wait for child stdout update signal
|
||||
await sleep(5000) // give the client time to update
|
||||
expect(await helpers.getText('h1')).toMatch(`Updated`)
|
||||
await page.waitForFunction(selector => {
|
||||
return document.querySelector(selector).textContent.includes('Updated')
|
||||
}, {}, 'h1')
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
@@ -10,7 +10,6 @@ const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
|
||||
|
||||
const cwd = path.resolve(__dirname, 'temp')
|
||||
const binPath = require.resolve('@vue/cli/bin/vue')
|
||||
const sleep = n => new Promise(resolve => setTimeout(resolve, n))
|
||||
const write = (file, content) => fs.writeFile(path.join(cwd, file), content)
|
||||
|
||||
const entryVue = fs.readFileSync(path.resolve(__dirname, 'entry.vue'), 'utf-8')
|
||||
@@ -32,12 +31,14 @@ beforeEach(async () => {
|
||||
test('global serve', async () => {
|
||||
await serve(
|
||||
() => execa(binPath, ['serve'], { cwd }),
|
||||
async ({ nextUpdate, helpers }) => {
|
||||
async ({ page, nextUpdate, helpers }) => {
|
||||
expect(await helpers.getText('h1')).toMatch('hi')
|
||||
write('App.vue', entryVue.replace(`{{ msg }}`, 'Updated'))
|
||||
await nextUpdate() // wait for child stdout update signal
|
||||
await sleep(1000) // give the client time to update
|
||||
expect(await helpers.getText('h1')).toMatch(`Updated`)
|
||||
await page.waitForFunction(selector => {
|
||||
const el = document.querySelector(selector)
|
||||
return el && el.textContent.includes('Updated')
|
||||
}, {}, 'h1')
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
@@ -6,14 +6,12 @@ const { defaultPreset } = require('@vue/cli/lib/options')
|
||||
const create = require('@vue/cli-test-utils/createTestProject')
|
||||
const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
|
||||
|
||||
const sleep = n => new Promise(resolve => setTimeout(resolve, n))
|
||||
|
||||
test('serve', async () => {
|
||||
const project = await create('e2e-serve', defaultPreset)
|
||||
|
||||
await serve(
|
||||
() => project.run('vue-cli-service serve'),
|
||||
async ({ nextUpdate, helpers }) => {
|
||||
async ({ page, nextUpdate, helpers }) => {
|
||||
const msg = `Welcome to Your Vue.js App`
|
||||
expect(await helpers.getText('h1')).toMatch(msg)
|
||||
|
||||
@@ -21,8 +19,10 @@ test('serve', async () => {
|
||||
const file = await project.read(`src/App.vue`)
|
||||
project.write(`src/App.vue`, file.replace(msg, `Updated`))
|
||||
await nextUpdate() // wait for child stdout update signal
|
||||
await sleep(5000) // give the client time to update
|
||||
expect(await helpers.getText('h1')).toMatch(`Updated`)
|
||||
await page.waitForFunction(selector => {
|
||||
const el = document.querySelector(selector)
|
||||
return el && el.textContent.includes('Updated')
|
||||
}, {}, 'h1')
|
||||
}
|
||||
)
|
||||
})
|
||||
@@ -97,7 +97,7 @@ test('serve with inline entry', async () => {
|
||||
|
||||
await serve(
|
||||
() => project.run('vue-cli-service serve src/index.js'),
|
||||
async ({ nextUpdate, helpers }) => {
|
||||
async ({ page, nextUpdate, helpers }) => {
|
||||
const msg = `Welcome to Your Vue.js App`
|
||||
expect(await helpers.getText('h1')).toMatch(msg)
|
||||
|
||||
@@ -105,8 +105,10 @@ test('serve with inline entry', async () => {
|
||||
const file = await project.read(`src/App.vue`)
|
||||
project.write(`src/App.vue`, file.replace(msg, `Updated`))
|
||||
await nextUpdate() // wait for child stdout update signal
|
||||
await sleep(1000) // give the client time to update
|
||||
expect(await helpers.getText('h1')).toMatch(`Updated`)
|
||||
await page.waitForFunction(selector => {
|
||||
const el = document.querySelector(selector)
|
||||
return el && el.textContent.includes('Updated')
|
||||
}, {}, 'h1')
|
||||
}
|
||||
)
|
||||
})
|
||||
@@ -118,7 +120,7 @@ test('serve with no public dir', async () => {
|
||||
|
||||
await serve(
|
||||
() => project.run('vue-cli-service serve'),
|
||||
async ({ nextUpdate, helpers }) => {
|
||||
async ({ page, nextUpdate, helpers }) => {
|
||||
const msg = `Welcome to Your Vue.js App`
|
||||
expect(await helpers.getText('h1')).toMatch(msg)
|
||||
|
||||
@@ -126,8 +128,10 @@ test('serve with no public dir', async () => {
|
||||
const file = await project.read(`src/App.vue`)
|
||||
project.write(`src/App.vue`, file.replace(msg, `Updated`))
|
||||
await nextUpdate() // wait for child stdout update signal
|
||||
await sleep(1000) // give the client time to update
|
||||
expect(await helpers.getText('h1')).toMatch(`Updated`)
|
||||
await page.waitForFunction(selector => {
|
||||
const el = document.querySelector(selector)
|
||||
return el && el.textContent.includes('Updated')
|
||||
}, {}, 'h1')
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user