Added back jest support for unit testing, added mock unit test

babel.config.js

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

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest",
+  transform: {
+    "^.+\\.vue$": "vue-jest",
+  },
+  testMatch : [
+    "**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+  ],
+};

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit --coverage --coverageReporters=cobertura --coverageReporters=html --ci --watchAll=false --reporters=jest-junit --reporters=default"
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@popperjs/core": "^2.10.2",
@@ -22,16 +22,20 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^2.0.0-0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2"
+    "sass-loader": "^8.0.2",
+    "typescript": "~3.9.3",
+    "vue-jest": "^5.0.0-0"
   },
   "eslintConfig": {
     "root": true,
@@ -48,7 +52,18 @@
     },
     "rules": {
       "no-unused-vars": "off"
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
         }
+      }
+    ]
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -1,9 +1,11 @@
 <template>
-<router-view></router-view>
-<div class="container-fluid">
+  <router-view></router-view>
+  <div class="container-fluid">
     <div class="row">
       <div class="col">
-            <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
+        <p class="text-center text-secondary fs-5 mb-4">
+          Select a year to get started
+        </p>
         <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
       </div>
     </div>
@@ -13,16 +15,31 @@
       </div>
     </div>
     <div class="row mt-5">
-        <radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
-        <radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
-        <radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
+      <radioCard
+        radioLabel="Windshield"
+        radioImage="windshield-damage.svg"
+        altText="Windshield"
+        groupName="damageKey"
+        radioID="windshield"
+      />
+      <radioCard
+        radioLabel="Side Window"
+        radioImage="side-window-damage.svg"
+        altText="Side Window"
+        groupName="damageKey"
+        radioID="sidewindow"
+      />
+      <radioCard
+        radioLabel="Back Glass"
+        radioImage="back-glass-damage.svg"
+        altText="Back Glass"
+        groupName="damageKey"
+        radioID="backglass"
+      />
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary
-              buttonText="Primary"
-              buttonType="btn-primary"
-            />
+        <buttonPrimary buttonText="Primary" buttonType="btn-primary" />
       </div>
     </div>
     <div class="row">
@@ -35,10 +52,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary
-              buttonText="Disabled"
-              buttonType="disabled"
-            />
+        <buttonPrimary buttonText="Disabled" buttonType="disabled" />
       </div>
     </div>
     <div class="row">
@@ -46,17 +60,17 @@
         <a href="#">Text Link</a>
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import buttonPrimary from '@/uxComponents/buttonPrimary/buttonPrimary';
-import radioCard from '@/uxComponents/radioCard/radioCard';
+import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+import radioCard from "@/uxComponents/radioCard/radioCard";
 export default {
-    name: 'App',
+  name: "App",
   components: {
     buttonPrimary,
-        radioCard
-    }
-}
+    radioCard,
+  },
+};
 </script>

src/commonComponents/baseTemplate/baseTemplate.spec.js

@@ -0,0 +1,6 @@
+
+describe("baseTemplate.vue", () => {
+  it("Is a test", () => {
+    expect(true).toBe(true);
+  });
+});

src/commonComponents/baseTemplate/baseTemplate.vue

@@ -11,15 +11,24 @@
         </div>
         <div class="current_car_info">
           <transition appear name="fade">
-                        <div class="current_car_info-text" v-on:click="backFunction ? backFunction() : null">
-                            <span class="text-center text-secondary fs-5 d-block">{{ this.currentCarInfo }}</span>
-                            <span v-if="style" class="text-center text-secondary fs-6 mt-2">{{ style }}</span>
+            <div
+              class="current_car_info-text"
+              v-on:click="backFunction ? backFunction() : null"
+            >
+              <span class="text-center text-secondary fs-5 d-block">{{
+                this.currentCarInfo
+              }}</span>
+              <span v-if="style" class="text-center text-secondary fs-6 mt-2">{{
+                style
+              }}</span>
             </div>
           </transition>
         </div>
         <transition appear :name="slideTransition">
           <div class="needed_car_info d-flex overflow-hidden mt-4 mb-3">
