diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index 3a608f3a0..c6a899309 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -46,5 +46,8 @@ export default { &.bold { font-weight: 500; } + &.dark { + color: $black; + } } diff --git a/src/layouts/review/review-block/review-block.vue b/src/layouts/review/review-block/review-block.vue index 128e488d7..0b1f913c3 100644 --- a/src/layouts/review/review-block/review-block.vue +++ b/src/layouts/review/review-block/review-block.vue @@ -3,7 +3,7 @@
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 new file mode 100644 index 000000000..a6dbe6f2d --- /dev/null +++ b/src/layouts/review/review-sections/damage-review/damage-review.spec.js @@ -0,0 +1,72 @@ +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"), +})); + +describe("Damage Review Block", () => { + describe("Correctly assembles damage info into a display string", () => { + test("Basic Replace", async () => { + // Arrange + const { wrapper } = setupMocks({ + propsData: { + damage: { + isRepair: false, + }, + }, + }); + + // Act + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.displayContent).toStrictEqual(["Windshield crack"]); + }); + + test("Basic Repair", async () => { + // Arrange + const { wrapper } = setupMocks({ + propsData: { + damage: { + isRepair: true, + numberOfChips: 2, + }, + }, + }); + + // Act + 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"]); + }); + }); +}); + +function setupMocks(customMountOptions) { + const mountOptions = getMountOptions(customMountOptions); + + const wrapper = shallowMount(damageReview, mountOptions); + wrapper.vm.setCmsContent = jest.fn(); + return { wrapper }; +} diff --git a/src/layouts/review/review-sections/damage-review/damage-review.vue b/src/layouts/review/review-sections/damage-review/damage-review.vue new file mode 100644 index 000000000..f7db11554 --- /dev/null +++ b/src/layouts/review/review-sections/damage-review/damage-review.vue @@ -0,0 +1,40 @@ + + + diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue index 3f7e45639..e3c173a02 100644 --- a/src/layouts/review/review.vue +++ b/src/layouts/review/review.vue @@ -41,6 +41,13 @@ cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" @edit-clicked="editVehicle" /> + +
+ +
@@ -60,6 +67,7 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner"; import buttonMain from "@/ux-components/button-main/button-main"; import textBlock from "@/digital-components/text-block/text-block"; import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review"; +import damageReview from "@/layouts/review/review-sections/damage-review/damage-review"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; @@ -99,6 +107,12 @@ export default { this.$route ); }, + editDamage() { + this.$router.navigateWithoutSaving( + this.navigationScenarios.CLICKED_DAMAGE_EDIT, + this.$route + ); + }, }, computed: { subHeaderTitle() { @@ -113,6 +127,9 @@ export default { vehicleInfo() { return this.$store.getters.vehicle; }, + damageInfo() { + return this.$store.getters.damage; + }, }, components: { funnelHeader, @@ -121,6 +138,7 @@ export default { buttonMain, textBlock, vehicleReview, + damageReview, }, }; diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 4b61687cb..2cbf5dd69 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -51,6 +51,7 @@ const navigationScenarios = { // Review CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT", + CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT", }; export { navigationScenarios }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 0f2bfa355..14fcbbf8a 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -442,6 +442,10 @@ const routingTable = function (store) { scenario: navigationScenarios.CLICKED_VEHICLE_EDIT, destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR, }, + { + scenario: navigationScenarios.CLICKED_DAMAGE_EDIT, + destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + }, ], }, ];