refactored and tested getNavigationMap to make it less fragile. nav-button can also be a text link. Added test route for welcome-page. Pulled in navigation to external page using navigationMap from funnel.

src/common-components/nav-button/nav-button.vue

@@ -1,5 +1,6 @@
 <template>
-    <input type="button" class="nav-button" v-bind:value="text" v-on:click="navTo"/>
+    <input v-if="type == 'button'" type="button" class="nav-button" v-bind:value="text" v-on:click="navTo"/>
+    <p v-else type="" class="nav-text" v-on:click="navTo">{{text}}</p>
 </template>
 
 <script>
@@ -9,6 +10,7 @@
         props: {
             text: String,
             scenario: String,
+            type: String,
         },
         methods: {
             navTo(){
@@ -25,4 +27,11 @@
         border-radius: 5px;
         min-width: 70px;
     }
+
+    .nav-text {
+        color: blue;
+        cursor: pointer;
+        text-decoration: underline;        
+    }
+    
 </style>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,5 +1,5 @@
 <template>
-    <navButton text="back" :scenario="navigationScenarios.CLICKED_BACK"></navButton>
+    <navButton type="button" text="back" :scenario="navigationScenarios.CLICKED_BACK"></navButton>
     Vehicle Year Placeholder
 </template>
 

src/layouts/welcome-page/welcome-page.vue

@@ -1,7 +1,8 @@
 <template>
     <p>Welcome Page Placeholder</p>
     <br />
-    <navButton text="Next" :scenario="navigationScenarios.CLICKED_FORWARD"></navButton>
+    <navButton type="button" text="Next" :scenario="navigationScenarios.CLICKED_FORWARD"></navButton>
+    <navButton text="Google" :scenario="navigationScenarios.CLICKED_TEST"></navButton>
 </template>
 
 <script>

src/router/index.js

@@ -12,7 +12,7 @@ const routes = [
         async beforeEnter(to, from, next) {
             try {
 
-                to.query.issPage = to.query.issPage === undefined ? issPageValues.WELCOME_PAGE : to.query.issPage;
+                to.query.issPage = !to.query.issPage ? issPageValues.WELCOME_PAGE : to.query.issPage;
 
                 if (router.hasRoute(to.query.issPage)) {
                     return next({ name: to.query.issPage, query: to.query, params: to.params });
@@ -77,7 +77,7 @@ async function GetRouteInfoFromPageName(pageName) {
     });
   
     return routeData;
-  }
+};
 
 // Navigate to the next route, depending on the scenario.
 router.navigate = async function (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) {
@@ -87,37 +87,62 @@ router.navigate = async function (scenario, currentRoute, optionalQuery = {}, op
     }
 
     // Match our maps up and navigate if we have a destination.
-    const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
-    const destinationIssPageValue = matchingScenarioMap.destinationIssPageValue;
+    const matchingScenarioMap = router.getNavigationMap(scenario, currentRoute);
 
-    if (destinationIssPageValue !== undefined) {
+    if (!matchingScenarioMap){
+        console.error("No matching scenario found. Please review the routing table.");
+        return;        
+    } else if (matchingScenarioMap && matchingScenarioMap.error ) {
+        console.error(matchingScenarioMap.error);
+        return;
+    }
+
+    if (matchingScenarioMap.destinationIssPageValue) {
         // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our issPage one.
         router.push({
             name: "root",
             query: Object.assign(optionalQuery, {
-                issPage: destinationIssPageValue,
+                issPage: matchingScenarioMap.destinationIssPageValue,
             }),
             params: optionalParams
         });
-    } else if (matchingScenarioMap.destinationUrl !== undefined) {
+    } else if (matchingScenarioMap.destinationUrl) {
         navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);
     }
-}
+};
+
+// Navigate to an external url.
+function navigateToUrl(url, optionalQuery = {}) {
+    // possibly show some loading screen in the future here.
+    var externalUrl = new URL(url);
+  
+    for (const queryKey in optionalQuery) {
+      externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
+    }
+    
+    window.location.assign(externalUrl);
+};
 
 // Get navigation map depending on the scenario and the current 'page' you're on.
-function getNavigationMap(scenario, currentRoute) {
+router.getNavigationMap = function (scenario, currentRoute) {
     const issPageValue = currentRoute.query.issPage;
-    const matchedQueryValue = routingTable()
+    try {
+        const matchedQueryValue = routingTable()
         .filter(
             (item) =>
                 item.issPageValue === issPageValue &&
                 item.maps.filter((map) => map.scenario === scenario).length > 0
-        )
-        .map((m) => m.maps.filter((map) => map.scenario === scenario))[0]
-        .filter(x => x.filter === true || x.filter === undefined);
+        );
 
-    return matchedQueryValue[0];
-}
+        var maps = matchedQueryValue ? matchedQueryValue.map((m) => m.maps.filter((map) => map.scenario === scenario))[0] : undefined;
+        
+        return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined;
+    }
+    catch (e) {
+        return { error: e };
+    }
+   
+};
 
 function GoToStartOn404(next) {
     const errorPageName = issPageValues.ERROR_404;

src/router/index.spec.js

@@ -0,0 +1,23 @@
+import router from "@/router"
+
+
+describe("router getNavigationMap", () => {
+    test("should return correct destinationUrl for welcome-page and CLICKED_TEST scenario", function() {
+        const currentRoute = { query: {issPage: "welcome-page"}};
+        expect(router.getNavigationMap("CLICKED_TEST", currentRoute)).toEqual({"destinationUrl": "https://www.google.com", "scenario": "CLICKED_TEST"});
+    });
+
+    test("should return undefined with bad issPage", function() {
+        const currentRoute = { query: {issPage: "badRoute"}};
+        expect(router.getNavigationMap("CLICKED_TEST", currentRoute)).toBeUndefined;
+    });
+
+    test("should return undefined with missing scenario", function() {
+        const currentRoute = { query: {issPage: "welcome-page"}};
+        expect(router.getNavigationMap("MISSING_SCENARIO", currentRoute)).toBeUndefined;
+    });
+});
+
+
+
+

src/router/router-constants/navigation-scenarios.js

@@ -5,6 +5,9 @@ const navigationScenarios = {
   
     // YMMS
     SELECTED_YEAR: "SELECTED_YEAR",
+
+    // TESTING
+    CLICKED_TEST: "CLICKED_TEST"
   };
   
   export { navigationScenarios };

src/router/router-constants/routing-table.js

@@ -18,10 +18,14 @@ const routingTable = function() {
       maps: [
         {
           scenario: navigationScenarios.CLICKED_FORWARD,
-          destinationIssPageValue: issPageValues.VEHICLE_YEAR
+          destinationIssPageValue: issPageValues.VEHICLE_YEAR,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_TEST,
+          destinationUrl: "https://www.google.com"
         }
       ]
-    }
+    },
   ];
 };