From 1f2560f0a972557eede63447ca28d57a348c75fd Mon Sep 17 00:00:00 2001 From: Sneha Date: Wed, 9 Aug 2023 15:36:19 +0530 Subject: [PATCH 1/2] CSR-1418 --- src/constants/store-actions.js | 2 +- .../vehicle-banner/vehicle-banner.vue | 9 +- src/layouts/vehicle/vehicle.spec.js | 93 ++++++------------- src/layouts/vehicle/vehicle.vue | 42 +++++---- src/store/index.js | 22 ++--- src/store/store.spec.js | 23 ++--- 6 files changed, 78 insertions(+), 113 deletions(-) diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index fc0daf323..c4efe9d45 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -9,7 +9,7 @@ const storeActions = { GET_VEHICLE_MAKES: "getVehicleMakes", GET_VEHICLE_MODELS: "getVehicleModels", GET_VEHICLE_STYLES: "getVehicleStyles", - SET_VEHICLE: "setVehicle", + GET_VEHICLE: "getVehicle", GET_DAMAGE_OPTIONS: "getDamageOptions", GET_EVOX_IMAGE: "getEvoxImage", IS_VIN_OPTIONAL_VEHICLE: "isVinOptionalVehicle", diff --git a/src/fmg-components/vehicle-banner/vehicle-banner.vue b/src/fmg-components/vehicle-banner/vehicle-banner.vue index 8f7be0179..a9c8569ae 100644 --- a/src/fmg-components/vehicle-banner/vehicle-banner.vue +++ b/src/fmg-components/vehicle-banner/vehicle-banner.vue @@ -13,13 +13,20 @@ export default { required: true, }, cmsWidgetName: String, + displayVehicleImage: { + type: String, + required: false, + default: null, + }, }, computed: { vehicleImageToDisplay() { if (this.displayGenericVehicleImage) { return this.genericVehicleImage; } - + if (this.displayVehicleImage !== null) { + return this.displayVehicleImage; + } if ( this.$store.getters.vehicle.imageUrl === null || this.$store.getters.vehicle.imageUrl === "NULL" diff --git a/src/layouts/vehicle/vehicle.spec.js b/src/layouts/vehicle/vehicle.spec.js index 210281423..56b46292d 100644 --- a/src/layouts/vehicle/vehicle.spec.js +++ b/src/layouts/vehicle/vehicle.spec.js @@ -1,19 +1,17 @@ // Components import vehicle from "@/layouts/vehicle/vehicle.vue"; -// Supporting files +// Supporting Files +import { shallowMount } from "@vue/test-utils"; import { nextTick } from "vue"; -import { mount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); describe("vehicle.vue", () => { - test('"Continue" button is enabled after YMMS is selected.', async () => { - const { wrapper } = setupMocks(); - - const continueButton = wrapper.get('[data-test-id="funnel-footer-main-button"]'); - - expect(continueButton.attributes()["aria-disabled"]).toBe("false"); - }); - test("arePagePrerequisitesValid should be true ", async () => { //Arrange const { wrapper } = setupMocks(); @@ -26,66 +24,33 @@ describe("vehicle.vue", () => { expect(arePagePrerequisitesValid).toBe(true); }); }); +describe("vehicle.vue", () => { + describe("navigation", () => { + test("if the continue button is clicked, navigate forward", async () => { + // Arrange + const { wrapper } = setupMocks(); -describe("navigation", () => { - test("forwardButtonAction should trigger navigateForward", async () => { - // Arrange - const { wrapper } = setupMocks(); - wrapper.vm.navigateForward = jest.fn(); + // Act + await wrapper.vm.forwardButtonAction(); - // Act - await wrapper.vm.forwardButtonAction(); - - //Assert - expect(wrapper.vm.navigateForward).toHaveBeenCalled(); + // Assert + expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled(); + }); }); }); -const FunnelFooterWidgetMockData = { - ForwardButtonText: "Continue", -}; - function setupMocks() { - const mockRoute = { - query: { - fmgPage: "vehicle", - }, - }; - - const mockRouter = { - navigate: jest.fn(), - }; - - const wrapper = mount(vehicle, { - global: { - mixins: [ - { - methods: { - getCmsContent: jest.fn((cmsWidgetName, fieldName) => { - if (cmsWidgetName === "FunnelFooterWidget") { - if (fieldName === "ForwardButtonText") { - return FunnelFooterWidgetMockData.ForwardButtonText; - } - } - return ""; - }), - getFooterInfoBoxHeight: jest.fn(() => 80), - }, - }, - ], - - mocks: { - $route: mockRoute, - $router: mockRouter, + const wrapper = shallowMount( + vehicle, + getMountOptions({ + router: { + navigate: jest.fn(), + navigate: jest.fn(), + navigateWithSaving: jest.fn(), + navigateWithoutSaving: jest.fn(), }, + }) + ); - stubs: { - FunnelHeader: true, - FunnelSubHeader: true, - VehicleBanner: true, - }, - }, - }); - - return { mockRoute, mockRouter, wrapper }; + return { wrapper }; } diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue index 24ae0d215..13001e2fd 100644 --- a/src/layouts/vehicle/vehicle.vue +++ b/src/layouts/vehicle/vehicle.vue @@ -58,6 +58,7 @@ @@ -109,6 +110,13 @@ export default { selectedMake: this.selectedMakefromStore(), selectedModel: this.selectedModelfromStore(), selectedStyle: this.selectedStylefromStore(), + vehicle: { + carId: null, + category: null, + imageUrl: null, + imageVifNumber: null, + imageVifColor: null, + }, yearOptions: [], makeOptions: [], modelOptions: [], @@ -116,11 +124,6 @@ export default { }; }, - props: { - cmsWidgetName: String, - validationRules: String, - }, - async beforeRouteEnter(to, from, next) { // Call APIs @@ -244,7 +247,8 @@ export default { const result = await this.getModelOptions(this.selectedYear, make); this.modelOptions = result?.data; if (this.selectedMakefromStore() !== make) { - this.selectedModel = null; + if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0]; + else this.selectedModel = null; this.selectedStyle = null; } } else { @@ -260,36 +264,40 @@ export default { ); this.styleOptions = result?.data; if (this.selectedModelfromStore() !== model) { - this.selectedStyle = null; + if (this.styleOptions.length === 1) this.selectedStyle = this.styleOptions[0]; + else this.selectedStyle = null; } } else { this.styleOptions = []; } }, - selectedStyle(style) { - this.setVehicle(this.selectedYear, this.selectedMake, this.selectedModel, style); + async selectedStyle(style) { + if (style) { + const result = await this.getVehicle( + this.selectedYear, + this.selectedMake, + this.selectedModel, + style + ); + this.vehicle = result?.data; + } }, }, methods: { - setVehicle(year, make, model, style) { - return this.dispatchStoreAction(this.storeActions.SET_VEHICLE, { + getVehicle(year, make, model, style) { + return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, { year: year, make: make, model: model, style: style, }); }, - arePagePrerequisitesValid() { return true; }, async forwardButtonAction() { - return this.navigateForward(); - }, - - navigateForward() { this.dispatchStoreAction( storeActions.SAVE_VEHICLE, { @@ -297,12 +305,12 @@ export default { make: this.selectedMake, model: this.selectedModel, style: this.selectedStyle, + vehicle: this.vehicle, }, false ); this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route); }, - initializeYearComponent(initialData) { this.yearOptions = initialData; }, diff --git a/src/store/index.js b/src/store/index.js index 2d5a2e898..3bddb4eb0 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -739,7 +739,7 @@ export const actions = { }); }, - setVehicle(context, { year, make, model, style }) { + getVehicle(context, { year, make, model, style }) { return globalMethods .callHttpClient({ methods: endpoints.GetVehicle.method, @@ -747,17 +747,6 @@ export const actions = { payload: {}, }) .then((response) => { - context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId); - context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category); - context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, response.data.imageUrl); - context.commit( - storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, - response.data.imageVifNumber - ); - context.commit( - storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, - response.data.imageVifColor - ); return response; }); }, @@ -1624,9 +1613,7 @@ export const actions = { } }, - saveVehicle(context, { year, make, model, style }) { - context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); - context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); + saveVehicle(context, { year, make, model, style, vehicle }) { context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); if (context.state.order.vehicle.year !== year) { @@ -1641,6 +1628,11 @@ export const actions = { if (context.state.order.vehicle.style !== style) { context.commit(storeMutations.UPDATE_STYLE, style); } + context.commit(storeMutations.UPDATE_CAR_ID, vehicle.carId); + context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicle.category); + context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicle.imageUrl); + context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicle.imageVifNumber); + context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicle.imageVifColor); }, saveVehicleDamage( diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 08aa406c9..cecc0f394 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -484,12 +484,9 @@ describe("Actions", () => { expect(response.data).toEqual({ style: "4 DOOR SEDAN" }); }); - it("setVehicle action, should get vehicle data and set carId and vehicle category", async () => { + it("getVehicle action, should get vehicle data ", async () => { // Arrange const context = state; - const commit = jest.fn(); - - context.commit = commit; // Act globalMethods.callHttpClient.mockImplementation(() => { @@ -497,10 +494,8 @@ describe("Actions", () => { }); // Assert - const response = await actions.setVehicle(context, "C00000000"); + const response = await actions.getVehicle(context, "C00000000"); - expect(commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, "C00000000"); - expect(commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, "CAR"); expect(response.data).toEqual({ carId: "C00000000", category: "CAR" }); }); @@ -1729,18 +1724,14 @@ describe("Actions", () => { make: "Honda", model: "Civic", style: "Sedan", + vehicle: { + carId: "C00000000", + category: "CAR", + }, }; actions.saveVehicle(context, payload); //Assert - expect(dispatch).toHaveBeenNthCalledWith( - 1, - storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES - ); - expect(dispatch).toHaveBeenNthCalledWith( - 2, - storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES - ); if (context.state.order.vehicle.year !== payload.year) { expect(commit).toBeCalledWith(storeMutations.UPDATE_YEAR, payload.year); } @@ -1753,6 +1744,8 @@ describe("Actions", () => { if (context.state.order.vehicle.style !== payload.style) { expect(commit).toBeCalledWith(storeMutations.UPDATE_STYLE, payload.style); } + context.commit(storeMutations.UPDATE_CAR_ID, payload.vehicle.carId); + context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, payload.vehicle.category); }); it("saveVehicleDamage, should wipe out damage if different", () => { From e8a2d06692991b61a37a796507d38d7299dcd888 Mon Sep 17 00:00:00 2001 From: Sneha Date: Wed, 9 Aug 2023 18:12:57 +0530 Subject: [PATCH 2/2] Update vehicle-banner.vue --- src/fmg-components/vehicle-banner/vehicle-banner.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fmg-components/vehicle-banner/vehicle-banner.vue b/src/fmg-components/vehicle-banner/vehicle-banner.vue index a9c8569ae..3354db13c 100644 --- a/src/fmg-components/vehicle-banner/vehicle-banner.vue +++ b/src/fmg-components/vehicle-banner/vehicle-banner.vue @@ -21,12 +21,12 @@ export default { }, computed: { vehicleImageToDisplay() { - if (this.displayGenericVehicleImage) { - return this.genericVehicleImage; - } if (this.displayVehicleImage !== null) { return this.displayVehicleImage; } + if (this.displayGenericVehicleImage) { + return this.genericVehicleImage; + } if ( this.$store.getters.vehicle.imageUrl === null || this.$store.getters.vehicle.imageUrl === "NULL"