From 1dd661e7dffffc96d5dea6f11048f1485c3f64b7 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 4 May 2023 15:35:25 -0400 Subject: [PATCH] WIP --- .../button-question/button-question.vue | 2 +- .../service-location/service-location.vue | 10 +- .../shop-question/shop-question.spec.js | 280 +++++++++++------- .../shop-question/shop-question.vue | 23 +- src/store/index.js | 5 +- 5 files changed, 189 insertions(+), 131 deletions(-) diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 245543937..08ec4867d 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -121,7 +121,7 @@ export default { isOverflowScrollable: Boolean, isWide: Boolean, isCashOrInsurance: Boolean, - modelValue: [Array, Number, String], + modelValue: [Array, Number, String, Object], value: [Number, String], validationRules: String, suppressError: Boolean, diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 07750236b..3033e91a1 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -72,7 +72,7 @@ selectedAppointmentType === 'Inshop' || selectedAppointmentType === 'Dropoff' " - v-model="providerNumber" + v-model="selectedProvider" :serviceZipCode="zipCode" :selectedAppointmentType="selectedAppointmentType" cmsWidgetName="ShopQuestionWidget" /> @@ -147,8 +147,8 @@ export default { isRecalibrationServiceableInshop: null, isGlassServiceableMobile: null, isRecalibrationServiceableMobile: null, - selectedAppointmentType: "Dropoff", - providerNumber: null, + selectedAppointmentType: null, + selectedProvider: null, mobileFeePart: null, zipContainsMilitaryBase: false, }; @@ -215,7 +215,7 @@ export default { if (newValue.zipCode !== this.zipCode) { this.resetMobileLocation(); this.selectedAppointmentType = null; - this.providerNumber = null; + this.selectedProvider = null; } this.state = newValue.state; @@ -250,7 +250,7 @@ export default { if (!this.selectedAppointmentType == "Mobile") { this.selectedAppointmentType = null; } - this.providerNumber = null; + this.selectedProvider = null; } }, }, diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js index 838061f92..d595b5245 100644 --- a/src/layouts/service-location/shop-question/shop-question.spec.js +++ b/src/layouts/service-location/shop-question/shop-question.spec.js @@ -18,33 +18,39 @@ jest.mock("@/mixins/base-mixin", () => ({ const mockGetProvidersStoreAction = storeActions.GET_PROVIDERS; const mockNewShopList = { - data: [ + shopProviders: [ { - city: "Far", - country: "United States", - distance: 100, - providerNumber: "129", - state: "OH", - streetAddress: "555 First Capital Ln", - zipCode: "45601", + address: { + city: "COLUMBUS", + country: "US", + state: "OH", + streetAddress: "1670 HARMON AVE", + zipCode: "43223", + }, + distanceInMiles: 15.9727889297435, + providerNumber: "006747", }, { - city: "Farther", - country: "United States", - distance: 200, - providerNumber: "130", - state: "OH", - streetAddress: "5486 N Grove Rd", - zipCode: "43215", + address: { + city: "POWELL", + country: "US", + state: "OH", + streetAddress: "3938 POWELL RD", + zipCode: "43065", + }, + distanceInMiles: 16.2690495685233, + providerNumber: "003341", }, { - city: "Farthest (Ever)", - country: "United States", - distance: 380.5, - providerNumber: "131", - state: "OH", - streetAddress: "1670 Bongo Ave D", - zipCode: "43223", + address: { + city: "Columbus", + country: "US", + state: "OH", + streetAddress: "4580 W Broad St", + zipCode: "43228", + }, + distanceInMiles: 19.4618116611001, + providerNumber: "003342", }, ], }; @@ -64,7 +70,7 @@ const shopQuestionInitialData = { streetAddress: "4403 EXECUTIVE PKWY", zipCode: "43081", }, - distance: 5.16769294095201, + distanceInMiles: 5.16769294095201, providerNumber: "003335", }, { @@ -75,7 +81,7 @@ const shopQuestionInitialData = { streetAddress: "760 DEARBORN PARK LN", zipCode: "43085", }, - distance: 10.5865432478478, + distanceInMiles: 10.5865432478478, providerNumber: "001820", }, { @@ -86,7 +92,7 @@ const shopQuestionInitialData = { streetAddress: "5015 N HIGH ST", zipCode: "43214", }, - distance: 11.738869544543, + distanceInMiles: 11.738869544543, providerNumber: "003343", }, { @@ -97,7 +103,7 @@ const shopQuestionInitialData = { streetAddress: "1670 HARMON AVE", zipCode: "43223", }, - distance: 15.9727889297435, + distanceInMiles: 15.9727889297435, providerNumber: "006747", }, { @@ -108,7 +114,7 @@ const shopQuestionInitialData = { streetAddress: "3938 POWELL RD", zipCode: "43065", }, - distance: 16.2690495685233, + distanceInMiles: 16.2690495685233, providerNumber: "003341", }, { @@ -119,7 +125,7 @@ const shopQuestionInitialData = { streetAddress: "4580 W Broad St", zipCode: "43228", }, - distance: 19.4618116611001, + distanceInMiles: 19.4618116611001, providerNumber: "003342", }, ], @@ -138,18 +144,30 @@ const mockMixin = { }; describe("shop-question.vue", () => { - it("Should display first three shops when an appointment type has already been selected", async () => { - // Arrange/Act + beforeEach(() => { const container = document.createElement("div"); container.scrollTo = jest.fn(); container.classList.add("page-container-grouped-styles"); document.body.appendChild(container); + }); + it("Should display first three shops when an appointment type has already been selected", async () => { + // Arrange const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: null, + modelValue: { + address: { + city: "POWELL", + country: "US", + state: "OH", + streetAddress: "3938 POWELL RD", + zipCode: "43065", + }, + distanceInMiles: 16.2690495685233, + providerNumber: "003341", + }, serviceZipCode: "43081", selectedAppointmentType: null, cmsWidgetName: cmsWidgetName, @@ -158,8 +176,9 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + // Act wrapper.vm.initializeComponent(shopQuestionInitialData); wrapper.setProps({ @@ -193,17 +212,21 @@ describe("shop-question.vue", () => { }); it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => { - // Arrange/Act - const container = document.createElement("div"); - container.scrollTo = jest.fn(); - - container.classList.add("page-container-grouped-styles"); - document.body.appendChild(container); - + // Arrange const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: null, + 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, @@ -212,8 +235,9 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + // Act wrapper.vm.initializeComponent(shopQuestionInitialData); await wrapper.vm.$nextTick(); @@ -224,16 +248,11 @@ describe("shop-question.vue", () => { // Assert expect(showMoreShopsLink.exists()).toBe(true); + expect(showMoreShopsLink.exists()).toBe(true); }); it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => { - // Arrange/Act - const container = document.createElement("div"); - container.scrollTo = jest.fn(); - - container.classList.add("page-container-grouped-styles"); - document.body.appendChild(container); - + // Arrange const alsoShopQuestionInitialData = { shopProviders: [ { @@ -244,7 +263,7 @@ describe("shop-question.vue", () => { streetAddress: "4403 EXECUTIVE PKWY", zipCode: "43081", }, - distance: 5.16769294095201, + distanceInMiles: 5.16769294095201, providerNumber: "003335", }, { @@ -255,7 +274,7 @@ describe("shop-question.vue", () => { streetAddress: "760 DEARBORN PARK LN", zipCode: "43085", }, - distance: 10.5865432478478, + distanceInMiles: 10.5865432478478, providerNumber: "001820", }, { @@ -266,7 +285,7 @@ describe("shop-question.vue", () => { streetAddress: "5015 N HIGH ST", zipCode: "43214", }, - distance: 11.738869544543, + distanceInMiles: 11.738869544543, providerNumber: "003343", }, ], @@ -275,7 +294,17 @@ describe("shop-question.vue", () => { const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: null, + 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, @@ -284,27 +313,22 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + // Act wrapper.vm.initializeComponent(alsoShopQuestionInitialData); - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); // Assert - expect(showMoreShopsLink.exists()).toBe(false); + expect(showMoreShopsLink.exists()).toBe(true); + expect(showMoreShopsLink.isVisible()).toBe(false); }); - it.only("Should display the next three shops when the 'Show more location' link is clicked", async () => { - const container = document.createElement("div"); - container.scrollTo = jest.fn(); - - container.classList.add("page-container-grouped-styles"); - document.body.appendChild(container); - + it("Should display the next three shops when the 'Show more location' link is clicked", async () => { + // Arrange const displayedAnswers = [ { buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081", @@ -326,11 +350,20 @@ describe("shop-question.vue", () => { }, ]; - // Arrange/Act const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: null, + 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, @@ -339,8 +372,9 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + // Act wrapper.vm.initializeComponent(shopQuestionInitialData); wrapper.vm.answers = displayedAnswers; @@ -377,12 +411,6 @@ describe("shop-question.vue", () => { buttonLabelSubCopy: "11.5 mi", value: "003343", }, - { - buttonBodyCopy: "5015 N High St, Columbus, OH 43214", - buttonLabel: "5015 N High St", - buttonLabelSubCopy: "11.5 mi", - value: "003343", - }, { buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223", buttonLabel: "1670 Harmon Ave", @@ -395,21 +423,31 @@ describe("shop-question.vue", () => { buttonLabelSubCopy: "16.5 mi", value: "003341", }, + { + buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228", + buttonLabel: "4580 W Broad St", + buttonLabelSubCopy: "19.5 mi", + value: "003342", + }, ]); }); it("Should display the number of shops necessary to show a previously selected shop", async () => { - // Arrange/Act - const container = document.createElement("div"); - container.scrollTo = jest.fn(); - - container.classList.add("page-container-grouped-styles"); - document.body.appendChild(container); - + // Arrange const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: "127", + 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, @@ -418,8 +456,9 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + // Act wrapper.vm.initializeComponent(shopQuestionInitialData); await wrapper.vm.$nextTick(); @@ -431,17 +470,21 @@ describe("shop-question.vue", () => { }); it("Should reset the answers when the selected appointment type changes", async () => { - // Arrange/Act - const container = document.createElement("div"); - container.scrollTo = jest.fn(); - - container.classList.add("page-container-grouped-styles"); - document.body.appendChild(container); - + // Arrange const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: "127", + 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, @@ -450,8 +493,9 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + // Act wrapper.vm.initializeComponent(shopQuestionInitialData); wrapper.setProps({ @@ -465,17 +509,21 @@ describe("shop-question.vue", () => { }); it("Should reload the shops when the service zip code changes", async () => { - // Arrange/Act - const container = document.createElement("div"); - container.scrollTo = jest.fn(); - - container.classList.add("page-container-grouped-styles"); - document.body.appendChild(container); - + // Arrange const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: "127", + 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, @@ -486,36 +534,38 @@ describe("shop-question.vue", () => { }); wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); - wrapper.vm.shops = shopQuestionInitialData; - - await wrapper.vm.$nextTick(); - wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => { return new Promise((resolve) => { resolve(mockNewShopList); }); }); + + // Act + wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054"); - await wrapper.vm.$nextTick(); - // Assert - expect(wrapper.vm.shops.length).toEqual(3); - expect(wrapper.vm.shops).toEqual(mockNewShopList.data); + 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/Act - const container = document.createElement("div"); - container.scrollTo = jest.fn(); - - container.classList.add("page-container-grouped-styles"); - document.body.appendChild(container); - + // Arrange const { wrapper } = setupMocks({ mixins: [mockMixin], props: { - modelValue: "127", + 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, @@ -526,6 +576,8 @@ describe("shop-question.vue", () => { }); wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + //Act wrapper.vm.initializeComponent(shopQuestionInitialData); wrapper.setProps({ diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index c3aa89fec..ce3ee3355 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -21,7 +21,7 @@ isRequired validationRules="option-required" /> provider.providerNumber == newValue + ); + this.$emit("update:modelValue", provider); }, }, displayDropoffInformation() { @@ -94,7 +100,6 @@ export default { loadInitialData(serviceZipCode) { return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, { serviceZipCode: serviceZipCode, - radius: 100, }); }, initializeComponent(shopQuestionInitialData) { @@ -125,11 +130,11 @@ export default { const city = toTitleCase(shopProvider.address.city); const state = shopProvider.address.state; const zipCode = shopProvider.address.zipCode; - const distance = Math.round(shopProvider.distance * 2) / 2; + const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2; return { buttonLabel: streetAddress, - buttonLabelSubCopy: `${distance} mi`, + buttonLabelSubCopy: `${distanceInMiles} mi`, buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`, value: shopProvider.providerNumber, }; @@ -163,7 +168,7 @@ export default { }, async reloadShopData(serviceZipCode) { const result = await this.loadInitialData(serviceZipCode); - this.initializeComponent(result.data); + this.initializeComponent(result); this.resetShopList(); }, }, @@ -174,7 +179,7 @@ export default { }, }, selectedAppointmentType: { - async handler(newValue) { + async handler() { // If the validation has been previously triggered, clear it before displaying the component this.$refs.buttonQuestion.resetField(); @@ -190,7 +195,7 @@ export default { async handler(newValue) { this.$refs.buttonQuestion.resetField(); const selectedShopIndex = newValue.findIndex( - (provider) => provider.providerNumber == this.modelValue + (provider) => provider.providerNumber == this.modelValue?.providerNumber ); if (selectedShopIndex >= 3) { diff --git a/src/store/index.js b/src/store/index.js index d10d00f18..e96973dd7 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -980,12 +980,13 @@ export const actions = { }); }, - getProviders(context, { serviceZipCode, radius }) { + getProviders(context, { serviceZipCode }) { const damageType = context.getters.damage.isRepair ? "Repair" : "Replace"; + const shopRadiusInMiles = 100; return globalMethods.callHttpClient({ method: endpoints.GetProviders.method, - endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${radius}`, + endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}`, }); },