CSR-1012 unit testing for service-zip-modal-question
This commit is contained in:
Matt Caimi
parent
cd9a589110
commit
8af9381771
3 changed files with 270 additions and 13 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { mount } from "@vue/test-utils";
|
||||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import serviceZipModalQuestion from "./service-zip-modal-question";
|
||||
import crypto from "crypto";
|
||||
global.crypto = crypto;
|
||||
|
|
@ -9,6 +9,12 @@ jest.mock("@/digital-components/textbox-question/textbox-question", () => ({
|
|||
}),
|
||||
}));
|
||||
|
||||
jest.mock("@/digital-components/modal/modal", () => ({
|
||||
methods: {
|
||||
closeModal: jest.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
const linkWidgetName = "linkWidgetName";
|
||||
const modalWidgetName = "modalWidgetName";
|
||||
const textboxQuestionWidgetName = "textboxQuestionWidgetName";
|
||||
|
|
@ -44,41 +50,287 @@ const mockMixin = {
|
|||
}),
|
||||
|
||||
getZipCodeData: jest.fn((zip) => {
|
||||
if (zip === "43235") {
|
||||
return {
|
||||
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 {
|
||||
isValid: true,
|
||||
state: "OH",
|
||||
isServiceable: true,
|
||||
containsMilitaryBase: false,
|
||||
isServiceable: false,
|
||||
isValid: false,
|
||||
state: null,
|
||||
zipCodeCtu: null,
|
||||
};
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
describe("service-zip-modal-question.vue", () => {
|
||||
it("Should display text from textboxQuestionWidget", async () => {
|
||||
it("Initial state on load with no existing location info", async () => {
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "",
|
||||
zipCode: "",
|
||||
isServiceable: undefined,
|
||||
};
|
||||
|
||||
// Arrange
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
expect(wrapper.html()).toEqual(
|
||||
expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"])
|
||||
);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.html()).toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"]));
|
||||
});
|
||||
|
||||
it("Should display footer text from modalWidget", async () => {
|
||||
it("Initial state on load with existing location info", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "OH",
|
||||
zipCode: "43235",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
expect(wrapper.html()).toEqual(expect.stringContaining(mockModalCmsContent["FooterText"]));
|
||||
|
||||
// Assert
|
||||
expect(wrapper.html()).not.toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"]));
|
||||
});
|
||||
|
||||
it("Should emit update:modelValue on setZipCode for a valid, serviceable zip", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "IL",
|
||||
zipCode: "61606",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const zip = "43235";
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.internalModel.zipCode = zip;
|
||||
await wrapper.vm.setZipCode();
|
||||
|
||||
let expectedEmit = [[{ isServiceable: true, state: "OH", zipCode: "43235" }]];
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
|
||||
});
|
||||
|
||||
it("Should not emit update:modelValue on setZipCode for an invalid zip", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "IL",
|
||||
zipCode: "61606",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const zip = "";
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.internalModel.zipCode = zip;
|
||||
await wrapper.vm.setZipCode();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted("update:modelValue")).not.toBeTruthy();
|
||||
});
|
||||
|
||||
it("Should emit service-zip-updated on setZipCode for a valid, serviceable zip", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "IL",
|
||||
zipCode: "61606",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const zip = "43235";
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.internalModel.zipCode = zip;
|
||||
await wrapper.vm.setZipCode();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted("service-zip-updated")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("Should not emit service-zip-updated on setZipCode for an invalid zip", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "IL",
|
||||
zipCode: "61606",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const zip = "";
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.internalModel.zipCode = zip;
|
||||
await wrapper.vm.setZipCode();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted("service-zip-updated")).not.toBeTruthy();
|
||||
});
|
||||
|
||||
it("Should display invalid zip alerts for invalid ip inputs", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "IL",
|
||||
zipCode: "61606",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const zip = "11111";
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.internalModel.zipCode = zip;
|
||||
await wrapper.vm.setZipCode();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
|
||||
});
|
||||
|
||||
it("Should reset all alerts on onModalClosed", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "IL",
|
||||
zipCode: "61606",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const zip = "";
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.internalModel.zipCode = zip;
|
||||
await wrapper.vm.setZipCode();
|
||||
wrapper.vm.onModalClosed();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
|
||||
});
|
||||
|
||||
it("Should prepopulate the zip on onModalOpened", async () => {
|
||||
// Arrange
|
||||
let serviceZipCodeQuestion = {
|
||||
state: "IL",
|
||||
zipCode: "61606",
|
||||
isServiceable: true,
|
||||
};
|
||||
|
||||
const zip = "123";
|
||||
|
||||
const wrapper = mount(serviceZipModalQuestion, {
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
modelValue: serviceZipCodeQuestion,
|
||||
linkWidgetName: linkWidgetName,
|
||||
modalWidgetName: modalWidgetName,
|
||||
textboxQuestionWidgetName: textboxQuestionWidgetName,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.internalModel.zipCode = zip;
|
||||
wrapper.vm.onModalOpened();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.internalModel.zipCode).toEqual("61606");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<script>
|
||||
// Components
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question";
|
||||
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
|
||||
|
|
@ -86,12 +86,11 @@ export default {
|
|||
|
||||
resetsOnZipInput() {
|
||||
this.resetAlerts();
|
||||
this.$refs[this.modalName].resetButtonStyle();
|
||||
},
|
||||
|
||||
focusOnZipInput() {
|
||||
const input = document.getElementById(this.serviceZipCodeTextInputId);
|
||||
input.focus();
|
||||
input?.focus();
|
||||
},
|
||||
|
||||
copyModel(modelToCopy) {
|
||||
|
|
@ -118,9 +117,15 @@ export default {
|
|||
},
|
||||
|
||||
onModalOpened() {
|
||||
this.internalModel.zipCode = this.modelValue.zipCode;
|
||||
this.focusOnZipInput();
|
||||
},
|
||||
|
||||
onModalClosed() {
|
||||
this.internalModel.zipCode = this.modelValue.zipCode;
|
||||
this.resetsOnZipInput();
|
||||
},
|
||||
|
||||
async setZipCode() {
|
||||
this.resetAlerts();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue