Changing functions to global store functions

src/commonComponents/radioQuestion/radioQuestion.spec.js

@@ -7,7 +7,7 @@ describe('radioQuestion.vue', () => {
         const wrapper = shallowMount(radioQuestion, {
             propsData: {
                 questionText: 'Question Text',
-                answers: ['Value_1', 'Value_2', 'Value_3'],
+                answers: [2023, 2022, 2021],
                 chooseAnswer: function(test){ console.log(test) }
             }
         });
@@ -15,8 +15,8 @@ describe('radioQuestion.vue', () => {
         // Assert
         expect(wrapper.find('.needed_car_info-text').text()).toEqual('Question Text');
         const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
-        expect(radioButtons[0].attributes('text')).toEqual('Value_1');
+        expect(radioButtons[0].attributes('text')).toEqual('2023');
-        expect(radioButtons[2].attributes('text')).toEqual('Value_3');
+        expect(radioButtons[2].attributes('text')).toEqual('2021');
         expect(typeof wrapper.props().chooseAnswer).toBe('function');
     })
 })

src/constants/endpoints.js

@@ -18,6 +18,9 @@ const endpoints = {
     GetStyles: {
         url: '/vehicle/api/v1/vehicle/Styles',
         method: 'POST'
+    },
+    GetPageData: {
+        method: 'GET'
     }
 }
 

src/global-methods.js

@@ -11,7 +11,7 @@ export default {
 
       axios({
         method: method,
-        url: `${apiGatewayUrl}${endpoint}`,
+        url: apiGatewayUrl + endpoint,
         data: payloadAndAnalyticsData,
         crossDomain: true,
         responseType: {},
@@ -29,4 +29,27 @@ export default {
       );
     });
   },
+  // For mock use only!
+  callMockHttpClient({ method, endpoint}) {
+    return new Promise((resolve, reject) => {
+
+      axios({
+        method: method,
+        url: endpoint,
+        crossDomain: true,
+        responseType: {},
+      }).then((response) => {
+
+          if (response.status == httpStatusCodes.OK) {
+            resolve(response);
+          } else {
+            reject(response);
+          }
+        },
+        (error) => {
+          return reject(error.response);
+        }
+      );
+    });
+  }
 };

src/layouts/selectYear/selectYear.spec.js

@@ -1,14 +1,15 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import selectYear from './selectYear';
 
 describe('selectYear.vue', () => {
     it("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 () => {
+
         // Act
-        const wrapper = shallowMount(selectYear);
+        const wrapper = mount(selectYear);
 
         await wrapper.setData({
             years: ['2023', '2022', '2021'],
-            pageHeader: { 
+            pageHeader: {
                 Text: "Test page header"
             },
             radioQuestion: {
@@ -19,7 +20,7 @@ describe('selectYear.vue', () => {
         // Assert
         const header = wrapper.findComponent('.Header');
         expect(header.attributes('text')).toEqual('Test page header');
-        
+
         const radioQuestion = wrapper.findComponent('.radioQuestion');
         expect(radioQuestion.attributes('answers')).toEqual('2023,2022,2021');
         expect(radioQuestion.attributes('questiontext')).toEqual('Test question');

src/layouts/selectYear/selectYear.vue

@@ -18,9 +18,6 @@
 <script>
 import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
 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";
 import { mapState } from "vuex";
@@ -38,24 +35,21 @@ export default {
     ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
   },
   mounted() {
-    globalMethods.callHttpClient({
+    this.dispatchNonBlockingStoreAction('getYears')
-          method: endpoints.GetYears.method,
-          endpoint: endpoints.GetYears.url,
-          payload:{}
-        })
         .then( (response) => {
           this.years = response.data;
-        });
+    });
 
     // Mocking Sitefinity data
-    axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => {
+    this.dispatchNonBlockingStoreAction("getMockPageData", {relativeUrl: 'https://mockey.qa.sagaws.net/service/content/selectYear'})
+    .then( (response) => {
       response.data.Result.forEach((m) => {
           switch (m.Type) {
-              case this.widgetNames.PAGE_HEADING_WIDGET: {
+              case 'PageHeadingWidget': {
                   this.pageHeader = m.Model;
                   break;
               }
-              case this.widgetNames.RADIO_QUESTION_WIDGET: {
+              case 'RadioQuestionWidget': {
                   this.radioQuestion = m.Model;
                   break;
               }

src/router/index.js

@@ -4,6 +4,7 @@ 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';
 
 const routes = [
   {
@@ -16,6 +17,11 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
+  {
+    path: '/select-year',
+    component: selectYear,
+    name: "selectYear"
+  },
   {
     path: "/",
     beforeEnter(to, from, next) {

src/store/index.js

@@ -53,6 +53,13 @@ export default createStore({
     },
   },
   actions: {
+      getYears(){
+        return globalMethods.callHttpClient({
+          method: endpoints.GetYears.method,
+          endpoint: endpoints.GetYears.url,
+          payload:{}
+        });
+      },
       selectYear(context, { year }) {
         return globalMethods.callHttpClient({
           method: endpoints.GetMakes.method,
@@ -92,5 +99,14 @@ export default createStore({
           },
         });
       },
+      // For mock data purposes only
+      getMockPageData(context, { relativeUrl }) {
+        return globalMethods.callMockHttpClient({
+          method: endpoints.GetPageData.method,
+          endpoint: relativeUrl,
+          payload: {
+          },
+        });
+      },
   },
 });

src/uxComponents/radio/radio.spec.js

@@ -6,18 +6,18 @@ describe('radio.vue', () => {
         // Act
         const wrapper = shallowMount(radio, {
             propsData: {
-                value: 'radio_button_value',
+                value: 2023,
-                text: 'Radio Button Text'
+                text: 12
             }
         });
 
         // Assert
-        expect(wrapper.find('span').text()).toEqual('Radio Button Text');
+        expect(wrapper.find('span').text()).toEqual('12');
         expect(wrapper.find('input').attributes()).toEqual({
             class: 'position-absolute opacity-0',
-            id: 'radio_button_value',
+            id: '2023',
             type: 'radio',
-            value: 'radio_button_value'
+            value: '2023'
         });
     })
 })

src/uxComponents/radio/radio.vue

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