diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index 67e2f010e..d5608cd62 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -1,5 +1,6 @@ import { shallowMount } from "@vue/test-utils"; 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 () => { @@ -41,44 +42,32 @@ describe("buttonQuestion.vue", () => { }); describe("buttonQuestion.vue", () => { - it("Should trigger event modelValue change on select", async () => { + it("Should trigger event modelValue change to new value on when radio button selected", async () => { // Act const wrapper = shallowMount(buttonQuestion); - await wrapper.setData({ - modelValueAnswers: ["Windshield"], - chosenAnswer: "Windshield" + await wrapper.setProps({ + answers: ["2022", "2021", "2020"], + isMultiSelect: false }); - wrapper.setValue({ answer: wrapper.vm.chosenAnswer }); - await wrapper.vm.$nextTick(); - // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => { - // Act - const wrapper = shallowMount(buttonQuestion); - await wrapper.setData({ - modelValueAnswers: ["Windshield", "BackDoor"] - }); - wrapper.vm.handleCheckedChanged(true); - // Assert - expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object'); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should not trigger event modelValue change on select if checked is false", async () => { - // Act - const wrapper = shallowMount(buttonQuestion); - wrapper.setData({ - modelValueAnswers: ["Front-door"] - }) - const val = {isChecked : false, buttonId: "Front-door"} + const val = {isChecked: true, buttonId: "2021", } wrapper.vm.handleCheckedChanged(val); // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]); + }); +}); + +describe("buttonQuestion.vue", () => { + it("Should add values to array on checkbox click", async () => { + // Act + const wrapper = shallowMount(buttonQuestion); + await wrapper.setProps({ + modelValue: ["2022", "2021", "2020"], + isMultiSelect: true + }); + const val = {isChecked: true, buttonId: "2019", } + wrapper.vm.handleCheckedChanged(val); + // Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]); }); }); diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 49955db5f..bc707ebac 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -31,7 +31,7 @@ :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" :colLength="this.answers.length < 3 ? '' : '-4'" - v-model="selectedValues" + :selectedButtonIDs="selectedValues" data-test="button" :validationRules="validationRules" /> @@ -116,15 +116,11 @@ export default { } }, }, - data(){ - return { - modelValueAnswers: [], - } - }, mounted(){ if(Array.isArray(this.answers) && this.answers.length === 1) { - this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]); - this.$emit("update:modelValue", this.modelValueAnswers); + const newSelectedValues = this.selectedValues; + newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]); + this.selectedValues = newSelectedValues; } }, methods: { @@ -133,13 +129,14 @@ export default { this.$emit("update:modelValue", answer); }, handleCheckedChanged(val) { - - console.log('meta is now ', this.meta) - - // Add or remove item to array of data to emit - val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1); - const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined; - this.$emit("update:modelValue", answersToEmit); + if(this.isMultiSelect) { + // Add or remove item to array of data to emit + const newSelectedValues = this.selectedValues; + val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1); + this.selectedValues = newSelectedValues; + } else { + this.selectedValues = [val.buttonId] + } }, }, components: { diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js index f1a885dfd..791cd0961 100644 --- a/src/common-components/funnel-footer/funnel-footer.spec.js +++ b/src/common-components/funnel-footer/funnel-footer.spec.js @@ -5,9 +5,17 @@ describe("funnel-footer.vue", () => { it("Should return footer-link class", async () => { // Act - try { + + const r = { + test:"testing", + clientHeight: 10, + classList: { + add: jest.fn(() => ''), + remove: jest.fn() + }, + }; global.document.getElementById = jest.fn().mockImplementation(()=> { - return {} + return r; }); const wrapper = mount(funnelFooter, { @@ -22,9 +30,8 @@ describe("funnel-footer.vue", () => { // Expect expect(link.attributes('class')).toContain("footer-link"); expect(global.document.getElementById).toBeCalled(); - } catch(error) { - console.log(error); - } + expect(r.classList.add).toBeCalledWith("justify-content-end"); + expect(r.classList.remove).toBeCalledWith("justify-content-start"); }); @@ -57,4 +64,32 @@ describe("funnel-footer.vue", () => { expect(input.attributes("class")).toContain("btn-primary"); }); + it("Should return class justify-content-end if paddingHeight < 80px", async () => { + + global.document.getElementById = jest.fn().mockImplementation(()=> { + return { + test:"testing", + clientHeight: 10, + classList: { + add: jest.fn(), + remove: jest.fn() + } + } + }); + + // Act + const wrapper = mount(funnelFooter, { + propsData: { + footer: true + }, + }); + const infoBox = document.getElementById('infoBox'); + // Assert + const stacked = wrapper.find("#stacked"); + wrapper.vm.paddingHeight = 100; + + // Expect + expect(stacked.attributes('class')).toContain("justify-content-end"); + }); + }); diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 08ff0b799..c93501177 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -26,17 +26,18 @@
-
-
+
+
+
+
80) { + wrapper2.classList.add("justify-content-start"); + wrapper2.classList.remove("justify-content-end"); + } else { + wrapper2.classList.add("justify-content-end"); + wrapper2.classList.remove("justify-content-start"); + } } } }; + + diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 2fd05b516..ed8318673 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -76,7 +76,7 @@
Functioning as Checkbox Checkbox no Description Functioning as Radio Button Radio Button no Description Horizontal Radio Button Radio Button no Description { damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group"); //Assert - expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ]) + expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ]) }); }); 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 7196e8f43..89c9927ab 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 @@ -5,7 +5,7 @@ { }); }); + function setupMocks({ modelValueProp = "1900", cmsQuestionText = "CMS text goes here", @@ -89,6 +90,7 @@ function setupMocks({ mountOptions.propsData = { modelValue: modelValueProp, }; + const wrapper = shallowMount(yearQuestion, mountOptions); //Mock CMS content diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index ce79269c6..96d047244 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -35,7 +35,7 @@ export default { computed: { selectedValueAsArray: { get: function() { - const modelValueAsArray = this.modelValue ? [this.modelValue] : null; + const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 9e6066385..01ac6de55 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -56,7 +56,7 @@ export default { border-radius: $border-radius-lg; color: $white; transition: all 150ms linear; - white-space: nowrap; + justify-content: center; &:hover { background: linear-gradient( 270deg, diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index c25b169fa..5cbe02e75 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -173,4 +173,45 @@ describe("list-button-horizontal.vue", () => { expect(loader.attributes("style")).toContain("1rem"); }); + + it("Should emit button value on click", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: false, + modelValue: ["List Card Checkbox"], + }, + }); + wrapper.vm.handleCheckChange(); + // Assert + expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]); + }); + + it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: false, + modelValue: ["List Card Checkbox"], + isMultiSelect: false, + selectedButtonIDs: ["Car-Front"] + }, + }); + // Assert + expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); + }); }); diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index db2f9f382..e3e7c3891 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -12,6 +12,7 @@ :aria-required="isRequired" :data-focus-target="groupName" v-model="checkValue" + @change="handleCheckChange" />