test: add router vue 3 tests

Author: haoqunjiang

packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js

@@ -62,3 +62,77 @@ test('use with Babel', async () => {
 
   expect(pkg.dependencies).toHaveProperty('vue-router')
 })
+
+test('use with Vue 3', async () => {
+  const { files, pkg } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: require('@vue/cli-service/generator'),
+      options: {
+        vueVersion: '3'
+      }
+    },
+    {
+      id: '@vue/cli-plugin-router',
+      apply: require('../generator'),
+      options: {}
+    }
+  ])
+
+  expect(files['src/router/index.js']).toBeTruthy()
+  expect(files['src/router/index.js']).toMatch('createRouter')
+  expect(files['src/router/index.js']).toMatch('history: createWebHashHistory()')
+
+  expect(files['src/main.js']).toMatch('.use(router)')
+
+  expect(pkg.dependencies).toHaveProperty('vue-router')
+  expect(pkg.dependencies['vue-router']).toMatch('^4')
+})
+
+test('Vue 3 + History Mode', async () => {
+  const { files } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: require('@vue/cli-service/generator'),
+      options: {
+        vueVersion: '3'
+      }
+    },
+    {
+      id: '@vue/cli-plugin-router',
+      apply: require('../generator'),
+      options: {
+        historyMode: true
+      }
+    }
+  ])
+
+  expect(files['src/router/index.js']).toMatch(/import {.*createWebHistory/)
+  expect(files['src/router/index.js']).toMatch('history: createWebHistory(process.env.BASE_URL)')
+})
+
+test('Vue 3 + TypeScript', async () => {
+  const { files } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: require('@vue/cli-service/generator'),
+      options: {
+        vueVersion: '3'
+      }
+    },
+    {
+      id: '@vue/cli-plugin-router',
+      apply: require('../generator'),
+      options: {}
+    },
+    {
+      id: '@vue/cli-plugin-typescript',
+      apply: require('@vue/cli-plugin-typescript/generator'),
+      options: {}
+    }
+  ])
+
+  expect(files['src/router/index.ts']).toBeTruthy()
+  expect(files['src/router/index.ts']).toMatch(/import {.*RouteRecordRaw/)
+  expect(files['src/router/index.ts']).toMatch('const routes: Array<RouteRecordRaw> =')
+})

packages/@vue/cli-plugin-router/generator/index.js

@@ -4,7 +4,7 @@ module.exports = (api, options = {}, rootOptions = {}) => {
   api.injectImports(api.entryFile, `import router from './router'`)
 
   if (isVue3) {
-    api.transformScript(api.entryFile, require('./inject-use-router'))
+    api.transformScript(api.entryFile, require('./injectUseRouter'))
     api.extendPackage({
       dependencies: {
         'vue-router': '^4.0.0-0'

packages/@vue/cli-plugin-router/generator/inject-use-router.js renamed to packages/@vue/cli-plugin-router/generator/injectUseRouter.js

@@ -21,7 +21,9 @@ module.exports = (file, api) => {
   appRoots.replaceWith(({ node: createAppCall }) => {
     return j.callExpression(
       j.memberExpression(createAppCall, j.identifier('use')),
-      ['router']
+      [j.identifier('router')]
     )
   })
+
+  return root.toSource()
 }

packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js

@@ -36,7 +36,7 @@ const routes<% if (hasTypeScript) { %>: Array<RouteRecordRaw><% } %> = [
 const router = createRouter({
   <%_ if (historyMode) { _%>
   history: createWebHistory(process.env.BASE_URL),
-  <%_ else { _%>
+  <%_ } else { _%>
   history: createWebHashHistory(),
   <%_ } _%>
   routes