diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index ae21dca2..e9f87bd4 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -35,17 +35,30 @@ @@ -73,7 +86,15 @@ export default { onModalClosedCallback: { type: Function }, - isButtonDisabled: Boolean + isButtonDisabled: Boolean, + useDefaultButton: { + type: Boolean, + default: true + }, + additionalClassesString: { + type: String, + default: null + } }, emits: ['footer-button-event', 'isModalOpened'], setup(props) { @@ -181,6 +202,16 @@ export default { z-index: 5; border-radius: 0; background-color: $gray-100; + + > .navigation-link { + color: $black; + font-weight: $font-weight-bold; + line-height: 1.625rem; + white-space: nowrap; + align-items: center; + text-decoration: underline; + text-underline-offset: .3125rem; + } } &.modal-component { .modal-dialog { diff --git a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap index d0ca1a73..f6f6b40f 100644 --- a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap +++ b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap @@ -2,6 +2,7 @@ exports[`coverageStatement.vue returns the initial data 1`] = ` Object { + "CANCEL_CLAIM_REF_NAME": "CancelClaimModal", "DEDUCTIBLE_MODAL_REF_NAME": "DeductibleModal", "RECAL_MODAL_REF_NAME": "RecalModal", "SITE_FOOTER_REF_NAME": "siteFooter", @@ -12,6 +13,7 @@ Object { }, "selectedProvider": "", "widget": Object { + "disclaimerText": "DisclaimerWidget", "explanatoryText": "ExplanatoryTextWidget", "nextStep": "NextStepsWidget", "serviceProviderQuestion": "ServiceProviderQuestion", diff --git a/src/layouts/coverage-statement/cancel-claim-modal/__snapshots__/cancel-claim-modal.spec.js.snap b/src/layouts/coverage-statement/cancel-claim-modal/__snapshots__/cancel-claim-modal.spec.js.snap new file mode 100644 index 00000000..0efddf79 --- /dev/null +++ b/src/layouts/coverage-statement/cancel-claim-modal/__snapshots__/cancel-claim-modal.spec.js.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`returns the initial data 1`] = ` +Object { + "isLoaderDisplayed": false, + "isModalOpened": false, +} +`; diff --git a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.spec.js b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.spec.js new file mode 100644 index 00000000..06e26dba --- /dev/null +++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.spec.js @@ -0,0 +1,88 @@ +import { shallowMount } from '@vue/test-utils'; +import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue'; + +const mockDataStrings = { + cmsBodyText: 'Some Body Text from CMS', + cmsBodyText2: 'Some Text for Button in Body from CMS', + cmsFooterText: 'Some Footer Text from CMS', + cmsHeaderText: 'Some Header Text from CMS' +}; + +const mockCmsContent = { + BodyText: mockDataStrings.cmsBodyText, + BodyText2: mockDataStrings.cmsBodyText2, + FooterText: mockDataStrings.cmsFooterText, + HeaderText: mockDataStrings.cmsHeaderText +}; + +const mockMixin = { + methods: { + getCmsContent: jest.fn((_, cmsFieldName) => mockCmsContent[cmsFieldName]) + } +}; + +function setupMocks() { + const wrapper = shallowMount(cancelClaimModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: 'test' + }, + attachTo: document.body + }); + + return { wrapper }; +} + +test('returns the initial data', () => { + // Arrange + const { wrapper } = setupMocks(); + + // Assert + expect(wrapper.vm.$data).toMatchSnapshot(); +}); + +describe('Computed', () => { + test('Should get modal body text from Widget CMS', () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + const modalHeader = wrapper.vm.modalBodyText; + + // Assert + expect(modalHeader).toBe(mockDataStrings.cmsBodyText); + }); + + test('Should get modal body text2 from Widget CMS', () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + const modalHeader = wrapper.vm.modalBodyText2; + + // Assert + expect(modalHeader).toBe(mockDataStrings.cmsBodyText2); + }); + + test('Should get modal footer text from Widget CMS', () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + const modalHeader = wrapper.vm.modalFooterText; + + // Assert + expect(modalHeader).toBe(mockDataStrings.cmsFooterText); + }); + + test('Should get modal header text from Widget CMS', () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + const modalHeader = wrapper.vm.modalHeaderText; + + // Assert + expect(modalHeader).toBe(mockDataStrings.cmsHeaderText); + }); +}); diff --git a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue new file mode 100644 index 00000000..f5d0df9d --- /dev/null +++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue @@ -0,0 +1,102 @@ + + + + + + diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js index 048c8bd5..bde3197d 100644 --- a/src/layouts/coverage-statement/coverage-statement.spec.js +++ b/src/layouts/coverage-statement/coverage-statement.spec.js @@ -27,6 +27,7 @@ jest.mock('@/helpers/cms-content-helper', () => ({ })); const SAFELITE_PROVIDER = 'Safelite'; +const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal'; const mockMixin = { methods: { @@ -91,6 +92,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); const wrapper = shallowMount(coverageStatement, mountOptions); + wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal = jest.fn(); return { wrapper }; } diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index 41f6d3b8..5d3dee3a 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -71,9 +71,9 @@ isRequired :validationRules="rules.selectionRequired"> - +