From b5c5fa2a6cc284c25ab5e0c6e6c6e2a775e87bf3 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 15 Jun 2023 09:23:59 -0400 Subject: [PATCH 01/14] Prepare for nested bulleted lists --- src/layouts/review/review-block/review-block.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/layouts/review/review-block/review-block.vue b/src/layouts/review/review-block/review-block.vue index 0b1f913c3..1c5b02486 100644 --- a/src/layouts/review/review-block/review-block.vue +++ b/src/layouts/review/review-block/review-block.vue @@ -7,9 +7,12 @@ margin="mt-0" /> -
- {{ item }} -
+
From 8451523a24d116b988de8ca8d098fd09aa6c57b4 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 15 Jun 2023 09:36:21 -0400 Subject: [PATCH 02/14] Check for windshield damage before adding section to block --- .../damage-review/damage-review.vue | 31 ++++++++++++++----- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/layouts/review/review-sections/damage-review/damage-review.vue b/src/layouts/review/review-sections/damage-review/damage-review.vue index f7db11554..12be2a823 100644 --- a/src/layouts/review/review-sections/damage-review/damage-review.vue +++ b/src/layouts/review/review-sections/damage-review/damage-review.vue @@ -7,6 +7,7 @@ + + From 7aa9cb6e0c11c4e98b9ce5afee87995348342e28 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 25 Jul 2023 15:12:35 -0400 Subject: [PATCH 08/14] Add getter to support cms. --- src/store/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/store/index.js b/src/store/index.js index c1968888d..fb86b61c3 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -528,6 +528,9 @@ export const getters = { }, eventBus: (state) => state.applicationUser.eventBus, damage: (state) => state.order.damage, + hasExactlyOneChip: (state) => { + return state.order.damage?.numberOfChips === 1; + }, hasAnyNonWindshieldGlassParts: (state) => { const nonWindshieldItems = state.order.damage.glassToReplace?.filter( (glassToReplace) => glassToReplace.glassLocation != "Windshield" From 2f1eae02b1ab80ca90e97cd0ba4b520735060da4 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 25 Jul 2023 15:12:48 -0400 Subject: [PATCH 09/14] Formatting --- src/layouts/review/review-block/review-block.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/layouts/review/review-block/review-block.vue b/src/layouts/review/review-block/review-block.vue index d57936501..88228ed32 100644 --- a/src/layouts/review/review-block/review-block.vue +++ b/src/layouts/review/review-block/review-block.vue @@ -49,9 +49,7 @@ export default { From 6f9519ec1b3609bc83a5add341c27679c94ed08f Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 25 Jul 2023 16:14:18 -0400 Subject: [PATCH 10/14] Update existing unit tests --- .../damage-review/damage-review.spec.js | 242 ++++++++++++++++-- 1 file changed, 216 insertions(+), 26 deletions(-) diff --git a/src/layouts/review/review-sections/damage-review/damage-review.spec.js b/src/layouts/review/review-sections/damage-review/damage-review.spec.js index a6dbe6f2d..2e4ef3e2a 100644 --- a/src/layouts/review/review-sections/damage-review/damage-review.spec.js +++ b/src/layouts/review/review-sections/damage-review/damage-review.spec.js @@ -1,19 +1,210 @@ import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; -import damageReview from "@/layouts/review/review-sections/damage-review/damage-review"; -jest.mock("@/helpers/cms-content-helper", () => ({ - fetchCmsContentForPage: () => Promise.resolve("content"), -})); +import damageReview from "@/layouts/review/review-sections/damage-review/damage-review"; +import { damageLocationsSelected as glassConstants } from "@/constants/damage-locations-selected"; + +const testConstants = { + cmsConstants: { + widgetNames: { + header: "DamageReviewWidget", + locations: "DamageLocationsWidget", + driverDamages: "DriverDamagesWidget", + passengerDamages: "PassengerDamagesWidget", + }, + header: { + text: "Damage", + }, + damageLocations: { + windshield: glassConstants.WINDSHIELD, + driver: glassConstants.DRIVER, + passenger: glassConstants.PASSENGER, + rear: glassConstants.REAR, + }, + damageNames: { + vent: glassConstants.VENT, + front: glassConstants.FRONT, + back: glassConstants.BACK, + quarter: glassConstants.QUARTER, + side: glassConstants.SIDEDOOR, + }, + locationCopy: { + windshield: "Windshield copy", + driver: "Driver copy", + passenger: "Passenger copy", + rear: "Rear copy", + }, + damageCopy: { + vent: "Vent copy", + front: "Front copy", + back: "Back copy", + quarter: "Quarter copy", + side: "Side copy", + }, + imageId: "00000000-0000-0000-0000-000000000000", + }, + makeBulletedList: (items) => { + let list = "
    "; + items.forEach((item) => { + list += `
  • ${item}
  • `; + }); + list += "
"; + + return list; + }, + glassItems: { + windshield: { + glassLocation: glassConstants.WINDSHIELD, + glassName: glassConstants.SINGLE, + }, + }, +}; + +let cmsContent; describe("Damage Review Block", () => { + beforeEach(() => { + cmsContent = { + DamageReviewWidget: { + Text: testConstants.cmsConstants.header.text, + }, + DamageLocationsWidget: { + Answers: [ + { + Name: testConstants.cmsConstants.damageLocations.windshield, + Text: testConstants.cmsConstants.locationCopy.windshield, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageLocations.driver, + Text: testConstants.cmsConstants.locationCopy.driver, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: testConstants.cmsConstants.widgetNames.driverDamages, + }, + { + Name: testConstants.cmsConstants.damageLocations.passenger, + Text: testConstants.cmsConstants.locationCopy.passenger, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: testConstants.cmsConstants.widgetNames.passengerDamages, + }, + { + Name: testConstants.cmsConstants.damageLocations.rear, + Text: testConstants.cmsConstants.locationCopy.rear, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + ], + }, + DriverDamagesWidget: { + Answers: [ + { + Name: testConstants.cmsConstants.damageNames.vent, + Text: testConstants.cmsConstants.damageCopy.vent, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.front, + Text: testConstants.cmsConstants.damageCopy.front, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.back, + Text: testConstants.cmsConstants.damageCopy.back, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.quarter, + Text: testConstants.cmsConstants.damageCopy.quarter, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.side, + Text: testConstants.cmsConstants.damageCopy.side, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + ], + }, + PassengerDamagesWidget: { + Answers: [ + { + Name: testConstants.cmsConstants.damageNames.vent, + Text: testConstants.cmsConstants.damageCopy.vent, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.front, + Text: testConstants.cmsConstants.damageCopy.front, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.back, + Text: testConstants.cmsConstants.damageCopy.back, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.quarter, + Text: testConstants.cmsConstants.damageCopy.quarter, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + { + Name: testConstants.cmsConstants.damageNames.side, + Text: testConstants.cmsConstants.damageCopy.side, + SubText: "", + ImageId: testConstants.cmsConstants.imageId, + Image: "", + SubWidgetName: "", + }, + ], + }, + }; + }); + describe("Correctly assembles damage info into a display string", () => { - test("Basic Replace", async () => { + test("Shows windshield copy when windshield damage is included", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { + cmsWidgetName: testConstants.cmsConstants.widgetNames.header, + damageLocationsWidgetName: testConstants.cmsConstants.widgetNames.locations, damage: { isRepair: false, + glassToReplace: [testConstants.glassItems.windshield], }, }, }); @@ -22,16 +213,21 @@ describe("Damage Review Block", () => { await wrapper.vm.$nextTick(); // Assert - expect(wrapper.vm.displayContent).toStrictEqual(["Windshield crack"]); + expect(wrapper.vm.displayContent).toStrictEqual([ + testConstants.cmsConstants.locationCopy.windshield, + ]); }); - test("Basic Repair", async () => { + test("Windshield copy is shown when order is a repair", async () => { // Arrange const { wrapper } = setupMocks({ propsData: { + cmsWidgetName: testConstants.cmsConstants.widgetNames.header, + damageLocationsWidgetName: testConstants.cmsConstants.widgetNames.locations, damage: { isRepair: true, numberOfChips: 2, + glassToReplace: [], }, }, }); @@ -40,25 +236,9 @@ describe("Damage Review Block", () => { await wrapper.vm.$nextTick(); // Assert - expect(wrapper.vm.displayContent).toStrictEqual(["Windshield repair - 2 chips"]); - }); - - test("Basic Repair - no s with 1 chip", async () => { - // Arrange - const { wrapper } = setupMocks({ - propsData: { - damage: { - isRepair: true, - numberOfChips: 1, - }, - }, - }); - - // Act - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.displayContent).toStrictEqual(["Windshield repair - 1 chip"]); + expect(wrapper.vm.displayContent).toStrictEqual([ + testConstants.cmsConstants.locationCopy.windshield, + ]); }); }); }); @@ -66,6 +246,16 @@ describe("Damage Review Block", () => { function setupMocks(customMountOptions) { const mountOptions = getMountOptions(customMountOptions); + const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return cmsContent?.[widgetName]?.[cmsFieldName] ?? ""; + }), + }, + }; + + mountOptions.global.mixins = [mockMixin]; + const wrapper = shallowMount(damageReview, mountOptions); wrapper.vm.setCmsContent = jest.fn(); return { wrapper }; From 21914908a3a0db68a129ed758f2503fc828c3c6c Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 25 Jul 2023 16:39:40 -0400 Subject: [PATCH 11/14] Add new tests. --- .../damage-review/damage-review.spec.js | 178 ++++++++++++++++++ 1 file changed, 178 insertions(+) diff --git a/src/layouts/review/review-sections/damage-review/damage-review.spec.js b/src/layouts/review/review-sections/damage-review/damage-review.spec.js index 2e4ef3e2a..e7aa69a67 100644 --- a/src/layouts/review/review-sections/damage-review/damage-review.spec.js +++ b/src/layouts/review/review-sections/damage-review/damage-review.spec.js @@ -57,6 +57,54 @@ const testConstants = { glassLocation: glassConstants.WINDSHIELD, glassName: glassConstants.SINGLE, }, + rear: { + glassLocation: glassConstants.REAR, + glassName: glassConstants.STATIONARY, + }, + passengerItems: { + vent: { + glassLocation: glassConstants.PASSENGER, + glassName: glassConstants.VENT, + }, + front: { + glassLocation: glassConstants.PASSENGER, + glassName: glassConstants.FRONT, + }, + back: { + glassLocation: glassConstants.PASSENGER, + glassName: glassConstants.BACK, + }, + quarter: { + glassLocation: glassConstants.PASSENGER, + glassName: glassConstants.QUARTER, + }, + side: { + glassLocation: glassConstants.PASSENGER, + glassName: glassConstants.SIDEDOOR, + }, + }, + driverItems: { + vent: { + glassLocation: glassConstants.DRIVER, + glassName: glassConstants.VENT, + }, + front: { + glassLocation: glassConstants.DRIVER, + glassName: glassConstants.FRONT, + }, + back: { + glassLocation: glassConstants.DRIVER, + glassName: glassConstants.BACK, + }, + quarter: { + glassLocation: glassConstants.DRIVER, + glassName: glassConstants.QUARTER, + }, + side: { + glassLocation: glassConstants.DRIVER, + glassName: glassConstants.SIDEDOOR, + }, + }, }, }; @@ -240,6 +288,136 @@ describe("Damage Review Block", () => { testConstants.cmsConstants.locationCopy.windshield, ]); }); + + test("Rear windshield copy shows when rear damage is present", async () => { + // Arrange + const { wrapper } = setupMocks({ + propsData: { + cmsWidgetName: testConstants.cmsConstants.widgetNames.header, + damageLocationsWidgetName: testConstants.cmsConstants.widgetNames.locations, + damage: { + isRepair: false, + numberOfChips: null, + glassToReplace: [testConstants.glassItems.rear], + }, + }, + }); + + // Act + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.displayContent).toStrictEqual([ + testConstants.cmsConstants.locationCopy.rear, + ]); + }); + + test("Driver side copy and items are shown when driver side damage is present", async () => { + // Arrange + const { wrapper } = setupMocks({ + propsData: { + cmsWidgetName: testConstants.cmsConstants.widgetNames.header, + damageLocationsWidgetName: testConstants.cmsConstants.widgetNames.locations, + damage: { + isRepair: false, + numberOfChips: null, + glassToReplace: [ + testConstants.glassItems.driverItems.back, + testConstants.glassItems.driverItems.front, + ], + }, + }, + }); + + // Act + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.displayContent).toStrictEqual([ + testConstants.cmsConstants.locationCopy.driver, + testConstants.makeBulletedList([ + testConstants.cmsConstants.damageCopy.front, + testConstants.cmsConstants.damageCopy.back, + ]), + ]); + }); + + test("Passenger side copy and items are shown when passenger side damage is present", async () => { + // Arrange + const { wrapper } = setupMocks({ + propsData: { + cmsWidgetName: testConstants.cmsConstants.widgetNames.header, + damageLocationsWidgetName: testConstants.cmsConstants.widgetNames.locations, + damage: { + isRepair: false, + numberOfChips: null, + glassToReplace: [ + testConstants.glassItems.passengerItems.quarter, + testConstants.glassItems.passengerItems.vent, + testConstants.glassItems.passengerItems.side, + ], + }, + }, + }); + + // Act + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.displayContent).toStrictEqual([ + testConstants.cmsConstants.locationCopy.passenger, + testConstants.makeBulletedList([ + testConstants.cmsConstants.damageCopy.vent, + testConstants.cmsConstants.damageCopy.quarter, + testConstants.cmsConstants.damageCopy.side, + ]), + ]); + }); + + test("All relevant sections are shown in order in multiglass scenario", async () => { + // Arrange + const { wrapper } = setupMocks({ + propsData: { + cmsWidgetName: testConstants.cmsConstants.widgetNames.header, + damageLocationsWidgetName: testConstants.cmsConstants.widgetNames.locations, + damage: { + isRepair: false, + numberOfChips: null, + glassToReplace: [ + testConstants.glassItems.windshield, + testConstants.glassItems.rear, + testConstants.glassItems.driverItems.vent, + testConstants.glassItems.driverItems.front, + testConstants.glassItems.driverItems.back, + testConstants.glassItems.passengerItems.quarter, + testConstants.glassItems.passengerItems.back, + testConstants.glassItems.passengerItems.side, + ], + }, + }, + }); + + // Act + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.displayContent).toStrictEqual([ + testConstants.cmsConstants.locationCopy.windshield, + testConstants.cmsConstants.locationCopy.driver, + testConstants.makeBulletedList([ + testConstants.cmsConstants.damageCopy.vent, + testConstants.cmsConstants.damageCopy.front, + testConstants.cmsConstants.damageCopy.back, + ]), + testConstants.cmsConstants.locationCopy.passenger, + testConstants.makeBulletedList([ + testConstants.cmsConstants.damageCopy.back, + testConstants.cmsConstants.damageCopy.quarter, + testConstants.cmsConstants.damageCopy.side, + ]), + testConstants.cmsConstants.locationCopy.rear, + ]); + }); }); }); From b48e3c5004dde9a1a15ecae6bb2ed7ac0d3de221 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 25 Jul 2023 16:42:12 -0400 Subject: [PATCH 12/14] Fix to un-conflate driver and passenger side items. --- .../review-sections/damage-review/damage-review.vue | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/layouts/review/review-sections/damage-review/damage-review.vue b/src/layouts/review/review-sections/damage-review/damage-review.vue index da83d1a48..e0972aa09 100644 --- a/src/layouts/review/review-sections/damage-review/damage-review.vue +++ b/src/layouts/review/review-sections/damage-review/damage-review.vue @@ -92,10 +92,9 @@ export default { driverSideCopy() { const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER); const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName); + const driverSideItems = this.getGlassPieces(damageLocationsSelected.DRIVER); const damageAnswersOnOrder = damageAnswers?.filter((answer) => - this.damage?.glassToReplace?.some( - (glassPiece) => answer.Name === glassPiece.glassName - ) + driverSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName) ); if (this.hasDriverSideDamage) { @@ -110,10 +109,9 @@ export default { passengerSideCopy() { const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER); const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName); + const passengerSideItems = this.getGlassPieces(damageLocationsSelected.PASSENGER); const damageAnswersOnOrder = damageAnswers?.filter((answer) => - this.damage?.glassToReplace?.some( - (glassPiece) => answer.Name === glassPiece.glassName - ) + passengerSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName) ); if (this.hasPassengerSideDamage) { From f0a5631cda2f03acb9352468062fa96fb6a4fe4c Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 25 Jul 2023 16:52:26 -0400 Subject: [PATCH 13/14] Correctly force no-top-margin to align section headers. --- src/layouts/review/review-block/review-block.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/review/review-block/review-block.vue b/src/layouts/review/review-block/review-block.vue index 88228ed32..67e639da9 100644 --- a/src/layouts/review/review-block/review-block.vue +++ b/src/layouts/review/review-block/review-block.vue @@ -4,7 +4,7 @@ + marginTopSizeOverride="0" /> Date: Tue, 25 Jul 2023 16:58:40 -0400 Subject: [PATCH 14/14] Re-align windshield logic --- .../review-sections/damage-review/damage-review.vue | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/layouts/review/review-sections/damage-review/damage-review.vue b/src/layouts/review/review-sections/damage-review/damage-review.vue index e0972aa09..ecc7ec98d 100644 --- a/src/layouts/review/review-sections/damage-review/damage-review.vue +++ b/src/layouts/review/review-sections/damage-review/damage-review.vue @@ -58,12 +58,9 @@ export default { ]; }, hasWindshieldDamage() { - return ( - this.damage.isRepair || - this.damage.glassToReplace?.some( - (glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD - ) - ); + const windshieldPieces = this.getGlassPieces(damageLocationsSelected.WINDSHIELD); + + return this.damage.isRepair || !!windshieldPieces?.length; }, hasDriverSideDamage() { const driverPieces = this.getGlassPieces(damageLocationsSelected.DRIVER);