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

CSR-1012 | modal loader and improved validation

Browse source
This commit is contained in:
Matt Caimi 2023-02-07 14:36:07 -05:00
parent 1937b30057
commit 66f1a0039f
4 changed files with 90 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/digital-components/modal/modal.spec.js
View file

@ -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.",
};

10
src/digital-components/modal/modal.vue
View file

@ -30,7 +30,7 @@
isPrimary
class="w-100"
ref="buttonMain"
suppressLoader
loaderColor="white"
:buttonText="footerButtonText"
@click-event="validateAndEmit" />
</div>
@ -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");
}

63
src/fmg-components/content-group-modal/content-group-modal.spec.js
View file

@ -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.",
};

10
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -22,7 +22,7 @@
:onModalOpenedCallback="onModalOpened"
:footerButtonText="footerButtonText"
:headerText="textboxQuestionPrompt"
@footer-button-event="setZip"
@footer-button-event="setZipCode"
:modalForm="modalForm">
<textboxQuestion
ref="zipInputTextQuestion"
@ -128,7 +128,11 @@ export default {
this.focusOnZipInput();
},
async setZip() {
closeModal() {
this.$refs[this.modalName].closeModal();
},
async setZipCode() {
this.resetAlerts();
const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
@ -141,7 +145,7 @@ export default {
this.serviceZip = this.serviceZipCodeInput;
this.serviceZipState = zipCodeData.state;
this.$refs[this.modalName].closeModal();
this.closeModal();
}
},
},