From 845679df74f454c2110baa03f73210569b888463 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 16 Feb 2022 13:25:05 -0500 Subject: [PATCH] Cleanup and logic fixes --- .../button-question/button-question.spec.js | 39 +++++++++++-------- .../button-question/button-question.vue | 22 ++++++----- .../replace-options-question.spec.js | 2 +- .../replace-options-question.vue | 5 ++- src/layouts/vehicle-damage/vehicle-damage.vue | 3 +- 5 files changed, 41 insertions(+), 30 deletions(-) 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 5df9531df..fc9500d96 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/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js index 103aecd4c..df8a16f90 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js @@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => { test("Answers to display filtered by data from api.", async () => { //Arrange - const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]}); + const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true}); //Act replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group"); 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 5efdc34b6..6f2606597 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 @@ -1,8 +1,9 @@ @@ -81,6 +81,7 @@ export default { return { selectedDamageLocations: [], driverSideOptionsData: [], + windshieldOptionsData: [], } }, methods: {