Merge branch 'develop' into feature/CSR-203

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

@@ -2,15 +2,15 @@ import { shallowMount } from "@vue/test-utils";
 import radioQuestion from "@/common-components/radio-question/radio-question";
 
 describe("radioQuestion.vue", () => {
-  it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", () => {
+  it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", async () => {
     // Act
-    const wrapper = shallowMount(radioQuestion, {
-      propsData: {
-        questionText: "Question Text",
-        answers: ["2023", "2022", "2021"],
-        modelValue: '2020'
-      },
+    const wrapper = shallowMount(radioQuestion)
+    await wrapper.setProps({
+      questionText: "Question Text",
+      answers: ["2023", "2022", "2021"],
+      modelValue: "2020"
     });
+    wrapper.vm.chooseAnswer("2021");
 
     // Assert
     expect(wrapper.find(".needed_car_info-text").text()).toEqual(

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

@@ -33,7 +33,6 @@ export default {
     answers: Array,
     modelValue: String
   },
-  emits: ['update:modelValue'],
   methods: {
     chooseAnswer(answer) {
       this.$emit('update:modelValue', answer);

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

@@ -23,7 +23,14 @@ describe("vehicle-year.vue", () => {
         SiteHeaderWidget: [{ "LogoImage": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3" }],
         isCmsContentReady: true,
       },
-      getVehicleYear: [2023, 2022, 2021]
+      getVehicleYear: [2023, 2022, 2021],
+      store: {
+        commit: jest.fn(),
+        year: null
+      },
+      router: {
+          push: jest.fn()
+      }
     }
 
     // our router information needed.
@@ -40,6 +47,7 @@ describe("vehicle-year.vue", () => {
 
     // Act
     const wrapper = shallowMount(vehicleYear, mountOptions);
+    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
 
     // Call our beforeRouteEnter on the component.
     // This passes (c) => c(wrapper.vm) so that next can be called and our

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

@@ -1,31 +1,21 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "../../../helpers/unit-test-helper";
 
 describe('year-question.vue', () => {
     test('year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.', async () => {
-        // Arrange
-        const mockData = {
-            store: {
-                commit: jest.fn(),
-                year: null
-            },
-            router: {
-                push: jest.fn()
-            }
-        }
-
-        const mountOptions = getMountOptions(mockData);
         // Act
-        const wrapper = shallowMount(yearQuestion, mountOptions);
+        const wrapper = shallowMount(yearQuestion);
         await wrapper.setProps({
             questionText: 'What year is your vehicle?',
-            years: ['2023', '2022', '2021']
+            years: ['2023', '2022', '2021'],
+            modelValue: '2020'
         });
+        wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
 
         // 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(wrapper.componentVM.modelValue).toBe("2020");
     });
 });

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

@@ -21,8 +21,6 @@ export default {
         years: Array, 
         modelValue: String
     },
-    created() {
-    },
     components: {
         radioQuestion,
     },

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

@@ -8,7 +8,7 @@
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
   <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true"/>
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/>
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>

src/ux-components/radio/radio.vue

@@ -7,7 +7,7 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true">
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent">
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>