add tests

.gitignore

@@ -4,3 +4,4 @@ dist
 TODOs.md
 playground
 *.log
+test/temp

package.json

@@ -14,6 +14,7 @@
     "dev-server": "tsc -w --p src/server",
     "build": "tsc -p src/client && tsc -p src/server",
     "lint": "prettier --write --parser typescript \"src/**/*.ts\"",
+    "test": "yarn build && jest",
     "prepublishOnly": "tsc"
   },
   "gitHooks": {
@@ -29,6 +30,9 @@
       "git add"
     ]
   },
+  "jest": {
+    "watchPathIgnorePatterns": ["<rootDir>/test/temp"]
+  },
   "dependencies": {
     "@babel/parser": "^7.9.4",
     "@vue/compiler-sfc": "^3.0.0-beta.2",
@@ -43,9 +47,12 @@
     "@types/node": "^13.13.1",
     "@types/serve-handler": "^6.1.0",
     "@types/ws": "^7.2.4",
+    "execa": "^4.0.0",
+    "jest": "^25.4.0",
     "lint-staged": "^10.1.6",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
+    "puppeteer": "^3.0.0",
     "typescript": "^3.8.3",
     "yorkie": "^2.0.0"
   }

src/server/server.ts

@@ -1,6 +1,6 @@
 import { promises as fs } from 'fs'
 import path from 'path'
-import http from 'http'
+import http, { Server } from 'http'
 import url from 'url'
 import WebSocket from 'ws'
 import serve from 'serve-handler'
@@ -12,9 +12,12 @@ import { rewrite } from './moduleRewriter'
 
 export interface ServerConfig {
   port?: number
+  cwd?: string
 }
 
-export async function createServer({ port = 3000 }: ServerConfig = {}) {
+export async function createServer({ port = 3000 }: ServerConfig = {}): Promise<
+  Server
+> {
   const hmrClientCode = await fs.readFile(
     path.resolve(__dirname, '../client/client.js')
   )
@@ -83,7 +86,7 @@ export async function createServer({ port = 3000 }: ServerConfig = {}) {
 
     server.on('listening', () => {
       console.log(`Running at http://localhost:${port}`)
-      resolve()
+      resolve(server)
     })
 
     server.listen(port)

test/fixtures/Child.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="child">This is child</div>
+</template>

test/fixtures/Comp.vue

@@ -0,0 +1,17 @@
+<template>
+  <button @click="count++">{{ count }}</button>
+  <Child/>
+</template>
+
+<script>
+import Child from './Child.vue'
+
+export default {
+  components: { Child },
+  setup() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>

test/fixtures/index.html

@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script type="module" src="/main.js"></script>

test/fixtures/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import Comp from './Comp.vue'
+
+createApp(Comp).mount('#app')

test/test.js

@@ -0,0 +1,78 @@
+const fs = require('fs').promises
+const path = require('path')
+const execa = require('execa')
+const puppeteer = require('puppeteer')
+
+const timeout = (n) => new Promise((r) => setTimeout(r, n))
+
+const fixtureDir = path.join(__dirname, 'fixtures')
+const tempDir = path.join(__dirname, 'temp')
+let server
+let browser
+
+jest.setTimeout(100000)
+
+beforeAll(async () => {
+  await fs.rmdir(tempDir, { recursive: true })
+  await fs.mkdir(tempDir)
+  for (const file of await fs.readdir(fixtureDir)) {
+    await fs.copyFile(
+      path.join(__dirname, 'fixtures', file),
+      path.join(tempDir, file)
+    )
+  }
+})
+
+afterAll(async () => {
+  await browser.close()
+  await fs.rmdir(tempDir, { recursive: true })
+  server.kill('SIGTERM', {
+    forceKillAfterTimeout: 2000
+  })
+})
+
+test('test', async () => {
+  server = execa(path.resolve(__dirname, '../bin/vds.js'), {
+    cwd: tempDir
+  })
+  await new Promise((resolve) => {
+    server.stdout.on('data', (data) => {
+      if (data.toString().match('Running')) {
+        resolve()
+      }
+    })
+  })
+
+  browser = await puppeteer.launch()
+
+  const page = await browser.newPage()
+  await page.goto('http://localhost:3000')
+
+  // test nested components rendering
+  const button = await page.$('button')
+  expect(await button.evaluate((b) => b.textContent)).toBe('0')
+  const child = await page.$('.child')
+  expect(await child.evaluate((e) => e.textContent)).toBe('This is child')
+
+  // test interaction
+  await button.click()
+  expect(await button.evaluate((b) => b.textContent)).toBe('1')
+
+  // test HMR
+  const compPath = path.join(tempDir, 'Comp.vue')
+  const content = await fs.readFile(compPath, 'utf-8')
+  await fs.writeFile(
+    compPath,
+    content.replace('{{ count }}', 'count is {{ count }}')
+  )
+  // poll until it updates
+  const maxTries = 10
+  for (let tries = 0; tries < maxTries; tries++) {
+    const text = await button.evaluate((b) => b.textContent)
+    if (text === 'count is 1' || tries === maxTries - 1) {
+      expect(text).toBe('count is 1')
+    } else {
+      await timeout(200)
+    }
+  }
+})