diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue index d06392755..2bcdc9c31 100644 --- a/src/common-components/loading-modal/loading-modal.vue +++ b/src/common-components/loading-modal/loading-modal.vue @@ -77,7 +77,7 @@ export default { left: 0; right: 0; bottom: 0; - z-index: 1055; + z-index: 1057; width: 100%; height: 100%; overflow-x: hidden; diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 17df38efa..592af9a5c 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -59,8 +59,8 @@ export function getMountOptions(mockData) { const global = { mocks: mocks, - stubs: { Form }, - mixins: mocks.mixins + mixins: mockData.mixins, + stubs: { Form } }; return { global }; diff --git a/src/layouts/estimate/estimate.spec.js b/src/layouts/estimate/estimate.spec.js new file mode 100644 index 000000000..5f82fa508 --- /dev/null +++ b/src/layouts/estimate/estimate.spec.js @@ -0,0 +1,187 @@ +//Components +import estimate from "@/layouts/estimate/estimate.vue"; +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; + +//Supporting files +import { storeKey } from "vuex"; +import store from "@/store"; +import { storeMutations } from "@/constants/store-mutations"; +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import baseMixin from "../../mixins/base-mixin"; +import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js"; + + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +describe("estimate.vue", () => { + test("Selected vin option is emitted upon selection.", async () => { + + //Arrange + const { wrapper } = setupMocks({ modelValueProp: ["Provide my VIN manually most specific to your vehicle"] }); + + //Act + wrapper.setValue({ modelValue: ["Provide my license plate # Most accurate VIN match"] }); + await wrapper.vm.$nextTick(); + + //Assesrt + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Provide my license plate # Most accurate VIN match"] }]); + }); + test("isRepair is set to true, arePagePrerequisitesValid should return true", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + + //Act + store.commit( storeMutations.UPDATE_IS_REPAIR, true ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); + test("isRepair is set to false, arePagePrerequisitesValid should return true", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + + //Act + store.commit( storeMutations.UPDATE_IS_REPAIR, false ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); + test("isRepair is set to null, arePagePrerequisitesValid should return false", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + + //Act + store.commit( storeMutations.UPDATE_IS_REPAIR, null ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(false); + }); + + test("After selecting provide my home address on ForwardButtonAction triggers a router.navigate", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + await wrapper.setData({ + selectedValues: [vinLookupMethodSelections.HOMEADDRESS] + }) + + //Act + wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + + }); + + test("After selecting provide my manual vin on ForwardButtonAction triggers a router.navigate", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + await wrapper.setData({ + selectedValues: [vinLookupMethodSelections.MANUALVIN] + }) + + //Act + wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + + }); + + test("BackButtonAction triggers a router.navigate change", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + + //Act + estimate.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "estimate" } }, + undefined, + (c) => c(wrapper.vm) + ); + + wrapper.vm.backButtonAction(); + + //Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + }); + + test("Provide my license plate on ForwardButtonAction triggers a router.navigate", async () => { + + //Arrange + const { wrapper } = setupMocks({}); + await wrapper.setData({ + selectedValues: [vinLookupMethodSelections.LICENSEPLATE] + }) + + //Act + wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + + }); + +}); + +function setupMocks({ + modelValueProp = ["Provide my VIN manually most specific to your vehicle"], + isMultiSelect = false, + groupName = "estimate", + cmsQuestionText = "Let's get your VIN. Or we can look it up for you!", + cmsAnswers = [{ Name: "Provide my VIN manually Most specific to your vehicle" }, { Name: "Provide my license plate # Most accurate VIN match" }, { Name: "Provide my home address Most convenient VIN match" }], + dataFromApi = [], + mountOptionsMockData = { + router: { + navigate: jest.fn(), + }, + }, +}) { + + //Mock CMS Content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers + }; + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn() + } + } + + const apiPromise = Promise.resolve(cmsContent); + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + const mountOptions = getMountOptions({ ...mountOptionsMockData, mixins: [baseMixin] }); + mountOptions['attachTo'] = document.body; + + const wrapper = shallowMount(estimate, mountOptions); + + return { wrapper, apiPromise }; + +} \ No newline at end of file diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index ce2ac71af..8574b2505 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -46,7 +46,6 @@ describe("vin-lookup.vue", () => { it("Should update the funnel-footer forward button when VIN is changed", (done) => { //Arrange const { wrapper } = setupMocks({ }); - wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); //Act wrapper.setData({vin: "newValue"}); //Assert @@ -60,25 +59,6 @@ describe("vin-lookup.vue", () => { it("Should call navigateForward() if the store carId matches the vin response carId and forward button is clicked", async () => { // Arrange const { wrapper } = setupMocks({ }); - const zipValidationApiResponse = { - data: { - isServiceable: true - } - }; - const vehicleLookupApiResponse = { - data: { - carId: 'initial carId' - } - }; - - const zipPromise = Promise.resolve(zipValidationApiResponse); - const vinPromise = Promise.resolve(vehicleLookupApiResponse); - - wrapper.vm.validateZip = jest.fn().mockImplementation(() => zipPromise); - wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); - - wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); - wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); wrapper.vm.navigateForward = jest.fn(); // Act @@ -87,12 +67,98 @@ describe("vin-lookup.vue", () => { //Assert expect(wrapper.vm.navigateForward).toHaveBeenCalled(); }); + + 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({ }); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + + wrapper.vm.navigateForward = jest.fn(); + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).not.toHaveBeenCalled(); + }); + + 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({ }); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + wrapper.vm.navigateForward = jest.fn(); + + wrapper.vm.previouslyEnteredCarId = 'new carId'; + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).toHaveBeenCalled(); + }); + + it("Should not call navigateForward() if zip service returns a non-serviceable flag", async () => { + // Arrange + const { wrapper } = setupMocks({ }); + const zipValidationApiResponse = { + data: { + isServiceable: false + } + }; + + const zipPromise = Promise.resolve(zipValidationApiResponse); + + wrapper.vm.validateZip = jest.fn().mockImplementation(() => zipPromise); + wrapper.vm.navigateForward = jest.fn(); + + wrapper.vm.previouslyEnteredCarId = 'new carId'; + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).not.toHaveBeenCalled(); + }); + + it("Should not call navigateForward() when forward button is clicked but lookupVehicle errors out.", async () => { + // Arrange + const { wrapper } = setupMocks({ }); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.reject(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + wrapper.vm.navigateForward = jest.fn(); + + wrapper.vm.previouslyEnteredCarId = 'new carId'; + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).not.toHaveBeenCalled(); + }); }); function setupMocks({ customMountOptions }) { - - const mountOptions = getMountOptions({}); const finalMountOptions = Object.assign(mountOptions, customMountOptions); @@ -100,10 +166,36 @@ function setupMocks({ customMountOptions }) { finalMountOptions.global.mocks["$store"] = store; finalMountOptions.global.mixins = [mockMixin]; finalMountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods - + const wrapper = shallowMount(vinLookup, finalMountOptions); + mockOutPromises(wrapper); + mockOutStubFunctions(wrapper); return { wrapper }; - } +} + +function mockOutPromises(wrapper) { + const zipValidationApiResponse = { + data: { + isServiceable: true + } + }; + const vehicleLookupApiResponse = { + data: { + carId: 'initial carId' + } + }; + + const zipPromise = Promise.resolve(zipValidationApiResponse); + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.validateZip = jest.fn().mockImplementation(() => zipPromise); + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); +} + +function mockOutStubFunctions(wrapper) { + wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); + wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); +} const mockMixin = { methods: { diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index dfcad4edf..c4d60435c 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -293,8 +293,11 @@ export default { this.vinNotFound = true; this.$refs.funnelFooter.removeLoader(); this.noServiceZip = false; - return; + return false; }); + if (!vehicleLookupResponse) { + return; + } if (!zipValidationResponse.data.isServiceable) { this.customAlertData.zip = this.zip; this.$refs.funnelFooter.removeLoader(); diff --git a/src/mixins/analytics-mixin.spec.js b/src/mixins/analytics-mixin.spec.js index 7d9cec1bb..f09dd0fc8 100644 --- a/src/mixins/analytics-mixin.spec.js +++ b/src/mixins/analytics-mixin.spec.js @@ -124,6 +124,32 @@ describe("analyticsMixin.js", () => { //Assert expect(obj!=null); }); + test("Obj method name does not include bound", () => { + //Arrange + const obj = {baseMethodName:"testMethodName", data:"testData"}; + const method = {name:"testMethodName", data:"testData" } + const action = "testAction"; + + //Act + analyticsMixin.methods.prependActionToMethod(obj, method, action); + + + //Assert + expect(method.name.startsWith("bound ")).toBe(false); + }); + test("Prepended action does not include bound", () => { + //Arrange + const obj = {baseMethodName:"testMethodName", data:"testData"}; + const method = {name:"testMethodName", data:"testData" } + const action = "testAction"; + + //Act + analyticsMixin.methods.prependActionToMethod(obj, method, action); + + + //Assert + expect(action.startsWith("bound ")).toBe(false); + }); test("analyticsPageEvents returns constants analyticsPageEvents", () => { //Act