Adding fourth case

src/layouts/tpa-search/tpa-search.spec.js

@@ -1238,8 +1238,55 @@ describe('TPA search page', () => {
                 });
             });
         });
+        test.each([
+            [undefined, ''],
+            [null, ''],
+            ['', ''],
+            ['hello world', 'Hello World'],
+            ['hello world', 'Hello World'],
+            ['HEllO worLD', 'Hello World'],
+            ['a991,,:A froG FAMILY', 'A991,,:a Frog Family']
+        ])(
+            'toTitleCase given "%p" returns "%p"',
+            (input, expected) => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+
+                // Act
+                const result = wrapper.vm.toTitleCase(input);
+
+                // Assert
+                expect(result).toEqual(expected);
+            }
+        );
     });
     describe('before route enter', () => {
+        test('when providers exist at 15 mile radius, filter is set to "15 miles" and providers set to expected', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            const zipCode = '18394';
+            useMainStore().order.customer.address.zipCode = zipCode;
+            const providers = [{ companyName: 'provider' }];
+            useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
+                ({ data: { shopProviders: radius === 15 ? providers : [] } }));
+            const expectedFilter = '15 miles';
+
+            // Act
+            await tpaSearch.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-search' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            await wrapper.vm.$nextTick();
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.filter).toBe(expectedFilter);
+            expect(wrapper.vm.providers).toEqual(providers);
+            expect(useMainStore().getTpaProviders).toBeCalledTimes(1);
+        });
         test('when providers exist at 25 mile radius, filter is set to "25 miles" and providers set to expected', async () => {
             // Arrange
             const { wrapper } = getMountedComponent();
@@ -1264,7 +1311,7 @@ describe('TPA search page', () => {
             // Assert
             expect(wrapper.vm.filter).toBe(expectedFilter);
             expect(wrapper.vm.providers).toEqual(providers);
-            expect(useMainStore().getTpaProviders).toBeCalledTimes(1);
+            expect(useMainStore().getTpaProviders).toBeCalledTimes(2);
         });
         test('when providers exist at 50 mile radius but not 25, filter is set to "50 miles" and providers set to expected', async () => {
             // Arrange
@@ -1290,7 +1337,7 @@ describe('TPA search page', () => {
             // Assert
             expect(wrapper.vm.filter).toBe(expectedFilter);
             expect(wrapper.vm.providers).toEqual(providers);
-            expect(useMainStore().getTpaProviders).toBeCalledTimes(2);
+            expect(useMainStore().getTpaProviders).toBeCalledTimes(3);
         });
         test(
             'when providers exist at 100 mile radius but not 50 or 25, filter is set to "100 miles" and providers set to expected',
@@ -1318,7 +1365,7 @@ describe('TPA search page', () => {
                 // Assert
                 expect(wrapper.vm.filter).toBe(expectedFilter);
                 expect(wrapper.vm.providers).toEqual(providers);
-                expect(useMainStore().getTpaProviders).toBeCalledTimes(3);
+                expect(useMainStore().getTpaProviders).toBeCalledTimes(4);
             }
         );
         test(
@@ -1345,7 +1392,7 @@ describe('TPA search page', () => {
                 // Assert
                 expect(wrapper.vm.filter).toBe(expectedFilter);
                 expect(wrapper.vm.providers).toEqual([]);
-                expect(useMainStore().getTpaProviders).toBeCalledTimes(3);
+                expect(useMainStore().getTpaProviders).toBeCalledTimes(4);
             }
         );
     });

src/layouts/tpa-search/tpa-search.vue

@@ -140,14 +140,21 @@ import globalRules from '@/constants/global-rules.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import { shallowRef } from 'vue';
 
+const radiusFilterPairs = [
+    { radius: 15, filter: '15 miles' },
+    { radius: 25, filter: '25 miles' },
+    { radius: 50, filter: '50 miles' },
+    { radius: 100, filter: '100 miles' }
+];
+
 async function getInitialFilterAndProviders() {
     const { zipCode } = useMainStore().order.customer.address;
 
     let pairIndex = 0;
     let providers = [];
     let filter = '';
-    while (providers.length === 0 && pairIndex < this.radiusFilterPairs.length) {
+    while (providers.length === 0 && pairIndex < radiusFilterPairs.length) {
-        const pair = this.radiusFilterPairs[pairIndex];
+        const pair = radiusFilterPairs[pairIndex];
         const { radius } = pair;
         filter = pair.filter;
         // eslint-disable-next-line no-await-in-loop
@@ -157,7 +164,7 @@ async function getInitialFilterAndProviders() {
         pairIndex += 1;
     }
 
-    return {filter, providers};
+    return { filter, providers };
 }
 
 export default {
@@ -213,13 +220,7 @@ export default {
                 filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
                 provider: globalRules.OPTION_REQUIRED
             },
-            shopListButton: shallowRef(shopListButton),
+            shopListButton: shallowRef(shopListButton)
-            radiusFilterPairs: [
-                { radius: 15, filter: '15 miles' },
-                { radius: 25, filter: '25 miles' },
-                { radius: 50, filter: '50 miles' },
-                { radius: 100, filter: '100 miles' }
-            ]
         };
     },
     computed: {
@@ -253,7 +254,7 @@ export default {
             );
         },
         radiusInMiles() {
-            const pair = this.radiusFilterPairs.find((p) => p.filter === this.filter);
+            const pair = radiusFilterPairs.find((p) => p.filter === this.filter);
             return pair?.radius ?? 0;
         },
         noNetworkShopsAlertHeaderText() {
@@ -302,31 +303,27 @@ export default {
             this.providers = providers;
         },
         getProviderAddress(provider) {
-            const city = provider?.address?.city ?? '';
+            const city = this.toTitleCase(provider?.address?.city);
             const state = provider?.address?.state ?? '';
             const zipCode = provider?.address?.zipCode ?? '';
             let addressLine2 = '';
             if (city) {
-                addressLine2 = city;
+                addressLine2 += city;
                 if (state || zipCode) {
-                    if (state) {
+                    addressLine2 += state ? ',' : ' ';
-                        addressLine2 += ',';
-                    }
-                    addressLine2 += ' ';
                 }
             }
             if (state) {
-                addressLine2 += `${state}`;
+                addressLine2 += state;
-                if (zipCode) {
+                addressLine2 += zipCode ? ' ' : '';
-                    addressLine2 += ' ';
-                }
             }
             if (zipCode) {
-                addressLine2 += `${zipCode}`;
+                addressLine2 += zipCode;
             }
-            return provider?.address?.streetAddress
+
-                ? `${provider.address.streetAddress}, ${addressLine2}`
+            const addressLine1 = this.toTitleCase(provider?.address?.streetAddress);
-                : addressLine2;
+            const joinString = addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
+            return [addressLine1, addressLine2].join(joinString);
         },
         async getProviderButtonData() {
             const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
@@ -362,7 +359,7 @@ export default {
             }
         },
         getShopButtonDataFromProvider(provider) {
-            const cellNumber = this.getDisplayPhoneNumber(provider?.phoneNumber ?? '');
+            const cellNumber = this.getDisplayPhoneNumber(provider?.phoneNumber);
             const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
                 ? +provider.distanceInMiles.toFixed(1)
                 : null;
@@ -378,6 +375,7 @@ export default {
         },
         getDisplayPhoneNumber(phoneNumber) {
             let result = '';
+            if (!phoneNumber) { return result; }
             let remainingDigits = phoneNumber;
             if (phoneNumber.length === 11) {
                 result += `${remainingDigits[0]}-`;
@@ -387,10 +385,19 @@ export default {
                 result += remainingDigits.replace(/^(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
             }
             return result;
-        }// ,
+        },
-        // toTitleCase(word) {
+        toTitleCase(text) {
-        //     const first = word[0].
+            if ((text?.length ?? 0) === 0) {
-        // }
+                return '';
+            }
+            const wordList = text.split(' ');
+            const titleCaseWordList = wordList.map((word) => {
+                const first = word[0].toUpperCase();
+                const rest = word.substring(1).toLowerCase();
+                return first + rest;
+            });
+            return titleCaseWordList.join(' ');
+        }
     }
 };
 </script>