test: migrate e2e test to puppeteer from nightwatch (vuejs#1778)

Author: kiaking

jest.config.js

@@ -7,7 +7,7 @@ module.exports = {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^test/(.*)$': '<rootDir>/test/$1'
   },
-  testMatch: ['<rootDir>/test/unit/**/*.spec.js'],
+  testMatch: ['<rootDir>/test/**/*.spec.js'],
   testPathIgnorePatterns: ['/node_modules/'],
   setupFilesAfterEnv: [
     './test/setup.js'

package.json

@@ -22,7 +22,7 @@
     "lint": "eslint src test",
     "test": "npm run lint && npm run test:types && npm run test:unit && npm run test:ssr && npm run test:e2e",
     "test:unit": "jest --testPathIgnorePatterns test/e2e",
-    "test:e2e": "node test/e2e/runner.js",
+    "test:e2e": "start-server-and-test dev http://localhost:8080 'jest --testPathIgnorePatterns test/unit'",
     "test:ssr": "cross-env VUE_ENV=server jest --testPathIgnorePatterns test/e2e",
     "test:types": "tsc -p types/test",
     "coverage": "jest --testPathIgnorePatterns test/e2e --coverage",
@@ -56,23 +56,21 @@
     "babel-loader": "^8.1.0",
     "brotli": "^1.3.2",
     "chalk": "^4.0.0",
-    "chromedriver": "^83.0.0",
     "conventional-changelog-cli": "^2.0.31",
     "cross-env": "^5.2.0",
-    "cross-spawn": "^6.0.5",
     "css-loader": "^2.1.0",
     "enquirer": "^2.3.5",
     "eslint": "^6.8.0",
     "eslint-plugin-vue-libs": "^4.0.0",
     "execa": "^4.0.0",
     "express": "^4.17.1",
     "jest": "^26.0.1",
-    "nightwatch": "^1.3.1",
-    "nightwatch-helpers": "^1.2.0",
+    "puppeteer": "^4.0.0",
     "regenerator-runtime": "^0.13.5",
     "rollup": "^2.8.2",
     "rollup-plugin-terser": "^5.3.0",
     "semver": "^7.3.2",
+    "start-server-and-test": "^1.11.0",
     "todomvc-app-css": "^2.1.0",
     "typescript": "^3.8.3",
     "vue": "^2.5.22",

test/e2e/cart.spec.js

@@ -0,0 +1,37 @@
+import { setupPuppeteer, E2E_TIMEOUT } from 'test/helpers'
+
+describe('e2e/cart', () => {
+  const { page, text, count, click, sleep } = setupPuppeteer()
+
+  test('cart app', async () => {
+    await page().goto('http://localhost:8080/shopping-cart/')
+
+    await sleep(120) // api simulation
+
+    expect(await count('li')).toBe(3)
+    expect(await count('.cart button[disabled]')).toBe(1)
+    expect(await text('li:nth-child(1)')).toContain('iPad 4 Mini')
+    expect(await text('.cart')).toContain('Please add some products to cart')
+    expect(await text('.cart')).toContain('Total: $0.00')
+
+    await click('li:nth-child(1) button')
+    expect(await text('.cart')).toContain('iPad 4 Mini - $500.01 x 1')
+    expect(await text('.cart')).toContain('Total: $500.01')
+
+    await click('li:nth-child(1) button')
+    expect(await text('.cart')).toContain('iPad 4 Mini - $500.01 x 2')
+    expect(await text('.cart')).toContain('Total: $1,000.02')
+    expect(await count('li:nth-child(1) button[disabled]')).toBe(1)
+
+    await click('li:nth-child(2) button')
+    expect(await text('.cart')).toContain('H&M T-Shirt White - $10.99 x 1')
+    expect(await text('.cart')).toContain('Total: $1,011.01')
+
+    await click('.cart button')
+    await sleep(200)
+    expect(await text('.cart')).toContain('Please add some products to cart')
+    expect(await text('.cart')).toContain('Total: $0.00')
+    expect(await text('.cart')).toContain('Checkout successful')
+    expect(await count('.cart button[disabled]')).toBe(1)
+  }, E2E_TIMEOUT)
+})

test/e2e/chat.spec.js

@@ -0,0 +1,34 @@
+import { setupPuppeteer, E2E_TIMEOUT } from 'test/helpers'
+
+describe('e2e/chat', () => {
+  const { page, text, count, click, enterValue, sleep } = setupPuppeteer()
+
+  test('chat app', async () => {
+    await page().goto('http://localhost:8080/chat/')
+
+    expect(await text('.thread-count')).toContain('Unread threads: 2')
+    expect(await count('.thread-list-item')).toBe(3)
+    expect(await text('.thread-list-item.active')).toContain('Functional Heads')
+    expect(await text('.message-thread-heading')).toContain('Functional Heads')
+    expect(await count('.message-list-item')).toBe(2)
+    expect(await text('.message-list-item:nth-child(1) .message-author-name')).toContain('Bill')
+    expect(await text('.message-list-item:nth-child(1) .message-text')).toContain('Hey Brian')
+
+    await enterValue('.message-composer', 'hi')
+    await sleep(50) // fake api
+    expect(await count('.message-list-item')).toBe(3)
+    expect(await text('.message-list-item:nth-child(3)')).toContain('hi')
+
+    await click('.thread-list-item:nth-child(2)')
+    expect(await text('.thread-list-item.active')).toContain('Dave and Bill')
+    expect(await text('.message-thread-heading')).toContain('Dave and Bill')
+    expect(await count('.message-list-item')).toBe(2)
+    expect(await text('.message-list-item:nth-child(1) .message-author-name')).toContain('Bill')
+    expect(await text('.message-list-item:nth-child(1) .message-text')).toContain('Hey Dave')
+
+    await enterValue('.message-composer', 'hi')
+    await sleep(50) // fake api
+    expect(await count('.message-list-item')).toBe(3)
+    expect(await text('.message-list-item:nth-child(3)')).toContain('hi')
+  }, E2E_TIMEOUT)
+})

test/e2e/counter.spec.js

@@ -0,0 +1,30 @@
+import { setupPuppeteer, E2E_TIMEOUT } from 'test/helpers'
+
+describe('e2e/counter', () => {
+  const { page, text, click, sleep } = setupPuppeteer()
+
+  test('counter app', async () => {
+    await page().goto('http://localhost:8080/counter/')
+    expect(await text('#app')).toContain('Clicked: 0 times')
+
+    await click('button:nth-child(1)')
+    expect(await text('#app')).toContain('Clicked: 1 times')
+
+    await click('button:nth-child(2)')
+    expect(await text('#app')).toContain('Clicked: 0 times')
+
+    await click('button:nth-child(3)')
+    expect(await text('#app')).toContain('Clicked: 0 times')
+
+    await click('button:nth-child(1)')
+    expect(await text('#app')).toContain('Clicked: 1 times')
+
+    await click('button:nth-child(3)')
+    expect(await text('#app')).toContain('Clicked: 2 times')
+
+    await click('button:nth-child(4)')
+    expect(await text('#app')).toContain('Clicked: 2 times')
+    await sleep(1000)
+    expect(await text('#app')).toContain('Clicked: 3 times')
+  }, E2E_TIMEOUT)
+})