From 6cb6d18ed406a2e8e1a5c890138cf900e3b37b12 Mon Sep 17 00:00:00 2001
From: ygj6 <yuangongji@foxmail.com>
Date: Sat, 3 Jul 2021 16:01:06 +0800
Subject: [PATCH] feat: add preload test cases

---
 docs/config/index.md                          |  4 +-
 .../preload/__tests__/preload.spec.ts         | 32 ++++++++++
 .../playground/preload/__tests__/serve.js     | 58 +++++++++++++++++++
 packages/playground/preload/index.html        |  7 +++
 packages/playground/preload/package.json      | 18 ++++++
 packages/playground/preload/src/About.vue     |  8 +++
 packages/playground/preload/src/App.vue       | 13 +++++
 packages/playground/preload/vite.config.js    |  5 ++
 packages/vite/src/node/build.ts               |  3 +-
 9 files changed, 144 insertions(+), 4 deletions(-)
 create mode 100644 packages/playground/preload/__tests__/preload.spec.ts
 create mode 100644 packages/playground/preload/__tests__/serve.js
 create mode 100644 packages/playground/preload/index.html
 create mode 100644 packages/playground/preload/package.json
 create mode 100644 packages/playground/preload/src/About.vue
 create mode 100644 packages/playground/preload/src/App.vue
 create mode 100644 packages/playground/preload/vite.config.js

diff --git a/docs/config/index.md b/docs/config/index.md
index 3a05f4432b830e..caf84b0c12136d 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -563,9 +563,9 @@ createServer()
 ### build.autoPreload
 
 - **Type:** `boolean`
-- **Default:** `false`
+- **Default:** `true`
 
-  Specify the output directory (relative to [project root](/guide/#index-html-and-project-root)).
+  whether to inject `__vitePreload` helper method.
 
 ### build.outDir
 
diff --git a/packages/playground/preload/__tests__/preload.spec.ts b/packages/playground/preload/__tests__/preload.spec.ts
new file mode 100644
index 00000000000000..5b90b24bee435f
--- /dev/null
+++ b/packages/playground/preload/__tests__/preload.spec.ts
@@ -0,0 +1,32 @@
+import { isBuild } from '../../testUtils'
+import { port } from './serve'
+const url = `http://localhost:${port}`
+
+if (isBuild) {
+  test('preload on', async () => {
+    await page.goto(url)
+    let appHtml = await page.content()
+    expect(appHtml).not.toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+    // after click button, we will run `__vitePreload` method and insert a modulepreload.
+    await page.click('button')
+    appHtml = await page.content()
+    expect(appHtml).toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+  })
+} else {
+  test('preload off', async () => {
+    await page.goto(url)
+    let appHtml = await page.content()
+    expect(appHtml).not.toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+    await page.click('button')
+    appHtml = await page.content()
+    expect(appHtml).not.toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+  })
+}
diff --git a/packages/playground/preload/__tests__/serve.js b/packages/playground/preload/__tests__/serve.js
new file mode 100644
index 00000000000000..986a322a5a168e
--- /dev/null
+++ b/packages/playground/preload/__tests__/serve.js
@@ -0,0 +1,58 @@
+// @ts-check
+// this is automtically detected by scripts/jestPerTestSetup.ts and will replace
+// the default e2e test serve behavior
+
+const path = require('path')
+const http = require('http')
+const sirv = require('sirv')
+
+const port = (exports.port = 9527)
+
+/**
+ * @param {string} root
+ * @param {boolean} isProd
+ */
+exports.serve = async function serve(root, isProd) {
+  let autoPreload = false
+  if (isProd) {
+    autoPreload = true
+  }
+  // build first
+  const { build } = require('vite')
+  await build({
+    root,
+    logLevel: 'silent',
+    build: {
+      minify: false,
+      autoPreload
+    }
+  })
+
+  // start static file server
+  const serve = sirv(path.resolve(root, 'dist'))
+  const httpServer = http.createServer((req, res) => {
+    if (req.url === '/ping') {
+      res.statusCode = 200
+      res.end('pong')
+    } else {
+      serve(req, res)
+    }
+  })
+
+  return new Promise((resolve, reject) => {
+    try {
+      const server = httpServer.listen(port, () => {
+        resolve({
+          // for test teardown
+          async close() {
+            await new Promise((resolve) => {
+              server.close(resolve)
+            })
+          }
+        })
+      })
+    } catch (e) {
+      reject(e)
+    }
+  })
+}
diff --git a/packages/playground/preload/index.html b/packages/playground/preload/index.html
new file mode 100644
index 00000000000000..8a856b01f58df4
--- /dev/null
+++ b/packages/playground/preload/index.html
@@ -0,0 +1,7 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './src/App.vue'
+
+  createApp(App).mount('#app')
+</script>
diff --git a/packages/playground/preload/package.json b/packages/playground/preload/package.json
new file mode 100644
index 00000000000000..5871ba0fb4ce71
--- /dev/null
+++ b/packages/playground/preload/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "test-preload",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.8"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.0.0",
+    "@vue/compiler-sfc": "^3.0.8"
+  }
+}
diff --git a/packages/playground/preload/src/About.vue b/packages/playground/preload/src/About.vue
new file mode 100644
index 00000000000000..10e5252543f7cf
--- /dev/null
+++ b/packages/playground/preload/src/About.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    This is about page.
+  </div>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/packages/playground/preload/src/App.vue b/packages/playground/preload/src/App.vue
new file mode 100644
index 00000000000000..8bf9c9f4f42265
--- /dev/null
+++ b/packages/playground/preload/src/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>This is app page</div>
+  <button type="button" @click="show = !show">show</button>
+  <div v-if="show">
+    <about />
+  </div>
+</template>
+
+<script setup>
+import { ref, defineAsyncComponent } from 'vue'
+const About = defineAsyncComponent(() => import('./About.vue'))
+const show = ref(false)
+</script>
diff --git a/packages/playground/preload/vite.config.js b/packages/playground/preload/vite.config.js
new file mode 100644
index 00000000000000..1408640d1ed016
--- /dev/null
+++ b/packages/playground/preload/vite.config.js
@@ -0,0 +1,5 @@
+const vuePlugin = require('@vitejs/plugin-vue')
+
+module.exports = {
+  plugins: [vuePlugin()]
+}
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 85789bf87b5a0c..6fa28259489460 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -70,8 +70,7 @@ export interface BuildOptions {
    */
   polyfillDynamicImport?: boolean
   /**
-   * whether to inject `__vitePreload` method.
-   * Note: does not apply to library mode.
+   * whether to inject `__vitePreload` helper method.
    * @default true
    */
   autoPreload?: boolean