fix(client): fix mismatching on regex route path (#433)

Author: Azurewarth0920

packages/client/src/components/pages/RoutePathItem.vue

@@ -11,7 +11,7 @@ const emit = defineEmits<{
 }>()
 
 function parseExpressRoute(route: string) {
-  return route.split(/(:\w+[?*]?)/).filter(Boolean)
+  return route.split(/(:\w+[?*+]?(?:\([^)]*\))?[?*+]?)/).filter(Boolean)
 }
 
 const partsInput = ref<string[]>([])

packages/client/src/components/pages/__test__/routePathItem.test.ts

@@ -0,0 +1,28 @@
+import type { RouteRecordNormalized } from 'vue-router'
+import { mount } from '@vue/test-utils'
+import RoutePathItem from '../RoutePathItem.vue'
+
+describe('component: RoutePathItem', () => {
+  it('parseExpressRoute can correctly split the route string', () => {
+    const component = mount(RoutePathItem, {
+      props: {
+        route: {
+          path: '/hey/',
+          name: 'heya',
+        } as RouteRecordNormalized,
+      },
+    })
+    const parseExpressRoute = (component.vm as any).parseExpressRoute
+    expect(parseExpressRoute('/foo/:id(\\d+)/bar')).toEqual(['/foo/', ':id(\\d+)', '/bar'])
+    expect(parseExpressRoute('/foo/:id*')).toEqual(['/foo/', ':id*'])
+    expect(parseExpressRoute('/foo/:id+')).toEqual(['/foo/', ':id+'])
+    expect(parseExpressRoute('/foo/:id/bar')).toEqual(['/foo/', ':id', '/bar'])
+    expect(parseExpressRoute('/foo/:id')).toEqual(['/foo/', ':id'])
+    expect(parseExpressRoute('/:id(\\d+)+')).toEqual(['/', ':id(\\d+)+'])
+    expect(parseExpressRoute('/:id(\\d+)*')).toEqual(['/', ':id(\\d+)*'])
+    expect(parseExpressRoute('/:id(\\d+)*/:name+')).toEqual(['/', ':id(\\d+)*', '/', ':name+'])
+    // Example from Vue Router documentation
+    // https://router.vuejs.org/guide/essentials/dynamic-matching.html#Catch-all-404-Not-found-Route
+    expect(parseExpressRoute('/foo-:bar(.*)')).toEqual(['/foo-', ':bar(.*)'])
+  })
+})

vitest.config.ts

@@ -1,8 +1,16 @@
 import { defineConfig } from 'vitest/config'
 import Vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
 
 export default defineConfig({
-  plugins: [Vue()],
+  plugins: [Vue(), AutoImport({
+    imports: [
+      'vue',
+      'vue-router',
+      '@vueuse/core',
+    ],
+    dts: true,
+  })],
   define: {
     __DEV__: true,
     __FEATURE_PROD_DEVTOOLS__: true,