jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Addl unit tests for service-location and tests for mobile-location-modal-question

Browse source
This commit is contained in:
Leah Schumann 2023-03-02 14:04:55 -05:00
parent 8d8d253bfc
commit e6625aeb34
5 changed files with 407 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/helpers/service-location-helper.spec.js
View file

@ -2,7 +2,8 @@ import { getPricedMobileFeePart } from "./service-location-helper";
import { storeActions } from "@/constants/store-actions";
const mockStoreActionGetMobileFeePart = storeActions.GET_MOBILE_FEE_PART;
const mockStoreActionPriceOrderItemsAndSaveServerData = storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA;
const mockStoreActionPriceOrderItemsAndSaveServerData =
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA;
jest.mock("@/mixins/base-mixin.js", () => ({
methods: {
@ -40,12 +41,11 @@ jest.mock("@/mixins/base-mixin.js", () => ({
]);
}
}),
},
}));
describe("service-location-helper.js", () => {
it("Should return the null if no service zip code is passed in", async() => {
it("Should return the null if no service zip code is passed in", async () => {
// Arrange / Act
const serviceZipCode = null;
const expected = null;
@ -54,9 +54,9 @@ describe("service-location-helper.js", () => {
// Assert
expect(result).toEqual(expected);
});
});
it("Should return the priced mobile fee part", async() => {
it("Should return the priced mobile fee part", async () => {
// Arrange / Act
const serviceZipCode = "43235";
const expected = {
@ -66,13 +66,13 @@ describe("service-location-helper.js", () => {
laborAmount: 49.99,
sellingPrice: 0,
kitPrice: 0,
}
};
const result = await getPricedMobileFeePart(serviceZipCode);
// Assert
expect(result).toEqual(expected);
});
})
});
//test.todo("some test to be written in the future");

210
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
View file

@ -2,6 +2,7 @@ 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 modal from "@/digital-components/modal/modal";
import crypto from "crypto";
@ -42,7 +43,7 @@ const mockMixin = {
}),
getZipCodeData: jest.fn((zip) => {
if (zip === "43235") {
if (zip === "43235" || zip === "55555") {
return Promise.resolve({
containsMilitaryBase: false,
isServiceable: true,
@ -128,6 +129,213 @@ describe("mobile-location-modal-questions.vue", () => {
expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(true);
expect(wrapper.vm.internalModel.serviceZipCode).toEqual("55555");
});
it("Should open the modal when the 'Enter your service address' link is clicked", async () => {
// Arrange
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: mobileLocationQuestions,
},
mountOptions: {
attachTo: document.body,
},
});
wrapper.vm.$refs.MobileLocationModalWidget.openModal = jest.fn();
const mobileLocationLink = wrapper.findComponent({ ref: "mobileLocationLink" });
// // Act
await mobileLocationLink.trigger("click-event");
// // Assert
expect(wrapper.vm.$refs.MobileLocationModalWidget.openModal).toHaveBeenCalled();
});
it("Should emit update:modelValue on setMobileLocation for a valid address and vehicle protection answer", async () => {
// Arrange
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: true,
serviceZipCode: "",
};
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
const wrapper = shallowMount(mobileLocationModalQuestions, {
mixins: [mockMixin],
props: {
modelValue: mobileLocationQuestions,
linkWidgetName: linkWidgetName,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
// Act
wrapper.vm.internalModel = newMobileLocationQuestions;
await wrapper.vm.setMobileLocation();
let expectedEmit = [[newMobileLocationQuestions]];
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
});
it("Should not emit update:modelValue on setMobileLocation for an invalid address zip code", async () => {
// Arrange
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: true,
serviceZipCode: "",
};
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "61000",
},
isVehicleProtected: true,
serviceZipCode: "61000",
};
const wrapper = shallowMount(mobileLocationModalQuestions, {
mixins: [mockMixin],
props: {
modelValue: mobileLocationQuestions,
linkWidgetName: linkWidgetName,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
// Act
wrapper.vm.internalModel = newMobileLocationQuestions;
await wrapper.vm.setMobileLocation();
// Assert
expect(wrapper.emitted("update:modelValue")).not.toBeTruthy();
});
it("Should display invalid zip alert for invalid address zip inputs", async () => {
// Arrange
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: true,
serviceZipCode: "",
};
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "11111",
},
isVehicleProtected: true,
serviceZipCode: "11111",
};
const wrapper = shallowMount(mobileLocationModalQuestions, {
mixins: [mockMixin],
props: {
modelValue: mobileLocationQuestions,
linkWidgetName: linkWidgetName,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
wrapper.vm.internalModel = newMobileLocationQuestions;
// Act
await wrapper.vm.setMobileLocation();
// Assert
expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
});
it("Should clear the internal model when resetModel is called", async () => {
// Arrange
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: mobileLocationQuestions,
},
mountOptions: {
attachTo: document.body,
},
});
// Act
wrapper.vm.resetModel();
// Assert
expect(wrapper.vm.internalModel.addressQuestions.streetAddress).toEqual("");
expect(wrapper.vm.internalModel.addressQuestions.apartmentNumberOrBusinessName).toEqual("");
expect(wrapper.vm.internalModel.addressQuestions.city).toEqual("");
expect(wrapper.vm.internalModel.addressQuestions.state).toEqual("");
expect(wrapper.vm.internalModel.addressQuestions.zipCode).toEqual("");
expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(null);
});
});
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

7
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -7,6 +7,7 @@
v-html="mobileLocationLinkPromptText"></label>
<div class="update-mobile-location-text-link">
<textLink
ref="mobileLocationLink"
id="mobileLocationLinkPromptId"
linkType="text"
:text="this.mobileLocationLinkText"
@ -54,7 +55,7 @@ import textBlock from "@/digital-components/text-block/text-block";
export default {
name: "mobile-location-modal-questions",
emits: ["update:modelValue"], // The component emits an event
emits: ["update:modelValue", "updated-zip-code"], // The component emits an event
data() {
return {
internalModel: this.copyModel(this.modelValue),
@ -135,10 +136,6 @@ export default {
return { ...modelToCopy };
},
setServiceZipCode(serviceZipCode) {
this.internalModel.serviceZipCode = serviceZipCode;
},
openModal() {
this.$refs[this.modalName].openModal();
},

217
src/layouts/service-location/service-location.spec.js
View file

@ -4,24 +4,38 @@ import serviceLocation from "@/layouts/service-location/service-location.vue";
// Supporting files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper";
import baseMixin from "@/mixins/base-mixin";
import { nextTick } from "vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { getMobileFee } from "@/helpers/service-location-helper";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
// Define Mocks
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(() => {
return Promise.resolve("content");
}),
}));
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
let mobileFeePart = {};
if (mockServiceZipCode === "43235") {
mobileFeePart = {
partNumber: "MOBILE FEE",
description: "MOBILE FEE",
partType: "FEE",
laborAmount: 49.99,
sellingPrice: 0,
kitPrice: 0,
};
}
return Promise.resolve(mobileFeePart);
};
jest.mock("@/helpers/service-location-helper", () => ({
getMobileFee: jest.fn(),
getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
return mockGetPricedMobileFeePart(mockServiceZipCode);
}),
}));
jest.mock("@/store", () => ({
@ -55,16 +69,43 @@ beforeEach(() => {
},
vehicle: {
registration: {
address: undefined,
city: undefined,
state: undefined,
zipCode: undefined,
address: "5555 Sulgrave Dr",
city: "New Albany",
state: "OH",
zipCode: "43054",
},
},
};
});
describe("service-location.vue", () => {
describe("beforeRouteEnter", () => {
test("on load sets the mobile fee part when an service zip code has already been provided", async () => {
// Arrange
const { wrapper } = setupMocks({});
const mobileFeePart = {
partNumber: "MOBILE FEE",
description: "MOBILE FEE",
partType: "FEE",
laborAmount: 49.99,
sellingPrice: 0,
kitPrice: 0,
};
// Act
await serviceLocation.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "serviceLocation" } },
undefined,
(c) => c(wrapper.vm)
);
// Assert
expect(wrapper.vm.mobileLocationQuestions.mobileFeePart).toStrictEqual(mobileFeePart);
});
});
describe("arePagePrerequisitesValid", () => {
test("No prerequisites set: Should return false.", () => {
const { wrapper } = setupMocks({});
@ -108,55 +149,147 @@ describe("service-location.vue", () => {
});
describe("updating service zip", () => {
test("resets mobile location when service zip code is updated", () => {
test("updates the page model after providing the service zip code", () => {
// Arrange
const { wrapper } = setupMocks({});
const newZip = "61606";
// Act
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.resetMobileLocation(newZip);
// Assert
expect(wrapper.vm.mobileLocationQuestions.serviceZipCode).toBe(newZip);
});
test.only("updates service zip code serviceZipCodeQuestion when resetServiceZipCode is called", () => {
// Arrange
const { wrapper } = setupMocks({});
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
isServiceable: true,
};
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
// Act
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.resetServiceZipCode(newServiceZipCodeQuestion);
serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
// Assert
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
});
test("resets mobile location in watch for serviceZipCodeQuestion", async () => {
test("resets mobile location when service zip code is updated", () => {
// Arrange
const { wrapper } = setupMocks({});
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Sulgrave Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "New Albany",
state: "OH",
zipCode: "43054",
},
isVehicleProtected: true,
serviceZipCode: "43054",
mobileFee: 0,
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
serviceZipCode: "43081",
};
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
// Act
serviceZipCodeComponent.vm.$emit("updated-service-zip-code", "43081");
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
});
});
describe("updating mobile location", () => {
test("updates the page model after providing the mobile location", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
serviceZipCode: "43081",
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Sulgrave Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "New Albany",
state: "OH",
zipCode: "43054",
},
isVehicleProtected: true,
serviceZipCode: "43054",
mobileFee: 0,
};
const mobileLocationComponent = wrapper.findComponent({
ref: "mobileLocationModalQuestions",
});
// Act
mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions);
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
});
test("resets service zip code when mobile location is updated", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
const serviceZipCodeInfo = {
state: "OH",
zipCode: "43054",
isServiceable: true,
};
// Act
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.serviceZipCodeQuestion = newServiceZipCodeQuestion;
const newServiceZipCodeInfo = {
state: "OH",
zipCode: "43081",
isServiceable: true,
};
wrapper.vm.serviceZipCodeQuestion = serviceZipCodeInfo;
await wrapper.vm.$nextTick();
const mobileLocationComponent = wrapper.findComponent({
ref: "mobileLocationModalQuestions",
});
// Act
mobileLocationComponent.vm.$emit("updated-zip-code", {
state: "OH",
zipCode: "43081",
isServiceable: true,
});
// Assert
expect(wrapper.vm.mobileLocationQuestions.serviceZipCode).toStrictEqual(
newServiceZipCodeQuestion.zipCode
);
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
});
});
});
@ -166,10 +299,6 @@ function setupMocks({ mountOptionsMockData = {} }) {
const apiPromise = Promise.resolve(apiResponses);
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
getMobileFee.mockImplementation(() => Promise.resolve());
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(serviceLocation, mountOptions);
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;

42
src/layouts/service-location/service-location.vue
View file

@ -6,7 +6,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion
v-model="serviceZipCodeQuestion"
@updated-service-zip-code="resetMobileFeePart"
@updated-service-zip-code="resetMobileLocation"
ref="serviceZipCodeQuestion"
linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget" />
@ -66,13 +66,13 @@ export default {
},
};
},
async beforeRouteEnter(to, from, next) {
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const serviceZipCode = store.getters.order.serviceLocation.zipCode;
const serviceZipCode = store.getters.order.serviceLocation.zipCode;
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
// Settle promises and get results
const promiseResultMap = [
{
@ -86,9 +86,7 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
console.log(resultMap);
console.log(resultMap.cmsContent);
console.log(resultMap.mobileFeePart);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
@ -97,12 +95,11 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
return true;
// (
// store.getters.lineItems.supportingItems !== null &&
// store.getters.order.serviceLocation.zipCode !== null &&
// store.getters.payment.isInsurance !== null
// );
return (
store.getters.lineItems.supportingItems !== null &&
store.getters.order.serviceLocation.zipCode !== null &&
store.getters.payment.isInsurance !== null
);
},
setData(mobileFeePart) {
if (mobileFeePart) {
@ -149,11 +146,13 @@ export default {
};
this.$refs.mobileLocationModalQuestions.resetComponent();
this.resetMobileFeePart(updatedServiceZipCode);
},
resetServiceZipCode(newValue) {
this.serviceZipCodeQuestion.state = newValue.state;
this.serviceZipCodeQuestion.zipCode = newValue.zipCode;
this.serviceZipCodeQuestion.isServiceable = newValue.isServiceable;
resetServiceZipCode(updatedServiceZipInfo) {
this.serviceZipCodeQuestion.state = updatedServiceZipInfo.state;
this.serviceZipCodeQuestion.zipCode = updatedServiceZipInfo.zipCode;
this.serviceZipCodeQuestion.isServiceable = updatedServiceZipInfo.isServiceable;
this.resetMobileFeePart(this.serviceZipCodeQuestion.zipCode);
},
@ -164,15 +163,6 @@ export default {
navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
},
},
watch: {
serviceZipCodeQuestion: {
handler(newValue, oldValue) {
if (newValue !== oldValue) {
this.resetMobileLocation(newValue.zipCode);
}
},
},
},
components: {
serviceZipModalQuestion,
mobileLocationModalQuestions,