test: migrate e2e test to puppeteer

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'],
   transform: {

package.json

@@ -23,7 +23,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",
@@ -58,7 +58,6 @@
     "babel-loader": "^8.1.0",
     "brotli": "^1.3.2",
     "chalk": "^4.0.0",
-    "chromedriver": "^80.0.1",
     "conventional-changelog-cli": "^2.0.31",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
@@ -69,12 +68,12 @@
     "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": "^3.0.0-beta.10",

test/e2e/cart.spec.js

@@ -0,0 +1,45 @@
+import { setupPuppeteer, E2E_TIMEOUT } from 'test/helpers'
+
+describe('e2e/cart', () => {
+  const { page, text, count, click, sleep } = setupPuppeteer()
+
+  async function testCart (url) {
+    await page().goto(url)
+
+    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)
+  }
+
+  test('classic', async () => {
+    await testCart('http://localhost:8080/classic/shopping-cart/')
+  }, E2E_TIMEOUT)
+
+  test('composition', async () => {
+    await testCart('http://localhost:8080/composition/shopping-cart/')
+  }, E2E_TIMEOUT)
+})

test/e2e/chat.spec.js

@@ -0,0 +1,42 @@
+import { setupPuppeteer, E2E_TIMEOUT } from 'test/helpers'
+
+describe('e2e/chat', () => {
+  const { page, text, count, click, enterValue, sleep } = setupPuppeteer()
+
+  async function testChat (url) {
+    await page().goto(url)
+
+    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')
+  }
+
+  test('classic', async () => {
+    await testChat('http://localhost:8080/classic/chat/')
+  }, E2E_TIMEOUT)
+
+  test('composition', async () => {
+    await testChat('http://localhost:8080/composition/chat/')
+  }, E2E_TIMEOUT)
+})

test/e2e/counter.spec.js

@@ -0,0 +1,38 @@
+import { setupPuppeteer, E2E_TIMEOUT } from 'test/helpers'
+
+describe('e2e/counter', () => {
+  const { page, text, click, sleep } = setupPuppeteer()
+
+  async function testCounter (url) {
+    await page().goto(url)
+    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')
+  }
+
+  test('classic', async () => {
+    await testCounter('http://localhost:8080/classic/counter/')
+  }, E2E_TIMEOUT)
+
+  test('composition', async () => {
+    await testCounter('http://localhost:8080/composition/counter/')
+  }, E2E_TIMEOUT)
+})