Functionality for year radio buttons

src/constants/store-actions.js

@@ -7,7 +7,7 @@ const storeActions = {
   GET_VEHICLE_STYLES: "getVehicleStyles",
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
-  LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin"
+  LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
 };
 
 export { storeActions };

src/constants/store-mutations.js

@@ -0,0 +1,5 @@
+const storeMutations = {
+    UPDATE_YEAR: "updateYear",
+}
+
+export { storeMutations };

src/layouts/component-test/component-test.vue

@@ -73,7 +73,7 @@
       <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
-        <radioList
+        <radio
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
@@ -81,7 +81,7 @@
         loaderPosition="right"
         sizeInRem="1.5"
         />
-        <radioList
+        <radio
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2020"
@@ -89,7 +89,7 @@
         loaderPosition="right"
         sizeInRem="1.5"
         />
-        <radioList
+        <radio
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2019"
@@ -244,7 +244,7 @@
   import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
   import radioCard from "@/ux-components/radio-card/radio-card";
   import listButton from "@/ux-components/list-button/list-button";
-  import radioList from "@/ux-components/radio-list/radio-list";
+  import radio from "@/ux-components/radio/radio";
   import alert from "@/ux-components/alert/alert";
   import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
   export default {
@@ -254,7 +254,7 @@
       buttonSecondary,
       radioCard,
       listButton,
-      radioList,
+      radio,
       alert,
       vehicleBanner
     },

src/layouts/vehicle-year/vehicle-year.vue

@@ -21,7 +21,6 @@ export default {
             radioQuestionWidgets: {},
         };
     },
-    computed: {},
     async created() {
         const pageContent = await this.GetContentFromCms();
 

src/layouts/vehicle-year/year-question/year-question.spec.js

@@ -2,6 +2,7 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions.js";
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import store from "@/store";
 
 describe('year-question.vue', () => {
 
@@ -19,10 +20,12 @@ describe('year-question.vue', () => {
         const wrapper = shallowMount(yearQuestion, mountOptions);
         await wrapper.setProps({questionText: 'What year is your vehicle?'})
         await flushPromises();
+        wrapper.vm.selectYear(2020);
 
         // Assert
         const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'});
         expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?");
         expect(radioQuestion.attributes('answers')).toBe('2023,2022,2021');
+        expect(store.state.order.vehicle.year).toBe(2020);
     });
 });

src/layouts/vehicle-year/year-question/year-question.vue

@@ -1,5 +1,9 @@
 <template>
-<radioQuestion class="radioQuestion" :questionText="questionText" :answers="years" />
+<radioQuestion class="radioQuestion" 
+    :questionText="questionText" 
+    :answers="years"
+    :chooseAnswer="selectYear"
+ />
 </template>
 
 <script>
@@ -24,6 +28,9 @@ export default {
         radioQuestion,
     },
     methods: {
+        selectYear(year){
+            this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+        } 
     },
 };
 </script>

src/mixins/base-mixin.js

@@ -1,4 +1,5 @@
 import { storeActions } from "@/constants/store-actions.js";
+import { storeMutations } from "@/constants/store-mutations.js";
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
@@ -53,6 +54,9 @@ export default {
     storeActions() {
       return storeActions;
     },
+    storeMutations() {
+      return storeMutations;
+    },
     widgetNames() {
       return widgetNames;
     },

src/store/index.js

@@ -64,6 +64,9 @@ export default createStore({
     }
   },
   mutations: {
+    updateYear(state, year){
+      state.order.vehicle.year = year;
+    },
     updateVehicleImage(state, data) {
       state.order.vehicle.imageSrc = data.imgSrc;
     },
@@ -138,6 +141,6 @@ export default createStore({
         endpoint: relativeUrl,
         payload: {},
       });
-    },
+    }
   },
 });

src/store/store.spec.js

@@ -14,7 +14,6 @@ describe("Actions", () => {
         await store.dispatch('getVehicleYears')
         .then( (response) => {
             years = response.data;
-            console.log(response);
         });
 
         // Assert
@@ -109,4 +108,22 @@ describe("Actions", () => {
         // Assert
         expect(pageData).toBe('Page Info Data');
     });
-})
+})
+
+describe("Mutations", () => {
+    it("Should update the year property in the store", () => {
+        // Act
+        store.commit('updateYear', 2020);
+
+        // Assert
+        expect(store.state.order.vehicle.year).toBe(2020);
+    });
+
+    it("Should update the vehicle image property in the store", () => {
+        // Act
+        store.commit('updateVehicleImage', {imgSrc: 'exampleimage@image.com'});
+
+        // Assert
+        expect(store.state.order.vehicle.imageSrc).toBe('exampleimage@image.com');
+    });
+});

src/ux-components/radio-list/radio-list.spec.js

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

src/ux-components/radio-list/radio-list.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input type="radio"
-    v-bind:id="radioID"
-    v-bind:name="groupName"
-    v-bind:value="radioID">
-    <label role="radio" tabindex="0" aria-checked="false"
-    v-bind:for="radioID"
-    class="mb-2 d-flex align-items-center justify-content-between p-2"
-    @click='displayComponent'
-    >{{radioID}}
-    <loader
-    v-if="display"
-    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
-    v-bind:class="[this.loaderColor, this.loaderPosition]"
-    />
-  </label>
-  <p class="small">{{errorMessage}}</p>
-</div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "radioList",
-  props: [
-    "groupName",
-    "ariaLabelBy",
-    "radioID",
-    "errorMessage",
-    "loaderColor",
-    "loaderPosition",
-    "sizeInRem"
-
-  ],
-  data() {
-    return {
-      isError: false,
-      display: false
-    };
-  },
-  methods: {
-    displayComponent() {
-      this.display = true;
-    },
-  },
-  components: {
-    loader,
-  },
-};
-</script>