test: test for modernMode

packages/@vue/cli-service/__tests__/modernMode.spec.js

@@ -0,0 +1,80 @@
+jest.setTimeout(50000)
+
+const fs = require('fs-extra')
+const path = require('path')
+const portfinder = require('portfinder')
+const { createServer } = require('http-server')
+const { defaultPreset } = require('@vue/cli/lib/options')
+const create = require('@vue/cli-test-utils/createTestProject')
+const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
+
+let server, browser
+test('modern mode', async () => {
+  const project = await create('modern-mode', defaultPreset)
+
+  await project.write('vue.config.js', `
+    module.exports = {
+      modernMode: true
+    }
+  `)
+
+  const { stdout } = await project.run('vue-cli-service build')
+  expect(stdout).toMatch('Build complete.')
+
+  // assert correct bundle files
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  expect(files.some(f => /^app\.\w{8}\.js$/.test(f))).toBe(true)
+  expect(files.some(f => /^app-legacy\.\w{8}\.js$/.test(f))).toBe(true)
+  expect(files.some(f => /^chunk-vendors\.\w{8}\.js$/.test(f))).toBe(true)
+  expect(files.some(f => /^chunk-vendors-legacy\.\w{8}\.js$/.test(f))).toBe(true)
+
+  // assert correct asset links
+  const index = await project.read('dist/index.html')
+
+  // should use <script type="module"> for modern bundle
+  expect(index).toMatch(/<script type=module src=\/js\/chunk-vendors\.\w{8}\.js>/)
+  expect(index).toMatch(/<script type=module src=\/js\/app\.\w{8}\.js>/)
+
+  // should use <link rel="modulepreload"> for modern bundle
+  expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload>/)
+  expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload>/)
+
+  // should use <script nomodule> for legacy bundle
+  expect(index).toMatch(/<script src=\/js\/chunk-vendors-legacy\.\w{8}\.js nomodule>/)
+  expect(index).toMatch(/<script src=\/js\/app-legacy\.\w{8}\.js nomodule>/)
+
+  // should inject Safari 10 nomodule fix
+  const { safariFix } = require('../lib/webpack/ModernModePlugin')
+  expect(index).toMatch(`<script>${safariFix}</script>`)
+
+  // start server and ensure the page loads properly
+  const port = await portfinder.getPortPromise()
+  server = createServer({ root: path.join(project.dir, 'dist') })
+
+  await new Promise((resolve, reject) => {
+    server.listen(port, err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+
+  const url = `http://localhost:${port}/`
+  const launched = await launchPuppeteer(url)
+  browser = launched.browser
+  const page = launched.page
+
+  const getH1Text = async () => page.evaluate(() => {
+    return document.querySelector('h1').textContent
+  })
+
+  expect(await getH1Text()).toMatch('Welcome to Your Vue.js App')
+})
+
+afterAll(async () => {
+  if (browser) {
+    await browser.close()
+  }
+  if (server) {
+    server.close()
+  }
+})

packages/@vue/cli-service/__tests__/multiPage.spec.js

@@ -2,8 +2,8 @@ jest.setTimeout(50000)
 
 const path = require('path')
 const portfinder = require('portfinder')
-const { defaultPreset } = require('@vue/cli/lib/options')
 const { createServer } = require('http-server')
+const { defaultPreset } = require('@vue/cli/lib/options')
 const create = require('@vue/cli-test-utils/createTestProject')
 const serve = require('@vue/cli-test-utils/serveWithPuppeteer')
 const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer')
@@ -65,7 +65,7 @@ test('serve w/ multi page', async () => {
   )
 })
 
-let server, browser, page
+let server, browser
 test('build w/ multi page', async () => {
   const project = await create('e2e-multi-page-build', defaultPreset)
 
@@ -149,7 +149,7 @@ test('build w/ multi page', async () => {
   const url = `http://localhost:${port}/`
   const launched = await launchPuppeteer(url)
   browser = launched.browser
-  page = launched.page
+  const page = launched.page
 
   const getH1Text = async () => page.evaluate(() => {
     return document.querySelector('h1').textContent

packages/@vue/cli-service/lib/webpack/ModernModePlugin.js

@@ -2,7 +2,7 @@ const fs = require('fs-extra')
 const path = require('path')
 
 // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
-const Safari10NoModuleFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
+const safariFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
 
 class ModernModePlugin {
   constructor (targetDir, isModern) {
@@ -44,7 +44,7 @@ class ModernModePlugin {
         data.body.push({
           tagName: 'script',
           closeTag: true,
-          innerHTML: Safari10NoModuleFix
+          innerHTML: safariFix
         })
 
         // inject links for legacy assets as <script nomodule>
@@ -69,4 +69,5 @@ class ModernModePlugin {
   }
 }
 
+ModernModePlugin.safariFix = safariFix
 module.exports = ModernModePlugin