test serve with router

vuejs · Jan 9, 2018 · 8adcabc · 8adcabc
1 parent b69c1ff
commit 8adcabc
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)
+  }
+}