Adding store actions to unit testing and changing radio button to take in string

src/commonComponents/radioQuestion/radioQuestion.spec.js

@@ -7,7 +7,7 @@ describe('radioQuestion.vue', () => {
         const wrapper = shallowMount(radioQuestion, {
             propsData: {
                 questionText: 'Question Text',
-                answers: [2023, 2022, 2021],
+                answers: ['2023', '2022', '2021'],
                 chooseAnswer: function(test){ console.log(test) }
             }
         });

src/commonComponents/radioQuestion/radioQuestion.vue

@@ -5,7 +5,7 @@
     </div>
       <div class="car_list overflow-scroll position-absolute">
           <div v-for="answer in answers" :key="answer" class="mb-2">
-              <radio :text="answer" :value="answer" @click="chooseAnswer(answer)" data-test="radio" />
+              <radio :text="String(answer)" :value="String(answer)" @click="chooseAnswer(answer)" data-test="radio" />
           </div>
       </div>
   </div>

src/constants/storeActions.js

@@ -1,5 +1,7 @@
 const storeActions = {
     GET_ROUTE_INFO_ACTION: "getRouteInfo",
+    GET_YEARS: 'getYears',
+    GET_PAGE_DATA: 'getMockPageData',
 }
 
 export { storeActions }

src/helpers/unitTestHelper.js

@@ -1,12 +1,14 @@
+import { storeActions } from "@/constants/storeActions";
+
 export function getMountOptions(mockData) {
     // Define our mocks to attached to the 'global' object for Vue/Jest.
     const mocks = {};
 
     mocks.dispatchNonBlockingStoreAction = jest.fn();
     mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
-
+    
         let actionFilterResult = mockData.actionList.filter(x => x.actionName == actionName);
-
+        
         if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
 
             return Promise.resolve({
@@ -14,7 +16,8 @@ export function getMountOptions(mockData) {
             });
         }
     });
-
+    // Mock store actions from js file
+    mocks.storeActions = storeActions;
     const global = {
         mocks: mocks
     };

src/layouts/selectYear/selectYear.spec.js

@@ -1,16 +1,17 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue'
 import { getMountOptions } from '@/helpers/unitTestHelper.js';
+import { storeActions } from '@/constants/storeActions.js'
 import selectYear from './selectYear.vue';
 
 describe('selectYear.vue', () => {
     test("Should render the 'pageHeader.Text' data value 'text' prop value for the Header component, 'radioQuestion.Question' data value as 'questionText' prop value for the 'radioQuestion' component and 'years' values for 'answers' prop values for the 'radioQuestion' component.", async () => {
-
+        
         // Arrange
         const mockDataAndAction = {
             actionList: [
                 {
-                    actionName: "getMockPageData",
+                    actionName: storeActions.GET_PAGE_DATA,
                     data: {
                         "Result": [
                             {
@@ -29,7 +30,7 @@ describe('selectYear.vue', () => {
                     }
                 },
                 {
-                    actionName: "getYears",
+                    actionName: storeActions.GET_YEARS,
                     data: ['2023', '2022', '2021']
                 }
             ]

src/layouts/selectYear/selectYear.vue

@@ -35,13 +35,8 @@ export default {
     ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
   },
   mounted() {
-    this.dispatchNonBlockingStoreAction('getYears')
+    // Mocking Sitefinity data to (For Page Header and Radio Question)
-        .then( (response) => {
+    this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA, {relativeUrl: 'https://mockey.qa.sagaws.net/service/content/selectYear'})
-          this.years = response.data;
-    });
-  
-    // Mocking Sitefinity data
-    this.dispatchNonBlockingStoreAction("getMockPageData", {relativeUrl: 'https://mockey.qa.sagaws.net/service/content/selectYear'})
     .then( (response) => {
       response.data.Result.forEach((m) => {
           switch (m.Type) {
@@ -59,6 +54,12 @@ export default {
           }
       })
     });
+
+    // Getting Years list
+    this.dispatchNonBlockingStoreAction(this.storeActions.GET_YEARS)
+        .then( (response) => {
+          this.years = response.data;
+    });
   },
   methods: {
     selectYear(year) {

src/uxComponents/radio/radio.spec.js

@@ -6,8 +6,8 @@ describe('radio.vue', () => {
         // Act
         const wrapper = shallowMount(radio, {
             propsData: {
-                value: 2023,
+                value: '2023',
-                text: 12
+                text: '12'
             }
         });
 

src/uxComponents/radio/radio.vue

@@ -22,8 +22,8 @@
 export default {
   name: "radio",
   props: {
-    value: Number,
+    value: String,
-    text: Number
+    text: String
   },
   data() {
     return {