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

2021-10-27 11:24:32 -04:00 · 2021-10-27 11:24:32 -04:00 · da0ce5c07d
commit da0ce5c07d
parent 6edc1222a5
36 changed files with 21612 additions and 438 deletions
--- a/babel.config.js
+++ b/babel.config.js
@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
--- a/jest.config.js
+++ b/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)"
+  ],
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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%",
--- a/src/App.vue
+++ b/src/App.vue
@ -1,62 +1,76 @@
 <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 fs-6 fw-bold">What year is your vehichle?</p>
-        </div>
+      <div class="col">
+        <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>
    <div class="row">
-        <div class="col">
-            <buttonPrimary />
-        </div>
+      <div class="col">
+        <buttonPrimary />
+      </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"
-            />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary buttonText="Primary" buttonType="btn-primary" />
+      </div>
    </div>
    <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary
-              buttonText="Primary Focus"
-              buttonType="btn-primary-focus"
-            />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          buttonText="Primary Focus"
+          buttonType="btn-primary-focus"
+        />
+      </div>
    </div>
    <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary
-              buttonText="Disabled"
-              buttonType="disabled"
-            />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary buttonText="Disabled" buttonType="disabled" />
+      </div>
    </div>
    <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <a href="#">Text Link</a>
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <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',
-    components: {
-        buttonPrimary,
-        radioCard
-    }
-}
+  name: "App",
+  components: {
+    buttonPrimary,
+    radioCard,
+  },
+};
 </script>
--- a/src/commonComponents/baseTemplate/baseTemplate.spec.js
+++ b/src/commonComponents/baseTemplate/baseTemplate.spec.js
@ -0,0 +1,6 @@
+
+describe("baseTemplate.vue", () => {
+  it("Is a test", () => {
+    expect(true).toBe(true);
+  });
+});
--- a/src/commonComponents/baseTemplate/baseTemplate.vue
+++ b/src/commonComponents/baseTemplate/baseTemplate.vue
@ -1,47 +1,56 @@
 <template>
-    <div class="select-car sticky-lg-top py-4">
-        <div class="select-car-form overflow-hidden p-3 rounded">
-            <div class="car_info text-center">
-                <div class="car-image mb-3">
-                    <img 
-                        class="vehicle-image img-fluid" 
-                        :class="{ blur: blurImg }"
-                        :src="carImg" 
-                    />
-                </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>
-                    </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>
-                    </div>
-                </transition>
-            </div>
-            <transition appear :name="slideTransition">
-                <slot></slot>
-            </transition>
+  <div class="select-car sticky-lg-top py-4">
+    <div class="select-car-form overflow-hidden p-3 rounded">
+      <div class="car_info text-center">
+        <div class="car-image mb-3">
+          <img
+            class="vehicle-image img-fluid"
+            :class="{ blur: blurImg }"
+            :src="carImg"
+          />
        </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>
+          </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>
+          </div>
+        </transition>
+      </div>
+      <transition appear :name="slideTransition">
+        <slot></slot>
+      </transition>
    </div>
+  </div>
 </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
-  }
-}
-</script>
+    currentCarInfo: String,
+    neededCarInfo: String,
+    backFunction: Function,
+  },
+};
+</script>
--- a/src/commonComponents/carAttributes/carAttributes.spec.js
+++ b/src/commonComponents/carAttributes/carAttributes.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/commonComponents/carAttributes/carAttributes.vue
+++ b/src/commonComponents/carAttributes/carAttributes.vue
@ -1,28 +1,28 @@
 <template>
-    <form class="list-view d-flex">
-        <div class="car_list">
-            <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
-                <buttonPrimary
-                    :buttonText="attritbute"
-                    v-on:click="selectAttribute(attritbute)"
-                    buttonType="btn-funnel"
-                />
-            </div>
-        </div>
-    </form>
+  <form class="list-view d-flex">
+    <div class="car_list">
+      <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
+        <buttonPrimary
+          :buttonText="attritbute"
+          v-on:click="selectAttribute(attritbute)"
+          buttonType="btn-funnel"
+        />
+      </div>
+    </div>
+  </form>
 </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 
