diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index f7038a9b4..08f429b5e 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -90,6 +90,10 @@ const endpoints = { url: "/parts/api/v1/parts/supporting-items", method: "POST", }, + GetProviderLocations: { + url: "/location/api/v1/location/providers", + method: "GET", + }, GetCapabilityQuestions: { url: "/parts/api/v1/parts/capability-questions", method: "GET", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 480626349..db15e9854 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -31,6 +31,7 @@ const storeActions = { GET_MOLDING_QUESTIONS: "getMoldingQuestions", GET_MOBILE_FEE_PART: "getMobileFeePart", GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails", + GET_PROVIDER_LOCATIONS: "getProviderLocations", SAVE_SESSION: "saveSession", LOAD_SESSION: "loadSession", UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse", diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index f6bcab3e2..e98ef2901 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -129,6 +129,7 @@ export default { valueToLogType: String, additionalButtonStyling: String, isSmallQuestionText: Boolean, + availability: String, customButtonQuestionId: String, logDisplayedValuesEvent: { type: Boolean, @@ -255,8 +256,10 @@ export default { }, }, watch: { - modelValue() { - this.resetField(); + modelValue(newValue) { + this.resetField({ + value: newValue, + }); }, answers() { //once we get the answers to display from parent, see if we need a GA event to log what we showed diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue index 664b55674..d6711f363 100644 --- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue +++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue @@ -2,6 +2,7 @@
{ // Arrange const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + const mobileFeePart = { partNumber: "MOBILE FEE", description: "MOBILE FEE", @@ -585,6 +587,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -611,6 +615,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -637,6 +643,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -663,6 +671,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -689,6 +699,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -716,6 +728,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -743,6 +757,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -770,6 +786,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -797,6 +815,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -824,6 +844,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -851,6 +873,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -878,6 +902,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -905,6 +931,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -932,6 +960,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -959,6 +989,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -989,6 +1021,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1015,6 +1049,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1041,6 +1077,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1068,6 +1106,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1095,6 +1135,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1122,6 +1164,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1151,6 +1195,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1178,6 +1224,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1205,6 +1253,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1232,6 +1282,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1259,6 +1311,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1286,6 +1340,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1313,6 +1369,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, @@ -1342,6 +1400,8 @@ describe("service-location.vue", () => { const { wrapper } = setupMocks({}); + wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn(); + // Act await serviceLocation.beforeRouteEnter.call( wrapper.vm, diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 11ea41669..5fdf261f8 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -46,7 +46,7 @@ alertClass="alert-warning" /> + + + diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js new file mode 100644 index 000000000..b9eb6299b --- /dev/null +++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js @@ -0,0 +1,70 @@ +import { mount } from "@vue/test-utils"; +import shopListButton from "./shop-list-button"; +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; + +describe("service-package-radio.vue", () => { + it("Should include buttonLabel in html", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }); + + // Act + const outputHtml = wrapper.html(); + + // Assert + expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"])); + }); + + it("Should include buttonLabelSubCopy in html", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }); + + // Act + const outputHtml = wrapper.html(); + + // Assert + expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelSubCopy"])); + }); + + it("Should include buttonLabelAuxillaryCopy in html", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }); + + // Act + const outputHtml = wrapper.html(); + + // Assert + expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelAuxillaryCopy"])); + }); +}); + +const mockProps = { + buttonLabel: "buttonLabel test copy", + buttonLabelSubCopy: "buttonLabelSubCopy test copy", + buttonBodyCopy: + "
  • buttonBodyCopy test copy
  • 2
  • 3
  • 4
  • 5
", + buttonLabelAuxillaryCopy: "buttonLabelAuxillaryCopy test copy", + value: 0, + modelValue: 0, + groupName: "mockGroup", +}; + +function setupMocks({ mountOptionsMockData = {} }) { + const wrapper = mount(shopListButton, { + ...mountOptionsMockData, + mixins: [inputButtonWrapperMixin], + }); + + return { wrapper }; +} diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue new file mode 100644 index 000000000..b8003148f --- /dev/null +++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue @@ -0,0 +1,179 @@ + + + + + diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js new file mode 100644 index 000000000..7f67737fa --- /dev/null +++ b/src/layouts/service-location/shop-question/shop-question.spec.js @@ -0,0 +1,554 @@ +import { shallowMount } from "@vue/test-utils"; +import { storeActions } from "@/constants/store-actions"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import shopQuestion from "./shop-question"; + +jest.mock("@/mixins/base-mixin", () => ({ + methods: { + dispatchStoreAction(action, items, encode) { + if (action === mockGetProviderLocationsStoreAction) { + return new Promise((resolve) => { + resolve(mockNewShopList); + }); + } + }, + }, +})); + +const mockGetProviderLocationsStoreAction = storeActions.GET_PROVIDER_LOCATIONS; +const mockNewShopList = { + data: [ + { + city: "Far", + country: "United States", + distance: 100, + providerNumber: "129", + state: "OH", + streetAddress: "555 First Capital Ln", + zipCode: "45601", + }, + { + city: "Farther", + country: "United States", + distance: 200, + providerNumber: "130", + state: "OH", + streetAddress: "5486 N Grove Rd", + zipCode: "43215", + }, + { + city: "Farthest (Ever)", + country: "United States", + distance: 380.5, + providerNumber: "131", + state: "OH", + streetAddress: "1670 Bongo Ave D", + zipCode: "43223", + }, + ], +}; + +const mockCmsContent = { + QuestionText: "Select a shop:", +}; + +const cmsWidgetName = "AppointmentTypeQuestionWidget"; +const shopQuestionInitialData = [ + { + city: "Worthington", + country: "United States", + distance: 1.5, + providerNumber: "123", + state: "OH", + streetAddress: "760 Dearborn Park Ln", + zipCode: "43085", + }, + { + city: "Columbus", + country: "United States", + distance: 4.5, + providerNumber: "124", + state: "OH", + streetAddress: "5486 N Hamilton Rd", + zipCode: "43230", + }, + { + city: "Powell", + country: "United States", + distance: 7, + providerNumber: "125", + state: "OH", + streetAddress: "1670 Harmon Ave C", + zipCode: "43223", + }, + { + city: "Chillicothe", + country: "United States", + distance: 41.5, + providerNumber: "126", + state: "OH", + streetAddress: "555 First Capital Ln", + zipCode: "45601", + }, + { + city: "Grove City", + country: "United States", + distance: 4.5, + providerNumber: "127", + state: "OH", + streetAddress: "5486 N Grove Rd", + zipCode: "43215", + }, + { + city: "Dayton", + country: "United States", + distance: 80.5, + providerNumber: "128", + state: "OH", + streetAddress: "1670 Bongo Ave D", + zipCode: "43223", + }, + { + city: "Far", + country: "United States", + distance: 100, + providerNumber: "129", + state: "OH", + streetAddress: "555 First Capital Ln", + zipCode: "45601", + }, + { + city: "Farther", + country: "United States", + distance: 200, + providerNumber: "130", + state: "OH", + streetAddress: "5486 N Grove Rd", + zipCode: "43215", + }, + { + city: "Farthest (Ever)", + country: "United States", + distance: 380.5, + providerNumber: "131", + state: "OH", + streetAddress: "1670 Bongo Ave D", + zipCode: "43223", + }, +]; + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + if (widgetName === cmsWidgetName) { + return mockCmsContent[cmsFieldName]; + } + + return null; + }), + }, +}; + +describe("shop-question.vue", () => { + it("Should display first three shops when an appointment type has already been selected", async () => { + // Arrange/Act + const container = document.createElement("div"); + container.scrollTo = jest.fn(); + + container.classList.add("page-container-grouped-styles"); + document.body.appendChild(container); + + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: null, + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + wrapper.vm.initializeComponent(shopQuestionInitialData); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.answers).toEqual([ + { + Name: "123", + buttonLabel: "Worthington", + buttonLabelSubCopy: "1.5 mi", + buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", + }, + { + Name: "124", + buttonLabel: "Columbus", + buttonLabelSubCopy: "4.5 mi", + buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230", + }, + { + Name: "125", + buttonLabel: "Powell", + buttonLabelSubCopy: "7 mi", + buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223", + }, + ]); + }); + + 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); + + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: null, + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + wrapper.vm.initializeComponent(shopQuestionInitialData); + + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + + const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); + + // Assert + 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); + + const alsoShopQuestionInitialData = [ + { + city: "Worthington", + country: "United States", + distance: 1.5, + providerNumber: "123", + state: "OH", + streetAddress: "760 Dearborn Park Ln", + zipCode: "43085", + }, + { + city: "Columbus", + country: "United States", + distance: 4.5, + providerNumber: "124", + state: "OH", + streetAddress: "5486 N Hamilton Rd", + zipCode: "43230", + }, + { + city: "Powell", + country: "United States", + distance: 7, + providerNumber: "125", + state: "OH", + streetAddress: "1670 Harmon Ave C", + zipCode: "43223", + }, + ]; + + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: null, + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + 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); + }); + + it("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); + + const displayedAnswers = [ + { + Name: "123", + buttonLabel: "Worthington", + buttonLabelSubCopy: "1.5 mi", + buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", + }, + { + Name: "124", + buttonLabel: "Columbus", + buttonLabelSubCopy: "4.5 mi", + buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230", + }, + { + Name: "125", + buttonLabel: "Powell", + buttonLabelSubCopy: "7 mi", + buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223", + }, + ]; + + // Arrange/Act + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: null, + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + + wrapper.vm.shops = shopQuestionInitialData; + wrapper.vm.answers = displayedAnswers; + wrapper.vm.shopIndex = 3; + + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + + const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); + + showMoreShopsLink.trigger("click"); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.answers.length).toBe(6); + expect(wrapper.vm.answers).toEqual([ + { + Name: "123", + buttonLabel: "Worthington", + buttonLabelSubCopy: "1.5 mi", + buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", + }, + { + Name: "124", + buttonLabel: "Columbus", + buttonLabelSubCopy: "4.5 mi", + buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230", + }, + { + Name: "125", + buttonLabel: "Powell", + buttonLabelSubCopy: "7 mi", + buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223", + }, + { + Name: "126", + buttonLabel: "Chillicothe", + buttonLabelSubCopy: "41.5 mi", + buttonBodyCopy: "555 First Capital Ln, Chillicothe, OH 45601", + }, + { + Name: "127", + buttonLabel: "Grove City", + buttonLabelSubCopy: "4.5 mi", + buttonBodyCopy: "5486 N Grove Rd, Grove City, OH 43215", + }, + { + Name: "128", + buttonLabel: "Dayton", + buttonLabelSubCopy: "80.5 mi", + buttonBodyCopy: "1670 Bongo Ave D, Dayton, OH 43223", + }, + ]); + }); + + 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); + + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: "127", + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + wrapper.vm.initializeComponent(shopQuestionInitialData); + + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.answers.length).toEqual(5); + }); + + 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); + + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: "127", + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + wrapper.vm.initializeComponent(shopQuestionInitialData); + + wrapper.setProps({ + selectedAppointmentType: "Inshop", + }); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.answers.length).toEqual(3); + }); + + 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); + + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: "127", + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + 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(newShopList); + }); + }); + 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); + }); + + 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); + + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + modelValue: "127", + serviceZipCode: "43081", + selectedAppointmentType: "Dropoff", + cmsWidgetName: cmsWidgetName, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); + wrapper.vm.initializeComponent(shopQuestionInitialData); + + wrapper.setProps({ + selectedAppointmentType: "Inshop", + }); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.answers.length).toEqual(3); + }); +}); + +function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) { + const resultingMountOptions = getMountOptions({ + ...mountOptions, + mixins, + }); + + if (props) resultingMountOptions.propsData = props; + + const wrapper = isShallowMount + ? shallowMount(shopQuestion, resultingMountOptions) + : mount(shopQuestion, resultingMountOptions); + + return { wrapper }; +} diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue new file mode 100644 index 000000000..2610fd787 --- /dev/null +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -0,0 +1,228 @@ + + + + + diff --git a/src/store/index.js b/src/store/index.js index 95b9817b4..c57dd5733 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -980,6 +980,14 @@ export const actions = { }); }, + getProviderLocations(context, { serviceZipCode }) { + return globalMethods.callMockHttpClient({ + method: endpoints.GetProviderLocations.method, + //TODO: Remove Mocky Endpoints + endpoint: "https://run.mocky.io/v3/abf2fa63-8287-4e46-b169-f5bec65c8dff", + }); + }, + getSupportingItems(context) { const glassPartsArray = context.getters.lineItems.glassParts ?? []; const carId = context.getters.vehicle.carId;