WIP
This commit is contained in:
Leah Schumann
parent
22cc5a7be5
commit
7cc3511940
3 changed files with 209 additions and 79 deletions
|
|
@ -1,24 +1,27 @@
|
|||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import mobileLocationModalQuestions from "./mobile-location-modal-questions";
|
||||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
|
||||
import crypto from "crypto";
|
||||
|
||||
global.crypto = crypto;
|
||||
|
||||
// const linkWidgetName = "linkWidgetName";
|
||||
// const modalWidgetName = "modalWidgetName";
|
||||
// const mobileFeeDisclaimerWidgetName = "MobileFeeDisclaimerWidget";
|
||||
// const workspaceRequirementsWidgetName = "WorkspaceRequirementsWidget";
|
||||
const linkWidgetName = "linkWidgetName";
|
||||
const modalWidgetName = "modalWidgetName";
|
||||
const mobileFeeDisclaimerWidgetName = "MobileFeeDisclaimerWidget";
|
||||
|
||||
// const mockLinkCmsContent = {
|
||||
// BodyText: "Sample link body text here.",
|
||||
// };
|
||||
const mockLinkCmsContent = {
|
||||
BodyText: "Sample link body text here.",
|
||||
};
|
||||
|
||||
// const mockModalCmsContent = {
|
||||
// FooterText: "Sample modal footer text here.",
|
||||
// };
|
||||
const mockModalCmsContent = {
|
||||
FooterText: "Sample modal footer text here.",
|
||||
};
|
||||
|
||||
// const mockMobileFeeCmsContent = {
|
||||
// Text: "This is the price {custom:mobileFee}",
|
||||
// };
|
||||
const mockMobileFeeDisclaimerContent = {
|
||||
Text: "Sample mobile fee disclaimer text {custom:mobileFee}",
|
||||
};
|
||||
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
|
|
@ -32,7 +35,7 @@ const mockMixin = {
|
|||
}
|
||||
|
||||
if (widgetName === mobileFeeDisclaimerWidgetName) {
|
||||
return mockMobileFeeCmsContent[cmsFieldName];
|
||||
return mockMobileFeeDisclaimerContent[cmsFieldName];
|
||||
}
|
||||
|
||||
return null;
|
||||
|
|
@ -40,59 +43,177 @@ const mockMixin = {
|
|||
|
||||
getZipCodeData: jest.fn((zip) => {
|
||||
if (zip === "43235") {
|
||||
return {
|
||||
return Promise.resolve({
|
||||
containsMilitaryBase: false,
|
||||
isServiceable: true,
|
||||
isValid: true,
|
||||
state: "OH",
|
||||
zipCodeCtu: "01820",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if (zip === "61606") {
|
||||
return {
|
||||
containsMilitaryBase: false,
|
||||
isServiceable: true,
|
||||
isValid: true,
|
||||
state: "IL",
|
||||
zipCodeCtu: "01526",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
return Promise.resolve({
|
||||
containsMilitaryBase: false,
|
||||
isServiceable: false,
|
||||
isValid: false,
|
||||
state: null,
|
||||
zipCodeCtu: null,
|
||||
};
|
||||
});
|
||||
}),
|
||||
|
||||
dispatchStoreAction: jest.fn((actionName) => {
|
||||
if (actionName === storeActions.GET_MOBILE_FEE_PART) {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
partNumber: "MOBILE FEE",
|
||||
description: "MOBILE FEE",
|
||||
partType: "FEE",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (actionName === storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA) {
|
||||
return Promise.resolve([
|
||||
{
|
||||
partNumber: "MOBILE FEE",
|
||||
description: "MOBILE FEE",
|
||||
partType: "FEE",
|
||||
laborAmount: 49.99,
|
||||
sellingPrice: 0,
|
||||
kitPrice: 0,
|
||||
},
|
||||
]);
|
||||
}
|
||||
}),
|
||||
|
||||
getTotalLineItemPrice: jest.fn((lineItem) => {
|
||||
return 49.99;
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
describe("mobile-location-modal-questions.vue", () => {
|
||||
it("Initial state on load with no existing location info", async () => {
|
||||
let mobileLocationQuestions = {
|
||||
it("Should copy the modelValue to the internalModel when the component is mounted", async () => {
|
||||
// Arrange
|
||||
const mobileLocationQuestions = {
|
||||
addressQuestions: {
|
||||
streetAddress: "",
|
||||
apartmentNumberOrBusinessName: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
streetAddress: "555 Some St",
|
||||
apartmentNumberOrBusinessName: "Apt 1",
|
||||
city: "Funkytown",
|
||||
state: "OH",
|
||||
zipCode: "55555",
|
||||
},
|
||||
isVehicleProtected: null,
|
||||
isVehicleProtected: true,
|
||||
serviceZipCode: "55555",
|
||||
};
|
||||
|
||||
// Arrange
|
||||
const wrapper = shallowMount(mobileLocationModalQuestions, {
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: mobileLocationQuestions,
|
||||
},
|
||||
attachTo: document.body,
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
//expect(wrapper.html()).toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"]));
|
||||
expect(wrapper.vm.internalModel.addressQuestions.streetAddress).toEqual("555 Some St");
|
||||
expect(wrapper.vm.internalModel.addressQuestions.apartmentNumberOrBusinessName).toEqual(
|
||||
"Apt 1"
|
||||
);
|
||||
expect(wrapper.vm.internalModel.addressQuestions.city).toEqual("Funkytown");
|
||||
expect(wrapper.vm.internalModel.addressQuestions.state).toEqual("OH");
|
||||
expect(wrapper.vm.internalModel.addressQuestions.zipCode).toEqual("55555");
|
||||
expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(true);
|
||||
expect(wrapper.vm.internalModel.serviceZipCode).toEqual("55555");
|
||||
});
|
||||
|
||||
it("Should set mobile fee price to 0.00 when loading the page and there is no existing service zip code", async () => {
|
||||
// Arrange
|
||||
const mobileLocationQuestions = {
|
||||
addressQuestions: {
|
||||
streetAddress: "555 Some St",
|
||||
apartmentNumberOrBusinessName: "Apt 1",
|
||||
city: "Funkytown",
|
||||
state: "OH",
|
||||
zipCode: "43235",
|
||||
},
|
||||
isVehicleProtected: true,
|
||||
serviceZipCode: "",
|
||||
};
|
||||
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
|
||||
props: {
|
||||
modelValue: mobileLocationQuestions,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(wrapper.props().modelValue.serviceZipCode).toBe("");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.mobileFee).toEqual(0.0);
|
||||
});
|
||||
|
||||
it.only("Should calculate the mobile fee price when loading the page and there is an existing service zip code", async () => {
|
||||
// Arrange
|
||||
const mobileLocationQuestions = {
|
||||
addressQuestions: {
|
||||
streetAddress: "555 Some St",
|
||||
apartmentNumberOrBusinessName: "Apt 1",
|
||||
city: "Funkytown",
|
||||
state: "OH",
|
||||
zipCode: "43235",
|
||||
},
|
||||
isVehicleProtected: true,
|
||||
serviceZipCode: "43235",
|
||||
};
|
||||
|
||||
// Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
|
||||
props: {
|
||||
modelValue: mobileLocationQuestions,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
console.log(wrapper.vm.mobileFee);
|
||||
|
||||
expect(wrapper.props().modelValue.serviceZipCode).toBe("43235");
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.mobileFee).toEqual(49.99);
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
|
||||
const resultingMountOptions = getMountOptions({
|
||||
...mountOptions,
|
||||
mixins,
|
||||
});
|
||||
|
||||
if (props) resultingMountOptions.propsData = props;
|
||||
|
||||
const wrapper = isShallowMount
|
||||
? shallowMount(mobileLocationModalQuestions, resultingMountOptions)
|
||||
: mount(mobileLocationModalQuestions, resultingMountOptions);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
<modal
|
||||
:ref="modalName"
|
||||
:headerText="modalHeaderText"
|
||||
:onModalClosedCallback="onModalClosed"
|
||||
:footerButtonText="modalFooterText"
|
||||
@footer-button-event="setMobileLocation">
|
||||
<addressQuestions
|
||||
|
|
@ -52,7 +51,6 @@ import alert from "@/ux-components/alert/alert";
|
|||
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
|
||||
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
|
||||
export default {
|
||||
|
|
@ -63,7 +61,7 @@ export default {
|
|||
internalModel: this.copyModel(this.modelValue),
|
||||
displayInvalidZipAlert: false,
|
||||
modalName: "MobileLocationModalWidget",
|
||||
mobileFee: "",
|
||||
mobileFee: 0.0,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -88,10 +86,34 @@ export default {
|
|||
alertNonServiceableZipWidgetName: String,
|
||||
alertInvalidZipWidgetName: String,
|
||||
},
|
||||
mounted() {
|
||||
this.getMobileFee().then((result) => {
|
||||
this.mobileFee = result;
|
||||
});
|
||||
async mounted() {
|
||||
this.mobileFee = await this.getMobileFee();
|
||||
|
||||
// this.getMobileFee().then((result) => {
|
||||
// console.log(result);
|
||||
// this.mobileFee = result;
|
||||
// console.log(this.mobileFee);
|
||||
// });
|
||||
|
||||
// if (this.serviceZipCode !== "") {
|
||||
// console.log(`Calling this.getMobileFee() inside mounted()`);
|
||||
// this.mobileFee = await this.getMobileFee();
|
||||
// console.log(
|
||||
// `After calling this.getMobileFee() inside mounted(), result: ${this.mobileFee}`
|
||||
// );
|
||||
// }
|
||||
|
||||
// // this.getMobileFee().then((result) => {
|
||||
// // console.log(`After calling this.getMobileFee() inside mounted()`);
|
||||
// // console.log(`Result of this.getMobileFee() ${result}`);
|
||||
// // //this.test = "this";
|
||||
// // //console.log(this.test);
|
||||
// // this.mobileFee = result;
|
||||
// // console.log(
|
||||
// // `Value of this.mobile fee after calling this.getMobileFee(): ${this.mobileFee}`
|
||||
// // );
|
||||
// // });
|
||||
// //console.log(`After calling this.getMobileFee() inside mounted() - NOT IN THE CALLBACK`);
|
||||
},
|
||||
computed: {
|
||||
mobileLocationLinkPromptText() {
|
||||
|
|
@ -130,54 +152,40 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
copyModel(modelToCopy) {
|
||||
return {
|
||||
addressQuestions: {
|
||||
streetAddress: modelToCopy.addressQuestions.streetAddress,
|
||||
apartmentNumberOrBusinessName:
|
||||
modelToCopy.addressQuestions.apartmentNumberOrBusinessName,
|
||||
city: modelToCopy.addressQuestions.city,
|
||||
state: modelToCopy.addressQuestions.state,
|
||||
zipCode: modelToCopy.addressQuestions.zipCode,
|
||||
},
|
||||
isVehicleProtected: modelToCopy.isVehicleProtected,
|
||||
serviceZipCode: modelToCopy.serviceZipCode,
|
||||
};
|
||||
return { ...modelToCopy };
|
||||
},
|
||||
|
||||
setServiceZipCode(serviceZipCode) {
|
||||
this.internalModel.serviceZipCode = serviceZipCode;
|
||||
},
|
||||
|
||||
getServiceZipCodeFromStore() {
|
||||
return this.$store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
|
||||
async getMobileFee() {
|
||||
if (!this.internalModel.serviceZipCode) {
|
||||
return "";
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
const zipCodeData = await this.getZipCodeData(this.internalModel.serviceZipCode);
|
||||
|
||||
console.log(zipCodeData);
|
||||
// Get the Mobile Fee Part
|
||||
const mobileFeePart = await baseMixin.methods.dispatchStoreAction(
|
||||
const mobileFeePart = await this.dispatchStoreAction(
|
||||
storeActions.GET_MOBILE_FEE_PART,
|
||||
null,
|
||||
false
|
||||
);
|
||||
|
||||
console.log(mobileFeePart);
|
||||
// Get the Mobile Fee Part Price
|
||||
const pricingResults = await baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.PRICE_ORDER_ITEMS,
|
||||
const pricingResults = await this.dispatchStoreAction(
|
||||
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||
{
|
||||
availableLineItems: [mobileFeePart.data],
|
||||
serviceZipCode: zipCodeData.zipCode,
|
||||
zipCodeCtu: zipCodeData.zipCodeCtu,
|
||||
serviceZipCode: this.internalModel.serviceZipCode,
|
||||
ctu: zipCodeData.zipCodeCtu,
|
||||
},
|
||||
false
|
||||
);
|
||||
console.log(pricingResults);
|
||||
|
||||
return await baseMixin.methods.getTotalLineItemPrice(pricingResults[0]);
|
||||
return this.getTotalLineItemPrice(pricingResults[0]);
|
||||
},
|
||||
|
||||
openModal() {
|
||||
|
|
@ -240,7 +248,7 @@ export default {
|
|||
},
|
||||
"modelValue.serviceZipCode": {
|
||||
async handler(newValue) {
|
||||
this.mobileFee = await this.getMobileFee(newValue);
|
||||
this.mobileFee = await this.getMobileFee();
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -86,11 +86,12 @@ export default {
|
|||
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return (
|
||||
store.getters.lineItems.supportingItems !== null &&
|
||||
store.getters.order.serviceLocation.zipCode !== null &&
|
||||
store.getters.payment.isInsurance !== null
|
||||
);
|
||||
return true;
|
||||
// (
|
||||
// store.getters.lineItems.supportingItems !== null &&
|
||||
// store.getters.order.serviceLocation.zipCode !== null &&
|
||||
// store.getters.payment.isInsurance !== null
|
||||
// );
|
||||
},
|
||||
getRegistrationAddressFromStore() {
|
||||
return this.$store.getters.vehicle.registration.address;
|
||||
|
|
|
|||
Loading…
Reference in a new issue