From b2b874e988a8477c896190bf7f412753d0261dbe Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 15 Feb 2022 14:53:05 -0500 Subject: [PATCH 1/3] Fixing filter functionality --- .../damage-location-question/damage-location-question.vue | 1 - .../replace-options-question/replace-options-question.vue | 2 +- src/layouts/vehicle-damage/vehicle-damage.vue | 6 +++++- 3 files changed, 6 insertions(+), 3 deletions(-) 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 @@ @@ -68,6 +69,9 @@ export default { vm.$refs.damageLocation.initializeComponent( resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions ); + vm.$refs.windshieldOptions.initializeComponent( + resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions + ); vm.$refs.funnelFooter.initializeComponent( resultMap.cmsContent.FunnelFooterWidget ); From 845679df74f454c2110baa03f73210569b888463 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 16 Feb 2022 13:25:05 -0500 Subject: [PATCH 2/3] 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: { From 4cd4650fb7763346fb3cc97faf1c3f6739453b04 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 16 Feb 2022 14:43:57 -0500 Subject: [PATCH 3/3] Unit test updates --- .../vehicle-damage/vehicle-damage.spec.js | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 949f4811b..0e47eb37f 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -175,7 +175,10 @@ function setupMocks({ return Promise.resolve({ driverSideOptions: { availableReplacementOptions: ["Front", "Back", "Side"], - } + }, + windshieldOptions: { + availableReplacementOptions: ["Front", "Back", "Side"], + }, }); }); const apiResponses = { @@ -193,6 +196,9 @@ function setupMocks({ damageOptions: { driverSideOptions: { availableReplacementOptions: ["Front", "Back", "Side"], + }, + windshieldOptions: { + availableReplacementOptions: ["Front", "Back", "Side"], } }, }; @@ -220,6 +226,11 @@ function setupMocks({ initializeComponent: jest.fn(), }; + const windshieldOptions = replaceOptionsQuestion + windshieldOptions.methods = { + initializeComponent: jest.fn(), + }; + damageLocationQuestion.methods = { initializeComponent: jest.fn(), }; @@ -245,12 +256,18 @@ function setupMocks({ funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent; - const driverSideOptionsWrapper = wrapper.findComponent({ + const driverSideOptionsWrapper = wrapper.findAllComponents({ name: "replaceOptionsQuestion", - }); + }).at(0); driverSideOptionsWrapper.vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent; + const windshieldOptionsWrapper = wrapper.findAllComponents({ + name: "replaceOptionsQuestion", + }).at(1); + windshieldOptionsWrapper.vm.initializeComponent = + replaceOptionsQuestion.methods.initializeComponent; + const damageLocationQuestionWrapper = wrapper.findComponent({ name: "damageLocationQuestion", });