diff --git a/jest.config.js b/jest.config.js index 36c4507fc..b8beb88cc 100644 --- a/jest.config.js +++ b/jest.config.js @@ -13,6 +13,8 @@ module.exports = { "!src/helpers/unit-test-helper.js", "!src/layouts/component-test/component-test.vue", "!src/layouts/form-test/form-test.vue", + "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", + "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/address-poc/address-poc.vue", ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 7fff5c238..b3ea56043 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -7,9 +7,9 @@
{{groupName}}
-
+
+ +
@@ -43,6 +47,8 @@ import listButton from "@/ux-components/list-button/list-button"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; import listCard from "@/ux-components/list-card/list-card"; +import { ErrorMessage } from 'vee-validate'; +import radio from "@/ux-components/radio/radio"; export default { name: "buttonQuestion", @@ -59,7 +65,7 @@ export default { type: String, default: "text-center", }, - loaderEnabled: Boolean, + selectingInitiatesLoad: Boolean, loaderColor: { type: String, default: "blue", @@ -76,6 +82,10 @@ export default { isOverflowScrollable: Boolean, isWide: Boolean, modelValue: Array, + validationRules: String, + name: String, + value: String, + suppressError: Boolean, }, computed: { getFieldSetClasses() { @@ -95,6 +105,9 @@ export default { case 'listCard': classes = 'row justify-content-center g-2' break; + case 'radio': + classes = 'ui-radio d-flex' + break; } return classes; }, @@ -115,6 +128,9 @@ export default { } }, methods: { + chooseAnswer(answer) { + this.$emit("update:modelValue", answer); + }, handleCheckedChanged(val) { if(this.isMultiSelect) { // Add or remove item to array of data to emit @@ -122,7 +138,7 @@ export default { val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1); this.selectedValues = newSelectedValues; } else { - this.selectedValues = [val.buttonId] + this.selectedValues = [val.buttonId]; } }, }, @@ -130,6 +146,8 @@ export default { listButton, listButtonHorizontal, listCard, + ErrorMessage, + radio, }, }; diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js index 1c173b6be..6b2bd8335 100644 --- a/src/common-components/funnel-footer/funnel-footer.spec.js +++ b/src/common-components/funnel-footer/funnel-footer.spec.js @@ -5,7 +5,6 @@ describe("funnel-footer.vue", () => { it("Should return footer-link class", async () => { // Act - const r = { test:"testing", clientHeight: 10, @@ -18,43 +17,38 @@ describe("funnel-footer.vue", () => { const wrapper = mount(funnelFooter, { }); + wrapper.vm.initializeComponent(cmsContent); // Assert const link = wrapper.find("a"); - console.log(wrapper.html()); // Expect expect(link.attributes('class')).toContain("footer"); }); - it("Should return link text", async () => { + it("Should emit ForwardClicked on button click", async () => { // Act const wrapper = mount(funnelFooter, { - propsData: { - text: "Terms of use", - }, }); - + wrapper.vm.buttonClick(); // Assert - const link = wrapper.find("a"); - - expect(link.text()).toEqual("Terms of use"); + expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled; }); - it("Should return class btn-primary", async () => { + it("Should emit BackClicked on link click", async () => { // Act const wrapper = mount(funnelFooter, { - propsData: { - isPrimary: true, - }, }); - + wrapper.vm.linkClick(); // Assert - const input = wrapper.find("button"); - - // Expect - expect(input.attributes("class")).toContain("btn-primary"); + expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled; }); }); + +//Mock CMS content +const cmsContent = { + backLink: "text", + buttonText: "text", +}; diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 47dff7b5a..af604ed99 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -17,10 +17,24 @@
- +
- +
@@ -33,6 +47,9 @@ import buttonMain from "@/ux-components/button-main/button-main"; export default { name: "funnelFooter", + props: { + isDisabled: Boolean, + }, components: { textLink, buttonMain @@ -62,10 +79,10 @@ export default { this.buttonText = cmsContent.ForwardButtonText; }, buttonClick() { - this.$emit("forwardClicked"); + this.$emit("ForwardClicked"); }, linkClick() { - this.$emit("backClicked"); + this.$emit("BackClicked"); }, } }; diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue index 937109111..bc290d473 100644 --- a/src/common-components/funnel-sub-header/funnel-sub-header.vue +++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue @@ -57,7 +57,7 @@ export default { }; - diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js index 65434b289..01f063eef 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js @@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => { damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group"); //Assert - expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ]) + expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ]) }); }); 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 c48912ff2..36eac0831 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,5 +1,5 @@ \ No newline at end of file diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index 41ecac799..31c739b49 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -9,6 +9,7 @@ :groupName="groupName" buttonType="listCard" v-model="selectedValues" + validationRules="replace-options-required" /> @@ -17,6 +18,15 @@ \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue new file mode 100644 index 000000000..68cce08eb --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 9fb2d6ea1..bc8ce5f9f 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -2,11 +2,11 @@ diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index e79b8bafc..1876630ef 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -2,11 +2,11 @@ diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index bfec78571..a923c9128 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -2,11 +2,11 @@ diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 96d047244..97c2ab618 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -2,11 +2,11 @@ diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 17f05b304..88c47563c 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -50,6 +50,15 @@ const routingTable = [ }, ], }, + { + fmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE, + }, + ], + }, ]; export { routingTable }; diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index c2c6c3fea..880d54acc 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -1,10 +1,46 @@ .has-error { - .list-button, - .list-card, - .list-button-horizontal { + &.list-button, + &.list-card { + border: 1px solid transparent; + color: $red; + label { + border: 1px solid $red; + border-radius: .5rem; + } + } + input[type=checkbox]:focus + label, + input[type=radio]:focus + label, + input[type=checkbox]:checked + label, + input[type=radio]:checked + label { + box-shadow: 0 0 0 2.5px transparent !important; + } + &.list-button-horizontal { color: $red; label { border: 1px solid $red; } } } + +.form-test-error { + color: $red; + font-size: .875rem; + font-weight: 500; +} + +.form-test-invalid { + &.btn.btn-primary { + color: $gray; + background: $gray-200; + cursor: pointer; + pointer-events: all; + } + &.btn.btn-primary:hover, + &.btn.btn-primary:focus, + &.btn.btn-primary:focus-visible { + color: $gray; + background: $gray-200; + box-shadow: none; + } + +} diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 2a4a68366..3b8b744f5 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -1,5 +1,10 @@