diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index 2664accfa..40c1fd44a 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -1,68 +1,31 @@ import { shallowMount } from "@vue/test-utils"; import Modal from "./modal"; +const modalId = "modal-one"; +const footerButtonText = "Sample footer text here."; +const headerText = "Sample header text here."; + describe("modal.vue", () => { - it("Should display header text when HeaderText is defined in the CMS", async () => { - // Act + it("Should display footer button text when footerButtonText is defined", async () => { const wrapper = shallowMount(Modal, { - mixins: [mockMixin], props: { - cmsWidgetName: "test", + modalId: modalId, + footerButtonText: footerButtonText, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"])); + expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText)); }); - it("Should display subheader text when SubheaderText is defined in the CMS", async () => { - // Act + it("Should display modal header text when headerText is defined", async () => { const wrapper = shallowMount(Modal, { - mixins: [mockMixin], props: { - cmsWidgetName: "test", + modalId: modalId, + footerButtonText: footerButtonText, + headerText: headerText, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"])); - }); - - it("Should insert image url when Image is defined in the CMS", async () => { - // Act - const wrapper = shallowMount(Modal, { - mixins: [mockMixin], - props: { - cmsWidgetName: "test", - }, - attachTo: document.body, - }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"])); - }); - - it("Should display body text when BodyText is defined in the CMS", async () => { - // Act - const wrapper = shallowMount(Modal, { - mixins: [mockMixin], - props: { - cmsWidgetName: "test", - }, - attachTo: document.body, - }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"])); - }); + expect(wrapper.html()).toEqual(expect.stringContaining(headerText)); + }); }); - -const mockMixin = { - methods: { - getCmsContent: jest.fn((widgetName, cmsFieldName) => { - return mockCmsContent[cmsFieldName]; - }), - }, -}; - -const mockCmsContent = { - HeaderText: "Sample header text here.", - SubheaderText: "Sample subheader text here.", - Image: "https://www.sampleImage.sample", - BodyText: "Sample body text here.", - FooterText: "Sample footer text here.", -}; diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 89ff1f8ed..0a87d1633 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -30,7 +30,7 @@ isPrimary class="w-100" ref="buttonMain" - suppressLoader + loaderColor="white" :buttonText="footerButtonText" @click-event="validateAndEmit" /> @@ -58,8 +58,12 @@ export default { }, methods: { async validateAndEmit() { - const validationResult = await this.modalForm.validate(); - if (validationResult.valid) { + if (this.modalForm) { + const validationResult = await this.modalForm.validate(); + if (validationResult.valid) { + this.$emit("footer-button-event"); + } + } else { this.$emit("footer-button-event"); } diff --git a/src/fmg-components/content-group-modal/content-group-modal.spec.js b/src/fmg-components/content-group-modal/content-group-modal.spec.js index 81946c2d0..a8058b2d5 100644 --- a/src/fmg-components/content-group-modal/content-group-modal.spec.js +++ b/src/fmg-components/content-group-modal/content-group-modal.spec.js @@ -1,3 +1,64 @@ +import { mount } from "@vue/test-utils"; +import contentGroupModal from "./content-group-modal"; + describe("content-group-modal.vue", () => { - test.todo("test this"); + it("Should display header text when HeaderText is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"])); + }); + + it("Should display subheader text when SubheaderText is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"])); + }); + + it("Should insert image url when Image is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"])); + }); + + it("Should display body text when BodyText is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"])); + }); }); + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return mockCmsContent[cmsFieldName]; + }), + }, +}; + +const mockCmsContent = { + HeaderText: "Sample header text here.", + SubheaderText: "Sample subheader text here.", + Image: "https://www.sampleImage.sample", + BodyText: "Sample body text here.", + FooterText: "Sample footer text here.", +}; 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 d06c4dfda..8f0cbd049 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 @@ -22,7 +22,7 @@ :onModalOpenedCallback="onModalOpened" :footerButtonText="footerButtonText" :headerText="textboxQuestionPrompt" - @footer-button-event="setZip" + @footer-button-event="setZipCode" :modalForm="modalForm">