Address test failures

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());
 }
 

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",
+  "modalPositions": Object {
-  "customValueMap": Object {
+    "center": "center",
-    "glassShop": "Frederick Jones",
+    "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",
-    },
   },
 }
 `;

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",

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'],
+                ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
-                [null, 'Jones', 's.jones@gmail.com', '724-996-0909'],
+                [null, 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
-                ['Sarah', null, 's.jones@gmail.com', '724-996-0909'],
+                ['Sarah', null, 's.jones@gmail.com', '724-996-0909', '12345'],
-                ['Sarah', 'Jones', null, '724-996-0909'],
+                ['Sarah', 'Jones', null, '724-996-0909', '12345'],
-                ['Sarah', 'Jones', 's.jones@gmail.com', null]
+                ['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',
+                'when first name data "%p", last name "%p", email "%p", phone number "%p", and extension "%p", updateContactInfo called with expected',
-                (firstName, lastName, emailAddress, phoneNumber) => {
+                (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 });
                 }
             );
         });

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([
         ['', ''],

src/layouts/tpa-submit/deductible-box/deductible-box.vue

@@ -2,8 +2,8 @@
     <div
         id="deductibleBox"
         class="deductible-box">
-        <span class="deductible-label">Deductible:</span>
+        <span id="deductibleLabel" class="deductible-label">Deductible:</span>
-        <span class="deductible-value">{{ value }}</span>
+        <span id="deductibleValue" class="deductible-value">{{ value }}</span>
     </div>
 </template>
 

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);
         });

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.classes()).toContain('tpa-submit-title');
-            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');
         });
         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');
+            expect(submitOrderDetailsTitle.classes()).toContain('order-details-title');
-        });
-        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');
         });
         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);
+            expect(wrapper.vm.sections.length).toBe(2);
-        });
-        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);
         });
         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 expectedEmail = emailAddress;
-            const expectedLine2 = emailAddress;
+            const expectedPhone = 'some value returned';
-            const expectedLine3 = 'some value returned';
+            toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : ''));
-            toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedLine3 : ''));
+            const contactInfoSectionIndex = 1;
-            const contactInfoSectionIndex = 3;
+            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[0]).toContain(expectedEmail);
-            expect(contactInfoSection.lines[1]).toBe(expectedLine2);
+            expect(contactInfoSection.lines[0]).toContain(expectedPhone);
-            expect(contactInfoSection.lines[2]).toBe(expectedLine3);
             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) => {

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,