test: add resolver tests

Author: posva

e2e/hmr/.gitignore

@@ -1 +1,3 @@
 playground-tmp-*
+playground-routes-tmp-*
+playground-resolver-tmp-*

e2e/hmr/fixtures/vite-server.ts

@@ -10,17 +10,19 @@ type ViteFixtures = {
   baseURL: string
   projectRoot: string
   applyEditFile: (sourceFilePath: string, newContentFilePath: string) => void
+  playgroundName: string
 }
 
-const sourceDir = fileURLToPath(new URL('../playground', import.meta.url))
-
 export const test = base.extend<ViteFixtures>({
+  // @ts-expect-error: all options are scoped per worker
+  playgroundName: ['', { scope: 'worker', option: true }],
+
   // @ts-expect-error: we need to compute projectRoot per worker
   projectRoot: [
-    async ({}, use, testInfo) => {
+    async ({ playgroundName }, use, testInfo) => {
       const fixtureDir = fileURLToPath(
         new URL(
-          `../playground-tmp-worker-${testInfo.workerIndex}`,
+          `../playground-tmp-${playgroundName}-worker-${testInfo.workerIndex}`,
           import.meta.url
         )
       )
@@ -32,8 +34,9 @@ export const test = base.extend<ViteFixtures>({
 
   // @ts-expect-error: type matched what is passed to use(server)
   devServer: [
-    async ({ projectRoot }, use) => {
+    async ({ projectRoot, playgroundName }, use) => {
       const fixtureDir = projectRoot
+      const sourceDir = fileURLToPath(new URL(`../playground`, import.meta.url))
 
       fs.rmSync(fixtureDir, { force: true, recursive: true })
       fs.cpSync(sourceDir, fixtureDir, {
@@ -50,7 +53,7 @@ export const test = base.extend<ViteFixtures>({
       // Start a real Vite dev server with your plugin(s) & config.
       // If you already have vite.config.ts, omit configFile:false and rely on it.
       const server = await createServer({
-        configFile: path.join(fixtureDir, 'vite.config.ts'),
+        configFile: path.join(fixtureDir, `vite.config.${playgroundName}.ts`),
         // If you need to inline the plugin directly, you could do:
         // configFile: false,
         // plugins: [myPlugin()],

e2e/hmr/playground/edits/src/pages/hmr-alias-define-page-with-alias.vue

@@ -7,6 +7,5 @@ definePage({
 <template>
   <main>
     <h1>HMR Alias Test</h1>
-    <pre data-testid="route-path">{{ $route.path }}</pre>
   </main>
 </template>

e2e/hmr/playground/edits/src/pages/hmr-path-define-page-with-custom-path.vue

@@ -6,7 +6,6 @@ definePage({
 
 <template>
   <main>
-    <h1>HMR Path Test</h1>
-    <pre data-testid="route-path">{{ $route.path }}</pre>
+    <h1 data-testid="title">HMR Path Test</h1>
   </main>
 </template>

e2e/hmr/playground/package.json

@@ -2,6 +2,7 @@
   "private": true,
   "name": "fixture-hmr",
   "scripts": {
+    "dev": "vite -c vite.config.routes.ts",
     "build": "vite build"
   }
 }

e2e/hmr/playground/src/App.vue

@@ -1,14 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const to = ref('')
+const router = useRouter()
+
+function navigate() {
+  if (to.value) {
+    router.push(to.value)
+  }
+}
+</script>
+
 <template>
   <nav>
     <ul>
       <li><RouterLink to="/">Home</RouterLink></li>
-      <li>
-        <RouterLink to="/custom-path" data-testid="custom-path-link"
-          >Custom path after change</RouterLink
-        >
-      </li>
     </ul>
   </nav>
+
+  <pre data-testid="route">{{ $route.fullPath }}</pre>
+  <form @submit.prevent="navigate" data-testid="navigator">
+    <input type="text" v-model="to" data-testid="goto" placeholder="/about" />
+    <button type="submit">Go</button>
+  </form>
+
   <hr />
 
   <RouterView />

e2e/hmr/playground/src/pages/hmr-alias.vue

@@ -1,6 +1,5 @@
 <template>
   <main>
     <h1>HMR Alias Test</h1>
-    <pre data-testid="route-path">{{ $route.path }}</pre>
   </main>
 </template>

e2e/hmr/playground/src/pages/hmr-path.vue

@@ -1,6 +1,5 @@
 <template>
   <main>
     <h1>HMR Path Test</h1>
-    <pre data-testid="route-path">{{ $route.path }}</pre>
   </main>
 </template>

e2e/hmr/playground/vite.config.ts renamed to e2e/hmr/playground/vite.config.base.ts

@@ -1,7 +1,5 @@
 import { defineConfig } from 'vite'
 import { fileURLToPath, URL } from 'node:url'
-import VueRouter from '../../../src/vite'
-import Vue from '@vitejs/plugin-vue'
 
 const root = fileURLToPath(new URL('./', import.meta.url))
 
@@ -20,15 +18,4 @@ export default defineConfig({
   build: {
     sourcemap: true,
   },
-
-  plugins: [
-    VueRouter({
-      root,
-      // logs: true,
-      // defaults to false on CI
-      watch: true,
-      // getRouteName: getPascalCaseRouteName,
-    }),
-    Vue(),
-  ],
 })

e2e/hmr/playground/vite.config.resolver.ts

@@ -0,0 +1,22 @@
+import { mergeConfig } from 'vite'
+import baseConfig from './vite.config.base.ts'
+import { fileURLToPath, URL } from 'node:url'
+import VueRouter from '../../../src/vite'
+import Vue from '@vitejs/plugin-vue'
+
+const root = fileURLToPath(new URL('./', import.meta.url))
+
+export default mergeConfig(baseConfig, {
+  plugins: [
+    VueRouter({
+      root,
+      // logs: true,
+      // defaults to false on CI
+      watch: true,
+      experimental: {
+        paramParsers: true,
+      },
+    }),
+    Vue(),
+  ],
+})