diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index d5608cd62..464fcf245 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -3,12 +3,14 @@ import buttonQuestion from "@/common-components/button-question/button-question" import { nextTick } from "vue"; describe("buttonQuestion.vue", () => { - it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => { + it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => { // Act - const wrapper = shallowMount(buttonQuestion); - await wrapper.setProps({ - isOverflowScrollable: true, + const wrapper = shallowMount(buttonQuestion, { + propsData: { + isOverflowScrollable: true, + } }); + // Assert const fieldSet = wrapper.find('fieldset'); expect(fieldSet.classes()).toContain("overflow-scroll"); @@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => { }); describe("buttonQuestion.vue", () => { - it("Fieldset classes should contain row if button type is listCard", async () => { + it("Fieldset classes should contain row if button type is listCard", () => { // Act - const wrapper = shallowMount(buttonQuestion); - await wrapper.setProps({ - buttonType: "listCard", + const wrapper = shallowMount(buttonQuestion, { + propsData: { + buttonType: "listCard", + } }); // Assert const Div = wrapper.find('fieldset div'); @@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => { }); describe("buttonQuestion.vue", () => { - it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => { + it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => { // Act - const wrapper = shallowMount(buttonQuestion); - await wrapper.setProps({ - buttonType: "listButtonHorizontal", + const wrapper = shallowMount(buttonQuestion, { + propsData: { + buttonType: "listButtonHorizontal", + } }); // Assert const Div = wrapper.find('fieldset div'); @@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => { }); describe("buttonQuestion.vue", () => { - it("Should add values to array on checkbox click", async () => { + it("Should add values to array on checkbox click", () => { // Act - const wrapper = shallowMount(buttonQuestion); - await wrapper.setProps({ - modelValue: ["2022", "2021", "2020"], - isMultiSelect: true + const wrapper = shallowMount(buttonQuestion, { + propsData: { + modelValue: ["2022", "2021", "2020"], + isMultiSelect: true, + } }); const val = {isChecked: true, buttonId: "2019", } wrapper.vm.handleCheckedChanged(val); diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index b3ea56043..719d2d681 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -29,7 +29,7 @@ :buttonImageId="answer.ImageId" :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" - :colLength="this.answers.length < 3 ? '' : '-4'" + :colLength="getColLength" :selectedButtonIDs="selectedValues" data-test="button" :validationRules="validationRules" @@ -83,8 +83,6 @@ export default { isWide: Boolean, modelValue: Array, validationRules: String, - name: String, - value: String, suppressError: Boolean, }, computed: { @@ -111,6 +109,13 @@ export default { } return classes; }, + getColLength(){ + if(this.isWide) { + return "12" + } else { + return this.answers.length < 3 ? '' : '-4'; + } + }, selectedValues: { get: function() { return this.modelValue; @@ -120,17 +125,16 @@ export default { } }, }, - mounted(){ - if(Array.isArray(this.answers) && this.answers.length === 1) { + beforeUpdate(){ + const exceptions = ["Windshield", "Crack"]; + const firstItem = typeof(this.answers[0]) === 'object' ? this.answers[0] : this.answers[0]; + if(Array.isArray(this.answers) && this.answers.length === 1 && !exceptions.includes(typeof(firstItem) === 'object' ? firstItem.Text : firstItem)) { const newSelectedValues = this.selectedValues; - newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]); + newSelectedValues.push(typeof(firstItem) === 'object' ? firstItem.Name : firstItem); this.selectedValues = newSelectedValues; } }, methods: { - chooseAnswer(answer) { - this.$emit("update:modelValue", answer); - }, handleCheckedChanged(val) { if(this.isMultiSelect) { // Add or remove item to array of data to emit diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue index 36eac0831..58a74a31c 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue @@ -1,7 +1,6 @@