diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 0a67c8c96..aaf221bd2 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -78,6 +78,10 @@ const endpoints = { url: "/parts/api/v1/parts/mobile-fee", method: "GET", }, + GetServiceabilityDetails: { + url: "/location/api/v1/location/serviceability-details", + method: "GET", + }, GetSupportingItems: { url: "/parts/api/v1/parts/supporting-items", method: "POST", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 2b7033e10..3fc664413 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -29,6 +29,7 @@ const storeActions = { GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: "getPartFromCapabilityQuestionAnswer", GET_MOLDING_QUESTIONS: "getMoldingQuestions", GET_MOBILE_FEE_PART: "getMobileFeePart", + GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails", SAVE_SESSION: "saveSession", LOAD_SESSION: "loadSession", UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse", diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index a948fe99a..e4d8692d4 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -92,7 +92,7 @@ describe("modal.vue", () => { wrapper.vm.resetButtonStyle = resetButtonStyle; // Act - const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); + const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" }); await buttonMain.trigger("click-event"); // Assert @@ -124,7 +124,7 @@ describe("modal.vue", () => { wrapper.vm.resetButtonStyle = resetButtonStyle; // Act - const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); + const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" }); await buttonMain.trigger("click-event"); // Assert diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 56b6c74d6..ba7e60eb6 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -26,10 +26,10 @@
- diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js index ba81a973f..157c28f2b 100644 --- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js +++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js @@ -28,3 +28,17 @@ export async function getPricedMobileFeePart(serviceZipCode) { return Promise.resolve(pricingResults[0]); } + +export async function getServiceabilityDetails(serviceZipCode, lineItems) { + // Get the Mobile Fee Part + const serviceabilityDetails = await baseMixin.methods.dispatchStoreAction( + storeActions.GET_SERVICEABILITY_DETAILS, + { + serviceZipCode: serviceZipCode, + lineItems: lineItems, + }, + false + ); + + return Promise.resolve(serviceabilityDetails); +} diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js index fbea693b9..66bd93799 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js @@ -110,12 +110,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => { return Promise.resolve(mobileFeePart); }; +const mockGetServiceabilityDetails = (mockServiceZipCode) => { + const serviceabilityDetails = { + isGlassServiceableInshop: true, + isRecalibrationServiceableInshop: true, + isGlassServiceableMobile: true, + isRecalibrationServiceableMobile: true, + }; + + return Promise.resolve(serviceabilityDetails); +}; + jest.mock( "@/layouts/service-location/helpers/service-location-helper/service-location-helper", () => ({ getPricedMobileFeePart: jest.fn((mockServiceZipCode) => { return mockGetPricedMobileFeePart(mockServiceZipCode); }), + getServiceabilityDetails: jest.fn((mockServiceZipCode) => { + return mockGetServiceabilityDetails(mockServiceZipCode); + }), }) ); diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 153521ea4..bbed9923d 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -61,7 +61,11 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location // Helpers import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper"; -import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; + +import { + getPricedMobileFeePart, + getServiceabilityDetails, +} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; export default { name: "mobile-location-modal-questions", @@ -157,6 +161,7 @@ export default { }, onModalClosed() { this.internalModel = deepClone(this.modelValue); + this.resetAlerts(); }, resetComponent(updatedServiceZipCodeInfo) { // Reset the validation form, setting the initial values @@ -175,6 +180,9 @@ export default { resetModalButtonStyle() { this.$refs[this.modalName].resetButtonStyle(); }, + resetAlerts() { + this.$refs.addressQuestions.displayVerificationWarning = false; + }, async setMobileLocation() { // Validate the Zip Code const zipCodeData = await this.getZipCodeData( @@ -187,11 +195,14 @@ export default { } else { // retrieve mobile fee part const serviceZipCode = this.internalModel.addressQuestions.zipCode; - const mobileFeePart = await getPricedMobileFeePart(serviceZipCode); - // emit additional data to parent + // retrieve serviceability details + const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode); + + // update content related to service zip code this.$emit("updated-mobile-fee-part", mobileFeePart); + this.$emit("updated-serviceability", serviceabilityDetails.data); this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); // Update the page level model diff --git a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue index f5754ea06..c1484500b 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue @@ -51,14 +51,11 @@ export default { diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index b48fa2f06..2a056c4d1 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -32,12 +32,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => { return Promise.resolve(mobileFeePart); }; +const mockGetServiceabilityDetails = (mockServiceZipCode) => { + const serviceabilityDetails = { + isGlassServiceableInshop: true, + isRecalibrationServiceableInshop: true, + isGlassServiceableMobile: true, + isRecalibrationServiceableMobile: true, + }; + + return Promise.resolve(serviceabilityDetails); +}; + jest.mock( "@/layouts/service-location/helpers/service-location-helper/service-location-helper", () => ({ getPricedMobileFeePart: jest.fn((mockServiceZipCode) => { return mockGetPricedMobileFeePart(mockServiceZipCode); }), + getServiceabilityDetails: jest.fn((mockServiceZipCode) => { + return mockGetServiceabilityDetails(mockServiceZipCode); + }), }) ); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 261e84521..d8167ad57 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -9,22 +9,37 @@ ref="serviceZipCodeQuestion" :mobileFeePart="mobileFeePart" @updated-mobile-fee-part="setMobileFeePart" + @updated-serviceability="setServiceabilityDetails" + @updated-contains-military-base="setContainsMilitaryBase" linkWidgetName="ServiceZipLinkWidget" - modalWidgetName="ServiceZipModalWidget" - @updated-contains-military-base="setContainsMilitaryBase" /> + modalWidgetName="ServiceZipModalWidget" /> + { vm.setCmsContent(resultMap.cmsContent); - vm.setData(resultMap.mobileFeePart); - vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase; - vm.zipCode = serviceZipCode; + vm.setData( + resultMap.zipCodeData, + resultMap.serviceabilityDetails, + resultMap.mobileFeePart + ); }); }, computed: { @@ -157,10 +190,10 @@ export default { }, }, showMilitaryZipAlert() { - return ( - this.zipContainsMilitaryBase && - (this.isZipServiceableMobile == null || this.isZipServiceableMobile === true) - ); + const isZipServiceableMobile = + this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile; + + return this.zipContainsMilitaryBase && isZipServiceableMobile; }, }, methods: { @@ -171,7 +204,15 @@ export default { store.getters.payment.isInsurance !== null ); }, - setData(mobileFeePart) { + setData(zipCodeData, serviceabilityDetails, mobileFeePart) { + if (zipCodeData) { + this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase; + } + + if (serviceabilityDetails) { + this.setServiceabilityDetails(serviceabilityDetails); + } + if (mobileFeePart) { this.mobileFeePart = mobileFeePart; } @@ -203,11 +244,13 @@ export default { this.isVehicleProtected = null; }, - setServiceZipCodeModalMeta(meta) { - this.serviceZipCodeMeta = meta; - }, - setMobileLocationModalMeta(meta) { - this.mobileLocationMeta = meta; + setServiceabilityDetails(serviceabilityDetails) { + this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop; + this.isRecalibrationServiceableInshop = + serviceabilityDetails.isRecalibrationServiceableInshop; + this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile; + this.isRecalibrationServiceableMobile = + serviceabilityDetails.isRecalibrationServiceableMobile; }, backButtonAction() { this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); @@ -219,6 +262,7 @@ export default { components: { alert, serviceZipModalQuestion, + serviceTypeQuestion, mobileLocationModalQuestions, funnelHeader, funnelFooter, @@ -229,3 +273,11 @@ export default { }, }; + + diff --git a/src/layouts/service-location/service-type-question/service-type-question.spec.js b/src/layouts/service-location/service-type-question/service-type-question.spec.js new file mode 100644 index 000000000..13b727c54 --- /dev/null +++ b/src/layouts/service-location/service-type-question/service-type-question.spec.js @@ -0,0 +1,185 @@ +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import serviceTypeQuestion from "./service-type-question"; + +const mockCmsContent = { + QuestionText: "Choose a service option:", + Answers: [ + { + AnswerImageUrl: "", + Name: "Mobile", + SubText: "", + SubWidgetName: "", + Text: "Mobile", + }, + { + AnswerImageUrl: "", + Name: "Inshop", + SubText: "", + SubWidgetName: "", + Text: "In-shop", + }, + { + AnswerImageUrl: "", + Name: "DropOff", + SubText: "", + SubWidgetName: "", + Text: "Drop-off", + }, + ], +}; + +const cmsWidgetName = "ServiceTypeQuestionWidget"; +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + if (widgetName === cmsWidgetName) { + return mockCmsContent[cmsFieldName]; + } + + return null; + }), + }, +}; + +describe("service-type-question.vue", () => { + it("Should display all options if both in-shop and mobile are available", async () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + cmsWidgetName: cmsWidgetName, + isGlassServiceableInshop: true, + isRecalibrationServiceableInshop: true, + isGlassServiceableMobile: true, + isRecalibrationServiceableMobile: true, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + // Assert + expect(wrapper.vm.answersToDisplay).toEqual([ + { + AnswerImageUrl: "", + Name: "Mobile", + SubText: "", + SubWidgetName: "", + Text: "Mobile", + }, + { + AnswerImageUrl: "", + Name: "Inshop", + SubText: "", + SubWidgetName: "", + Text: "In-shop", + }, + { + AnswerImageUrl: "", + Name: "DropOff", + SubText: "", + SubWidgetName: "", + Text: "Drop-off", + }, + ]); + }); + + it("Should display only the In-Shop and Drop-Off answers when only in-shop service is available", async () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + cmsWidgetName: cmsWidgetName, + isGlassServiceableInshop: true, + isRecalibrationServiceableInshop: true, + isGlassServiceableMobile: false, + isRecalibrationServiceableMobile: false, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + // Assert + expect(wrapper.vm.answersToDisplay).toEqual([ + { + AnswerImageUrl: "", + Name: "Inshop", + SubText: "", + SubWidgetName: "", + Text: "In-shop", + }, + { + AnswerImageUrl: "", + Name: "DropOff", + SubText: "", + SubWidgetName: "", + Text: "Drop-off", + }, + ]); + }); + + it("Should display only the Mobile answer when only mobile service is available", async () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + cmsWidgetName: cmsWidgetName, + isGlassServiceableInshop: false, + isRecalibrationServiceableInshop: false, + isGlassServiceableMobile: true, + isRecalibrationServiceableMobile: true, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + // Assert + expect(wrapper.vm.answersToDisplay).toEqual([ + { + AnswerImageUrl: "", + Name: "Mobile", + SubText: "", + SubWidgetName: "", + Text: "Mobile", + }, + ]); + }); + + it("Should display no answers if neither in-shop nor mobile service are available", async () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mixins: [mockMixin], + props: { + cmsWidgetName: cmsWidgetName, + isGlassServiceableInshop: false, + isRecalibrationServiceableInshop: false, + isGlassServiceableMobile: false, + isRecalibrationServiceableMobile: false, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + // Assert + expect(wrapper.vm.answersToDisplay).toEqual([]); + }); +}); + +function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) { + const resultingMountOptions = getMountOptions({ + ...mountOptions, + mixins, + }); + + if (props) resultingMountOptions.propsData = props; + + const wrapper = isShallowMount + ? shallowMount(serviceTypeQuestion, resultingMountOptions) + : mount(serviceTypeQuestion, resultingMountOptions); + + return { wrapper }; +} diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue new file mode 100644 index 000000000..4f1a36ac7 --- /dev/null +++ b/src/layouts/service-location/service-type-question/service-type-question.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js index 407e129cf..6c9cf42f5 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js @@ -33,12 +33,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => { return Promise.resolve(mobileFeePart); }; +const mockGetServiceabilityDetails = (mockServiceZipCode) => { + const serviceabilityDetails = { + isGlassServiceableInshop: true, + isRecalibrationServiceableInshop: true, + isGlassServiceableMobile: true, + isRecalibrationServiceableMobile: true, + }; + + return Promise.resolve(serviceabilityDetails); +}; + jest.mock( "@/layouts/service-location/helpers/service-location-helper/service-location-helper", () => ({ getPricedMobileFeePart: jest.fn((mockServiceZipCode) => { return mockGetPricedMobileFeePart(mockServiceZipCode); }), + getServiceabilityDetails: jest.fn((mockServiceZipCode) => { + return mockGetServiceabilityDetails(mockServiceZipCode); + }), }) ); 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 e94388e06..0698fc340 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 @@ -19,6 +19,7 @@ @footer-button-event="setZipCode"> @@ -39,7 +40,10 @@ import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-que import modal from "@/digital-components/modal/modal"; import alert from "@/ux-components/alert/alert"; -import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; +import { + getPricedMobileFeePart, + getServiceabilityDetails, +} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; export default { name: "service-zip-modal-question", @@ -146,12 +150,16 @@ export default { const serviceZipCode = this.internalModel.zipCode; const mobileFeePart = await getPricedMobileFeePart(serviceZipCode); - // emit it to parent + // retrieve serviceability details + const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode); + + // update content related to service zip code this.$emit("updated-mobile-fee-part", mobileFeePart); + this.$emit("updated-serviceability", serviceabilityDetails.data); + this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); // Update the page level model this.$emit("update:modelValue", this.internalModel); - this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); this.closeModal(); } diff --git a/src/store/index.js b/src/store/index.js index 9458b993d..24d9e5b84 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -43,6 +43,7 @@ const getDefaultState = () => { state: null, zipCode: null, zipCodeCtu: null, + serviceType: null, }, customer: { emailAddress: null, @@ -926,6 +927,16 @@ export const actions = { }); }, + getServiceabilityDetails(context, { serviceZipCode }) { + const lineItems = context.getters.order.lineItems; + const lineItemsToSend = [...lineItems.supportingItems]; + const encodedLineItems = encodeURIComponent(JSON.stringify(lineItemsToSend)); + return globalMethods.callHttpClient({ + method: endpoints.GetServiceabilityDetails.method, + endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`, + }); + }, + getSupportingItems(context) { const glassPartsArray = context.getters.lineItems.glassParts ?? []; const carId = context.getters.vehicle.carId; @@ -1653,3 +1664,12 @@ function getLineItemQueryStringForPricing(lineItems) { }) .join(""); } + +function getLineItemQueryStringForServiceability(lineItems) { + return lineItems + .map((lineItem) => { + let queryStringSnippet = `&lineItems=${lineItem.partNumber}`; + return queryStringSnippet; + }) + .join(""); +} diff --git a/src/ux-components/modal-button-main/modal-button-main.spec.js b/src/ux-components/modal-button-main/modal-button-main.spec.js new file mode 100644 index 000000000..f212d8ec3 --- /dev/null +++ b/src/ux-components/modal-button-main/modal-button-main.spec.js @@ -0,0 +1,187 @@ +import { shallowMount } from "@vue/test-utils"; +import modalButtonMain from "./modal-button-main"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { nextTick } from "vue"; + +describe("modal-button-main.vue", () => { + it("Should return btn-primary class", () => { + // Arrange/Act + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + isPrimary: true, + }, + }) + ); + const button = wrapper.find("button"); + + // Assert + expect(button.attributes("class")).toContain("btn-primary"); + }); + + it("Should return aria-disabled state", () => { + // Arrange/Act + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + isDisabled: true, + }, + }) + ); + const button = wrapper.find("button"); + + // Assert + expect(button.attributes()["aria-disabled"]).toEqual("true"); + }); + + it("Should return loader color", async () => { + // Arrange + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + loaderColor: "blue", + loaderEnabled: true, + }, + }) + ); + + // Act + wrapper.vm.clicked(); + await nextTick(); + + // Assert + const loader = wrapper.find("loader-stub"); + expect(loader.attributes("class")).toContain("blue"); + }); + + it("Should return loader position", async () => { + // Arrange + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + loaderPosition: "right", + loaderEnabled: true, + }, + }) + ); + + // Act + wrapper.vm.clicked(); + await nextTick(); + + // Assert + const loader = wrapper.find("loader-stub"); + expect(loader.attributes("class")).toContain("right"); + }); + + it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => { + // Arrange + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + loaderPosition: "right", + loaderEnabled: true, + }, + }) + ); + + wrapper.setData({ + isLoaderDisplayed: true, + }); + + // Act + wrapper.vm.removeLoader(); + await nextTick(); + + // Assert + const loader = wrapper.find("loader-stub"); + expect(wrapper.vm.isLoaderDisplayed).toBe(false); + }); + + it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => { + // Arrange + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + loaderPosition: "right", + loaderEnabled: true, + }, + }) + ); + + wrapper.setData({ + isLoaderDisplayed: true, + }); + + // Act + wrapper.vm.resetButtonStyle(); + await nextTick(); + + // Assert + expect(wrapper.vm.isLoaderDisplayed).toBe(false); + }); + + it("Should emit 'click-event' event when clicking if the button is enabled", async () => { + // Arrange + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + loaderPosition: "right", + loaderEnabled: true, + isDisabled: false, + }, + }) + ); + + const buttonElement = wrapper.find("button"); + + // Act + buttonElement.trigger("click"); + + await nextTick(); + + // Assert + expect(wrapper.emitted("click-event")).toBeTruthy(); + }); + + it("Should not emit 'click-event' event when clicking if the button is disabled", async () => { + // Arrange + const wrapper = shallowMount( + modalButtonMain, + setupMocks({ + propsData: { + loaderPosition: "right", + loaderEnabled: true, + isDisabled: true, + }, + }) + ); + + const buttonElement = wrapper.find("button"); + + // Act + buttonElement.trigger("click"); + + await nextTick(); + + // Assert + expect(wrapper.emitted("click-event")).toBeFalsy(); + }); +}); + +function setupMocks(mountOptionsMockData = {}) { + const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } }; + const baseMountOptions = getMountOptions( + Object.assign(defaultMountOptions, mountOptionsMockData) + ); + const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); + + return allMountOptions; +} diff --git a/src/ux-components/modal-button-main/modal-button-main.vue b/src/ux-components/modal-button-main/modal-button-main.vue new file mode 100644 index 000000000..eaffdf2d0 --- /dev/null +++ b/src/ux-components/modal-button-main/modal-button-main.vue @@ -0,0 +1,153 @@ + + + + +