From 75f7c4abbc33eb33eb65ef98556b6ac7aeb1f6cd Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 6 Dec 2021 16:55:52 -0500 Subject: [PATCH 1/4] unit testing --- .../radio-question/radio-question.spec.js | 30 ++++++++++++++----- .../radio-question/radio-question.vue | 1 - .../year-question/year-question.vue | 2 -- 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/radio-question/radio-question.spec.js index e1d8f8dfd..671926086 100644 --- a/src/common-components/radio-question/radio-question.spec.js +++ b/src/common-components/radio-question/radio-question.spec.js @@ -1,16 +1,30 @@ import { shallowMount } from "@vue/test-utils"; import radioQuestion from "@/common-components/radio-question/radio-question"; +import { getMountOptions } from "@/helpers/unit-test-helper"; 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.", () => { - // Act - const wrapper = shallowMount(radioQuestion, { - propsData: { - questionText: "Question Text", - answers: ["2023", "2022", "2021"], - modelValue: '2020' - }, + 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 () => { + // Arrange + const chooseAnswer = jest.fn(); + chooseAnswer.mockImplementation((answer) => { + mockData.answer = answer; }); + const mockData = { + chooseAnswer: chooseAnswer, + answer: '' + } + + const mountOptions = getMountOptions(mockData); + + // Act + const wrapper = shallowMount(radioQuestion, mountOptions) + await wrapper.setProps({ + questionText: "Question Text", + answers: ["2023", "2022", "2021"], + modelValue: "2020" + }); + //wrapper.vm.chooseAnswer("2021"); + console.log(mockData.answer); // Assert expect(wrapper.find(".needed_car_info-text").text()).toEqual( diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue index c0460ad58..828c66b29 100644 --- a/src/common-components/radio-question/radio-question.vue +++ b/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); diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 07c70a1c7..4c5bb8d30 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -21,8 +21,6 @@ export default { years: Array, modelValue: String }, - created() { - }, components: { radioQuestion, }, From 4006d26c30179beef016101467206342b3d11447 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 6 Dec 2021 17:01:28 -0500 Subject: [PATCH 2/4] unit testing --- .../radio-question/radio-question.spec.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/radio-question/radio-question.spec.js index 671926086..0187888bc 100644 --- a/src/common-components/radio-question/radio-question.spec.js +++ b/src/common-components/radio-question/radio-question.spec.js @@ -7,11 +7,13 @@ describe("radioQuestion.vue", () => { // Arrange const chooseAnswer = jest.fn(); chooseAnswer.mockImplementation((answer) => { - mockData.answer = answer; + mockData.data.answer = answer; }); const mockData = { chooseAnswer: chooseAnswer, - answer: '' + data: { + answer: null + } } const mountOptions = getMountOptions(mockData); @@ -23,8 +25,7 @@ describe("radioQuestion.vue", () => { answers: ["2023", "2022", "2021"], modelValue: "2020" }); - //wrapper.vm.chooseAnswer("2021"); - console.log(mockData.answer); + wrapper.vm.chooseAnswer("2021"); // Assert expect(wrapper.find(".needed_car_info-text").text()).toEqual( @@ -33,5 +34,6 @@ describe("radioQuestion.vue", () => { const radioButtons = wrapper.findAllComponents('[data-test="radio"]'); expect(radioButtons.length).toBe(3); expect(wrapper.props().modelValue).toBe("2020"); + expect(mockData.data.answer).toBe("2021"); }); }); From d6c7c38e85a751bddb28eabef7754063b4ddb5ab Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 6 Dec 2021 17:04:12 -0500 Subject: [PATCH 3/4] ut --- .../radio-question/radio-question.spec.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/radio-question/radio-question.spec.js index 0187888bc..1583a7be8 100644 --- a/src/common-components/radio-question/radio-question.spec.js +++ b/src/common-components/radio-question/radio-question.spec.js @@ -5,16 +5,15 @@ import { getMountOptions } from "@/helpers/unit-test-helper"; 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.", async () => { // Arrange - const chooseAnswer = jest.fn(); - chooseAnswer.mockImplementation((answer) => { - mockData.data.answer = answer; - }); const mockData = { - chooseAnswer: chooseAnswer, + chooseAnswer: jest.fn(), data: { answer: null } } + mockData.chooseAnswer.mockImplementation((answer) => { + mockData.data.answer = answer; + }); const mountOptions = getMountOptions(mockData); From c739653a71a0ae6565ce5c8e5656f61ff4a1c3f9 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 7 Dec 2021 13:50:22 -0500 Subject: [PATCH 4/4] Updating unit testing to match new emit format on button click --- .../radio-question/radio-question.spec.js | 17 +--------------- src/layouts/vehicle-year/vehicle-year.spec.js | 10 +++++++++- .../year-question/year-question.spec.js | 20 +++++-------------- 3 files changed, 15 insertions(+), 32 deletions(-) diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/radio-question/radio-question.spec.js index 1583a7be8..17b6ff311 100644 --- a/src/common-components/radio-question/radio-question.spec.js +++ b/src/common-components/radio-question/radio-question.spec.js @@ -1,24 +1,10 @@ import { shallowMount } from "@vue/test-utils"; import radioQuestion from "@/common-components/radio-question/radio-question"; -import { getMountOptions } from "@/helpers/unit-test-helper"; 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.", async () => { - // Arrange - const mockData = { - chooseAnswer: jest.fn(), - data: { - answer: null - } - } - mockData.chooseAnswer.mockImplementation((answer) => { - mockData.data.answer = answer; - }); - - const mountOptions = getMountOptions(mockData); - // Act - const wrapper = shallowMount(radioQuestion, mountOptions) + const wrapper = shallowMount(radioQuestion) await wrapper.setProps({ questionText: "Question Text", answers: ["2023", "2022", "2021"], @@ -33,6 +19,5 @@ describe("radioQuestion.vue", () => { const radioButtons = wrapper.findAllComponents('[data-test="radio"]'); expect(radioButtons.length).toBe(3); expect(wrapper.props().modelValue).toBe("2020"); - expect(mockData.data.answer).toBe("2021"); }); }); diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index 60d3b8353..12cecfec4 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/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 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 14097e316..5e2ffeca7 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/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"); }); }); \ No newline at end of file