adding unit tests and refactoring dispatch functions

src/commonComponents/radioQuestion/radioQuestion.spec.js

@@ -1 +1,18 @@
-test.todo('some test to be written in the future');
+import { shallowMount } from '@vue/test-utils';
+import radioQuestion from './radioQuestion';
+
+test('radioQuestion', () => {
+    // render the component
+    const wrapper = shallowMount(radioQuestion, {
+        propsData: {
+            questionText: 'testString',
+            chooseAnswer: function(){ console.log('test') }
+        }
+    });
+
+    // test if questionText is a string
+    expect(typeof wrapper.props().questionText).toBe('string');
+
+    // test if chooseAnswer is a function
+    expect(typeof wrapper.props().chooseAnswer).toBe('function');
+});

src/commonComponents/radioQuestion/radioQuestion.vue

@@ -5,7 +5,7 @@
     </div>
       <div class="car_list">
           <div v-for="answer in answers" :key="answer" class="mb-2">
-              <radio :text="answer" :value="answer" />
+              <radio :text="answer" :value="answer" @click="chooseAnswer(answer)" />
           </div>
       </div>
   </div>
@@ -17,7 +17,8 @@ export default {
   name: "radio-question",
   props: {
     questionText: String,
-    answers: Array
+    answers: Array,
+    chooseAnswer: Function
   },
   components: {
     radio

src/layouts/selectYear/selectYear.vue

@@ -7,6 +7,7 @@
       <radioQuestion
         :questionText="radioQuestion.Question"
         :answers="this.years"
+        :chooseAnswer="selectYear"
       />
     </div>
   </div>
@@ -18,6 +19,8 @@ import Header from "@/uxComponents/header/header";
 import { endpoints } from "@/constants/endpoints.js";
 import globalMethods from "@/global-methods";
 import axios from "axios";
+import store from "@/store";
+import router from "@/router";
 
 export default {
   name: "SelectCar",
@@ -58,9 +61,11 @@ export default {
   },
   methods: {
     selectYear(year) {
-      const listButtons = document.querySelectorAll('.list-button');
-      globalMethods.disableItems(listButtons);
-      this.dispatchNonBlockingStoreAction("selectYear", { year: year });
+      this.dispatchNonBlockingStoreAction("selectYear", { year: year }).then( (response) => {
+        const makes = response;
+        store.commit('updateYear', {year, makes});
+        router.push(`select-make?year=${year}`);
+      });
     }
   },
   components: {

src/router/index.js

@@ -4,11 +4,11 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
 import ComponentTest from "@/layouts/componentTest/componentTest.vue";
 import NotFound from "@/layouts/notFound/notFound.vue";
 import store from "@/store";
-// import selectYear from "@/layouts/selectYear/selectYear.vue";
-// import selectMake from "@/layouts/selectMake/selectMake.vue";
-// import selectModel from "@/layouts/selectModel/selectModel.vue";
-// import selectStyle from "@/layouts/selectStyle/selectStyle.vue";
-// import selectDamage from "@/layouts/selectDamage/selectDamage.vue";
+import selectYear from "@/layouts/selectYear/selectYear.vue";
+import selectMake from "@/layouts/selectMake/selectMake.vue";
+import selectModel from "@/layouts/selectModel/selectModel.vue";
+import selectStyle from "@/layouts/selectStyle/selectStyle.vue";
+import selectDamage from "@/layouts/selectDamage/selectDamage.vue";
 
 const routes = [
   {
@@ -66,31 +66,31 @@ const routes = [
       }
     },
   },
-  // {
-  //   path: "/select-year",
-  //   name: "selectYear",
-  //   component: selectYear,
-  // },
-  // {
-  //   path: "/select-make",
-  //   name: "selectMake",
-  //   component: selectMake,
-  // },
-  // {
-  //   path: "/select-model",
-  //   name: "selectModel",
-  //   component: selectModel,
-  // },
-  // {
-  //   path: "/select-style",
-  //   name: "selectStyle",
-  //   component: selectStyle,
-  // },
-  // {
-  //   path: "/select-damage",
-  //   name: "selectDamage",
-  //   component: selectDamage,
-  // },
+  {
+    path: "/select-year",
+    name: "selectYear",
+    component: selectYear,
+  },
+  {
+    path: "/select-make",
+    name: "selectMake",
+    component: selectMake,
+  },
+  {
+    path: "/select-model",
+    name: "selectModel",
+    component: selectModel,
+  },
+  {
+    path: "/select-style",
+    name: "selectStyle",
+    component: selectStyle,
+  },
+  {
+    path: "/select-damage",
+    name: "selectDamage",
+    component: selectDamage,
+  },
 ];
 
 const router = createRouter({

src/store/index.js

@@ -61,15 +61,10 @@ export default createStore({
           payload:{
             "Year": year
           }
-        })
-        .then( (response) => {
-          const makes = response;
-          context.commit('updateYear', {year, makes});
-          router.push(`select-make?year=${year}`);
         });
       },
       selectMake({ commit, state }, { make }) {
-        return globalMethods.callHttpClient({
+        globalMethods.callHttpClient({
           method: endpoints.GetModels.method,
           endpoint: endpoints.GetModels.url,
           payload:{

src/uxComponents/header/header.spec.js

@@ -1 +1,15 @@
-test.todo('some test to be written in the future');
+import { shallowMount } from '@vue/test-utils';
+import Header from './header';
+
+test('Header', () => {
+    // render the component
+    const wrapper = shallowMount(Header, {
+        propsData: {
+            text: 'testString'
+        }
+    });
+
+    // test if text is a string
+    expect(typeof wrapper.props().text).toBe('string');
+
+});

src/uxComponents/radio/radio.spec.js

@@ -1 +1,18 @@
-test.todo('some test to be written in the future');
+import { shallowMount } from '@vue/test-utils';
+import radio from './radio';
+
+test('radioQuestion', () => {
+    // render the component
+    const wrapper = shallowMount(radio, {
+        propsData: {
+            value: 'testString',
+            text: 'testString2'
+        }
+    });
+
+    // test if value is a string
+    expect(typeof wrapper.props().value).toBe('string');
+
+    // test if text is a string
+    expect(typeof wrapper.props().text).toBe('string');
+});