From b63f77a7fcfc438b668722349540b2219ef685b2 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 27 Oct 2022 15:23:48 -0400 Subject: [PATCH] CSR-869 Reset alerts when continue is clicked, add test --- src/helpers/unit-test-helper.js | 1 + src/layouts/vin-lookup/vin-lookup.spec.js | 121 +++++++++++++--------- src/layouts/vin-lookup/vin-lookup.vue | 8 ++ 3 files changed, 83 insertions(+), 47 deletions(-) diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index cc00e49d9..48c154d64 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -84,6 +84,7 @@ export const cookies = { "skey": "12345" }; +// Removes test cookies for testing cookie-helper and order-helper export function removeAllTestCookies() { Object.keys(cookies).forEach(key => { document.cookie = `${key}=;Max-Age=0;`; diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index 246b442b0..96dc1603b 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -12,24 +12,24 @@ jest.mock("@/store", () => ({ getters: { vehicle: { year: 2019, - carId: 'C00000' + carId: "C00000", }, order: { serviceLocation: { - zipCode: "45253" + zipCode: "45253", }, customer: { - emailAddress: "builddigitaltest@safelite.com" - } + emailAddress: "builddigitaltest@safelite.com", + }, }, payment: { insuranceCoverage: { - isVerified: true - } + isVerified: true, + }, }, damage: { - glassToReplace: "windshield" - } + glassToReplace: "windshield", + }, }, })); @@ -38,7 +38,6 @@ jest.mock("@/helpers/layout-helper.js", () => ({ settleAllPromises: jest.fn(), })); - jest.mock("@/helpers/damage-helper", () => ({ isGlassAvailableForCarId: jest.fn(() => { return Promise.resolve(); @@ -47,7 +46,6 @@ jest.mock("@/helpers/damage-helper", () => ({ getDamageString: jest.fn(), })); - describe("vin-lookup.vue", () => { it("Should update the funnel-footer forward button when VIN is changed", (done) => { //Arrange @@ -59,7 +57,6 @@ describe("vin-lookup.vue", () => { expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toBeCalled(); done(); }); - }); it("Should call navigateForward() if the store carId matches the vin response carId and forward button is clicked", async () => { @@ -68,7 +65,7 @@ describe("vin-lookup.vue", () => { mockOutPromises({ carId: "C00000" }); wrapper.vm.navigateForward = jest.fn(); - // Act + // Act await wrapper.vm.forwardButtonAction(); //Assert @@ -78,14 +75,14 @@ describe("vin-lookup.vue", () => { it("Should not call navigateForward() if the store carId does not match the vin response carId and forward button is clicked", async () => { // Arrange const { wrapper } = setupMocks({}); - mockOutPromises({ carId: 'C11111' }); + mockOutPromises({ carId: "C11111" }); wrapper.vm.vinTouched = true; wrapper.vm.vin = ""; wrapper.vm.initialVin = "foo"; wrapper.vm.navigateForward = jest.fn(); - // Act + // Act await wrapper.vm.forwardButtonAction(); //Assert @@ -95,13 +92,13 @@ describe("vin-lookup.vue", () => { it("Should call navigateForward() if the store carId does not match the vin response carId but does match previously enterted carId and forward button is clicked", async () => { // Arrange const { wrapper } = setupMocks({}); - mockOutPromises({ carId: 'C11111' }); + mockOutPromises({ carId: "C11111" }); wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); wrapper.vm.navigateForward = jest.fn(); - wrapper.vm.previouslyEnteredCarId = 'C11111'; + wrapper.vm.previouslyEnteredCarId = "C11111"; - // Act + // Act await wrapper.vm.forwardButtonAction(); //Assert @@ -113,8 +110,8 @@ describe("vin-lookup.vue", () => { const { wrapper } = setupMocks({}); const zipValidationApiResponse = { data: { - isServiceable: false - } + isServiceable: false, + }, }; const zipPromise = Promise.resolve(zipValidationApiResponse); @@ -123,9 +120,9 @@ describe("vin-lookup.vue", () => { wrapper.vm.setupUiForNonServiceableZip = jest.fn(); wrapper.vm.navigateForward = jest.fn(); - wrapper.vm.previouslyEnteredCarId = 'new carId'; + wrapper.vm.previouslyEnteredCarId = "new carId"; - // Act + // Act await wrapper.vm.forwardButtonAction(); //Assert @@ -140,9 +137,9 @@ describe("vin-lookup.vue", () => { wrapper.vm.initialVin = "!foo"; wrapper.vm.navigateForward = jest.fn(); - wrapper.vm.previouslyEnteredCarId = 'new carId'; + wrapper.vm.previouslyEnteredCarId = "new carId"; - // Act + // Act await wrapper.vm.forwardButtonAction(); //Assert @@ -155,14 +152,14 @@ describe("vin-lookup.vue", () => { const { wrapper } = setupMocks({ customMountOptions: { router: { - navigateWithSaving: jest.fn() - } - } + navigateWithSaving: jest.fn(), + }, + }, }); wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); wrapper.setData({ isCarIdDifferent: true, - isSelectedGlassAvailableForVehicle: false + isSelectedGlassAvailableForVehicle: false, }); // Act @@ -170,8 +167,13 @@ describe("vin-lookup.vue", () => { //Assert expect(wrapper.vm.$router.navigateWithSaving).toBeCalledTimes(1); - expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, wrapper.vm.$route, expect.anything(), expect.anything()); - }) + expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith( + navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, + wrapper.vm.$route, + expect.anything(), + expect.anything() + ); + }); test("carId matches => navigateForwardWithSingleCarMatch", async () => { // Arrange @@ -186,7 +188,7 @@ describe("vin-lookup.vue", () => { //Assert expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1); - }) + }); test("selected glass is available for returned vehicle => navigateForwardWithSingleCarMatch", async () => { // Arrange @@ -201,50 +203,73 @@ describe("vin-lookup.vue", () => { //Assert expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1); - }) - }) + }); + }); describe("alerts", () => { test("Zip is invalid => show AlertInvalidZipWidget", async () => { // Arrange const { wrapper } = setupMocks({}); mockOutPromises({ isZipValid: false }); - await wrapper.setData({serviceZipCode: "11111"}) - + await wrapper.setData({ serviceZipCode: "11111" }); + // Act await wrapper.vm.forwardButtonAction(); // Assert expect(wrapper.vm.displayInvalidZipAlert).toEqual(true); - expect(wrapper.findComponent({ref: "alertInvalidZip"}).exists()).toBe(true); - }) - }) -}); + expect(wrapper.findComponent({ ref: "alertInvalidZip" }).exists()).toBe(true); + }); + test("alerts are displayed and continue button is clicked with issues fixed => alerts are reset", async () => { + // Arrange + const { wrapper } = setupMocks({}); + mockOutPromises({ isZipValid: true, isZipServiceable: true, carId: "CARID" }); + await wrapper.setData({ + displayInvalidZipAlert: true, + displayMatchedDifferentVehicleAlert: true, + displayNonServiceableZipAlert: true, + displayVinNotFoundAlert: true + }); + + // sanity check that there are alerts + expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(4); + + // Act + wrapper.vm.forwardButtonAction(); + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(0); + }); + }); +}); function setupMocks({ customMountOptions }) { const mountOptions = getMountOptions({ - ...customMountOptions + ...customMountOptions, }); // Modify/augment default mount options mountOptions.global.mocks["$store"] = store; mountOptions.global.mixins = [mockMixin]; - mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods + mountOptions["attachTo"] = document.body; // append wrapper to document.body to test DOM methods const wrapper = shallowMount(vinLookup, mountOptions); mockOutStubFunctions(wrapper); return { wrapper }; } -function mockOutPromises({carId, isZipValid = true, isZipServiceable = true}) { +function mockOutPromises({ carId, isZipValid = true, isZipServiceable = true }) { const apiResponses = { vehicleLookupResponse: { - carId: carId + carId: carId, }, zipCodeData: { - isValid: true, isServiceable: true, state: "OH" - } + isValid: isZipValid, + isServiceable: isZipServiceable, + state: "OH", + }, }; settleAllPromises.mockImplementation(() => apiResponses); @@ -253,11 +278,13 @@ function mockOutPromises({carId, isZipValid = true, isZipServiceable = true}) { function mockOutStubFunctions(wrapper) { wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); - wrapper.vm.getZipCodeData = jest.fn().mockReturnValue({ isValid: true, isServiceable: true, state: "OH" }); + wrapper.vm.getZipCodeData = jest + .fn() + .mockReturnValue({ isValid: true, isServiceable: true, state: "OH" }); } const mockMixin = { methods: { getCmsContent: jest.fn(() => "placeholder CMS content"), - } -} \ No newline at end of file + }, +}; diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 3614c74cf..a203ed22e 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -228,6 +228,8 @@ export default { }, async forwardButtonAction() { + this.resetAlerts(); + // If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation if (!this.vinPopulatedOnPageLoad) { const vehicleLookupResponse = this.dispatchStoreAction(storeActions.LOOKUP_VEHICLE_BY_VIN, { vin: this.vin }); @@ -337,6 +339,12 @@ export default { return this.$refs.funnelFooter.removeLoader(); }, + resetAlerts() { + this.displayMatchedDifferentVehicleAlert = false; + this.displayNonServiceableZipAlert = false; + this.displayInvalidZipAlert = false; + this.displayVinNotFoundAlert = false; + }, async navigateForward(){ if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { this.$router.navigateWithSaving(this.navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, this.$route, {}, { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true });