-                        <span class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</span>
+            <span class="text-center fs-6 fw-bold needed_car_info-text">{{
+              this.neededCarInfo
+            }}</span>
           </div>
         </transition>
       </div>
@@ -31,17 +40,17 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 
 export default {
-  name: 'BaseTemplate',
+  name: "BaseTemplate",
   computed: {
-      ...mapState(['slideTransition', 'carImg', 'blurImg', 'style'])
+    ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
   },
   props: {
     currentCarInfo: String,
     neededCarInfo: String,
-      backFunction: Function
-  }
-}
+    backFunction: Function,
+  },
+};
 </script>

src/commonComponents/carAttributes/carAttributes.spec.js

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

src/commonComponents/carAttributes/carAttributes.vue

@@ -13,16 +13,16 @@
 </template>
 
 <script>
-import buttonPrimary from '@/uxComponents/buttonPrimary/buttonPrimary';
+import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 
 export default {
-  name: 'CarAttributes',
+  name: "CarAttributes",
   props: {
     attritbutes: Array,
-      selectAttribute: Function 
+    selectAttribute: Function,
   },
   components: {
-      buttonPrimary
-  }
-}
+    buttonPrimary,
+  },
+};
 </script>

src/layouts/home/home.spec.js

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

src/layouts/notFound/notFound.spec.js

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

src/layouts/notFound/notFound.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-        <p> Not found </p>
-
+    <p>Not found</p>
   </div>
 </template>

src/layouts/selectDamage/selectDamage.spec.js

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

src/layouts/selectDamage/selectDamage.vue

@@ -1,6 +1,9 @@
 <template>
-<div>
-    <baseTemplate :currentCarInfo="year + ' ' + make + ' ' + model" neededCarInfo="What is your damage?">
+  <div>
+    <baseTemplate
+      :currentCarInfo="year + ' ' + make + ' ' + model"
+      neededCarInfo="What is your damage?"
+    >
       <div class="damage-section text-center">
         <div class="choose-damage row">
           <div class="col">
@@ -34,42 +37,41 @@
           </div>
         </div>
       </div>
-
     </baseTemplate>
-</div>
+  </div>
 </template>
 
 <script>
-import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
-import radioCard from '@/uxComponents/radioCard/radioCard';
-import {
-    mapState
-} from 'vuex'
+import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
+import radioCard from "@/uxComponents/radioCard/radioCard";
+import { mapState } from "vuex";
 
 export default {
-    name: 'SelectCar',
+  name: "SelectCar",
   computed: {
-        ...mapState(['year', 'make', 'model'])
+    ...mapState(["year", "make", "model"]),
   },
   data() {
     return {
-            damage: ''
-        }
+      damage: "",
+    };
   },
   methods: {
     chooseDamage(damage) {
-            this.damage = damage
-            console.log(this.damage)
+      this.damage = damage;
+      console.log(this.damage);
     },
     goBack() {
-            this.$store.state.slideTransition = 'slide_reverse';
-            this.$store.commit('removeStyle')
-            this.$router.push(`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`);
-        }
+      this.$store.state.slideTransition = "slide_reverse";
+      this.$store.commit("removeStyle");
+      this.$router.push(
+        `/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`
+      );
+    },
   },
   components: {
     baseTemplate,
-        radioCard
-    }
-}
+    radioCard,
+  },
+};
 </script>

src/layouts/selectMake/selectMake.spec.js

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

src/layouts/selectMake/selectMake.vue

@@ -5,36 +5,33 @@
       neededCarInfo="What make is your vehicle?"
       :backFunction="goBack"
     >
-            <carAttributes
-                :attritbutes="makes"
-                :selectAttribute="selectMake"
-            />
+      <carAttributes :attritbutes="makes" :selectAttribute="selectMake" />
     </baseTemplate>
   </div>
 </template>
 
 <script>
