refactor: routing compatibles (#79)

Author: BobbieGoede

packages/vue-i18n-routing/src/__test__/compatibles.test.ts

@@ -76,6 +76,11 @@ describe('localePath', () => {
             routes: [
               { path: '/', name: 'index', component: { template: '<div>index</div>' } },
               { path: '/about', name: 'about', component: { template: '<div>About</div>' } },
+              {
+                path: '/path/:param',
+                name: 'as-a-test',
+                component: { template: '<div>Testing</div>' }
+              },
               { path: '/:pathMatch(.*)*', name: 'not-found', component: { template: '<div>Not Found</div>' } }
             ],
             history: createMemoryHistory()
@@ -106,6 +111,12 @@ describe('localePath', () => {
           assert.equal(vm.localePath('/?foo=1'), '/ja?foo=1')
           assert.equal(vm.localePath('/about?foo=1'), '/ja/about?foo=1')
           assert.equal(vm.localePath('/about?foo=1&test=2'), '/ja/about?foo=1&test=2')
+          assert.equal(vm.localePath('/path/as a test?foo=bar sentence'), '/ja/path/as a test?foo=bar+sentence')
+          assert.equal(
+            vm.localePath('/path/as%20a%20test?foo=bar%20sentence'),
+            '/ja/path/as%20a%20test?foo=bar+sentence'
+          )
+          assert.equal(vm.localePath({ path: '/about', hash: '#foo=bar' }), '/ja/about#foo=bar')
 
           // no define path
           assert.equal(vm.localePath('/vue-i18n'), '/ja/vue-i18n')
@@ -397,6 +408,11 @@ describe('switchLocalePath', () => {
             name: 'count',
             component: { template: '<div>Category</div>' }
           },
+          {
+            path: '/as a test',
+            name: 'as-a-test',
+            component: { template: '<div>Testing</div>' }
+          },
           {
             path: '/:pathMatch(.*)*',
             name: 'not-found',
@@ -443,20 +459,28 @@ describe('switchLocalePath', () => {
       assert.equal(vm.switchLocalePath('fr'), '/fr/about?foo=b%C3%A4r&four=%E5%9B%9B')
       assert.equal(vm.switchLocalePath('en'), '/en/about?foo=b%C3%A4r&four=%E5%9B%9B')
 
+      await router.push('/ja/about#foo=bar')
+      assert.equal(vm.switchLocalePath('ja'), '/ja/about#foo=bar')
+      assert.equal(vm.switchLocalePath('fr'), '/fr/about#foo=bar')
+      assert.equal(vm.switchLocalePath('en'), '/en/about#foo=bar')
+
+      await router.push('/ja/about?foo=é')
+      assert.equal(vm.switchLocalePath('ja'), '/ja/about?foo=%C3%A9')
+
       await router.push('/ja/category/1')
       assert.equal(vm.switchLocalePath('ja'), '/ja/category/japanese')
       assert.equal(vm.switchLocalePath('en'), '/en/category/english')
       assert.equal(vm.switchLocalePath('fr'), '/fr/category/franch')
 
       await router.push('/ja/count/三')
-      assert.equal(vm.switchLocalePath('ja'), '/ja/count/%E4%B8%89')
-      assert.equal(vm.switchLocalePath('en'), '/en/count/%E4%B8%89')
-      assert.equal(vm.switchLocalePath('fr'), '/fr/count/%E4%B8%89')
+      assert.equal(vm.switchLocalePath('ja'), '/ja/count/三')
+      assert.equal(vm.switchLocalePath('en'), '/en/count/三')
+      assert.equal(vm.switchLocalePath('fr'), '/fr/count/三')
 
       await router.push('/ja/count/三?foo=bär&four=四&foo=bar')
-      assert.equal(vm.switchLocalePath('ja'), '/ja/count/%E4%B8%89?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B')
-      assert.equal(vm.switchLocalePath('fr'), '/fr/count/%E4%B8%89?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B')
-      assert.equal(vm.switchLocalePath('en'), '/en/count/%E4%B8%89?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B')
+      assert.equal(vm.switchLocalePath('ja'), '/ja/count/三?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B')
+      assert.equal(vm.switchLocalePath('fr'), '/fr/count/三?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B')
+      assert.equal(vm.switchLocalePath('en'), '/en/count/三?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B')
 
       await router.push('/ja/foo')
       assert.equal(vm.switchLocalePath('ja'), '/ja/not-found-japanese')

packages/vue-i18n-routing/src/__test__/utils.test.ts

@@ -1,6 +1,5 @@
 import { describe, it, assert, test } from 'vitest'
 
-import { resolvedRouteToObject } from '../compatibles/utils'
 import { adjustRoutePathForTrailingSlash, getLocaleRouteName, findBrowserLocale } from '../utils'
 
 import type { BrowserLocale } from '../utils'
@@ -221,288 +220,3 @@ describe('findBrowserLocale', () => {
     assert.ok(locale === 'ja')
   })
 })
-
-describe('resolvedRouteToObject', () => {
-  it('should map resolved route without special characters', () => {
-    const expected = {
-      fullPath: '/ja/about',
-      hash: '',
-      query: {},
-      name: 'about___ja',
-      path: '/ja/about',
-      params: {},
-      matched: [
-        {
-          path: '/ja/about',
-          redirect: undefined,
-          name: 'about___ja',
-          meta: {},
-          aliasOf: undefined,
-          beforeEnter: undefined,
-          props: {
-            default: false
-          },
-          children: [],
-          instances: {},
-          leaveGuards: {},
-          updateGuards: {},
-          enterCallbacks: {},
-          components: {
-            default: {
-              template: '<div>About</div>'
-            }
-          }
-        }
-      ],
-      meta: {},
-      redirectedFrom: undefined,
-      href: '/ja/about'
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    assert.deepEqual(resolvedRouteToObject(expected as any), expected as any)
-  })
-
-  it('should map resolved route without special characters and query', () => {
-    const expected = {
-      fullPath: '/ja/about?foo=1&test=2',
-      hash: '',
-      query: {
-        foo: '1',
-        test: '2'
-      },
-      name: 'about___ja',
-      path: '/ja/about',
-      params: {},
-      matched: [
-        {
-          path: '/ja/about',
-          redirect: undefined,
-          name: 'about___ja',
-          meta: {},
-          aliasOf: undefined,
-          beforeEnter: undefined,
-          props: {
-            default: false
-          },
-          children: [],
-          instances: {},
-          leaveGuards: {},
-          updateGuards: {},
-          enterCallbacks: {},
-          components: {
-            default: {
-              template: '<div>About</div>'
-            }
-          }
-        }
-      ],
-      meta: {},
-      redirectedFrom: undefined,
-      href: '/ja/about?foo=1&test=2'
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    assert.deepEqual(resolvedRouteToObject(expected as any), expected as any)
-  })
-
-  it('should map resolved route without special characters and query with special characters', () => {
-    const expected = {
-      fullPath: '/ja/about?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B',
-      hash: '',
-      query: {
-        foo: ['bär', 'bar'],
-        four: '四'
-      },
-      name: 'about___ja',
-      path: '/ja/about',
-      params: {},
-      matched: [
-        {
-          path: '/ja/about',
-          redirect: undefined,
-          name: 'about___ja',
-          meta: {},
-          aliasOf: undefined,
-          beforeEnter: undefined,
-          props: {
-            default: false
-          },
-          children: [],
-          instances: {},
-          leaveGuards: {},
-          updateGuards: {},
-          enterCallbacks: {},
-          components: {
-            default: {
-              template: '<div>About</div>'
-            }
-          }
-        }
-      ],
-      meta: {},
-      redirectedFrom: undefined,
-      href: '/ja/about?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B'
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    assert.deepEqual(resolvedRouteToObject(expected as any), expected as any)
-  })
-
-  it('should map resolved route with special characters and query with special characters', () => {
-    const provided = {
-      fullPath: '/ja/count/三?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B',
-      hash: '',
-      query: {
-        foo: ['bär', 'bar'],
-        four: '四'
-      },
-      name: 'count___ja',
-      path: '/ja/count/三',
-      params: {
-        id: '三'
-      },
-      matched: [
-        {
-          path: '/ja/count/:id',
-          redirect: undefined,
-          name: 'count___ja',
-          meta: {},
-          aliasOf: undefined,
-          beforeEnter: undefined,
-          props: {
-            default: false
-          },
-          children: [],
-          instances: {},
-          leaveGuards: {},
-          updateGuards: {},
-          enterCallbacks: {},
-          components: {
-            default: {
-              template: '<div>Category</div>'
-            }
-          }
-        }
-      ],
-      meta: {},
-      redirectedFrom: undefined,
-      href: '/ja/count/%E5%9B%9B?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B'
-    }
-    const expected = {
-      fullPath: '/ja/count/%E4%B8%89?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B',
-      hash: '',
-      query: {
-        foo: ['bär', 'bar'],
-        four: '四'
-      },
-      name: 'count___ja',
-      path: '/ja/count/%E4%B8%89',
-      params: {
-        id: '三'
-      },
-      matched: [
-        {
-          path: '/ja/count/:id',
-          redirect: undefined,
-          name: 'count___ja',
-          meta: {},
-          aliasOf: undefined,
-          beforeEnter: undefined,
-          props: {
-            default: false
-          },
-          children: [],
-          instances: {},
-          leaveGuards: {},
-          updateGuards: {},
-          enterCallbacks: {},
-          components: {
-            default: {
-              template: '<div>Category</div>'
-            }
-          }
-        }
-      ],
-      meta: {},
-      redirectedFrom: undefined,
-      href: '/ja/count/%E4%B8%89?foo=b%C3%A4r&foo=bar&four=%E5%9B%9B'
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    assert.deepEqual(resolvedRouteToObject(provided as any), expected as any)
-  })
-
-  it('should map resolved route with special characters', () => {
-    const provided = {
-      fullPath: '/ja/count/三',
-      hash: '',
-      query: {},
-      name: 'count___ja',
-      path: '/ja/count/三',
-      params: {
-        id: '三'
-      },
-      matched: [
-        {
-          path: '/ja/count/:id',
-          redirect: undefined,
-          name: 'count___ja',
-          meta: {},
-          aliasOf: undefined,
-          beforeEnter: undefined,
-          props: {
-            default: false
-          },
-          children: [],
-          instances: {},
-          leaveGuards: {},
-          updateGuards: {},
-          enterCallbacks: {},
-          components: {
-            default: {
-              template: '<div>Category</div>'
-            }
-          }
-        }
-      ],
-      meta: {},
-      redirectedFrom: undefined,
-      href: '/ja/count/三'
-    }
-    const expected = {
-      fullPath: '/ja/count/%E4%B8%89',
-      hash: '',
-      query: {},
-      name: 'count___ja',
-      path: '/ja/count/%E4%B8%89',
-      params: {
-        id: '三'
-      },
-      matched: [
-        {
-          path: '/ja/count/:id',
-          redirect: undefined,
-          name: 'count___ja',
-          meta: {},
-          aliasOf: undefined,
-          beforeEnter: undefined,
-          props: {
-            default: false
-          },
-          children: [],
-          instances: {},
-          leaveGuards: {},
-          updateGuards: {},
-          enterCallbacks: {},
-          components: {
-            default: {
-              template: '<div>Category</div>'
-            }
-          }
-        }
-      ],
-      meta: {},
-      redirectedFrom: undefined,
-      href: '/ja/count/%E4%B8%89'
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    assert.deepEqual(resolvedRouteToObject(provided as any), expected as any)
-  })
-})