diff --git a/src/constants/bailoutCode.js b/src/constants/bailoutCode.js index 5ec4d476..6e4dd986 100644 --- a/src/constants/bailoutCode.js +++ b/src/constants/bailoutCode.js @@ -6,7 +6,8 @@ const bailoutCode = Object.freeze({ CoverageStatementInvalidState: 4, DoNotSeeMyShop: 5, PricingResponseError: 6, - TPANotEnabled: 7 + TPANotEnabled: 7, + RequestCallback: 8 }); export default bailoutCode; diff --git a/src/constants/bailoutMessage.js b/src/constants/bailoutMessage.js index f4d204b6..5d8df6be 100644 --- a/src/constants/bailoutMessage.js +++ b/src/constants/bailoutMessage.js @@ -44,6 +44,10 @@ const bailoutMessage = Object.freeze({ TPANotEnabled: () => ({ code: bailoutCode.TPANotEnabled, message: 'User selected TPA when TPA is not enabled for this client' + }), + RequestCallback: () => ({ + code: bailoutCode.RequestCallback, + message: 'User selected option to receive callback from Safelite' }) }); diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index 2d8c6add..c9c98e7b 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -6,12 +6,11 @@ v-for="copy in splitCopyOnCMSPlaceHolder(textBlockCopy)" :key="copy"> - + {{ getRouterLinkDisplayTextFromCopy(copy) }} jest.fn()); + +jest.mock('@/helpers/cms-content-helper', () => ({ + fetchCmsContentForPage: jest.fn(), + processIfStatements: jest.fn(), + doesCopyContainRouterLink: jest.fn(), + splitCopyOnCMSPlaceHolder: jest.fn().mockImplementation(() => 'test'), + getRouterLinkRouteFromCopy: jest.fn(), + getRouterLinkDisplayTextFromCopy: jest.fn(), + doesCopyContainTextLink: jest.fn() +})); + +const mockMixin = { + methods: { + getCmsContent: jest.fn().mockImplementation(() => ''), + setCmsContent: jest.fn() + } +}; + +const footerStub = { + render: () => {}, + methods: { + updateButtonText: jest.fn() + } +}; + +function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}) { + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn() + } + }); + + mountOptions.global.stubs = { + siteFooter: footerStub + }; + const testingPinia = createTestingPinia({ + initialState: { + main: mainInitialState + } + }); + useMainStore(testingPinia); + methodToRun(); + + mountOptions.global.plugins = [testingPinia]; + mountOptions.mixins = [mockMixin]; + mountOptions.data = () => ( + initialData + ); + + const apiResponses = { + supportingItems: [] + }; + const apiPromise = Promise.resolve(apiResponses); + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + const wrapper = mount(tpaConfirmation, mountOptions); + return { wrapper }; +} + +describe('TPAConfirmation.vue', () => { + describe('Rendering', () => { + test('Should render Site Header', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const siteHeader = wrapper.findComponent({ ref: 'siteHeader' }); + + // Assert + expect(siteHeader.exists()).toBe(true); + }); + test('Should render Vehicle Banner', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' }); + + // Assert + expect(vehicleBanner.exists()).toBe(true); + }); + test('Should render Confirmation Body One', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const bodyOne = wrapper.findComponent({ ref: 'tpaConfirmationBodyOne' }); + + // Assert + expect(bodyOne.exists()).toBe(true); + }); + test('Should render Confirmation Body Two', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const bodyTwo = wrapper.findComponent({ ref: 'tpaConfirmationBodyTwo' }); + + // Assert + expect(bodyTwo.exists()).toBe(true); + }); + test('Should render Contact Carrier text', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const contactCarrierText = wrapper.findComponent({ ref: 'contactCarrierText' }); + + // Assert + expect(contactCarrierText.exists()).toBe(true); + }); + test('Should render Order Details title', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const orderDetailsTitle = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsTitle' }); + + // Assert + expect(orderDetailsTitle.exists()).toBe(true); + }); + test('Should render Order Details body', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const orderDetailsBody = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsBody' }); + + // Assert + expect(orderDetailsBody.exists()).toBe(true); + }); + test('Should render Deductible Box', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const deductibleBox = wrapper.findComponent({ ref: 'deductibleBox' }); + + // Assert + expect(deductibleBox.exists()).toBe(true); + }); + test('Should render Site Footer', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); + + // Assert + expect(siteFooter.exists()).toBe(true); + }); + }); + describe('Computed properties', () => { + describe('Deductible Box value', () => { + test('Should return "Verifying coverage" when isVerified false', () => { + // Arrange + const initialStore = { + order: { + payment: { + insuranceCoverage: { isVerified: false } + } + } + }; + const { wrapper } = getMountedComponent(initialStore); + const expected = 'Verifying coverage'; + + // Assert + expect(wrapper.vm.deductibleBoxValue).toBe(expected); + }); + test('Should return deductible value when isVerified true', () => { + // Arrange + const currentDeductible = '500'; + const initialStore = { + order: { + payment: { + insuranceCoverage: { isVerified: true } + }, + currentDeductible + } + }; + const { wrapper } = getMountedComponent(initialStore); + const notExpected = 'Verifying coverage'; + + // Assert + expect(wrapper.vm.deductibleBoxValue).not.toBe(notExpected); + }); + }); + }); + describe('Methods', () => { + describe('getCustomValueFromString', () => { + describe('with argument deductibleAboveZero', () => { + test.each([ + [false], + [true] + ])( + 'returns false when isVerified %p and currentDeductible is zero', + (isVerified) => { + // Arrange + const initialStore = { + order: { + payment: { + insuranceCoverage: { isVerified } + }, + currentDeductible: 0 + } + }; + const { wrapper } = getMountedComponent(initialStore); + const argument = 'deductibleAboveZero'; + + // Act + const result = wrapper.vm.getCustomValueFromString(argument); + + // Assert + expect(result).toBe(false); + } + ); + test.each([ + [true, true], + [false, false] + ])( + 'returns %p when isVerified %p and currentDeductible is not zero', + (expected, isVerified) => { + // Arrange + const initialStore = { + order: { + payment: { + insuranceCoverage: { isVerified } + }, + currentDeductible: 500 + } + }; + const { wrapper } = getMountedComponent(initialStore); + const argument = 'deductibleAboveZero'; + + // Act + const result = wrapper.vm.getCustomValueFromString(argument); + + // Assert + expect(result).toBe(expected); + } + ); + }); + describe('with argument zeroDeductible', () => { + test.each([ + [true, true], + [false, false] + ])( + 'returns %p when isVerified is %p currentDeductible is zero', + (expected, isVerified) => { + // Arrange + const initialStore = { + order: { + payment: { + insuranceCoverage: { isVerified } + }, + currentDeductible: 0 + } + }; + const { wrapper } = getMountedComponent(initialStore); + const argument = 'zeroDeductible'; + + // Act + const result = wrapper.vm.getCustomValueFromString(argument); + + // Assert + expect(result).toBe(expected); + } + ); + test.each([ + [false], + [true] + ])( + 'returns false when isVerified is %p currentDeductible is not zero', + (isVerified) => { + // Arrange + const initialStore = { + order: { + payment: { + insuranceCoverage: { isVerified } + }, + currentDeductible: 250 + } + }; + const { wrapper } = getMountedComponent(initialStore); + const argument = 'zeroDeductible'; + + // Act + const result = wrapper.vm.getCustomValueFromString(argument); + + // Assert + expect(result).toBe(false); + } + ); + }); + describe('with argument verifyingCoverage', () => { + test.each([ + [true, false], + [false, true] + ])( + 'with argument verifyingCoverage returns %p when isVerified %p', + (expected, isVerified) => { + // Arrange + const initialStore = { + order: { + payment: { + insuranceCoverage: { isVerified } + }, + currentDeductible: 26 + } + }; + const { wrapper } = getMountedComponent(initialStore); + const argument = 'verifyingCoverage'; + + // Act + const result = wrapper.vm.getCustomValueFromString(argument); + + // Assert + expect(result).toBe(expected); + } + ); + }); + }); + describe('setBailoutInfo', () => { + test('setBailout method is called when routerLink clicked', async () => { + // Arrange + const { wrapper } = getMountedComponent({}); + const contactCarrierText = wrapper.get('#contactCarrierText'); + + // Act + await contactCarrierText.trigger('click'); + + // Assert + expect(wrapper.vm.mainStore.setBailout).toHaveBeenCalledWith( + wrapper.vm.$router.currentRoute, + bailoutMessage.RequestCallback + ); + }); + }); + // TODO: Add tests for forward navigation to carrier URL - card SSR-1107 + describe('Navigation', () => { + // test('Forward button action, navigate forward with CLICKED_FORWARD scenario', () => { + // // Arrange + // const { wrapper } = getMountedComponent({}); + + // // Act + // wrapper.vm.forwardButtonAction(); + + // // Assert + // expect(wrapper.vm.$router.navigate) + // .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD); + // }); + }); + }); +}); diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue index 5a0cf4d2..24460ba0 100644 --- a/src/layouts/tpa-confirmation/tpa-confirmation.vue +++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue @@ -6,15 +6,59 @@ @invalidSubmit="onInvalidSubmit">
- -
-

Placeholder for tpa-confirmation page

+ +
+ +
+ + +
+
+ +
+ + + +
+ + + +
+ ref="siteFooter" + cmsWidgetName="SiteFooterWidget" + :isForwardActionDisabled="!meta.valid" + @ForwardClicked="forwardButtonAction" + @backClicked="navigateBack" />
@@ -23,19 +67,30 @@ diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index cdea5263..9a4bbaa2 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -64,7 +64,7 @@ import vinLocationInformation from '@/layouts/vin-lookup/vin-location-informatio import vinLookupAlerts from '@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue'; import vinQuestion from '@/layouts/vin-lookup/vin-question/vin-question.vue'; import bailoutCode from '@/constants/bailoutCode'; -import bailoutMessage from "@/constants/bailoutMessage"; +import bailoutMessage from '@/constants/bailoutMessage'; export default { name: 'vin-lookup',