-import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
-import carAttributes from '@/commonComponents/carAttributes/carAttributes';
-import { mapState } from 'vuex';
+import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
+import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import { mapState } from "vuex";
 
 export default {
-  name: 'SelectCar',
+  name: "SelectCar",
   computed: {
-      ...mapState(['year', 'makes'])
+    ...mapState(["year", "makes"]),
   },
   methods: {
-      selectMake(make){
-          this.$store.dispatch('selectMake', make);
+    selectMake(make) {
+      this.$store.dispatch("selectMake", make);
+    },
+    goBack() {
+      this.$store.state.slideTransition = "slide_reverse";
+      this.$router.push("/select-year");
     },
-      goBack(){
-          this.$store.state.slideTransition = 'slide_reverse';
-          this.$router.push('/select-year');
-      }
   },
   components: {
     baseTemplate,
-      carAttributes
-  }
-}
+    carAttributes,
+  },
+};
 </script>

src/layouts/selectModel/selectModel.spec.js

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

src/layouts/selectModel/selectModel.vue

@@ -5,36 +5,33 @@
       :neededCarInfo="'What is the model of your ' + make + '?'"
       :backFunction="goBack"
     >
-            <carAttributes
-                :attritbutes="models"
-                :selectAttribute="selectModel"
-            />
+      <carAttributes :attritbutes="models" :selectAttribute="selectModel" />
     </baseTemplate>
   </div>
 </template>
 
 <script>
-import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
-import carAttributes from '@/commonComponents/carAttributes/carAttributes';
-import { mapState } from 'vuex'
+import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
+import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import { mapState } from "vuex";
 
 export default {
-  name: 'SelectCar',
+  name: "SelectCar",
   computed: {
-      ...mapState(['year', 'make', 'models'])
+    ...mapState(["year", "make", "models"]),
   },
   methods: {
-      selectModel(model){
-          this.$store.dispatch('selectModel', model);
+    selectModel(model) {
+      this.$store.dispatch("selectModel", model);
     },
-      goBack(){
-          this.$store.state.slideTransition = 'slide_reverse';
+    goBack() {
+      this.$store.state.slideTransition = "slide_reverse";
       this.$router.push(`/select-make?year=${this.$store.state.year}`);
-      }
+    },
   },
   components: {
     baseTemplate,
-      carAttributes
-  }
-}
+    carAttributes,
+  },
+};
 </script>

src/layouts/selectStyle/selectStyle.spec.js

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

src/layouts/selectStyle/selectStyle.vue

@@ -5,36 +5,35 @@
       :neededCarInfo="'What style is your ' + model + '?'"
       :backFunction="goBack"
     >
-            <carAttributes
-                :attritbutes="styles"
-                :selectAttribute="selectStyle"
-            />
+      <carAttributes :attritbutes="styles" :selectAttribute="selectStyle" />
     </baseTemplate>
   </div>
 </template>
 
 <script>
-import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
-import carAttributes from '@/commonComponents/carAttributes/carAttributes';
-import { mapState } from 'vuex'
+import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
+import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import { mapState } from "vuex";
 
 export default {
-  name: 'SelectCar',
+  name: "SelectCar",
   computed: {
-      ...mapState(['year', 'make', 'model', 'styles'])
+    ...mapState(["year", "make", "model", "styles"]),
   },
   methods: {
-      selectStyle(style){
-          this.$store.dispatch('selectStyle', style);
+    selectStyle(style) {
+      this.$store.dispatch("selectStyle", style);
+    },
+    goBack() {
+      this.$store.state.slideTransition = "slide_reverse";
+      this.$router.push(
+        `/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`
+      );
     },
-      goBack(){
-          this.$store.state.slideTransition = 'slide_reverse';
-          this.$router.push(`/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`);
-      }
   },
   components: {
     baseTemplate,
-      carAttributes
-  }
-}
+    carAttributes,
+  },
+};
 </script>