+    attritbutes: Array,
+    selectAttribute: Function,
  },
  components: {
-      buttonPrimary
-  }
-}
-</script>
+    buttonPrimary,
+  },
+};
+</script>
--- a/src/layouts/home/home.spec.js
+++ b/src/layouts/home/home.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/layouts/home/home.vue
+++ b/src/layouts/home/home.vue
@ -1,6 +1,6 @@
 <template>
-    <div class="home">
-        <h1>Home</h1>
-        <router-link to="/select-car">SelectCar</router-link>
-    </div>
-</template>
+  <div class="home">
+    <h1>Home</h1>
+    <router-link to="/select-car">SelectCar</router-link>
+  </div>
+</template>
--- a/src/layouts/notFound/notFound.spec.js
+++ b/src/layouts/notFound/notFound.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/layouts/notFound/notFound.vue
+++ b/src/layouts/notFound/notFound.vue
@ -1,6 +1,5 @@
 <template>
-    <div> 
-        <p> Not found </p>
-
-    </div>
-</template>
+  <div>
+    <p>Not found</p>
+  </div>
+</template>
--- a/src/layouts/selectDamage/selectDamage.spec.js
+++ b/src/layouts/selectDamage/selectDamage.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/layouts/selectDamage/selectDamage.vue
+++ b/src/layouts/selectDamage/selectDamage.vue
@ -1,75 +1,77 @@
 <template>
-<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">
-                    <radioCard />
-                </div>
-                <div class="col">
-                    <radioCard />
-                </div>
-                <div class="col">
-                    <radioCard />
-                </div>
-            </div>
-            <transition name="fade">
-                <div v-if="damage" class="how-bad mt-3">
-                    <span class="text-center fs-6 fw-bold">How bad is it?</span>
-                    <div class="choose-how-bad row mt-2">
-                        <div class="col">
-                            <radioCard />
-                        </div>
-                        <div class="col">
-                            <radioCard />
-                        </div>
-                    </div>
-                </div>
-            </transition>
-            <div class="next-action row">
-                <div class="col">
-                    <div v-on:click="goBack" class="change">
-                        <span>Change Vehicle</span>
-                    </div>
-                </div>
-            </div>
+  <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">
+            <radioCard />
+          </div>
+          <div class="col">
+            <radioCard />
+          </div>
+          <div class="col">
+            <radioCard />
+          </div>
        </div>
-
+        <transition name="fade">
+          <div v-if="damage" class="how-bad mt-3">
+            <span class="text-center fs-6 fw-bold">How bad is it?</span>
+            <div class="choose-how-bad row mt-2">
+              <div class="col">
+                <radioCard />
+              </div>
+              <div class="col">
+                <radioCard />
+              </div>
+            </div>
+          </div>
+        </transition>
+        <div class="next-action row">
+          <div class="col">
+            <div v-on:click="goBack" class="change">
+              <span>Change Vehicle</span>
+            </div>
+          </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',
-    computed: {
-        ...mapState(['year', 'make', 'model'])
+  name: "SelectCar",
+  computed: {
+    ...mapState(["year", "make", "model"]),
+  },
+  data() {
+    return {
+      damage: "",
+    };
+  },
+  methods: {
+    chooseDamage(damage) {
+      this.damage = damage;
+      console.log(this.damage);
    },
-    data() {
-        return {
-            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}`
+      );
    },
-    methods: {
-        chooseDamage(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}`);
-        }
-    },
-    components: {
-        baseTemplate,
-        radioCard
-    }
-}
+  },
+  components: {
+    baseTemplate,
+    radioCard,
+  },
+};
 </script>
--- a/src/layouts/selectMake/selectMake.spec.js
+++ b/src/layouts/selectMake/selectMake.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/layouts/selectMake/selectMake.vue
+++ b/src/layouts/selectMake/selectMake.vue
@ -1,40 +1,37 @@
 <template>
