test: add backend-https-vite-http (#8)

examples/backend-server/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",
-    "vite": "^3.0.0"
+    "vite": "^3.0.8"
   },
   "dependencies": {
     "connect": "^3.7.0",

examples/basic/package.json

@@ -8,6 +8,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^3.0.0"
+    "vite": "^3.0.8"
   }
 }

examples/middleware-mode/package.json

@@ -8,6 +8,6 @@
   },
   "devDependencies": {
     "connect": "^3.7.0",
-    "vite": "^3.0.0"
+    "vite": "^3.0.8"
   }
 }

examples/with-proxy-no-websocket/package.json

@@ -9,6 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^3.0.0"
+    "vite": "^3.0.8"
   }
 }

examples/with-proxy/package.json

@@ -9,6 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^3.0.0"
+    "vite": "^3.0.8"
   }
 }

tests/fixtures-cases/backend-https-vite-http.ts

@@ -0,0 +1,98 @@
+import { test, expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { spawn } from 'cross-spawn'
+import {
+  editFile,
+  getWorkspaceFileURL,
+  killProcess,
+  ports,
+  collectAndWaitUntilOutput,
+  gotoAndWaitForHMRConnection,
+  outputError
+} from '../utils/index.js'
+
+const workspaceFileURL = getWorkspaceFileURL('fixture', 'backend-https-vite-http')
+const accessURL = `https://localhost:${ports.backendHttpsViteHttp}/`
+
+const startVite = async () => {
+  // pnpm run dev cannot be used because killing process does not work
+  const viteDevProcess = spawn('pnpm', ['run', 'dev:vite'], {
+    cwd: workspaceFileURL
+  })
+  const backendProcess = spawn('pnpm', ['run', 'dev:backend'], {
+    cwd: workspaceFileURL
+  })
+  await Promise.all([
+    collectAndWaitUntilOutput(
+      viteDevProcess.stdout,
+      viteDevProcess.stderr,
+      'use --host to expose'
+    ),
+    collectAndWaitUntilOutput(
+      backendProcess.stdout,
+      backendProcess.stderr,
+      'Open your browser.'
+    )
+  ])
+
+  return async () => {
+    try {
+      await killProcess(viteDevProcess)
+    } catch {}
+    try {
+      await killProcess(backendProcess)
+    } catch {}
+  }
+}
+
+const setupAndGotoPage = async (page: Page) => {
+  outputError(page)
+  await gotoAndWaitForHMRConnection(page, accessURL, { timeout: 10000 })
+}
+
+test('hmr test', async ({ page }) => {
+  const finishVite = await startVite()
+  try {
+    await setupAndGotoPage(page)
+
+    const title = page.locator('h1')
+    await expect(title).toHaveText('Hello Vite!')
+
+    await editFile('./frontend-src/main.js', workspaceFileURL, (content) =>
+      content.replace('Vite!</h1>', 'Vite!!!</h1>')
+    )
+
+    await expect(title).toHaveText('Hello Vite!!!')
+  } finally {
+    await finishVite()
+  }
+})
+
+test('restart test', async ({ page }) => {
+  let finishVite1: (() => Promise<void>) | undefined
+  let finishVite2: (() => Promise<void>) | undefined
+
+  try {
+    finishVite1 = await startVite()
+    await setupAndGotoPage(page)
+
+    const navigationPromise = page.waitForNavigation()
+
+    await finishVite1()
+    finishVite1 = undefined
+
+    finishVite2 = await startVite()
+
+    await navigationPromise
+  } finally {
+    await finishVite1?.()
+    await finishVite2?.()
+  }
+})
+
+test.afterAll(async () => {
+  // cleanup
+  await editFile('./frontend-src/main.js', workspaceFileURL, (content) =>
+    content.replace('Vite!!!</h1>', 'Vite!</h1>')
+  )
+})

tests/fixtures/backend-https-vite-http/backend-src/cert.pem

@@ -0,0 +1,20 @@
+-----BEGIN CERTIFICATE-----
+MIIDOTCCAiECFFG+MxIiDMPrBy0Xe4hKO7FA+WL/MA0GCSqGSIb3DQEBCwUAMFkx
+CzAJBgNVBAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRl
+cm5ldCBXaWRnaXRzIFB0eSBMdGQxEjAQBgNVBAMMCWxvY2FsaG9zdDAeFw0yMjA4
+MTIxNzA2MTZaFw0zMjA4MDkxNzA2MTZaMFkxCzAJBgNVBAYTAkFVMRMwEQYDVQQI
+DApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQx
+EjAQBgNVBAMMCWxvY2FsaG9zdDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBAM5z68w7IWcJ410SGr9jQSLRYsrL+m1ihH+8Z5rnp4v3mwiqzISxbO/q1/vD
+MfWi31lUMmCbOIRPaINDsnOeV87kE9oZs5HKuHpl42iWBnMqb1BIU54jtv3gn1qx
+tqGRoMeQkrNO4jMT7ZLxrWLfCox70Hng3ykRcADv5qcRU3JTnFZqdN61n3WKTUnL
+tbSiBhVuQWOLxKC2M6gy89xZo+qa9GKNwhLIXMju8/PE9obdfuoAKrLW5i48RhIH
+FwWLhXfRSfzIvcOgXgWBnfDVt3aMOLizpGsDSvElWoruejXh+ZsITzh0w/DEI57H
++4dGlkqfPL68vZcWWoDMo5crPfcCAwEAATANBgkqhkiG9w0BAQsFAAOCAQEAwOBm
+0arpDtUqz4xWRAY6XaXnODTlnyfZZj1LTQ6E0vkI2NMytsDi2X0oTz3n/uEUyrbk
+0m96AJN/BBF9B9jii/1e0UxqujX9xPvglW1TNGCGENi2LZ7De6kw2+d8lw+xc7BW
+5vvrmXK1Kx9w9R7yOUdJSOXVVvPENBUiG5HPJiPvEjVSoVAAA8Ix8P5bVcRseotU
+ZReEz4ncvWL84lYdTbcTKMm4uWzw71snbBgbrs9T8aqaa+oy563odzdKywSU+z4P
+L4NVC+/+R+Upk5ilB+8XchfERvwKPrhwXmuJyXyTDIHNg6ATmsxA2wWOPEJTFuEV
+MMF5ZCrt6NBxL3kRNQ==
+-----END CERTIFICATE-----

tests/fixtures/backend-https-vite-http/backend-src/index.js

@@ -0,0 +1,37 @@
+import Connect from 'connect'
+import dns from 'dns'
+import fs from 'fs/promises'
+import https from 'https'
+
+dns.setDefaultResultOrder('verbatim')
+
+const connect = Connect()
+
+const entrypoint = 'frontend-src/main.js'
+
+const viteInject = `
+  <script type="module" src="http://localhost:7001/@vite/client"></script>
+  <script type="module" src="http://localhost:7001/${entrypoint}"></script>
+`
+
+const indexTemplatePath = new URL('./templates/index.html', import.meta.url)
+
+connect.use(async (req, res, _next) => {
+  let content = await fs.readFile(indexTemplatePath, 'utf-8')
+  content = content.replace('<%- viteInject %>', viteInject)
+  res.statusCode = 200
+  res.end(content)
+})
+
+/** @type {https.ServerOptions} */
+const options = {
+  key: await fs.readFile(new URL('./key.pem', import.meta.url)),
+  cert: await fs.readFile(new URL('./cert.pem', import.meta.url))
+}
+
+const server = https.createServer(options, connect).listen(7002, 'localhost')
+server.on('listening', () => {
+  const addr = server.address()
+  console.log(`Listening on https://localhost:${addr.port}`)
+  console.log('Open your browser.')
+})

tests/fixtures/backend-https-vite-http/backend-src/key.pem

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAznPrzDshZwnjXRIav2NBItFiysv6bWKEf7xnmueni/ebCKrM
+hLFs7+rX+8Mx9aLfWVQyYJs4hE9og0Oyc55XzuQT2hmzkcq4emXjaJYGcypvUEhT
+niO2/eCfWrG2oZGgx5CSs07iMxPtkvGtYt8KjHvQeeDfKRFwAO/mpxFTclOcVmp0
+3rWfdYpNScu1tKIGFW5BY4vEoLYzqDLz3Fmj6pr0Yo3CEshcyO7z88T2ht1+6gAq
+stbmLjxGEgcXBYuFd9FJ/Mi9w6BeBYGd8NW3dow4uLOkawNK8SVaiu56NeH5mwhP
+OHTD8MQjnsf7h0aWSp88vry9lxZagMyjlys99wIDAQABAoIBAAsI+S6WboeiaKu9
+3v4h4QZqaLxsQLt+C5UETglinnsFxhylfH8POMJuLBNB8LaveP6+WF7/jPrNf8mc
+Ybp6WTkuybzbqNR/IHMyZQBfHIMlXoPNCeMnB430ZrAjVZ63OP/Rw3WgHskaJJW5
+I0pon5i4uYD6OxNn4jO6nvqJG4u9wcaB0HIhtJvf7CWMUBlxq8Lt4ZstR5KQ/V+1
+CILCFMKI0UG6ZdSucwEjOJoDuN4BV7k3WtVM1S5jFU93M67dV58ZKGpHYlm8e81M
+YckEMMYNcLn32GPSL8VFVia+sIvGWkCQ6qmiUAVeZxoaHqekl5CPOBHX0zOVLcD+
+0l4JjUECgYEA6IOjRbApSmShm+XsZdNkyoOyejoUldwXidf7iEfRW7kF8brCenhD
+u3BrlPwa6oGrM0Grk0xeQPpFXVbyI85niGbvmAv1juD5ZF3ectb0vfUc9nokTWmu
+5YTJF0TekTsQMpSB7zJzf7bSP1/QxHjKxVHe8aK36t7WF0gfResFziECgYEA405i
+/qkXtxjosP2Gw7rQ1vePc8XwS3/01EuLz9yL0zhoz+XdSifVsv0AEJu0pvhkYBRD
+ohhfeHY6mn6uHYYjcQMV6PAuj30VNsQNWQoYYoENtnwypeIVEMNRaoMFzcKOGmp8
+fheefL2avt114X86d6gWHd5GFJu40gHl50r0mRcCgYEA0n8SGi3wQ6Q01pFh4ZFu
+ZxSxSIw6RK17NdStp+P0ukgYBI6iMAOethuBmeBecb0wg3fJX9G8ZrDsiSMElbvv
+6QHfmNQC2/X6cY21rFvEOBCmxtEu+lJZ/vmmn4U+xVYmRNRDiYwwGggl8S/KLYR5
+dge3gSRhwqU4Rt2JSmAJ4mECgYBYFuq6cmFkbdzPqpDtjZqdlHcdkNodCEujcluO
+hJQTmUrVNunZcTKaGP5LcWxDQQP1UCUdzoBBOOBhOzLS8kcN5vo4ucvxg7IS9UuO
+9CCbHBRqYhtmugUb5/XHZ1t6cCmOBzKT0ydyhDBSQ5UJfLr14Egh7yANoIOxr1af
+mibMpQKBgBl6Qv07HItL4yNM+22/QNcmFCsIvVQq5LlolNrSj3Jq7UuNsnyScUXR
+WlLWfrQgaUPmW+c1Ev7Uwf0et7G96G1JfGp0Ubq1FQN2ZxkQDATuN2bsprjmKEUZ
+AWGDup4tl7fDOrO25Lq/3vjZ38WIZ0xprkAFOaTbLmA+BEtg1YQV
+-----END RSA PRIVATE KEY-----

tests/fixtures/backend-https-vite-http/backend-src/templates/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <%- viteInject %>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

tests/fixtures/backend-https-vite-http/frontend-src/main.js

@@ -0,0 +1,6 @@
+import 'vite/modulepreload-polyfill'
+
+document.querySelector('#app').innerHTML = `
+  <h1>Hello Vite!</h1>
+  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
+`

tests/fixtures/backend-https-vite-http/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "backend-https-vite-http",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev:vite": "vite dev",
+    "dev:backend": "node backend-src/index.js"
+  },
+  "devDependencies": {
+    "vite": "^3.0.8"
+  },
+  "dependencies": {
+    "connect": "^3.7.0"
+  }
+}

tests/fixtures/backend-https-vite-http/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import dns from 'dns'
+
+dns.setDefaultResultOrder('verbatim')
+
+export default defineConfig({
+  server: {
+    port: 7001,
+    strictPort: true,
+    hmr: {
+      protocol: 'ws'
+    },
+    // for consistency
+    watch: {
+      usePolling: true,
+      interval: 100
+    }
+  }
+})

tests/playwright.config.ts

@@ -10,7 +10,8 @@ const config: PlaywrightTestConfig = {
   testDir: '.',
   testMatch: '{examples-cases,fixtures-cases}/**/*.ts',
   use: {
-    headless: !isDebug
+    headless: !isDebug,
+    ignoreHTTPSErrors: true // allow self-signed cert
   }
 }
 export default config