src/layouts/selectYear/selectYear.spec.js

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

src/layouts/selectYear/selectYear.vue

@@ -4,25 +4,22 @@
       currentCarInfo="Select a year to get started"
       neededCarInfo="What year is your vehicle?"
     >
-            <carAttributes
-                :attritbutes="years"
-                :selectAttribute="selectYear"
-            />
+      <carAttributes :attritbutes="years" :selectAttribute="selectYear" />
     </baseTemplate>
   </div>
 </template>
 
 <script>
-import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
-import carAttributes from '@/commonComponents/carAttributes/carAttributes';
-import axios from 'axios';
+import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
+import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import axios from "axios";
 
 export default {
-  name: 'SelectCar',
+  name: "SelectCar",
   data() {
     return {
-          years: []
-      }
+      years: [],
+    };
   },
   mounted() {
     axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
@@ -30,13 +27,13 @@ export default {
     });
   },
   methods: {
-      selectYear(year){
-          this.$store.dispatch('selectYear', year);
-      }
+    selectYear(year) {
+      this.$store.dispatch("selectYear", year);
+    },
   },
   components: {
     baseTemplate,
-      carAttributes
-  }
-}
+    carAttributes,
+  },
+};
 </script>

src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import router from './router';
-import store from '@/store';
+import router from "./router";
+import store from "@/store";
 
 //Bootstrap JavaScript
 import "../node_modules/bootstrap/dist/js/bootstrap.js";

src/router/dynamic-routing/component-loader.js

@@ -1,3 +1,3 @@
 export function lazyLoadComponent(componentName) {
-    return () => import(`@/layouts/${componentName}.vue`)
+  return () => import(`@/layouts/${componentName}.vue`);
 }

src/router/dynamic-routing/route-compile.js

@@ -4,10 +4,9 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
 export function getRouteData(relativeUrl) {
   return axios
     .post("/api/v1/content/RouteInfo", {
-      relativeUrl: relativeUrl
+      relativeUrl: relativeUrl,
     })
     .then((response) => {
-
       // This is really only for Mockey. In a real case, this would just be a 404 and we would check status code.
       if (response.data.Result === undefined) {
         return Promise.reject("Could not find any details about given route.");
@@ -26,7 +25,6 @@ export function getRouteData(relativeUrl) {
         });
       });
 
-      
       return Promise.resolve(routeData);
     });
 }

src/router/index.js

@@ -12,12 +12,12 @@ const routes = [
   {
     path: "/",
     Name: "Home",
-    component: Home
+    component: Home,
   },
 ];
 
 const router = createRouter({
-  history: createWebHistory('/fmg/'),
+  history: createWebHistory("/fmg/"),
   routes,
 });
 
