diff --git a/jest.config.js b/jest.config.js index ac8208423..efec3da84 100644 --- a/jest.config.js +++ b/jest.config.js @@ -31,5 +31,5 @@ module.exports = { }, }, // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit - silent: true, + //silent: true, }; diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 6cd3bc2f1..f8e9062b3 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -7,10 +7,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper"; import store from "@/store"; import baseMixin from "@/mixins/base-mixin"; -import { - getServiceabilityDetails, - Provider, -} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; +import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; // Define Mocks jest.mock("@/helpers/cms-content-helper", () => ({ @@ -21,7 +18,7 @@ jest.mock("@/helpers/cms-content-helper", () => ({ jest.mock("./classes/provider"); -const mockGetPricedMobileFeePart = (mockServiceZipCode) => { +let mockGetPricedMobileFeePart = (mockServiceZipCode) => { let mobileFeePart = {}; if (mockServiceZipCode === "43235") { @@ -38,7 +35,7 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => { return Promise.resolve(mobileFeePart); }; -const mockGetServiceabilityDetails = (mockServiceZipCode) => { +let mockGetServiceabilityDetails = (mockServiceZipCode) => { const serviceabilityDetails = { isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, @@ -49,6 +46,17 @@ const mockGetServiceabilityDetails = (mockServiceZipCode) => { return Promise.resolve(serviceabilityDetails); }; +let mockGetShopProviderData = (mockServiceZipCode) => { + const result = { + data: { + mobileProviderNumber: "001820", + shopProviders: [{}], + }, + }; + + return Promise.resolve(result); +}; + jest.mock( "@/layouts/service-location/helpers/service-location-helper/service-location-helper", () => ({ @@ -58,6 +66,9 @@ jest.mock( getServiceabilityDetails: jest.fn((mockServiceZipCode) => { return mockGetServiceabilityDetails(mockServiceZipCode); }), + getShopProviderData: jest.fn((mockServiceZipCode) => { + return mockGetShopProviderData(mockServiceZipCode); + }), }) ); @@ -554,14 +565,13 @@ describe("service-location.vue", () => { describe("should be logical AND when recalibration is defined.", () => { test("T & T => T", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -582,14 +592,13 @@ describe("service-location.vue", () => { test("T & F => F", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -610,14 +619,13 @@ describe("service-location.vue", () => { test("F & T => F", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -638,14 +646,13 @@ describe("service-location.vue", () => { test("F & F => F", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -666,14 +673,13 @@ describe("service-location.vue", () => { test("displayServiceableMobileOnly should be true if mobile is true and inshop is false.", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -695,14 +701,13 @@ describe("service-location.vue", () => { test("displayServiceableMobileOnly should be false if mobile is false.", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -724,14 +729,13 @@ describe("service-location.vue", () => { test("displayServiceableMobileOnly should be false if inShop is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -753,14 +757,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be true if inShop is false and mobile is false", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -782,14 +785,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be false if inShop is true and mobile is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -811,14 +813,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be false if inShop is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -840,14 +841,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be false if mobile is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -869,14 +869,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be true if inshop is true and mobile is false", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -898,14 +897,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be false if inshop is false", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -927,14 +925,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be false if mobile is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -956,14 +953,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be false in the dual/static recalibration scenario", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index ac7bfcb68..88bc55bda 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -19,8 +19,7 @@ @updated-serviceability="setServiceabilityDetails" @updated-contains-military-base="setContainsMilitaryBase" linkWidgetName="ServiceZipLinkWidget" - modalWidgetName="ServiceZipModalWidget" - /> + modalWidgetName="ServiceZipModalWidget" /> + modalWidgetName="MobileLocationModalWidget" /> { this.shopProviderData = result.data; - this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); - }); + this.selectedProvider = new Provider( + this.shopProviderData.mobileProviderNumber + ); + }); } this.setMobileLocation(newValue); @@ -504,8 +507,10 @@ export default { if (newValue === "Mobile") { getShopProviderData(this.zipCode).then(async (result) => { this.shopProviderData = result.data; - this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); - }); + this.selectedProvider = new Provider( + this.shopProviderData.mobileProviderNumber + ); + }); } else { this.selectedProvider = new Provider(); } 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 2904af1a9..1a02efff3 100644 --- a/src/layouts/service-location/shop-question/shop-question.spec.js +++ b/src/layouts/service-location/shop-question/shop-question.spec.js @@ -61,6 +61,7 @@ const mockCmsContent = { const cmsWidgetName = "ShopQuestionWidget"; const shopQuestionInitialData = { + mobileProviderNumber: "001820", shopProviders: [ { address: { @@ -162,15 +163,18 @@ describe("shop-question.vue", () => { selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, isDisplayed: true, + shopProviderData: null, }, mountOptions: { attachTo: document.body, }, }); - // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); + // Act await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); @@ -199,47 +203,6 @@ describe("shop-question.vue", () => { }); it("Should display the 'Show more locations' link when there are more than three locations to chose from", 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, - }, - }); - - // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); - - 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.isVisible()).toBe(true); - }); - - it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => { // Arrange const alsoShopQuestionInitialData = { shopProviders: [ @@ -276,6 +239,17 @@ describe("shop-question.vue", () => { distanceInMiles: 11.738869544543, providerNumber: "003343", }, + { + address: { + city: "COLUMBUS", + country: "US", + state: "OH", + streetAddress: "1670 HARMON AVE", + zipCode: "43223", + }, + distanceInMiles: 15.9727889297435, + providerNumber: "006747", + }, ], }; @@ -297,6 +271,7 @@ describe("shop-question.vue", () => { selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, isDisplayed: true, + shopProviderData: null, }, mountOptions: { attachTo: document.body, @@ -304,14 +279,89 @@ describe("shop-question.vue", () => { }); // Act - wrapper.vm.initializeComponent(alsoShopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); + 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(false); + expect(showMoreShopsLink.exists()).toBeTruthy(); + expect(showMoreShopsLink.isVisible()).toBeTruthy(); + }); + + it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => { + // Arrange + const alsoShopQuestionInitialData = { + shopProviders: [ + { + address: { + city: "WESTERVILLE", + country: "US", + state: "OH", + streetAddress: "4403 EXECUTIVE PKWY", + zipCode: "43081", + }, + distanceInMiles: 5.16769294095201, + providerNumber: "003335", + }, + { + address: { + city: "WORTHINGTON", + country: "US", + state: "OH", + streetAddress: "760 DEARBORN PARK LN", + zipCode: "43085", + }, + distanceInMiles: 10.5865432478478, + providerNumber: "001820", + }, + ], + }; + + 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, + shopProviderData: null, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + // Act + await wrapper.setProps({ + shopProviderData: alsoShopQuestionInitialData, + }); + + await wrapper.vm.$nextTick(); + + const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); + + await wrapper.vm.$nextTick(); + + // Assert + expect(showMoreShopsLink.exists()).toBeFalsy(); }); it("Should display the next three shops when the 'Show more location' link is clicked", async () => { @@ -355,6 +405,7 @@ describe("shop-question.vue", () => { selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, isDisplayed: true, + shopProviderData: null, }, mountOptions: { attachTo: document.body, @@ -362,7 +413,9 @@ describe("shop-question.vue", () => { }); // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); await wrapper.vm.$nextTick(); @@ -384,7 +437,7 @@ describe("shop-question.vue", () => { await wrapper.vm.$nextTick(); - showMoreShopsLink.trigger("click"); + showMoreShopsLink.trigger("click-event"); await wrapper.vm.$nextTick(); @@ -443,6 +496,7 @@ describe("shop-question.vue", () => { serviceZipCode: "43081", selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + shopProviderData: null, }, mountOptions: { attachTo: document.body, @@ -450,7 +504,9 @@ describe("shop-question.vue", () => { }); // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); @@ -468,15 +524,18 @@ describe("shop-question.vue", () => { modelValue: null, selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + shopProviderData: null, }, mountOptions: { attachTo: document.body, }, }); - // Act - await wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); + // Act await wrapper.vm.$nextTick(); expect(wrapper.vm.answers.length).toEqual(3); diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index 30b39f1b0..fa00ab1dc 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -30,7 +30,7 @@ linkType="text" :text="showMoreShopsLinkText" href="#!" - @click-event="getNextShopsFromList" + @click-event="getNextShopsFromList(3)" :aria-label="showMoreShopsLinkText" /> @@ -43,8 +43,6 @@ import buttonQuestion from "@/digital-components/button-question/button-question import shopListButton from "./shop-list-button/shop-list-button"; import textLink from "@/ux-components/text-link/text-link"; -import { storeActions } from "@/constants/store-actions.js"; - // Supporting files import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; @@ -75,7 +73,7 @@ export default { default: () => null, }, selectedAppointmentType: String, - shopProviderData: Array, + shopProviderData: Object, cmsWidgetName: String, validationRules: String, isDisplayed: Boolean, @@ -127,23 +125,6 @@ export default { }, }, methods: { - // loadInitialData(serviceZipCode) { - // return this.loadData(serviceZipCode); - // }, - // loadData(serviceZipCode) { - // return getShopProviders(serviceZipCode); - // // return baseMixin.methods.dispatchStoreActionWithLogging( - // // storeActions.GET_PROVIDERS, - // // { - // // serviceZipCode: serviceZipCode, - // // }, - // // "service-location" - // // ); - // }, - // initializeComponent(shopQuestionInitialData) { - // this.shopProviders = shopQuestionInitialData.shopProviders; - // this.$emit("updated-shop-list", shopQuestionInitialData); - // }, async getNextShopsFromList(numberToGet = 3) { const shopIterator = (array, n) => { const l = array.length;