-    <div>
-        <baseTemplate
-            :currentCarInfo="year"
-            neededCarInfo="What make is your vehicle?"
-            :backFunction="goBack"
-        >
-            <carAttributes
-                :attritbutes="makes"
-                :selectAttribute="selectMake"
-            />
-        </baseTemplate>
-    </div>
+  <div>
+    <baseTemplate
+      :currentCarInfo="year"
+      neededCarInfo="What make is your vehicle?"
+      :backFunction="goBack"
+    >
+      <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);
-      },
-      goBack(){
-          this.$store.state.slideTransition = 'slide_reverse';
-          this.$router.push('/select-year');
-      }
-  }, 
+    selectMake(make) {
+      this.$store.dispatch("selectMake", make);
+    },
+    goBack() {
+      this.$store.state.slideTransition = "slide_reverse";
+      this.$router.push("/select-year");
+    },
+  },
  components: {
-      baseTemplate,
-      carAttributes
-  }
-}
-</script>
+    baseTemplate,
+    carAttributes,
+  },
+};
+</script>
--- a/src/layouts/selectModel/selectModel.spec.js
+++ b/src/layouts/selectModel/selectModel.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/layouts/selectModel/selectModel.vue
+++ b/src/layouts/selectModel/selectModel.vue
@ -1,40 +1,37 @@
 <template>
-    <div>
-        <baseTemplate
-            :currentCarInfo="year + ' ' + make"
-            :neededCarInfo="'What is the model of your ' + make + '?'"
-            :backFunction="goBack"
-        >
-            <carAttributes
-                :attritbutes="models"
-                :selectAttribute="selectModel"
-            />
-        </baseTemplate>
-    </div>
+  <div>
+    <baseTemplate
+      :currentCarInfo="year + ' ' + make"
+      :neededCarInfo="'What is the model of your ' + make + '?'"
+      :backFunction="goBack"
+    >
+      <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);
-      },
-      goBack(){
-          this.$store.state.slideTransition = 'slide_reverse';
-          this.$router.push(`/select-make?year=${this.$store.state.year}`);
-      }
-  }, 
+    selectModel(model) {
+      this.$store.dispatch("selectModel", model);
+    },
+    goBack() {
+      this.$store.state.slideTransition = "slide_reverse";
+      this.$router.push(`/select-make?year=${this.$store.state.year}`);
+    },
+  },
  components: {
-      baseTemplate,
-      carAttributes
-  }
-}
-</script>
+    baseTemplate,
+    carAttributes,
+  },
+};
+</script>
--- a/src/layouts/selectStyle/selectStyle.spec.js
+++ b/src/layouts/selectStyle/selectStyle.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/layouts/selectStyle/selectStyle.vue
+++ b/src/layouts/selectStyle/selectStyle.vue
@ -1,40 +1,39 @@
 <template>
-    <div>
-        <baseTemplate
-            :currentCarInfo="year + ' ' + make + ' ' + model"
-            :neededCarInfo="'What style is your ' + model + '?'"
-            :backFunction="goBack"
-        >
-            <carAttributes
-                :attritbutes="styles"
-                :selectAttribute="selectStyle"
-            />
-        </baseTemplate>
-    </div>
+  <div>
+    <baseTemplate
+      :currentCarInfo="year + ' ' + make + ' ' + model"
+      :neededCarInfo="'What style is your ' + model + '?'"
+      :backFunction="goBack"
+    >
+      <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);
-      },
-      goBack(){
-          this.$store.state.slideTransition = 'slide_reverse';
-          this.$router.push(`/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`);
-      }
-  }, 
+    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}`
+      );
+    },
+  },
  components: {
-      baseTemplate,
-      carAttributes
-  }
-}
-</script>
+    baseTemplate,
+    carAttributes,
+  },
+};
+</script>
--- a/src/layouts/selectYear/selectYear.spec.js
+++ b/src/layouts/selectYear/selectYear.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/layouts/selectYear/selectYear.vue
+++ b/src/layouts/selectYear/selectYear.vue
@ -1,42 +1,39 @@
 <template>
-    <div>
-        <baseTemplate
-            currentCarInfo="Select a year to get started"
-            neededCarInfo="What year is your vehicle?"
-        >
-            <carAttributes
-                :attritbutes="years"
-                :selectAttribute="selectYear"
-            />
-        </baseTemplate>
-    </div>
+  <div>
+    <baseTemplate
+      currentCarInfo="Select a year to get started"
+      neededCarInfo="What year is your vehicle?"
+    >
+      <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: []
-      }
+    return {
+      years: [],
+    };
  },
  mounted() {
-      axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
-          this.years = response.data.Result;
-      }); 
+    axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
+      this.years = response.data.Result;
+    });
  },
  methods: {
-      selectYear(year){
-          this.$store.dispatch('selectYear', year);
-      }
-  }, 
+    selectYear(year) {
+      this.$store.dispatch("selectYear", year);
+    },
+  },
  components: {
-      baseTemplate,
-      carAttributes
-  }
-}
-</script>
+    baseTemplate,
+    carAttributes,
+  },
+};
+</script>
--- a/src/main.js
+++ b/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";
--- a/src/router/dynamic-routing/component-loader.js
+++ b/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`);
+}
--- a/src/router/dynamic-routing/route-compile.js
+++ b/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);
    });
 }
