diff --git a/src/helpers/text-helper.js b/src/helpers/text-helper.js index b35f4803..c16f2143 100644 --- a/src/helpers/text-helper.js +++ b/src/helpers/text-helper.js @@ -34,7 +34,7 @@ export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) { * @returns {string} */ export function toTitleCase(text) { - let temp = text.toLowerCase(); + let temp = text?.toLowerCase() ?? ''; return temp.replace(/(^|\s|-)\S/g, (letter) => letter.toUpperCase()); } diff --git a/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap index 42ed6d08..7eeae7cd 100644 --- a/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap +++ b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap @@ -2,24 +2,20 @@ exports[`tpa-submit returns the initial data 1`] = ` Object { - "companyName": "Frederick Jones", - "customValueMap": Object { - "glassShop": "Frederick Jones", + "modalPositions": Object { + "center": "center", + "edge": "edge", }, "sections": Array [], "widget": Object { - "damageLocations": "DamageLocationsWidget", + "alertIncomplete": "AlertIncompleteWidget", + "alertRecalWarning": "AlertRecalWarningWidget", + "contactDetails": "ContactDetailsSectionWidget", + "editShopLinkText": "EditShopLinkTextWidget", "footer": "SiteFooterWidget", "orderDetails": "OrderDetailsContent", - "serviceSummary": "ServiceSummaryContent", "siteHeader": "SiteHeaderWidget", "siteSubHeader": "SiteSubHeaderWidget", - "subheader": Object { - "contactInfo": "ContactDetailsSubTitle", - "damage": "DamageSubTitle", - "shop": "PreferredShopSubTitle", - "vehicle": "VehicleSubTitle", - }, }, } `; diff --git a/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap b/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap index 3b814991..842c5af2 100644 --- a/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap +++ b/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap @@ -3,12 +3,18 @@ exports[`contact-details-drawer snapshot matches returns the initial data 1`] = ` Object { "emailAddress": "fred.tay@gmail.com", + "extension": null, "firstName": "Frederick", "isModalOpened": false, "lastName": "Taylor", + "modalPositions": Object { + "center": "center", + "edge": "edge", + }, "phoneNumber": "606-009-2943", "rules": Object { "emailAddress": "email-required|email-address-format", + "extension": "extension-format", "firstName": "first-name-required", "lastName": "last-name-required", "phoneNumber": "phone-number-required|phone-number-format", @@ -16,6 +22,7 @@ Object { "widget": Object { "drawerFooter": "ContactDetailsDrawerFooterWidget", "emailQuestion": "EmailQuestionWidget", + "extensionQuestion": "ExtensionQuestionWidget", "firstNameQuestion": "FirstNameQuestionWidget", "lastNameQuestion": "LastNameQuestionWidget", "phoneNumberQuestion": "PhoneNumberQuestionWidget", diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js index 9c579dbc..901effe9 100644 --- a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js +++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js @@ -65,15 +65,16 @@ describe('contact-details-drawer', () => { describe('method', () => { describe('saveContactDetails', () => { test.each([ - ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909'], - [null, 'Jones', 's.jones@gmail.com', '724-996-0909'], - ['Sarah', null, 's.jones@gmail.com', '724-996-0909'], - ['Sarah', 'Jones', null, '724-996-0909'], - ['Sarah', 'Jones', 's.jones@gmail.com', null] + ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'], + [null, 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'], + ['Sarah', null, 's.jones@gmail.com', '724-996-0909', '12345'], + ['Sarah', 'Jones', null, '724-996-0909', '12345'], + ['Sarah', 'Jones', 's.jones@gmail.com', null, '12345'], + ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', null], ])( - 'when first name data "%p", last name "%p", email "%p", and phone number "%p", updateContactInfo called with expected', - (firstName, lastName, emailAddress, phoneNumber) => { + 'when first name data "%p", last name "%p", email "%p", phone number "%p", and extension "%p", updateContactInfo called with expected', + (firstName, lastName, emailAddress, phoneNumber, extension) => { // Arrange const mainInitialState = { order: { @@ -81,12 +82,13 @@ describe('contact-details-drawer', () => { firstName: 'Frederick', lastName: 'Taylor', emailAddress: 'fred.tay@gmail.com', - servicePhone: '606-009-2943' + servicePhone: '606-009-2943', + extension: '11111' } } }; const initialData = { - firstName, lastName, emailAddress, phoneNumber + firstName, lastName, emailAddress, phoneNumber, extension }; const { wrapper } = getMountedComponent(mainInitialState, initialData); @@ -98,7 +100,7 @@ describe('contact-details-drawer', () => { expect(useMainStore().updateContactInfo).toBeCalledTimes(1); expect(useMainStore().updateContactInfo).toBeCalledWith({ firstName, lastName, emailAddress }); expect(useMainStore().updatePhoneNumbers).toBeCalledTimes(1); - expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber }); + expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber, extension: extension }); } ); }); diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js index eda7c873..cf0b7b1f 100644 --- a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js +++ b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js @@ -18,7 +18,7 @@ describe('deductible-box', () => { it('renders the correct deductible label', () => { const labelElement = wrapper.find('#deductibleLabel'); - expect(labelElement.text()).toBe('Deductible'); + expect(labelElement.text()).toBe('Deductible:'); }); it('has the correct id', () => { @@ -26,12 +26,8 @@ describe('deductible-box', () => { }); it('has the correct classes', () => { - expect(wrapper.classes().length).toBe(5); + expect(wrapper.classes().length).toBe(1); expect(wrapper.classes()).toContain('deductible-box'); - expect(wrapper.classes()).toContain('d-flex'); - expect(wrapper.classes()).toContain('justify-content-between'); - expect(wrapper.classes()).toContain('align-items-center'); - expect(wrapper.classes()).toContain('py-2'); }); it.each([ ['', ''], diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.vue b/src/layouts/tpa-submit/deductible-box/deductible-box.vue index fd1ea4bd..797cd941 100644 --- a/src/layouts/tpa-submit/deductible-box/deductible-box.vue +++ b/src/layouts/tpa-submit/deductible-box/deductible-box.vue @@ -2,8 +2,8 @@
- Deductible: - {{ value }} + Deductible: + {{ value }}
diff --git a/src/layouts/tpa-submit/review-block/review-block.spec.js b/src/layouts/tpa-submit/review-block/review-block.spec.js index 82f3c4e5..f7f6d514 100644 --- a/src/layouts/tpa-submit/review-block/review-block.spec.js +++ b/src/layouts/tpa-submit/review-block/review-block.spec.js @@ -20,12 +20,12 @@ describe('ReviewBlock.vue', () => { }); it('renders the correct number of lines', () => { - const lineElements = wrapper.findAll('.review-block__body--line'); + const lineElements = wrapper.findAll('.review-body p'); expect(lineElements.length).toBe(lines.length); }); it('renders the correct line text', () => { - const lineElements = wrapper.findAll('.review-block__body--line'); + const lineElements = wrapper.findAll('.review-body p'); lines.forEach((line, index) => { expect(lineElements.at(index).text()).toBe(line); }); diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js index 7dd6920b..6470f241 100644 --- a/src/layouts/tpa-submit/tpa-submit.spec.js +++ b/src/layouts/tpa-submit/tpa-submit.spec.js @@ -18,7 +18,15 @@ import coverageStatuses from '@/constants/coverage-statuses'; jest.mock('@/helpers/cms-content-helper', () => ({ fetchCmsContentForPage: jest.fn(), doesCopyContainRouterLink: jest.fn(), - getStringWithCustomValues: jest.fn(), + getStringWithCustomValues: jest.fn((str, customValueMap) => { + let newString = str ?? ''; + if (customValueMap != null) { + Object.keys(customValueMap).forEach((key) => { + newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]); + }); + } + return newString; + }), processIfStatements: jest.fn() })); @@ -129,11 +137,7 @@ describe('tpa-submit', () => { // Assert expect(subHeader.exists()).toBeTruthy(); - expect(subHeader.props().justifyText).toBe('center'); - expect(subHeader.props().marginTopSizeOverride).toBe(4); - expect(subHeader.classes()).toContain('text-color--black'); - expect(subHeader.classes()).toContain('fs-5'); - expect(subHeader.classes()).toContain('tpa-submit__title--line-height'); + expect(subHeader.classes()).toContain('tpa-submit-title'); }); test('sub header body one', () => { // Arrange @@ -144,34 +148,6 @@ describe('tpa-submit', () => { // Assert expect(subHeaderBodyOne.exists()).toBeTruthy(); - expect(subHeaderBodyOne.classes()).toContain('small'); - expect(subHeaderBodyOne.classes()).toContain('text-color--darker-gray'); - }); - test('sub header body two', () => { - // Arrange - const wrapper = shallowMount(tpaSubmit, getMountOptions()); - - // Act - const subHeaderBodyTwo = wrapper.findComponent({ ref: 'tpaSubmitSubHeaderBodyTwo' }); - - // Assert - expect(subHeaderBodyTwo.exists()).toBeTruthy(); - expect(subHeaderBodyTwo.classes()).toContain('mb-4'); - expect(subHeaderBodyTwo.classes()).toContain('small'); - expect(subHeaderBodyTwo.classes()).toContain('text-color--darker-gray'); - }); - test('main button one', () => { - // Arrange - const wrapper = shallowMount(tpaSubmit, getMountOptions()); - - // Act - const mainButton = wrapper.findComponent({ ref: 'buttonMainOne' }); - - // Assert - expect(mainButton.exists()).toBeTruthy(); - expect(mainButton.props().variant).toBe('success'); - expect(mainButton.classes()).toContain('w-100'); - expect(mainButton.classes()).toContain('mb-5'); }); test('service summary section', () => { // Arrange @@ -183,21 +159,6 @@ describe('tpa-submit', () => { // Assert expect(serviceSummarySection.exists()).toBeTruthy(); }); - test('service summary title', () => { - // Arrange - const wrapper = shallowMount(tpaSubmit, getMountOptions()); - - // Act - const serviceSummaryTitle = wrapper.findComponent({ ref: 'tpaSubmitServiceSummaryTitle' }); - - // Assert - expect(serviceSummaryTitle.exists()).toBeTruthy(); - expect(serviceSummaryTitle.props().marginTopSizeOverride).toBe(4); - expect(serviceSummaryTitle.classes()).toContain('fw-bold'); - expect(serviceSummaryTitle.classes()).toContain('fs-1'); - expect(serviceSummaryTitle.classes()).toContain('lh-lg'); - expect(serviceSummaryTitle.classes()).toContain('text-color--black'); - }); describe('review blocks', () => { const title1 = 'Section 1'; const title2 = 'Another Section'; @@ -253,24 +214,8 @@ describe('tpa-submit', () => { // Assert expect(submitOrderDetailsTitle.exists()).toBeTruthy(); - expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4); expect(submitOrderDetailsTitle.classes()).toContain('fw-bold'); - expect(submitOrderDetailsTitle.classes()).toContain('text-color--black'); - }); - test('submit order details body', () => { - // Arrange - const wrapper = shallowMount(tpaSubmit, getMountOptions()); - - // Act - const submitOrderDetailsTitle = wrapper.findComponent({ ref: 'tpaSubmitOrderDetailsBody' }); - - // Assert - expect(submitOrderDetailsTitle.exists()).toBeTruthy(); - expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4); - expect(submitOrderDetailsTitle.classes()).toContain('mb-4'); - expect(submitOrderDetailsTitle.classes()).toContain('px-4'); - expect(submitOrderDetailsTitle.classes()).toContain('small'); - expect(submitOrderDetailsTitle.classes()).toContain('text-color--darker-gray'); + expect(submitOrderDetailsTitle.classes()).toContain('order-details-title'); }); test('deductible box', () => { // Arrange @@ -306,7 +251,7 @@ describe('tpa-submit', () => { }); }); describe('before route enter', () => { - test('produces 4 sections', async () => { + test('produces 2 sections', async () => { // Arrange const { wrapper } = getMountedComponent(); expect(wrapper.vm.sections.length).toBe(0); @@ -320,65 +265,13 @@ describe('tpa-submit', () => { ); // Assert - expect(wrapper.vm.sections.length).toBe(4); - }); - test.each([ - ['2004', 'Honda', 'Civic', '2004 Honda Civic'], - [null, 'Honda', 'Civic', 'Honda Civic'], - ['2004', '', 'Civic', '2004 Civic'], - ['2004', 'Honda', null, '2004 Honda'], - ['2004', null, undefined, '2004'], - [null, null, null, ''] - ])( - 'when store vehicle has year %p, make %p, and model %p, has line %p', - async (year, make, model, line) => { - // Arrange - const initialStore = { - order: { - vehicle: { year, make, model } - } - }; - const { wrapper } = getMountedComponent(initialStore); - const vehicleSectionIndex = 0; - const expectedLines = [line]; - - // Act - await tpaSubmit.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-submit' } }, - undefined, - (c) => c(wrapper.vm) - ); - - // Assert - const vehicleSection = wrapper.vm.sections[vehicleSectionIndex]; - expect(vehicleSection.lines).toStrictEqual(expectedLines); - } - ); - test('damage section lines equal result from getDamageDisplayContent', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - const damageSectionIndex = 1; - const expectedLines = ['hi', 'potato', 'vehicle 3']; - getDamageDisplayContent.mockImplementationOnce(() => expectedLines); - - // Act - await tpaSubmit.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-submit' } }, - undefined, - (c) => c(wrapper.vm) - ); - - // Assert - const damageSection = wrapper.vm.sections[damageSectionIndex]; - expect(damageSection.lines).toEqual(expectedLines); + expect(wrapper.vm.sections.length).toBe(2); }); describe('preferred shop section', () => { - test('has three lines', async () => { + test('has two lines', async () => { // Arrange const { wrapper } = getMountedComponent(); - const preferredShopSectionIndex = 2; + const preferredShopSectionIndex = 0; // Act await tpaSubmit.beforeRouteEnter.call( @@ -390,15 +283,15 @@ describe('tpa-submit', () => { // Assert const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex]; - expect(preferredShopSection.lines.length).toBe(3); + expect(preferredShopSection.lines.length).toBe(2); }); - test('first line is value returned from toTitleCase method', async () => { + test('title is value returned from toTitleCase method', async () => { // Arrange const initialData = { companyName: 'some value' }; const { wrapper } = getMountedComponent({}, initialData); const expectedName = 'some expected name'; toTitleCase.mockImplementationOnce(() => expectedName); - const preferredShopSectionIndex = 2; + const preferredShopSectionIndex = 0; // Act await tpaSubmit.beforeRouteEnter.call( @@ -410,9 +303,9 @@ describe('tpa-submit', () => { // Assert const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex]; - expect(preferredShopSection.lines[0]).toBe(expectedName); + expect(preferredShopSection.title).toBe(expectedName); }); - test('second line is expected and formatAddress called', async () => { + test('first line is expected and formatAddress called', async () => { // Arrange const address = { streetAddress: '123 South Ln', @@ -430,7 +323,7 @@ describe('tpa-submit', () => { const { wrapper } = getMountedComponent(initialStore); const line = 'some returned line'; formatAddress.mockImplementationOnce(() => line); - const preferredShopSectionIndex = 2; + const preferredShopSectionIndex = 0; // Act await tpaSubmit.beforeRouteEnter.call( @@ -442,7 +335,7 @@ describe('tpa-submit', () => { // Assert const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex]; - expect(preferredShopSection.lines[1]).toBe(line); + expect(preferredShopSection.lines[0]).toBe(line); expect(formatAddress).toHaveBeenCalledTimes(1); expect(formatAddress).toHaveBeenCalledWith( address.streetAddress, @@ -452,7 +345,7 @@ describe('tpa-submit', () => { address.zipCode ); }); - test('third line is expected and toDisplayPhoneNumber called', async () => { + test('second line is expected and toDisplayPhoneNumber called', async () => { // Arrange const phoneNumber = '9998887777'; const initialStore = { @@ -465,7 +358,7 @@ describe('tpa-submit', () => { const { wrapper } = getMountedComponent(initialStore); const expectedLine = 'returned from to display phone num'; toDisplayPhoneNumber.mockImplementationOnce(() => expectedLine); - const preferredShopSectionIndex = 2; + const preferredShopSectionIndex = 0; // Act await tpaSubmit.beforeRouteEnter.call( @@ -477,7 +370,7 @@ describe('tpa-submit', () => { // Assert const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex]; - expect(preferredShopSection.lines[2]).toBe(expectedLine); + expect(preferredShopSection.lines[1]).toBe(expectedLine); expect(toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber); }); }); @@ -487,8 +380,14 @@ describe('tpa-submit', () => { const lastName = 'Eddison'; const emailAddress = 'myname@gmail.com'; const servicePhone = '0001112222'; + const providerCompanyName = 'Some Provider LLC'; const initialStore = { order: { + serviceLocation: { + provider: { + companyName: providerCompanyName + } + }, contactInfo: { firstName, lastName, @@ -498,11 +397,11 @@ describe('tpa-submit', () => { } }; const { wrapper } = getMountedComponent(initialStore); - const expectedLine1 = 'Jones Eddison'; - const expectedLine2 = emailAddress; - const expectedLine3 = 'some value returned'; - toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedLine3 : '')); - const contactInfoSectionIndex = 3; + const expectedEmail = emailAddress; + const expectedPhone = 'some value returned'; + toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : '')); + const contactInfoSectionIndex = 1; + wrapper.vm.getCmsContent.mockImplementation(() => '{custom:contactPhone} or {custom:contactEmail}'); // Act await tpaSubmit.beforeRouteEnter.call( @@ -511,12 +410,12 @@ describe('tpa-submit', () => { undefined, (c) => c(wrapper.vm) ); + wrapper.vm.setSections(); // Assert const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex]; - expect(contactInfoSection.lines[0]).toBe(expectedLine1); - expect(contactInfoSection.lines[1]).toBe(expectedLine2); - expect(contactInfoSection.lines[2]).toBe(expectedLine3); + expect(contactInfoSection.lines[0]).toContain(expectedEmail); + expect(contactInfoSection.lines[0]).toContain(expectedPhone); expect(toDisplayPhoneNumber).toHaveBeenCalledWith(servicePhone); }); }); @@ -524,7 +423,6 @@ describe('tpa-submit', () => { test.each([ ['subHeaderTitle', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'site sub header'], ['subHeaderBodyOne', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT, 'sub header body one'], - ['serviceSummaryText', 'ServiceSummaryContent', widgetFields.TEXT_BLOCK_WIDGET.TEXT, 'service summary text'], ['orderDetailsTitle', 'OrderDetailsContent', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'order details title'], ['forwardButtonText', 'SiteFooterWidget', widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT, 'forward button text'] ])('computed %p returns expected value', (computedName, widgetLabel, fieldLabel, expected) => { diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue index aa334adf..ff3824bc 100644 --- a/src/layouts/tpa-submit/tpa-submit.vue +++ b/src/layouts/tpa-submit/tpa-submit.vue @@ -180,12 +180,6 @@ export default { ); return getStringWithCustomValues(cmsContent, this.customValueMap); }, - serviceSummaryText() { - return this.getCmsContent( - this.widget.serviceSummary, - widgetFields.TEXT_BLOCK_WIDGET.TEXT - ); - }, orderDetailsTitle() { return this.getCmsContent( this.widget.orderDetails,