diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/radio-question/radio-question.spec.js index eac0843e5..e1d8f8dfd 100644 --- a/src/common-components/radio-question/radio-question.spec.js +++ b/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"); }); }); diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue index aaf06d562..c0460ad58 100644 --- a/src/common-components/radio-question/radio-question.vue +++ b/src/common-components/radio-question/radio-question.vue @@ -17,6 +17,7 @@ data-test="radio" groupName="radio-list" textPosition="text-start" + :value="modelValue" /> @@ -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, diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 2a73491aa..51d1ee98d 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -3,7 +3,7 @@
- +
@@ -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, diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js index a56a0f97f..14097e316 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/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); }); }); \ No newline at end of file diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 283e38bb7..07c70a1c7 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -2,7 +2,7 @@ @@ -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) + } + } };