diff --git a/packages/@vue/cli-service-global/__tests__/globalService.spec.js b/packages/@vue/cli-service-global/__tests__/globalService.spec.js index 584e7a8878..91cf682c31 100644 --- a/packages/@vue/cli-service-global/__tests__/globalService.spec.js +++ b/packages/@vue/cli-service-global/__tests__/globalService.spec.js @@ -45,12 +45,12 @@ beforeAll(() => { test('global serve', async () => { await serve( () => execa(binPath, ['serve'], { cwd }), - async ({ nextUpdate, getText }) => { - expect(await getText('h1')).toMatch('hi') + async ({ 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 getText('h1')).toMatch(`Updated`) + expect(await helpers.getText('h1')).toMatch(`Updated`) } ) }) diff --git a/packages/@vue/cli-service/__tests__/build.spec.js b/packages/@vue/cli-service/__tests__/build.spec.js index 8c98b40faf..d9d7d161f0 100644 --- a/packages/@vue/cli-service/__tests__/build.spec.js +++ b/packages/@vue/cli-service/__tests__/build.spec.js @@ -10,7 +10,7 @@ const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer') let server, browser, page -test('serve', async () => { +test('build', async () => { const project = await create('e2e-build', defaults) // test public copy diff --git a/packages/@vue/cli-service/__tests__/serve.spec.js b/packages/@vue/cli-service/__tests__/serve.spec.js index 4c2447fe3c..416e5f3459 100644 --- a/packages/@vue/cli-service/__tests__/serve.spec.js +++ b/packages/@vue/cli-service/__tests__/serve.spec.js @@ -11,16 +11,38 @@ test('serve', async () => { await serve( () => project.run('vue-cli-service serve'), - async ({ nextUpdate, getText }) => { + async ({ nextUpdate, helpers }) => { const msg = `Welcome to Your Vue.js App` - expect(await getText('h1')).toMatch(msg) + expect(await helpers.getText('h1')).toMatch(msg) // test hot reload 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 getText('h1')).toMatch(`Updated`) + expect(await helpers.getText('h1')).toMatch(`Updated`) + } + ) +}) + +test('serve with router', async () => { + const project = await create('e2e-serve', Object.assign({}, defaults, { + router: true + })) + + await serve( + () => project.run('vue-cli-service serve'), + async ({ page, helpers }) => { + expect(await helpers.getText('h1')).toMatch(`Welcome to Your Vue.js App`) + expect(await helpers.hasElement('#nav')).toBe(true) + expect(await helpers.hasClass('a[href="#/"]', 'router-link-exact-active')).toBe(true) + expect(await helpers.hasClass('a[href="#/about"]', 'router-link-exact-active')).toBe(false) + + await page.click('a[href="#/about"]') + expect(await helpers.getText('h1')).toMatch(`This is an about page`) + expect(await helpers.hasElement('#nav')).toBe(true) + expect(await helpers.hasClass('a[href="#/"]', 'router-link-exact-active')).toBe(false) + expect(await helpers.hasClass('a[href="#/about"]', 'router-link-exact-active')).toBe(true) } ) }) diff --git a/packages/@vue/cli-test-utils/serveWithPuppeteer.js b/packages/@vue/cli-test-utils/serveWithPuppeteer.js index 9d4abefc8a..686a9736e6 100644 --- a/packages/@vue/cli-test-utils/serveWithPuppeteer.js +++ b/packages/@vue/cli-test-utils/serveWithPuppeteer.js @@ -38,18 +38,14 @@ module.exports = async function serveWithPuppeteer (serve, test) { const { page, browser } = await launchPuppeteer(url) activeBrowser = browser - const getText = selector => { - return page.evaluate(selector => { - return document.querySelector(selector).textContent - }, selector) - } + const helpers = createHelpers(page) await test({ browser, page, url, nextUpdate, - getText + helpers }) await browser.close() @@ -80,3 +76,20 @@ module.exports = async function serveWithPuppeteer (serve, test) { }) }) } + +function createHelpers (page) { + return { + getText: selector => page.evaluate(selector => { + return document.querySelector(selector).textContent + }, selector), + + hasElement: selector => page.evaluate(selector => { + return !!document.querySelector(selector) + }, selector), + + hasClass: (selector, cls) => page.evaluate((selector, cls) => { + const el = document.querySelector(selector) + return el && el.classList.contains(cls) + }, selector, cls) + } +}