From fe0d3f45ce67424d678a3f247c9cf088738522cd Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 10 May 2023 08:09:05 -0400 Subject: [PATCH] Checking for Carl to look at --- jest.config.js | 2 + .../mobile-location-modal-questions.vue | 6 +- .../service-location/service-location.spec.js | 2 +- .../service-location/service-location.vue | 4 +- .../service-zip-modal-question.vue | 6 +- .../shop-question/shop-question.spec.js | 173 +++++++++--------- .../shop-question/shop-question.vue | 30 ++- 7 files changed, 121 insertions(+), 102 deletions(-) diff --git a/jest.config.js b/jest.config.js index f6178df61..33b7d1138 100644 --- a/jest.config.js +++ b/jest.config.js @@ -28,4 +28,6 @@ module.exports = { // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 }, }, + // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit + // silent: true, }; diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 424e7cf2b..b1b981429 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -137,7 +137,7 @@ export default { alertInvalidZipWidgetName: String, customComponentId: String, validationRules: String, - optionalCallback: { + onZipUpdateCallback: { type: Function, }, }, @@ -260,8 +260,8 @@ export default { // Update the page level model this.$emit("update:modelValue", this.internalModel); - if (this.optionalCallback) { - await this.optionalCallback(serviceZipCode); + if (this.onZipUpdateCallback) { + await this.onZipUpdateCallback(serviceZipCode); } this.closeModal(); diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 52239462c..cb60362de 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -186,7 +186,7 @@ beforeEach(() => { describe("service-location.vue", () => { describe("beforeRouteEnter", () => { - test("on load sets the mobile fee part when an service zip code has already been provided", async () => { + test("on load sets the mobile fee part when a service zip code has already been provided", async () => { // Arrange const { wrapper } = setupMocks({}); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 921a279b7..2f2d3a5a7 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -13,7 +13,7 @@ @updated-contains-military-base="setContainsMilitaryBase" linkWidgetName="ServiceZipLinkWidget" modalWidgetName="ServiceZipModalWidget" - :optionalCallback="reloadShopData" /> + :onZipUpdateCallback="reloadShopData" /> + :onZipUpdateCallback="reloadShopData" /> { zipCode: "43065", }, distanceInMiles: 16.2690495685233, - providerNumber: "003341", + providerNumber: null, }, serviceZipCode: "43081", - selectedAppointmentType: null, + selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + isDisplayed: true }, mountOptions: { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act wrapper.vm.initializeComponent(shopQuestionInitialData); - wrapper.setProps({ - selectedAppointmentType: "Inshop", - }); - + await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); // Assert @@ -230,12 +227,12 @@ describe("shop-question.vue", () => { serviceZipCode: "43081", selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + isDisplayed: true }, mountOptions: { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act wrapper.vm.initializeComponent(shopQuestionInitialData); @@ -243,12 +240,13 @@ describe("shop-question.vue", () => { await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); // Assert expect(showMoreShopsLink.exists()).toBe(true); - expect(showMoreShopsLink.exists()).toBe(true); + expect(showMoreShopsLink.isVisible()).toBe(true); }); it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => { @@ -308,12 +306,12 @@ describe("shop-question.vue", () => { serviceZipCode: "43081", selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + isDisplayed: true }, mountOptions: { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act wrapper.vm.initializeComponent(alsoShopQuestionInitialData); @@ -367,25 +365,30 @@ describe("shop-question.vue", () => { serviceZipCode: "43081", selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + isDisplayed: true }, mountOptions: { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.vm.$nextTick(); + wrapper.vm.answers = displayedAnswers; wrapper.vm.shopIndex = 3; await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); + await wrapper.vm.$nextTick(); + showMoreShopsLink.trigger("click"); await wrapper.vm.$nextTick(); @@ -456,7 +459,6 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act wrapper.vm.initializeComponent(shopQuestionInitialData); @@ -493,12 +495,13 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act wrapper.vm.initializeComponent(shopQuestionInitialData); - wrapper.setProps({ + await wrapper.vm.$nextTick(); + + await wrapper.setProps({ selectedAppointmentType: "Inshop", }); @@ -508,87 +511,85 @@ describe("shop-question.vue", () => { expect(wrapper.vm.answers.length).toEqual(3); }); - it("Should reload the shops when the service zip code changes", async () => { - // Arrange - const { wrapper } = setupMocks({ - mixins: [mockMixin], - props: { - modelValue: { - address: { - city: "POWELL", - country: "US", - state: "OH", - streetAddress: "3938 POWELL RD", - zipCode: "43065", - }, - distanceInMiles: 16.2690495685233, - providerNumber: "003341", - }, - serviceZipCode: "43081", - selectedAppointmentType: "Dropoff", - cmsWidgetName: cmsWidgetName, - }, - mountOptions: { - attachTo: document.body, - }, - }); + // it("Should reload the shops when the service zip code changes", async () => { + // // Arrange + // const { wrapper } = setupMocks({ + // mixins: [mockMixin], + // props: { + // modelValue: { + // address: { + // city: "POWELL", + // country: "US", + // state: "OH", + // streetAddress: "3938 POWELL RD", + // zipCode: "43065", + // }, + // distanceInMiles: 16.2690495685233, + // providerNumber: "003341", + // }, + // serviceZipCode: "43081", + // selectedAppointmentType: "Dropoff", + // cmsWidgetName: cmsWidgetName, + // isDisplayed: true + // }, + // mountOptions: { + // attachTo: document.body, + // }, + // }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); - wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => { - return new Promise((resolve) => { - resolve(mockNewShopList); - }); - }); + // wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => { + // return new Promise((resolve) => { + // resolve(mockNewShopList); + // }); + // }); - // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + // // Act + // wrapper.vm.initializeComponent(shopQuestionInitialData); - await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054"); + // await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054"); - // Assert - expect(wrapper.vm.shopProviders.length).toEqual(3); - expect(wrapper.vm.shopProviders).toEqual(mockNewShopList.shopProviders); - }); + // // Assert + // expect(wrapper.vm.shopProviders.length).toEqual(3); + // expect(wrapper.vm.shopProviders).toEqual(mockNewShopList.shopProviders); + // }); - it("Should clear the existing answers when the service zip code changes", async () => { - // Arrange - const { wrapper } = setupMocks({ - mixins: [mockMixin], - props: { - modelValue: { - address: { - city: "POWELL", - country: "US", - state: "OH", - streetAddress: "3938 POWELL RD", - zipCode: "43065", - }, - distanceInMiles: 16.2690495685233, - providerNumber: "003341", - }, - serviceZipCode: "43081", - selectedAppointmentType: "Dropoff", - cmsWidgetName: cmsWidgetName, - }, - mountOptions: { - attachTo: document.body, - }, - }); + // it("Should clear the existing answers when the service zip code changes", async () => { + // // Arrange + // const { wrapper } = setupMocks({ + // mixins: [mockMixin], + // props: { + // modelValue: { + // address: { + // city: "POWELL", + // country: "US", + // state: "OH", + // streetAddress: "3938 POWELL RD", + // zipCode: "43065", + // }, + // distanceInMiles: 16.2690495685233, + // providerNumber: "003341", + // }, + // serviceZipCode: "43081", + // selectedAppointmentType: "Dropoff", + // cmsWidgetName: cmsWidgetName, + // }, + // mountOptions: { + // attachTo: document.body, + // }, + // }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + // //Act + // wrapper.vm.initializeComponent(shopQuestionInitialData); - //Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + // wrapper.setProps({ + // selectedAppointmentType: "Inshop", + // }); - wrapper.setProps({ - selectedAppointmentType: "Inshop", - }); + // await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.answers.length).toEqual(3); - }); + // // Assert + // expect(wrapper.vm.answers.length).toEqual(3); + // }); }); function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) { diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index 97524c1a4..90efb7f26 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -68,7 +68,6 @@ export default { props: { modelValue: { type: Object, - required: true, }, serviceZipCode: String, selectedAppointmentType: String, @@ -167,7 +166,7 @@ export default { this.scrollToPageBottom(); }, - resetShopList() { + resetAnswers() { this.answers = []; this.shopIndex = 0; this.selectedValue = ""; @@ -185,17 +184,34 @@ export default { watch: { selectedAppointmentType: { async handler(newValue) { - this.resetShopList(); + this.resetAnswers(); + await this.$nextTick(); + if (newValue !== "Mobile") { await this.getNextShopsFromList(); - - await this.$nextTick(); - - this.scrollToPageBottom(); } }, }, + shopProviders: { + async handler(newValue) { + this.resetAnswers(); + + await this.$nextTick(); + + if (this.selectedAppointmentType) { + const selectedShopIndex = newValue.findIndex( + (provider) => provider.providerNumber == this.modelValue?.providerNumber + ); + + if (selectedShopIndex >= 3) { + await this.getNextShopsFromList(selectedShopIndex + 1); + } else { + await this.getNextShopsFromList(); + } + } + }, + } }, components: { alert,