Merge pull request #82 from Safelite/feature/CSR-74_unit-tests

Feature/csr 74 unit tests

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

@@ -22,7 +22,14 @@ describe("vehicle-year.vue", () => {
         VehicleBannerWidget: [{ GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_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.
@@ -39,6 +46,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,
     },