--- a/src/router/index.js
+++ b/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.
--- a/src/store/index.js
+++ b/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({
-        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
+  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,
+  },
+  mutations: {
+    updateYear(state, data) {
+      state.year = data.year;
+      state.makes = data.makes.data.Result;
+      state.slideTransition = "slide";
    },
-    mutations: {
-        updateYear(state, data){
-            state.year = data.year;
-            state.makes = data.makes.data.Result;
-            state.slideTransition = 'slide'
-        },
-        updateMake(state, data){
-            state.make = data.make;
-            state.models = data.models.data.Result;
-            state.slideTransition = 'slide';
-        },
-        updateModel(state, data){
-            state.model = data.model;
-            state.styles = data.styles.data.Result;
-            state.slideTransition = 'slide';
-        },
-        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.blurImg = false;
-            state.slideTransition = 'slide';
-        },
-        removeStyle(state) {
-            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'
-        }
+    updateMake(state, data) {
+      state.make = data.make;
+      state.models = data.models.data.Result;
+      state.slideTransition = "slide";
    },
-    actions: {
-        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});
-            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}`);
-        },
-        selectStyle({commit, state}, style){
-            commit('updateStyle', {style});
-            router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`);
-        }
-    }
-
-})
+    updateModel(state, data) {
+      state.model = data.model;
+      state.styles = data.styles.data.Result;
+      state.slideTransition = "slide";
+    },
+    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.blurImg = false;
+      state.slideTransition = "slide";
+    },
+    removeStyle(state) {
+      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";
+    },
+  },
+  actions: {
+    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 });
+      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}`
+      );
+    },
+    selectStyle({ commit, state }, style) {
+      commit("updateStyle", { style });
+      router.push(
+        `/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
+      );
+    },
+  },
+});
--- a/src/uxComponents/buttonPrimary/buttonPrimary.spec.js
+++ b/src/uxComponents/buttonPrimary/buttonPrimary.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/uxComponents/buttonPrimary/buttonPrimary.vue
+++ b/src/uxComponents/buttonPrimary/buttonPrimary.vue
@ -3,28 +3,31 @@
    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>
 </template>

 <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>
--- a/src/uxComponents/confetti/confetti.spec.js
+++ b/src/uxComponents/confetti/confetti.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/uxComponents/confetti/confetti.vue
+++ b/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>
--- a/src/uxComponents/radioCard/radioCard.spec.js
+++ b/src/uxComponents/radioCard/radioCard.spec.js
@ -0,0 +1 @@
+test.todo('some test to be written in the future');
--- a/src/uxComponents/radioCard/radioCard.vue
+++ b/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>
--- a/vue.config.js
+++ b/vue.config.js
@ -1,14 +1,14 @@
 module.exports = {
-    outputDir: 'dist/fmg',
-    publicPath: '/fmg',
-    devServer: {
-        port: 8080,
-        proxy: {
-            'api/v1/content*':{
-                target: 'https://localhost:44360/',
-                ws: false,
-                changeOrigin: true
-            }
-        }
-    }
-}
+  outputDir: "dist/fmg",
+  publicPath: "/fmg",
+  devServer: {
+    port: 8080,
+    proxy: {
+      "api/v1/content*": {
+        target: "https://localhost:44360/",
+        ws: false,
+        changeOrigin: true,
+      },
+    },
+  },
+};
--- a/vue.release.config.js
+++ b/vue.release.config.js
@ -1,4 +1,4 @@
 module.exports = {
-    outputDir: 'dist/fmg',
-    publicPath: '/fmg'
-}
+  outputDir: "dist/fmg",
+  publicPath: "/fmg",
+};
				`@ -0,0 +1 @@`
				`test.todo('some test to be written in the future');`