Mock Router: Allow params property to be either array of strings or object of { key: value }

examples/mockRouter.stories.ts

@@ -51,6 +51,30 @@ Default.decorators = [
   })
 ]
 
+export const ParamsObject = () => ({
+  args: {
+    path: '/'
+  },
+  /* create template and pass Storybook args to <router-view> using props */
+  template: `
+    <div class="my-wrapper">
+      <div>
+        <h2>$route:</h2>
+        <pre>&lt;pre&gt;&#123;&#123;&nbsp;&sect;route&nbsp;&#125;&#125;&lt;/pre&gt;</pre>
+        <pre>{{ $route }}</pre>
+      </div>
+    </div>
+  `
+})
+
+ParamsObject.decorators = [
+  mockRouter({
+    meta: { some: 'meta' },
+    params:{ "type": "custom", "projectId": "1", "tab": "products", "vProduct": "1" },
+    query: { 'some': 'query' }
+  })
+]
+
 export const DynamicTemplate = () => ({
   /* create template and pass Storybook args to <router-view> using props */
   template: `

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-vue3-router",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "A Storybook decorator that allows you to build stories for your routing-aware components.",
   "keywords": [
     "storybook-addons",

src/utils.ts

@@ -43,11 +43,19 @@ export function resetRoutes(router: Router, newRoutes: RouteRecordRaw[]): void {
 }
 
 type argObjectKeys = Record<string, unknown>
-export function getFromArgs(args: argObjectKeys, options: Array<string>) {
+export type ArgsArrayOrObject = Array<string> | { [key: string]: string }
+export function getFromArgs(args: argObjectKeys, options: ArgsArrayOrObject): argObjectKeys {
   let filtered: argObjectKeys = {}
-  options.forEach((option) => {
-    filtered = { ...filtered, [option]: args[option] }
-  })
-
+  if (Array.isArray(options)) {
+    options.forEach((option) => {
+      filtered = { ...filtered, [option]: args[option] }
+    })
+  } else if (typeof options === 'object' && options !== null) {
+    Object.keys(options).forEach((option) => {
+      filtered = { ...filtered, [option]: options[option] }
+    })
+  } else {
+    filtered = { ...filtered }
+  }
   return filtered
 }

src/withMockRouter.ts

@@ -9,7 +9,7 @@ import type {
   RouteLocationNormalizedLoaded
 } from 'vue-router'
 
-import { getFromArgs } from './utils'
+import { getFromArgs, type ArgsArrayOrObject } from './utils'
 
 type MockRouter = Router & { isMocked?: boolean }
 type MockRoute = RouteLocationNormalizedLoaded & { isMocked?: boolean }
@@ -26,7 +26,7 @@ type MockRoute = RouteLocationNormalizedLoaded & { isMocked?: boolean }
  */
 export function withMockRouter (
     /* optional: router options - used to pass `initialRoute` value, `beforeEach()` navigation guard methods and vue-router `createRouter` options */
-    options: { meta?: Array<string>, params?: Array<string>, query?: Array<string> }
+    options: { meta?: ArgsArrayOrObject, params?: ArgsArrayOrObject, query?: ArgsArrayOrObject }
 ): Decorator {
   return (_, ctx) => ({
     setup () {