Updating unit testing to match new emit format on button click
This commit is contained in:
parent
d6c7c38e85
commit
c739653a71
3 changed files with 15 additions and 32 deletions
|
|
@ -1,24 +1,10 @@
|
||||||
import { shallowMount } from "@vue/test-utils";
|
import { shallowMount } from "@vue/test-utils";
|
||||||
import radioQuestion from "@/common-components/radio-question/radio-question";
|
import radioQuestion from "@/common-components/radio-question/radio-question";
|
||||||
import { getMountOptions } from "@/helpers/unit-test-helper";
|
|
||||||
|
|
||||||
describe("radioQuestion.vue", () => {
|
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 () => {
|
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
|
// Act
|
||||||
const wrapper = shallowMount(radioQuestion, mountOptions)
|
const wrapper = shallowMount(radioQuestion)
|
||||||
await wrapper.setProps({
|
await wrapper.setProps({
|
||||||
questionText: "Question Text",
|
questionText: "Question Text",
|
||||||
answers: ["2023", "2022", "2021"],
|
answers: ["2023", "2022", "2021"],
|
||||||
|
|
@ -33,6 +19,5 @@ describe("radioQuestion.vue", () => {
|
||||||
const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
|
const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
|
||||||
expect(radioButtons.length).toBe(3);
|
expect(radioButtons.length).toBe(3);
|
||||||
expect(wrapper.props().modelValue).toBe("2020");
|
expect(wrapper.props().modelValue).toBe("2020");
|
||||||
expect(mockData.data.answer).toBe("2021");
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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" }],
|
VehicleBannerWidget: [{ GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" }],
|
||||||
isCmsContentReady: true,
|
isCmsContentReady: true,
|
||||||
},
|
},
|
||||||
getVehicleYear: [2023, 2022, 2021]
|
getVehicleYear: [2023, 2022, 2021],
|
||||||
|
store: {
|
||||||
|
commit: jest.fn(),
|
||||||
|
year: null
|
||||||
|
},
|
||||||
|
router: {
|
||||||
|
push: jest.fn()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// our router information needed.
|
// our router information needed.
|
||||||
|
|
@ -39,6 +46,7 @@ describe("vehicle-year.vue", () => {
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const wrapper = shallowMount(vehicleYear, mountOptions);
|
const wrapper = shallowMount(vehicleYear, mountOptions);
|
||||||
|
wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
|
||||||
|
|
||||||
// Call our beforeRouteEnter on the component.
|
// Call our beforeRouteEnter on the component.
|
||||||
// This passes (c) => c(wrapper.vm) so that next can be called and our
|
// This passes (c) => c(wrapper.vm) so that next can be called and our
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,21 @@
|
||||||
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
|
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
|
||||||
import { shallowMount } from "@vue/test-utils";
|
import { shallowMount } from "@vue/test-utils";
|
||||||
import { getMountOptions } from "../../../helpers/unit-test-helper";
|
|
||||||
|
|
||||||
describe('year-question.vue', () => {
|
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 () => {
|
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
|
// Act
|
||||||
const wrapper = shallowMount(yearQuestion, mountOptions);
|
const wrapper = shallowMount(yearQuestion);
|
||||||
await wrapper.setProps({
|
await wrapper.setProps({
|
||||||
questionText: 'What year is your vehicle?',
|
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
|
// Assert
|
||||||
const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'});
|
const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'});
|
||||||
expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?");
|
expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?");
|
||||||
expect(radioQuestion.attributes('answers')).toBe("2023,2022,2021");
|
expect(radioQuestion.attributes('answers')).toBe("2023,2022,2021");
|
||||||
|
expect(wrapper.componentVM.modelValue).toBe("2020");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
Loading…
Reference in a new issue