diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index 5631b44c7..3c3f776c1 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -25,6 +25,7 @@ const errorMessages = { "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q", OPTION_REQUIRED: "Please select an option", VEHICLE_REQUIRED: "Please select a vehicle", + MOBILE_LOCATION_REQUIRED: "Please enter your service address", }; export { errorMessages }; diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index b738ac6ae..a948fe99a 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -1,16 +1,14 @@ jest.mock("vee-validate", () => ({ useForm: jest.fn(), - useIsFormTouched: jest.fn(), - useIsFormDirty: jest.fn(), - useIsFormValid: jest.fn(), })); const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue })); +const mockMeta = (returnValue) => jest.fn(async () => Promise.resolve(returnValue)); import { shallowMount } from "@vue/test-utils"; import modal from "./modal"; import crypto from "crypto"; -import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate"; +import { useForm } from "vee-validate"; import { Modal } from "bootstrap"; const footerButtonText = "Sample footer text here."; @@ -21,6 +19,18 @@ global.crypto = crypto; describe("modal.vue", () => { it("Should display modal header text when headerText is defined", async () => { // Arrange / Act + const fakeMeta = { + touched: true, + dirty: true, + valid: true, + validated: true, + }; + + useForm.mockReturnValue({ + meta: mockMeta(fakeMeta), + validate: mockValidate(true), + }); + const wrapper = shallowMount(modal, { props: { headerText: headerText, @@ -35,6 +45,17 @@ describe("modal.vue", () => { it("Should display footer button text when footerButtonText is defined", async () => { // Arrange / Act + const fakeMeta = { + touched: true, + dirty: true, + valid: true, + validated: true, + }; + + useForm.mockReturnValue({ + meta: mockMeta(fakeMeta), + validate: mockValidate(true), + }); const wrapper = shallowMount(modal, { props: { footerButtonText: footerButtonText, @@ -48,7 +69,15 @@ describe("modal.vue", () => { it("Should emit 'footer-button-event' if the form is valid", async () => { // Arrange + const fakeMeta = { + touched: true, + dirty: true, + valid: true, + validated: true, + }; + useForm.mockReturnValue({ + meta: mockMeta(fakeMeta), validate: mockValidate(true), }); @@ -72,7 +101,15 @@ describe("modal.vue", () => { it("Should not emit 'footer-button-event' if the form is invalid", async () => { // Arrange + const fakeMeta = { + touched: true, + dirty: true, + valid: false, + validated: true, + }; + useForm.mockReturnValue({ + meta: mockMeta(fakeMeta), validate: mockValidate(false), }); @@ -96,11 +133,17 @@ describe("modal.vue", () => { it("Should have a disabled footer button when the form has not been touched", async () => { // Arrange / Act - useForm.mockReturnValue({ - validate: mockValidate(false), - }); + const fakeMeta = { + touched: true, + dirty: true, + valid: true, + validated: true, + }; - useIsFormTouched.mockReturnValue(false); + useForm.mockReturnValue({ + meta: mockMeta(fakeMeta), + validate: mockValidate(true), + }); const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { @@ -118,13 +161,17 @@ describe("modal.vue", () => { it("Should have a disabled footer button when the form is invalid", async () => { // Arrange / Act - useForm.mockReturnValue({ - validate: mockValidate(false), - }); + const fakeMeta = { + touched: true, + dirty: true, + valid: true, + validated: true, + }; - useIsFormTouched.mockReturnValue(true); - useIsFormDirty.mockReturnValue(true); - useIsFormValid.mockReturnValue(false); + useForm.mockReturnValue({ + meta: mockMeta(fakeMeta), + validate: mockValidate(true), + }); const resetButtonStyle = jest.fn(); const wrapper = shallowMount(modal, { @@ -142,12 +189,17 @@ describe("modal.vue", () => { it("Should call bootstrap Modal method 'show' when calling 'openModal'", async () => { // Arrange - useForm.mockReturnValue({ - validate: mockValidate(false), - }); + const fakeMeta = { + touched: true, + dirty: true, + valid: true, + validated: true, + }; - useIsFormDirty.mockReturnValue(true); - useIsFormValid.mockReturnValue(true); + useForm.mockReturnValue({ + meta: mockMeta(fakeMeta), + validate: mockValidate(true), + }); const showMock = jest.spyOn(Modal.prototype, "show"); @@ -170,13 +222,17 @@ describe("modal.vue", () => { it("Should call bootstrap Modal method 'hide' when calling 'closeModal'", async () => { // Arrange + const fakeMeta = { + touched: true, + dirty: true, + valid: true, + validated: true, + }; + useForm.mockReturnValue({ - validate: mockValidate(false), + meta: mockMeta(fakeMeta), + validate: mockValidate(true), }); - - useIsFormDirty.mockReturnValue(true); - useIsFormValid.mockReturnValue(true); - const hideMock = jest.spyOn(Modal.prototype, "hide"); const resetButtonStyle = jest.fn(); diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index ae475c853..56b6c74d6 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -43,7 +43,7 @@ diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 3861ff01d..e94388e06 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -38,7 +38,7 @@ import textLink from "@/ux-components/text-link/text-link"; 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"; -import store from "@/store"; + import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; export default { @@ -96,49 +96,39 @@ export default { resetAlerts() { this.displayInvalidZipAlert = false; }, - resetsOnZipInput() { this.resetAlerts(); }, - focusOnZipInput() { const input = document.getElementById(this.serviceZipCodeTextInputId); input?.focus(); }, - copyModel(modelToCopy) { return { state: modelToCopy.state, zipCode: modelToCopy.zipCode, }; }, - openModal() { this.$refs[this.modalName].openModal(); }, - closeModal() { this.$refs[this.modalName].closeModal(); }, - resetModalButtonStyle() { this.$refs[this.modalName].resetButtonStyle(); }, - onInputIdAssigned(inputId) { this.serviceZipCodeTextInputId = inputId; }, - onModalOpened() { this.internalModel.zipCode = this.modelValue.zipCode; this.focusOnZipInput(); }, - onModalClosed() { this.internalModel.zipCode = this.modelValue.zipCode; this.resetsOnZipInput(); }, - async setZipCode() { if (this.internalModel.zipCode !== this.modelValue.zipCode) { this.resetAlerts();