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;