@@ -26,13 +26,11 @@ router.beforeEach(async (to, from, next) => {
 });
 
 async function GoToDynamicRoute(to, next) {
-
   let doesRouteResolve = router.resolve(to.path).matched.length > 0;
 
   console.log("Does route resolve?" + " " + (doesRouteResolve ? "Yes" : "No"));
 
   if (!doesRouteResolve) {
-
     let routeData = await getRouteData(to.path).catch((exp) => {
       console.log(exp);
       next({ name: "NotFound" }); // Go to 404.

src/store/index.js

@@ -1,72 +1,86 @@
-import { createStore } from 'vuex';
-import createPersistedState from 'vuex-persistedstate';
-import axios from 'axios';
-import router from '@/router';
+import { createStore } from "vuex";
+import createPersistedState from "vuex-persistedstate";
+import axios from "axios";
+import router from "@/router";
 
 export default createStore({
-    plugins: [createPersistedState({
+  plugins: [
+    createPersistedState({
       storage: window.sessionStorage,
-    })],
+    }),
+  ],
   state: {
     makes: [],
     models: [],
     styles: [],
-        year: '',
-        make: '',
-        model: '',
-        style: '',
-        slideTransition: 'none',
-        carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
-        blurImg: true
+    year: "",
+    make: "",
+    model: "",
+    style: "",
+    slideTransition: "none",
+    carImg:
+      "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
+    blurImg: true,
   },
   mutations: {
-        updateYear(state, data){
+    updateYear(state, data) {
       state.year = data.year;
       state.makes = data.makes.data.Result;
-            state.slideTransition = 'slide'
+      state.slideTransition = "slide";
     },
-        updateMake(state, data){
+    updateMake(state, data) {
       state.make = data.make;
       state.models = data.models.data.Result;
-            state.slideTransition = 'slide';
+      state.slideTransition = "slide";
     },
-        updateModel(state, data){
+    updateModel(state, data) {
       state.model = data.model;
       state.styles = data.styles.data.Result;
-            state.slideTransition = 'slide';
+      state.slideTransition = "slide";
     },
-        updateStyle(state, data){
+    updateStyle(state, data) {
       state.style = data.style;
-            state.carImg = "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
+      state.carImg =
+        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
       state.blurImg = false;
-            state.slideTransition = 'slide';
+      state.slideTransition = "slide";
     },
     removeStyle(state) {
-            state.style = '';
+      state.style = "";
       state.blurImg = true;
-            state.carImg = 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg'
-        }
+      state.carImg =
+        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
+    },
   },
   actions: {
-        async selectYear(context, year){
-            const makes = await axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`);
-            context.commit('updateYear', {year, makes});
+    async selectYear(context, year) {
+      const makes = await axios.get(
+        `https://mockey.qa.sagaws.net/service/makes/year=${year}`
+      );
+      context.commit("updateYear", { year, makes });
       router.push(`/select-make?year=${year}`);
     },
-        async selectMake({commit, state}, make){
-            const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`);
-            commit('updateMake', {make, models});
+    async selectMake({ commit, state }, make) {
+      const models = await axios.get(
+        `https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`
+      );
+      commit("updateMake", { make, models });
       router.push(`/select-model?year=${state.year}&make=${make}`);
     },
-        async selectModel({commit, state}, model){
-            const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`);
-            commit('updateModel', {model, styles});
-            router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`);
+    async selectModel({ commit, state }, model) {
+      const styles = await axios.get(
+        `https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`
+      );
+      commit("updateModel", { model, styles });
+      router.push(
+        `/select-style?year=${state.year}&make=${state.make}&model=${model}`
+      );
     },
-        selectStyle({commit, state}, style){
-            commit('updateStyle', {style});
-            router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`);
-        }
-    }
-
-})
+    selectStyle({ commit, state }, style) {
+      commit("updateStyle", { style });
+      router.push(
+        `/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
+      );
+    },
+  },
+});

src/uxComponents/buttonPrimary/buttonPrimary.spec.js

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

src/uxComponents/buttonPrimary/buttonPrimary.vue

@@ -3,7 +3,10 @@
     type="button"
     class="btn d-flex align-items-center"
     v-on:click="showLoader()"
-    v-bind:class="[(this.isLoading ? 'button-loader' : 'not-loading'),this.buttonType]"
+    v-bind:class="[
+      this.isLoading ? 'button-loader' : 'not-loading',
+      this.buttonType,
+    ]"
   >
     {{ this.buttonText }}
   </button>
@@ -11,20 +14,20 @@
 
 <script>
 export default {
-  name: 'buttonPrimary',
+  name: "buttonPrimary",
   props: {
     buttonText: String,
-    buttonType: String
+    buttonType: String,
   },
-  data(){
+  data() {
     return {
-      isLoading: false
-    }
+      isLoading: false,
+    };
   },
   methods: {
-    showLoader(){
+    showLoader() {
       this.isLoading = true;
-    }
-  }
-}
+    },
+  },
+};
 </script>

src/uxComponents/confetti/confetti.spec.js

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

src/uxComponents/confetti/confetti.vue

@@ -1,15 +1,18 @@
 <script>
-import confetti from '/node_modules/canvas-confetti/src/confetti.js';
-setTimeout(function(){// Adjust timing of confetti event on page load
+import confetti from "/node_modules/canvas-confetti/src/confetti.js";
+setTimeout(function () {
+  // Adjust timing of confetti event on page load
   var count = 200;
   var defaults = {
-    origin: { y: 0.7 }
+    origin: { y: 0.7 },
   };
 
   function fire(particleRatio, opts) {
-    confetti(Object.assign({}, defaults, opts, {
-      particleCount: Math.floor(count * particleRatio)
-    }));
+    confetti(
+      Object.assign({}, defaults, opts, {
+        particleCount: Math.floor(count * particleRatio),
+      })
+    );
   }
 
   fire(0.25, {
@@ -22,20 +25,20 @@ setTimeout(function(){// Adjust timing of confetti event on page load
   fire(0.35, {
     spread: 100,
     decay: 0.91,
-    scalar: 0.8
+    scalar: 0.8,
   });
   fire(0.1, {
     spread: 120,
     startVelocity: 25,
     decay: 0.92,
-    scalar: 1.2
+    scalar: 1.2,
   });
   fire(0.1, {
     spread: 120,
     startVelocity: 45,
   });
-}, 1000);// 1000 = 1second
+}, 1000); // 1000 = 1second
 export default {
-  name: 'confetti'
-}
+  name: "confetti",
+};
 </script>

src/uxComponents/radioCard/radioCard.spec.js

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

src/uxComponents/radioCard/radioCard.vue

@@ -1,9 +1,25 @@
 <template>
   <div class="col-4 mb-3 d-flex radio-card">
-    <input type="radio" class="position-absolute opacity-0" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
-      <label v-bind:for="radioID" class="rounded-3 d-flex flex-column align-items-center w-100">
-        <img class="px-3 pt-3 pb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
-        <span class="mt-auto mb-2">{{radioLabel}}</span>
+    <input
+      type="radio"
+      class="position-absolute opacity-0"
+      v-bind:class="className"
+      v-bind:id="radioID"
+      v-bind:name="groupName"
+      :value="radioLabel"
+      v-model="picked"
+      v-bind:tabindex="tabIndex"
+    />
+    <label
+      v-bind:for="radioID"
+      class="rounded-3 d-flex flex-column align-items-center w-100"
+    >
+      <img
+        class="px-3 pt-3 pb-2 mt-auto"
+        v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
+        v-bind:alt="altText"
+      />
+      <span class="mt-auto mb-2">{{ radioLabel }}</span>
     </label>
   </div>
 </template>
@@ -12,12 +28,20 @@
 
 <script>
 export default {
-  name: 'radioCard',
-  props: ['groupName','radioLabel','radioImage','altText','radioID','tabIndex','className'],
+  name: "radioCard",
+  props: [
+    "groupName",
+    "radioLabel",
+    "radioImage",
+    "altText",
+    "radioID",
+    "tabIndex",
+    "className",
+  ],
   data() {
     return {
-      picked: "picked"
+      picked: "picked",
     };
-  }
-}
+  },
+};
 </script>

vue.config.js

@@ -1,14 +1,14 @@
 module.exports = {
-    outputDir: 'dist/fmg',
-    publicPath: '/fmg',
+  outputDir: "dist/fmg",
+  publicPath: "/fmg",
   devServer: {
     port: 8080,
     proxy: {
-            'api/v1/content*':{
-                target: 'https://localhost:44360/',
+      "api/v1/content*": {
+        target: "https://localhost:44360/",
         ws: false,
-                changeOrigin: true
-            }
-        }
-    }
-}
+        changeOrigin: true,
+      },
+    },
+  },
+};

vue.release.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-    outputDir: 'dist/fmg',
-    publicPath: '/fmg'
-}
+  outputDir: "dist/fmg",
+  publicPath: "/fmg",
+};