Updating button click functionality to emit data up to parent components

src/common-components/radio-question/radio-question.spec.js

@@ -8,9 +8,7 @@ describe("radioQuestion.vue", () => {
       propsData: {
         questionText: "Question Text",
         answers: ["2023", "2022", "2021"],
-        chooseAnswer: function (test) {
-          console.log(test);
-        },
+        modelValue: '2020'
       },
     });
 
@@ -20,6 +18,6 @@ describe("radioQuestion.vue", () => {
     );
     const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
     expect(radioButtons.length).toBe(3);
-    expect(typeof wrapper.props().chooseAnswer).toBe("function");
+    expect(wrapper.props().modelValue).toBe("2020");
   });
 });

src/common-components/radio-question/radio-question.vue

@@ -17,6 +17,7 @@
             data-test="radio"
             groupName="radio-list"
             textPosition="text-start"
+            :value="modelValue"
           />
       </div>
     </div>
@@ -30,7 +31,13 @@ export default {
   props: {
     questionText: String,
     answers: Array,
-    chooseAnswer: Function,
+    modelValue: String
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    chooseAnswer(answer) {
+      this.$emit('update:modelValue', answer);
+    }
   },
   components: {
     radio,

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

@@ -3,7 +3,7 @@
     <div class="select-car-form rounded text-center">
       <vehicleBanner :genericVehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
+      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
     </div>
   </div>
 </template>
@@ -25,7 +25,8 @@ export default {
       pageHeaderWidgets: {},
       radioQuestionWidgets: {},
       vehicleYears: [],
-      vehicleBannerWidget: {}
+      vehicleBannerWidget: {},
+      selectedYear: null
     };
   },
   computed: {},
@@ -59,6 +60,13 @@ export default {
     });
   },
 
+  watch: {
+    selectedYear(year) {
+        this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+        this.$router.push('?fmgPage=vehicle-make');
+    }
+  },
+
   components: {
     yearQuestion,
     pageHeader,

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

@@ -14,9 +14,6 @@ describe('year-question.vue', () => {
                 push: jest.fn()
             }
         }
-        mockData.store.commit.mockImplementation((method, year) => {
-            mockData.store.year = year;
-        });
 
         const mountOptions = getMountOptions(mockData);
         // Act
@@ -25,12 +22,10 @@ describe('year-question.vue', () => {
             questionText: 'What year is your vehicle?',
             years: ['2023', '2022', '2021']
         });
-        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(mockData.store.year).toBe(2020);
     });
 });

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

@@ -2,7 +2,7 @@
 <radioQuestion class="radioQuestion" 
     :questionText="questionText" 
     :answers="years"
-    :chooseAnswer="selectYear"
+    v-model="selectedYear"
  />
 </template>
 
@@ -11,20 +11,25 @@ import radioQuestion from "@/common-components/radio-question/radio-question";
 
 export default {
     name: "year-question",
+    data(){
+        return {
+            selectedYear: null
+        }
+    },
     props: {
         questionText: String,
-        years: Array
+        years: Array, 
+        modelValue: String
     },
     created() {
     },
     components: {
         radioQuestion,
     },
-    methods: {
-        selectYear(year){
-            this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-            this.$router.push('?fmgPage=vehicle-make');
-        } 
-    },
+    watch: {
+        selectedYear(val) {
+            this.$emit('update:modelValue', val)
+        }
+    }
 };
 </script>