diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 7bf4d56c8..f1c2ad98a 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -181,4 +181,22 @@ export default { text-align: center; } } + +.vehicle-parts { + .question-text { + span { + font-size: .875rem; + text-align: left; + margin: 0 0 .5rem 0; + } + } + .question-text { + margin: 0; + } + fieldset { + .ui-radio { + margin: 0; + } + } +} diff --git a/src/common-components/text-input/text-input.spec.js b/src/common-components/text-input/text-input.spec.js deleted file mode 100644 index ba20a5c78..000000000 --- a/src/common-components/text-input/text-input.spec.js +++ /dev/null @@ -1,35 +0,0 @@ -import { shallowMount } from "@vue/test-utils"; -import textInput from "./text-input"; - -describe("text-input.vue", () => { - it("Should render a text input", async () => { - // Act - const wrapper = shallowMount(textInput, { - propsData: { - name: "test", - label: "unit test label", - }, - }); - - // Assert - const input = wrapper.find("input"); - - expect(input.exists()).toBe(true); - }); - - it("Should return aria-required state", async () => { - // Act - const wrapper = shallowMount(textInput, { - propsData: { - name: "test", - label: "unit test label", - isRequired: true, - }, - }); - - // Assert - const input = wrapper.find("input"); - - expect(input.attributes()["aria-required"]).toEqual("true"); - }); -}); diff --git a/src/common-components/text-input/text-input.vue b/src/common-components/text-input/text-input.vue deleted file mode 100644 index c5285a3b7..000000000 --- a/src/common-components/text-input/text-input.vue +++ /dev/null @@ -1,71 +0,0 @@ - - - - diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js index 09f929490..48f9a3a8e 100644 --- a/src/common-components/textbox-question/textbox-question.spec.js +++ b/src/common-components/textbox-question/textbox-question.spec.js @@ -167,7 +167,7 @@ describe("textboxQuestion.vue", () => { }); - it("Should call this.handleChange with new value when this.semiAggressiveValidation = true, the value is changed, and the new value is valid", async () => { + it("Should call this.handleChange with new value when the value is changed and the new value is valid", async () => { // Arrange const wrapper = shallowMount(textboxQuestion, { global: { @@ -178,7 +178,6 @@ describe("textboxQuestion.vue", () => { propsData: { options: {}, modelValue: "foo", - semiAggressiveValidation: true, }, mixins: [mockMixin] }); diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 673c1a263..19163110e 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -20,6 +20,7 @@ @change="handleChange" @blur="handleChange" :maxlength="maxLength ? maxLength : '999'" + @focus="$emit('focus', $event.target.value)" />
{{ errorMessage }} @@ -54,7 +55,6 @@ export default { default: "", }, validationRules: String, - semiAggressiveValidation: Boolean, cmsWidgetName: String, maxLength: String, }, @@ -129,12 +129,10 @@ export default { }, watch: { async value(newValue) { - if (this.semiAggressiveValidation) { - const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation - if (result.valid) { - this.handleChange(newValue); // trigger full validation on this field only - } - } + const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation + if (result.valid) { + this.handleChange(newValue); // trigger full validation on this field only + } }, }, }; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index e8349ef40..1924b0063 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -14,7 +14,7 @@ const storeMutations = { UPDATE_IS_REPAIR: "updateIsRepair", UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips", UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace", - UPDATE_PARTS: "updateParts", + UPDATE_GLASS_PARTS: "updateGlassParts", UPDATE_REGISTRATION_LICENSE_PLATE : "updateRegistrationLicensePlate", UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress", UPDATE_REGISTRATION_CITY: "updateRegistrationCity", @@ -40,7 +40,7 @@ const storeMutations = { RESET_VEHICLE_STATE: "resetVehicleState", RESET_DAMAGE_STATE: "resetDamageState", RESET_REGISTRATION_STATE: "resetRegistrationState", - RESET_PARTS_STATE: "resetPartsState", + RESET_GLASS_PARTS_STATE: "resetGlassPartsState", RESET_STATE: "resetState", // OTHER MUTATIONS diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js index 516fc2a1e..32dae95fc 100644 --- a/src/constants/tint-mapper.js +++ b/src/constants/tint-mapper.js @@ -9,7 +9,7 @@ const tintMap = { { name: "brown tint, blue shade", src: "Glass-BlueShade-BrownTint.svg" }, { name: "gray tint, blue shade", src: "Glass-BlueShade-GrayTint.svg" }, { name: "green tint, blue shade", src: "Glass-BlueShade-GreenTint.svg" }, - { name: "blue shade", src: "Glass-BlueShade-NoTint.svg" }, + { name: "clear, blue shade", src: "Glass-BlueShade-NoTint.svg" }, // Brown Shade { name: "brown tint, brown shade", src: "Glass-BrownShade-BrownTint.svg" }, @@ -26,13 +26,13 @@ const tintMap = { { name: "green tint, green shade", src: "Glass-GreenShade-GreenTint.svg" }, // Tints Only - { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" }, - { name: "brown tint", src: "Glass-NoShade-BrownTint.svg" }, + { name: "blue tint privacy", src: "Glass-NoShade-BlueTint.svg" }, + { name: "bronze tint", src: "Glass-NoShade-BrownTint.svg" }, { name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" }, - { name: "dark gray tint", src: "Glass-NoShade-DarkGrayTint.svg" }, + { name: "privacy, black frame", src: "Glass-NoShade-Privacy.svg" }, { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" }, { name: "green tint", src: "Glass-NoShade-GreenTint.svg" }, - { name: "gray tint privacy", src: "Glass-NoShade-Privacy.svg" }, + { name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" }, // No shade or tint { name: "clear", src: "Glass-NoShade-NoTint.svg" } @@ -41,13 +41,13 @@ const tintMap = { windshield: [ // Blue Shade { name: "blue tint, blue shade", src: "Windshield-BlueShade-BlueTint.svg" }, - { name: "brown tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" }, + { name: "bronze tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" }, { name: "gray tint, blue shade", src: "Windshield-BlueShade-GrayTint.svg" }, { name: "green tint, blue shade", src: "Windshield-BlueShade-GreenTint.svg" }, - { name: "blue shade", src: "Windshield-BlueShade-NoTint.svg" }, + { name: "clear, blue shade", src: "Windshield-BlueShade-NoTint.svg" }, // Brown Shade - { name: "brown tint, brown shade", src: "Windshield-BrownShade-BrownTint.svg" }, + { name: "bronze tint, bronze shade", src: "Windshield-BrownShade-BrownTint.svg" }, // Gray Shade { name: "blue tint, gray shade", src: "Windshield-GrayShade-BlueTint.svg" }, @@ -62,12 +62,12 @@ const tintMap = { // Tints Only { name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" }, - { name: "brown tint", src: "Windshield-NoShade-BrownTint.svg" }, + { name: "bronze tint", src: "Windshield-NoShade-BrownTint.svg" }, { name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" }, - { name: "dark gray tint", src: "Windshield-NoShade-DarkGrayTint.svg" }, + { name: "privacy, black frame", src: "Windshield-NoShade-Privacy.svg" }, { name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" }, { name: "green tint", src: "Windshield-NoShade-GreenTint.svg" }, - { name: "gray tint privacy", src: "Windshield-NoShade-Privacy.svg" }, + { name: "gray tint privacy", src: "Windshield-NoShade-GrayTint.svg" }, // No shade or tint { name: "clear", src: "Windshield-NoShade-NoTint.svg" }, diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js index d1f261f9a..b9e790576 100644 --- a/src/layouts/address-lookup/address-lookup.spec.js +++ b/src/layouts/address-lookup/address-lookup.spec.js @@ -2,7 +2,6 @@ import addressLookup from "@/layouts/address-lookup/address-lookup.vue"; // Supporting Files -import baseMixin from "@/mixins/base-mixin"; import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { storeActions } from "@/constants/store-actions"; @@ -32,7 +31,7 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { + const { wrapper } = setupMocks({ isZipServiceable: false }); @@ -48,9 +47,9 @@ describe("address-lookup.vue", () => { await wrapper.vm.forwardButtonAction(); // Assert - expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(true); - }); - + expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(true); + }); + test("if the address matches a different vehicle display the Matched Different VehicleAlert", async () => { // Arrange const mockRegistrationAddress = { @@ -60,7 +59,7 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { + const { wrapper } = setupMocks({ isZipServiceable: true }); @@ -76,8 +75,8 @@ describe("address-lookup.vue", () => { await wrapper.vm.forwardButtonAction(); // Assert - expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe(true); - }); + expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe(true); + }); test("if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert", async () => { // Arrange @@ -88,41 +87,27 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: true + const { wrapper } = setupMocks({ + isZipServiceable: true, + lookupVinbyAddressResponse: { + isStatePermissible: false, + vinVehicles: [{ + vin: "TEST_VIN", + vehicle: { + carId: "CARID" + } + }, + { + vin: "TEST_VIN2", + vehicle: { + carId: "CARID2" + } + }] + } }); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { - let data = {}; - if (actionName == storeActions.VALIDATE_ZIP) { - data = { - isServiceable: true - } - } - else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) { - data = { - isStatePermissible: false, - vinVehicles: [{ - vin: "TEST_VIN", - vehicle: { - carId: "CARID" - } - }, - { - vin: "TEST_VIN2", - vehicle: { - carId: "CARID2" - } - }] - } - } - - return Promise.resolve({ data }); - }) - await wrapper.setData({ customerQuestions: { addressQuestions: mockRegistrationAddress @@ -133,7 +118,7 @@ describe("address-lookup.vue", () => { await wrapper.vm.forwardButtonAction(); // Assert - expect(wrapper.findComponent({ ref: "alertVinLookupsByHomeAddressNotAllowed" }).isVisible()).toBe(true); + expect(wrapper.findComponent({ ref: "alertVinLookupsByHomeAddressNotAllowed" }).isVisible()).toBe(true); }); @@ -146,31 +131,16 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: true + const { wrapper } = setupMocks({ + isZipServiceable: true, + lookupVinbyAddressResponse: { + isStatePermissible: true, + vinVehicles: [] // Return no vehicles + } }); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { - let data = {}; - if (actionName == storeActions.VALIDATE_ZIP) { - data = { - isServiceable: true - } - } - else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) { - data = { - isStatePermissible: true, - vinVehicles: [] // Return no vehicles - } - } - - return Promise.resolve({ data }); - - }) - await wrapper.setData({ customerQuestions: { addressQuestions: mockRegistrationAddress @@ -183,21 +153,21 @@ describe("address-lookup.vue", () => { await wrapper.vm.forwardButtonAction(); // Assert - expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true); + expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true); }); - }); + }); describe("navigation", () => { - + test("if the back button is clicked, navigate back", async () => { // Arrange - const { wrapper } = setupMocks(addressLookup, { + const { wrapper } = setupMocks({ isZipServiceable: true }); // Act - await wrapper.vm.backButtonAction(); + await wrapper.vm.backButtonAction(); // Assert expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); @@ -213,41 +183,27 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: true + const { wrapper } = setupMocks({ + isZipServiceable: true, + lookupVinbyAddressResponse: { + isStatePermissible: true, + vinVehicles: [{ + vin: "TEST_VIN", + vehicle: { + carId: "CARID" + } + }, + { + vin: "TEST_VIN2", + vehicle: { + carId: "CARID2" + } + }] + } }); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { - let data = {}; - if (actionName == storeActions.VALIDATE_ZIP) { - data = { - isServiceable: true - } - } - else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) { - data = { - isStatePermissible: true, - vinVehicles: [{ - vin: "TEST_VIN", - vehicle: { - carId: "CARID" - } - }, - { - vin: "TEST_VIN2", - vehicle: { - carId: "CARID2" - } - }] - } - } - - return Promise.resolve({ data }); - }) - await wrapper.setData({ customerQuestions: { addressQuestions: mockRegistrationAddress @@ -261,7 +217,7 @@ describe("address-lookup.vue", () => { // Assert expect(wrapper.vm.navigateForward).toHaveBeenCalled(); - }); + }); test("if the car entered matches one of multiple vehicles found, update vehicle info and navigate to the heritage funnel", async () => { // Arrange @@ -272,42 +228,27 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: true + const { wrapper } = setupMocks({ + isZipServiceable: true, + lookupVinbyAddressResponse: { + isStatePermissible: true, + vinVehicles: [{ + vin: "TEST_VIN", + vehicle: { + carId: "CARID" + } + }, + { + vin: "TEST_VIN2", + vehicle: { + carId: "CARID2" + } + }] + } }); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { - let data = {}; - if (actionName == storeActions.VALIDATE_ZIP) { - data = { - isServiceable: true - } - } - else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) { - data = { - isStatePermissible: true, - vinVehicles: [{ - vin: "TEST_VIN", - vehicle: { - carId: "CARID" - } - }, - { - vin: "TEST_VIN2", - vehicle: { - carId: "CARID2" - } - }] - } - } - - return Promise.resolve({ data }); - - }) - await wrapper.setData({ customerQuestions: { addressQuestions: mockRegistrationAddress @@ -322,8 +263,7 @@ describe("address-lookup.vue", () => { // Assert expect(wrapper.vm.updateVehicleInfo).toHaveBeenCalled(); expect(navigateAfterSaveToHeritageFunnel).toHaveBeenCalled(); - - }); + }); test("if the car entered does not match any of the multiple vehicles found, navigate to address-vehicles page", async () => { // Arrange @@ -334,54 +274,39 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: true + const { wrapper } = setupMocks({ + isZipServiceable: true, + lookupVinbyAddressResponse: { + isStatePermissible: true, + vinVehicles: [{ + vin: "TEST_VIN", + vehicle: { + carId: "CARID" + } + }, + { + vin: "TEST_VIN2", + vehicle: { + carId: "CARID2" + } + }] + } }); store.commit(storeMutations.UPDATE_CAR_ID, "CARID_A"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { - let data = {}; - if (actionName == storeActions.VALIDATE_ZIP) { - data = { - isServiceable: true - } - } - else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) { - data = { - isStatePermissible: true, - vinVehicles: [{ - vin: "TEST_VIN", - vehicle: { - carId: "CARID" - } - }, - { - vin: "TEST_VIN2", - vehicle: { - carId: "CARID2" - } - }] - } - } - - return Promise.resolve({ data }); - - }) - const carsFound = [{ - vin: "TEST_VIN", - vehicle: { - carId: "CARID" - } - }, - { - vin: "TEST_VIN2", - vehicle: { - carId: "CARID2" - } - }] + vin: "TEST_VIN", + vehicle: { + carId: "CARID" + } + }, + { + vin: "TEST_VIN2", + vehicle: { + carId: "CARID2" + } + }] await wrapper.setData({ customerQuestions: { @@ -396,8 +321,7 @@ describe("address-lookup.vue", () => { // Assert expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalledWith(navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, undefined, {}, {}, carsFound); - - }); + }); test("if the car entered matches one of the vehicles found but the zip is NOT serviceable, do not navigate forward", async () => { // Arrange @@ -408,42 +332,27 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: true + const { wrapper } = setupMocks({ + isZipServiceable: false, + lookupVinbyAddressResponse: { + isStatePermissible: true, + vinVehicles: [{ + vin: "TEST_VIN", + vehicle: { + carId: "CARID" + } + }, + { + vin: "TEST_VIN2", + vehicle: { + carId: "CARID2" + } + }] + } }); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { - let data = {}; - if (actionName == storeActions.VALIDATE_ZIP) { - data = { - isServiceable: false - } - } - else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) { - data = { - isStatePermissible: true, - vinVehicles: [{ - vin: "TEST_VIN", - vehicle: { - carId: "CARID" - } - }, - { - vin: "TEST_VIN2", - vehicle: { - carId: "CARID2" - } - }] - } - } - - return Promise.resolve({ data }); - - }) - await wrapper.setData({ customerQuestions: { addressQuestions: mockRegistrationAddress @@ -458,7 +367,7 @@ describe("address-lookup.vue", () => { // Assert expect(wrapper.vm.navigateForward).toHaveBeenCalledTimes(0); - }); + }); test("if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page", async () => { // Arrange @@ -469,31 +378,21 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: true + const { wrapper } = setupMocks({ + isZipServiceable: true, + lookupVinbyAddressResponse: { + isStatePermissible: true, + vinVehicles: [{ + vin: "TEST_VIN", + vehicle: { + carId: "CARID2" + } + }] + } }); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { - let data = {}; - if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) { - data = { - isStatePermissible: true, - vinVehicles: [{ - vin: "TEST_VIN", - vehicle: { - carId: "CARID2" - } - }] - } - } - - return Promise.resolve({ data }); - - }) - await wrapper.setData({ customerQuestions: { addressQuestions: mockRegistrationAddress @@ -520,18 +419,79 @@ describe("address-lookup.vue", () => { await wrapper.vm.navigateForward(carEntered, carsFound); // Assert - expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalledWith(navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS, undefined, {}, {"displayVehicleChangeAlert": true}, {}); + expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, undefined, {}, { "displayVehicleChangeAlert": true }, {}); }); + test("single car was found and matches entered vehicle => navigateForwardWithSingleCarMatch", async () => { + // Arrange + const carEntered = { + carId: "CARID2" + }; + + const carsFound = [ + { + vin: "TEST_VIN_2", + vehicle: { + carId: "CARID2" + } + } + ]; + + const { wrapper } = setupMocks({}, {}); + wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); + + // Act + wrapper.vm.navigateForward(carEntered, carsFound); + + // Assert + expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1); + }); + + test("multiple cars were found and one matches entered vehicle => navigateForwardWithSingleCarMatch", async () => { + // Arrange + const carEntered = { + carId: "CARID2" + }; + + const carsFound = [ + { + vin: "TEST_VIN_1", + vehicle: { + carId: "CARID1" + } + }, + { + vin: "TEST_VIN_2", + vehicle: { + carId: "CARID2" + } + }, + { + vin: "TEST_VIN_3", + vehicle: { + carId: "CARID3" + } + } + ]; + + const { wrapper } = setupMocks({}, {}); + wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); + + // Act + wrapper.vm.navigateForward(carEntered, carsFound); + + // Assert + expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1); + }); }); - describe("reseting dependent state", () => { + describe("resetting dependent state", () => { test("when reseting dependent state, license plate is set to null and parts state and dependencies are reset", async () => { // Arrange const commitSpy = jest.spyOn(store, "commit"); const dispatchSpy = jest.spyOn(store, "dispatch"); - const { wrapper } = setupMocks(addressLookup, { + const { wrapper } = setupMocks({ isZipServiceable: true }); @@ -544,7 +504,7 @@ describe("address-lookup.vue", () => { }); }); - + describe("registration and service zips", () => { describe("if registration zip is serviceable", () => { test("if registration address is provided => update service address on successful continue", async () => { @@ -556,7 +516,7 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup,{ + const { wrapper } = setupMocks({ isZipServiceable: true }); @@ -572,7 +532,7 @@ describe("address-lookup.vue", () => { await wrapper.vm.forwardButtonAction(); // Assert - expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION); + expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION); }); }); @@ -586,7 +546,7 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { + const { wrapper } = setupMocks({ isZipServiceable: false }); @@ -618,9 +578,9 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: false - } + const { wrapper } = setupMocks({ + isZipServiceable: false + } ); expect(wrapper.vm.showServiceZipField).toBeFalsy(); @@ -650,9 +610,9 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, { - isZipServiceable: false - } + const { wrapper } = setupMocks({ + isZipServiceable: false + } ); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); @@ -667,7 +627,7 @@ describe("address-lookup.vue", () => { await wrapper.vm.forwardButtonAction(); // Assert - expect(baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION); + expect(wrapper.vm.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION); }); test("if registration address, service zip are provided, and user clicks continue => both zips are saved and are different", async () => { @@ -679,12 +639,13 @@ describe("address-lookup.vue", () => { zipCode: "43215" } - const { wrapper } = setupMocks(addressLookup, {}); + const { wrapper } = setupMocks({}); + wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); store.commit(storeMutations.UPDATE_CAR_ID, "CARID"); - baseMixin.methods.dispatchStoreAction = jest.fn(); - baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => { + wrapper.vm.dispatchStoreAction = jest.fn(); + wrapper.vm.dispatchStoreAction.mockImplementation((actionName, value) => { let data = {}; if (actionName == storeActions.VALIDATE_ZIP) { if (value == "43215") { @@ -718,15 +679,16 @@ describe("address-lookup.vue", () => { addressQuestions: mockRegistrationAddress } }) + await wrapper.vm.forwardButtonAction(); await wrapper.setData({ serviceZipCode: "12345" }) - // Act + // // Act await wrapper.vm.forwardButtonAction(); - // Assert + // // Assert expect(store.getters.order.serviceLocation.zipCode).not.toEqual(store.getters.vehicle.registration.zipCode); expect(store.getters.vehicle.registration.zipCode).toEqual("43215"); expect(store.getters.order.serviceLocation.zipCode).toEqual("12345"); @@ -735,10 +697,9 @@ describe("address-lookup.vue", () => { }); }); -function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressResponse }) { +function setupMocks({ isZipServiceable = true, lookupVinbyAddressResponse, partsOrQuestions = [] }) { store.commit(storeMutations.RESET_STATE); const wrapper = shallowMount(addressLookup, getMountOptions({ - ...mountOptions, actionList: [ { actionName: storeActions.VALIDATE_ZIP, @@ -757,7 +718,13 @@ function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressR } }] } - } + }, + { + actionName: storeActions.GET_PARTS_OR_QUESTIONS, + data: { + partsOrQuestions: partsOrQuestions + } + }, ], router: { navigate: jest.fn(), @@ -766,12 +733,11 @@ function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressR })); wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => ""); - wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + wrapper.vm.setCmsContent = jest.fn(); wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); wrapper.vm.$refs.loadingModal.showModal = jest.fn(); return { wrapper }; - } diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue index 2e13299de..59acf4765 100644 --- a/src/layouts/address-lookup/address-lookup.vue +++ b/src/layouts/address-lookup/address-lookup.vue @@ -82,15 +82,15 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import store from "@/store"; import { storeActions } from "@/constants/store-actions"; import { storeMutations } from "@/constants/store-mutations"; -import baseMixin from "@/mixins/base-mixin"; -import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper"; +import vinPagesMixin from "@/mixins/vin-pages-mixin"; defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); defineRule("service-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)); export default { name: "address-lookup", + mixins: [vinPagesMixin], async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); @@ -291,26 +291,23 @@ export default { this.$router.navigateAfterSave( // then navigate back to "vehicle-damage", and display vehicle changed alert // on that page - this.navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS, + this.navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, this.$route, {}, { displayVehicleChangeAlert: true }, {} ); } else { // otherwise - this.$refs.loadingModal.showModal(); - navigateAfterSaveToHeritageFunnel(this.$route); + this.navigateForwardWithSingleCarMatch(); } } else if (carsFound.length > 1) { // if multiple cars were found let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); if (matchingCars.length === 1) { - this.$refs.loadingModal.showModal(); - // and one and only of them matches the car id entered const matchingCar = matchingCars[0]; this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle); - navigateAfterSaveToHeritageFunnel(this.$route); + this.navigateForwardWithSingleCarMatch(); } else { // if there are no matches or there are multiple matches, navigate to "address-vehicles" page this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound); @@ -319,18 +316,18 @@ export default { }, validateZip(zip) { - return baseMixin.methods.dispatchStoreAction( + return this.dispatchStoreAction( storeActions.VALIDATE_ZIP, { zip }); }, lookupVin(lastName, streetAddress, zip, state) { - return baseMixin.methods.dispatchStoreAction( + return this.dispatchStoreAction( storeActions.LOOKUP_VIN_BY_ADDRESS, { licenseLastName: lastName, licenseStreetAddress: streetAddress, - licenseZip: zip, - licenseState: state, + licenseZip: zip, + licenseState: state }, false ); }, @@ -361,9 +358,7 @@ export default { const serviceLocation = store.getters.order.serviceLocation; if (!serviceLocation.address && serviceLocation.zipCode && serviceLocation.zipCode == store.getters.vehicle.registration.zipCode) { - baseMixin.methods.dispatchStoreAction( - storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION - ); + this.dispatchStoreAction(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION); } } }, diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index d93c2559b..c770d2b90 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -25,7 +25,6 @@ inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required" - semiAggressiveValidation />
@@ -52,7 +51,6 @@ mask="#####" disableAutoFill validationRules="zip-code-required|zip-code-format" - semiAggressiveValidation /> diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue index 9b89cf826..cb6d029bc 100644 --- a/src/layouts/address-lookup/customer-questions/customer-questions.vue +++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue @@ -33,7 +33,6 @@ inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format" - semiAggressiveValidation /> diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js index 90eeaecbe..74b8a02bb 100644 --- a/src/layouts/address-vehicles/address-vehicles.spec.js +++ b/src/layouts/address-vehicles/address-vehicles.spec.js @@ -5,9 +5,10 @@ import addressVehicles from "@/layouts/address-vehicles/address-vehicles"; import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import store from "@/store"; +import { storeActions } from "@/constants/store-actions"; +import { storeMutations } from "@/constants/store-mutations"; import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper"; - // Mock our module for promises. jest.mock("@/helpers/damage-helper", () => ({ isGlassAvailableForCarId: () => { @@ -17,11 +18,12 @@ jest.mock("@/helpers/damage-helper", () => ({ describe("addressVehicles.vue", () => { - test("Should return true for valid page requisites if carId / zipCode / emailAddress / pageData exists", async () => { // Arrange const { wrapper } = setupMocks({}); - wrapper.vm.$router.navigate = jest.fn(); + store.commit(storeMutations.UPDATE_CAR_ID, "NOT NULL"); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, "12345"); + store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, "test@test.com"); // Act const result = wrapper.vm.arePagePrerequisitesValid(); @@ -35,10 +37,9 @@ describe("addressVehicles.vue", () => { test("Should return false for valid page requisites if carId is missing", async () => { // Arrange const { wrapper } = setupMocks({}); - wrapper.vm.$router.navigate = jest.fn(); // Act - wrapper.vm.$store.getters.order.vehicle.carId = null; + store.commit(storeMutations.UPDATE_CAR_ID, null); const result = wrapper.vm.arePagePrerequisitesValid(); //Assert @@ -55,7 +56,7 @@ describe("addressVehicles.vue", () => { wrapper.vm.$router.navigate = jest.fn(); // Act - wrapper.setData({ + await wrapper.setData({ selectedVehicleVin: ['5NMS3CADXLH233004'], }); wrapper.vm.backButtonAction(); @@ -85,7 +86,7 @@ describe("addressVehicles.vue", () => { wrapper.vm.navigateForward = jest.fn().mockImplementation(()=> {}); // Act - wrapper.setData({ + await wrapper.setData({ selectedVehicleVin: ['5NMS3CADXLH233004'], }); @@ -115,7 +116,7 @@ describe("addressVehicles.vue", () => { wrapper.vm.updateCustomerInfo = jest.fn().mockImplementation(()=> {}); // Act - wrapper.setData({ + await wrapper.setData({ selectedVehicleVin: ['5NMS3CADXLH233004'], }); await wrapper.vm.forwardButtonAction(); @@ -142,7 +143,7 @@ describe("addressVehicles.vue", () => { wrapper.vm.$router.navigateAfterSave = jest.fn(); // Act - wrapper.setData({ + await wrapper.setData({ selectedVehicleVin: ['5NMS3CADXLH233004'], isSelectedGlassAvailableForVehicle: false, isCarIdDifferent: true, @@ -150,7 +151,7 @@ describe("addressVehicles.vue", () => { await wrapper.vm.updateCustomerInfo(wrapper.vm.selectedVehicle.vin, wrapper.vm.selectedVehicle.vehicle); //Assert - expect(store.dispatch).toBeCalledWith("resetDamageAndDependencies"); + expect(wrapper.vm.dispatchStoreAction).toBeCalledWith("resetDamageAndDependencies"); wrapper.unmount(); }); @@ -164,7 +165,7 @@ describe("addressVehicles.vue", () => { await wrapper.vm.lookupVin('1234567890'); //Assert - expect(store.dispatch).toBeCalledWith("lookupVehicleByVin", {"vin": "1234567890"}); + expect(wrapper.vm.dispatchStoreAction).toBeCalledWith("lookupVehicleByVin", {"vin": "1234567890"}); wrapper.unmount(); }); @@ -172,10 +173,9 @@ describe("addressVehicles.vue", () => { test("If selectedVehicleVin changes, then should update isCarIdDifferent", async () => { // Arrange const { wrapper } = setupMocks({}); - wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); // Act - wrapper.setData({ + await wrapper.setData({ selectedVehicleVin: ['5NMS3CADXLH233004'], isCarIdDifferent: false, }); @@ -193,7 +193,7 @@ describe("addressVehicles.vue", () => { wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); // Act - wrapper.setData({ + await wrapper.setData({ selectedVehicleVin: ['5NMS3CADXLH233004'], isCarIdDifferent: false, }); @@ -212,7 +212,7 @@ describe("addressVehicles.vue", () => { wrapper.vm.$router.navigateAfterSave = jest.fn(); // Act - wrapper.setData({ + await wrapper.setData({ selectedVehicleVin: ['5NMS3CADXLH233004'], isSelectedGlassAvailableForVehicle: false, isCarIdDifferent: true, @@ -225,7 +225,7 @@ describe("addressVehicles.vue", () => { wrapper.unmount(); }); - test("Should navigate to navigateAfterSaveToHeritageFunnel if carId is not different on navigateForward", async () => { + test("carId is not different on navigateForward (car was found) => Should handle navigating forward with car match", async () => { // Arrange const { wrapper } = setupMocks({}); wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); @@ -233,79 +233,49 @@ describe("addressVehicles.vue", () => { navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn(); // Act - wrapper.setData({ - selectedVehicleVin: ['5NMS3CADXLH233004'], - isSelectedGlassAvailableForVehicle: true, + await wrapper.setData({ isCarIdDifferent: false, }); await wrapper.vm.navigateForward(); //Assert - expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toBeCalledTimes(1); + expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1); wrapper.unmount(); }); - }); - -function setupMocks({ - // modelValueProp = "1900", - cmsQuestionText = "CMS text goes here", - // dataFromStoreApi = [], -}) { +function setupMocks({}) { //Mock store - store.dispatch = jest.fn(() => {}); - store.getters = { - pageData: jest.fn((pageName) => { - // console.log('pageName: ', pageName) // address-vehicles - return [ - { - vehicle: { - "carId": "CR00069309", - "category": "SUV", - "year": 2020, - "make": "Hyundai", - "model": "Santa Fe", - "style": "4 door utility", - "imageUrl": "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg", - "imageVifNumber": "13769", - "imageVifColor": "white" - }, - vin: "5NMS3CADXLH233004" - }, - ]; - }), - order: { + store.commit(storeMutations.RESET_STATE); + store.commit(storeMutations.UPDATE_PAGE_DATA, { + page: "address-vehicles", + data: [{ vehicle: { - carId: "123", + "carId": "CR00069309", + "category": "SUV", + "year": 2020, + "make": "Hyundai", + "model": "Santa Fe", + "style": "4 door utility", + "imageUrl": "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg", + "imageVifNumber": "13769", + "imageVifColor": "white" }, - serviceLocation: { - zipCode: "12345" - }, - customer: { - emailAddress: "qw@er.ty" - } - }, - damage: { - glassToReplace: "Windshield" - }, - vehicle: { - carId: "456", - } - }; - - // baseMixin.methods.dispatchStoreAction = jest.fn(); - + vin: "5NMS3CADXLH233004" + }], + }) const mountOptions = getMountOptions({ - store: { - dispatch: store.dispatch, - getters: store.getters, - }, router: { navigate: jest.fn(), }, + actionList: [ + { + actionName: storeActions.LOOKUP_VEHICLE_BY_VIN, + data: {} + } + ] }); //Mock props @@ -320,16 +290,6 @@ function setupMocks({ } return null; }), - // dispatchStoreAction: jest.fn(() => { - // console.log("23424243") - // }), - // isGlassAvailableForCarId: () => { - // console.log("%%%%%%%%%%%%%%%") - // return Promise.resolve(true) - // } - - // lookupVin: jest.fn(() => Promise.resolve(lookupVinResponse)), - }, computed: { dynamicStrings() { @@ -337,18 +297,13 @@ function setupMocks({ } } } - // mountOptions.propsData = { - // modelValue: modelValueProp, - // }; mountOptions.mixins = [mockMixin]; const wrapper = shallowMount(addressVehicles, mountOptions); - //Mock CMS content - const cmsContent = { - QuestionText: cmsQuestionText, - }; + wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); + wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); return { wrapper }; } diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index faf71e1fb..c9bcb95bb 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/src/layouts/address-vehicles/address-vehicles.vue @@ -59,25 +59,25 @@ import loadingModal from '@/common-components/loading-modal/loading-modal.vue'; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; import store from "@/store"; -import baseMixin from "@/mixins/base-mixin.js"; import { storeActions } from "@/constants/store-actions"; import { storeMutations } from "@/constants/store-mutations"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { errorMessages } from "@/constants/error-messages"; import { required } from "@/helpers/validation-rules"; import { Form, defineRule } from "vee-validate"; -import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { isGlassAvailableForCarId } from "@/helpers/damage-helper"; import { doesCopyContainRouterLink, splitCopyOnCMSPlaceHolder, getRouterLinkRouteFromCopy, - getRouterLinkDisplayTextFromCopy, } from "@/helpers/cms-content-helper" + getRouterLinkDisplayTextFromCopy, } from "@/helpers/cms-content-helper"; +import vinPagesMixin from "@/mixins/vin-pages-mixin"; // DEFINE VALIDATION RULES defineRule("vehicle-required", required(errorMessages.VEHICLE_REQUIRED)); export default { name: "address-vehicles", + mixins: [vinPagesMixin], async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); @@ -188,13 +188,12 @@ export default { ); return; } else { - this.$refs.loadingModal.showModal(); - navigateAfterSaveToHeritageFunnel(this.$route); + this.navigateForwardWithSingleCarMatch(); return; } }, lookupVin(vin) { - return baseMixin.methods.dispatchStoreAction( + return this.dispatchStoreAction( storeActions.LOOKUP_VEHICLE_BY_VIN, { vin } ); @@ -204,7 +203,7 @@ export default { }, updateCustomerInfo(vin, vehicle) { if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { - store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); + this.dispatchStoreAction(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); } store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); store.commit(storeMutations.UPDATE_YEAR, vehicle.year); diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js index 44ab645dd..3ae226fca 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js +++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js @@ -4,11 +4,11 @@ import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-loo // Supporting Files import { settleAllPromises } from "@/helpers/layout-helper.js"; import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper"; -import baseMixin from "@/mixins/base-mixin"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; +import { storeActions } from "@/constants/store-actions"; import { storeMutations } from "@/constants/store-mutations"; import store from "@/store"; @@ -223,19 +223,22 @@ describe("license-plate-lookup.vue", () => { }); describe("navigateForward", () => { - test("NavigateAfterSave should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when navigateForward is called", async () => { + test("navigateAfterSave should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when navigateForward is called", async () => { // Arrange const { wrapper } = setupMocks({}); //Act - wrapper.vm.isCarIdDifferent = true; - wrapper.vm.isSelectedGlassAvailableForVehicle = false; + await wrapper.setData({ + isCarIdDifferent: true, + isSelectedGlassAvailableForVehicle: false + }) + wrapper.vm.$router.navigateAfterSave = jest.fn(); wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => { return ''; }); - store.dispatch = jest.fn(); + wrapper.vm.dispatchStoreAction = jest.fn(); await wrapper.vm.navigateForward(); @@ -249,7 +252,9 @@ describe("license-plate-lookup.vue", () => { const { wrapper } = setupMocks({}); //Act - wrapper.vm.isCarIdDifferent = false; + await wrapper.setData({ + isCarIdDifferent: false + }) wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => { return ''; }); @@ -259,6 +264,38 @@ describe("license-plate-lookup.vue", () => { //Assert expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toHaveBeenCalled(); }); + + test("carId matches returned vehicle => navigateForwardWithSingleCarMatch", async () => { + // Arrange + const { wrapper } = setupMocks({}); + await wrapper.setData({ + isCarIdDifferent: false + }) + + wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); + + // Act + await wrapper.vm.navigateForward(); + + //Assert + expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1); + }); + + test("selected glass is available for returned vehicle => navigateForwardWithSingleCarMatch", async () => { + // Arrange + const { wrapper } = setupMocks({}); + await wrapper.setData({ + isSelectedGlassAvailableForVehicle: true + }) + + wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); + + // Act + await wrapper.vm.navigateForward(); + + //Assert + expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1); + }); }); }); @@ -269,7 +306,9 @@ describe("license-plate-lookup.vue", () => { const { wrapper } = setupMocks({}); //Act - wrapper.vm.licensePlate = "NEWPLATE"; + wrapper.setData({ + licensePlate: "NEWPLATE" + }) wrapper.vm.getCmsContent = jest.fn(); await wrapper.vm.$nextTick(); @@ -283,7 +322,9 @@ describe("license-plate-lookup.vue", () => { const { wrapper } = setupMocks({}); //Act - wrapper.vm.registrationZip = "55555"; + await wrapper.setData({ + registrationZip: "55555" + }) wrapper.vm.getCmsContent = jest.fn(); await wrapper.vm.$nextTick(); @@ -297,7 +338,9 @@ describe("license-plate-lookup.vue", () => { const { wrapper } = setupMocks({}); //Act - wrapper.vm.serviceZip = "55555"; + await wrapper.setData({ + serviceZip: "55555" + }) wrapper.vm.getCmsContent = jest.fn(); await wrapper.vm.$nextTick(); @@ -469,22 +512,23 @@ describe("license-plate-lookup.vue", () => { const { wrapper } = setupMocks({}); //Act - wrapper.vm.isCarIdDifferent = true; - wrapper.vm.isSelectedGlassAvailableForVehicle = false; + await wrapper.setData({ + isCarIdDifferent: true, + isSelectedGlassAvailableForVehicle: false + }) wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => { return ''; }); store.commit = jest.fn(); - store.dispatch = jest.fn(); const vehicleInfo = { year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue" } await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState'); //Assert - expect(store.dispatch).toHaveBeenCalled(); + expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled(); }) - test("dispatch non blocking store action called on validate zip", async () => { + test("dispatchStoreAction called on validate zip", async () => { // Arrange const { wrapper } = setupMocks({}); @@ -494,10 +538,10 @@ describe("license-plate-lookup.vue", () => { //Assert - expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled(); + expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled(); }); - test("dispatch non blocking store action called on lookup vin", async () => { + test("dispatchStoreAction called on lookup vin", async () => { // Arrange const { wrapper } = setupMocks({}); @@ -507,22 +551,18 @@ describe("license-plate-lookup.vue", () => { //Assert - expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled(); + expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled(); }); }) }); function setupMocks({ pageHeaderWidgetHeaderText = {}, - mountOptionsMockData = { - router: { - navigate: jest.fn(), - }, - }, + mountOptionsMockData = {}, + partsOrQuestions = [] }) { store.commit(storeMutations.RESET_STATE); //Mock api responses - baseMixin.methods.dispatchStoreAction = jest.fn(); const apiResponses = { cmsContent: { FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, @@ -537,6 +577,21 @@ function setupMocks({ }, }; + mountOptionsMockData = { + ...mountOptionsMockData, + router: { + navigate: jest.fn(), + }, + actionList: [ + { + actionName: storeActions.GET_PARTS_OR_QUESTIONS, + data: { + partsOrQuestions: partsOrQuestions + } + }, + ] + } + const apiPromise = Promise.resolve(apiResponses); settleAllPromises.mockImplementation(() => apiPromise); @@ -547,7 +602,7 @@ function setupMocks({ const wrapper = shallowMount(licensePlateLookup, mountOptions); - wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + wrapper.vm.setCmsContent = jest.fn(); wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => ""); wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index f3a5d3e83..5e2253af7 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -35,7 +35,6 @@ v-model="email" inputId="email" validationRules="email-address-required|email-address-format" - semiAggressiveValidation /> @@ -54,7 +53,6 @@ v-model="serviceZip" inputId="serviceZip" validationRules="zip-required|zip-format" - semiAggressiveValidation /> @@ -94,14 +92,13 @@ import loadingModal from '@/common-components/loading-modal/loading-modal.vue'; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; import store from "@/store"; -import baseMixin from "@/mixins/base-mixin.js"; import { storeActions } from "@/constants/store-actions"; import { storeMutations } from "@/constants/store-mutations"; import { errorMessages } from "@/constants/error-messages"; -import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { getDamageString, isGlassAvailableForCarId, } from "@/helpers/damage-helper"; import { required, regex, } from "@/helpers/validation-rules"; import { Form, defineRule, } from "vee-validate"; +import vinPagesMixin from "@/mixins/vin-pages-mixin"; // DEFINE VALIDATION RULES defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED)); @@ -112,6 +109,7 @@ defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+ export default { name: "license-plate-lookup", + mixins: [vinPagesMixin], async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); @@ -297,22 +295,21 @@ export default { ); return; } else { - this.$refs.loadingModal.showModal(); - navigateAfterSaveToHeritageFunnel(this.$route); + this.navigateForwardWithSingleCarMatch(); return; } }, validateZip(zip) { - return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, { + return this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip, }); }, lookupVin(plate, state) { - return baseMixin.methods.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_PLATE,{ licensePlate: plate, licenseState: state }, false); + return this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_PLATE,{ licensePlate: plate, licenseState: state }, false); }, updateCustomerInfo(vin, vehicleInfo, registrationState, serviceState) { if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { - store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); + this.dispatchStoreAction(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); } store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year); diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue index e8c021954..af202feed 100644 --- a/src/layouts/part-questions/part-questions.vue +++ b/src/layouts/part-questions/part-questions.vue @@ -5,9 +5,7 @@

Part Questions Page Placeholder

- +
@@ -65,14 +63,11 @@ export default { ); }, arePagePrerequisitesValid() { - if (Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length !== 0) { - return true; - } - return false; + return Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length !== 0; }, resetDependentState() { // Set - store.commit(storeMutations.UPDATE_PARTS, null); + store.commit(storeMutations.UPDATE_GLASS_PARTS, null); // Invokes store.dispatch(storeActions.RESET_PARTS_AND_DEPS); diff --git a/src/layouts/reveal/reveal.vue b/src/layouts/reveal/reveal.vue index 200fec263..7ca9d903f 100644 --- a/src/layouts/reveal/reveal.vue +++ b/src/layouts/reveal/reveal.vue @@ -50,7 +50,7 @@ export default { }, resetDependentState() { // Set - store.commit(storeMutations.UPDATE_PARTS, null); + store.commit(storeMutations.UPDATE_GLASS_PARTS, null); // Invokes store.dispatch(storeActions.RESET_PARTS_AND_DEPS); diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 86045e52e..d0def364d 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -1,7 +1,7 @@