Merge pull request #4 from Safelite/feature/Digital/SSR-44

dynamic router is working with mock endpoints for checking if a page exists

.gitignore

@@ -21,3 +21,7 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Misc
+coverage/*
+junit.xml

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

jest.config.js

@@ -1,11 +1,11 @@
 module.exports = {
   verbose: true,
-  coverageReporters: ["html", "text", "jest-junit", "cobertura"],
+  coverageReporters: ["html", "text", "cobertura"],
+  reporters: ["default", "jest-junit"],
   testResultsProcessor: "jest-junit",
   preset: "@vue/cli-plugin-unit-jest",
-  transform: { "^.+\\.vue$": "vue-jest" },
+  transform: { "^.+\\.vue$": "@vue/vue3-jest" },
   moduleFileExtensions: ["js", "vue"],
-  modulePathIgnorePatterns: ["vin-lookup"],
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
     "!src/main.js",

package.json

@@ -12,12 +12,14 @@
     "@popperjs/core": "^2.10.2",
     "axios": "^0.27.2",
     "bootstrap": "^5.1.1",
+    "jest-junit": "^13.0.0",
     "pinia": "^2.0.22",
     "pinia-plugin-persistedstate": "^2.2.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },
   "devDependencies": {
+    "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-unit-jest": "~5.0.0",
     "@vue/cli-service": "~5.0.0",

src/constants/mock-endpoints.js

@@ -0,0 +1,12 @@
+//used until real services are available
+
+const endpoints = {
+    GetRouteInfo: {
+      url: "https://mockey.qa.sagaws.net/service/ISS/Content/RouteInfo",
+      method: "GET",
+    },
+   
+  };
+  
+  export { endpoints };
+  

src/global-methods.js

@@ -17,5 +17,22 @@ export default {
           }
         );
     });
+  },
+
+  //used for mocked services
+  async mockCallHttpClient(method, endpoint) {
+    return new Promise((resolve, reject) => {
+      axios({ method: method, url: endpoint, crossDomain: true, responseType: {}})
+        .then((response) => {
+          return resolve(response);
+        },
+          error => {
+            console.error(error);
+            return reject(error.response);
+          }
+        );
+    });
+  
+  
   }
 };

src/layouts/error-404/error-404.vue

@@ -0,0 +1,9 @@
+<template>
+    404: Page Not Found
+</template>
+
+<script>
+    export default {
+        name: 'error-404'
+    }
+</script>

src/layouts/vehicle-make/vehicle-make.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/layouts/vehicle-make/vehicle-make.vue

@@ -0,0 +1,9 @@
+<template>
+    Vehicle Make Placeholder
+</template>
+
+<script>
+    export default {
+        name: 'vehicle-make'
+    }
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+    <p>Welcome Page Placeholder</p>
+</template>
+
+<script>
+    export default {
+        name: 'welcome-page'
+    }
+</script>
+
+<style scoped>
+    p {
+        font-weight: bold;
+        color: purple;
+    }
+
+</style>

src/router/index.js

@@ -1,5 +1,7 @@
-import { storeActions } from "@/constants/store-actions";
 import { createWebHistory, createRouter } from "vue-router";
+import { lazyLoadComponent } from "./dynamic-routing/component-loader";
+import { endpoints } from "../constants/mock-endpoints";
+import globalMethods from "@/global-methods";
 
 const routes = [
     {
@@ -12,6 +14,11 @@ const routes = [
                 }
                 const routeData = await GetRouteInfoFromPageName(to.query.issPage);
 
+                if(routeData[0].name.toLowerCase() === "error")
+                {
+                    throw("Page not found!")
+                }
+
                 // Add our dynamic route.
                 router.addRoute({
                     path: routeData[0].path, // Always the same path, because we control it with query strings.
@@ -19,7 +26,6 @@ const routes = [
                     component: routeData[0].component,
                 });
 
-
                 // Assign current query string parameters, as well as our fmgPage one.
                 next({
                     name: routeData[0].name,
@@ -29,7 +35,7 @@ const routes = [
 
             } catch (error) {
                 console.log(error);
-                await GoToStartOn404(next);
+                GoToStartOn404(next);
             }
         }
     }];
@@ -42,9 +48,15 @@ const router = createRouter({
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 async function GetRouteInfoFromPageName(pageName) {
+    
+    //move to store actions later?
+    /*
     const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, {
       pageName: pageName,
     });
+    */
+
+    const response = await globalMethods.mockCallHttpClient("GET", endpoints.GetRouteInfo.url + "?route=" + pageName)
     const jsonFromResponse = JSON.parse(response.data.Result);
     let routeData = [];
   
@@ -100,4 +112,19 @@ function getNavigationMap(scenario, currentRoute) {
     return matchedQueryValue[0];
 }
 
+function GoToStartOn404(next) {
+    const errorPageName = "error-404"
+    router.addRoute({
+        path: "/",
+        name: errorPageName,
+        component: lazyLoadComponent(errorPageName),
+    });
+
+    next({
+        name: errorPageName,
+        query: {issPage: errorPageName },
+    });
+
+};
+
 export default router;