Adding tests to tpa search

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

@@ -149,16 +149,31 @@ describe('TPA search page', () => {
             // Assert
             expect(providerSelectionForm.exists()).toBeTruthy();
         });
-        test('map', () => {
+        test('map', async () => {
             // Arrange
-            const wrapper = shallowMount(tpaSearch, getMountOptions());
+            const zipCode = '12345';
+            const { wrapper } = getMountedComponent();
+            await wrapper.setData({
+                providers: [{
+                    address: {
+                        streetAddress: '123 Lane Ave',
+                        city: 'New York',
+                        state: 'NY',
+                        zipCode: '99230'
+                    }
+                }],
+                mapZipCode: zipCode
+            });
+            const expectedAddresses = ['123 Lane Ave, New York, NY 99230'];
 
             // Act
-            const map = wrapper.find('#map');
+            const map = wrapper.findComponent('#map');
 
             // Assert
             expect(map.exists()).toBeTruthy();
             expect(map.classes()).toContain('mb-4');
+            expect(map.props().addresses).toEqual(expectedAddresses);
+            expect(map.props().zipCode).toBe(zipCode);
         });
         test('search radius filter', () => {
             // Arrange
@@ -173,9 +188,32 @@ describe('TPA search page', () => {
             expect(searchRadiusFilter.props().cmsWidgetName).toBe(expectedWidgetName);
             expect(searchRadiusFilter.props().validationRules).toBe(globalRules.OPTION_REQUIRED);
         });
-        test('select provider question', () => {
+        test('select provider question', async () => {
             // Arrange
             const wrapper = shallowMount(tpaSearch, getMountOptions());
+            await wrapper.setData({
+                providers: [{
+                    name: 'Shop Auto Glass',
+                    phoneNumber: '740-555-1234',
+                    distanceInMiles: 1.2345,
+                    providerNumber: '232209',
+                    address: {
+                        streetAddress: '123 Lane Ave',
+                        city: 'New York',
+                        state: 'NY',
+                        zipCode: '99230'
+                    }
+                }]
+            });
+            const expectedAnswers = [{
+                buttonLabel: 'Shop Auto Glass',
+                buttonLabelSubCopy: '1.2 mi',
+                buttonBodyCopy: '123 Lane Ave, New York, NY 99230<br>740-555-1234',
+                value: '232209'
+            }];
+            const expectedAdditionalButtonData = {
+                displayAvailabilityIndicators: false
+            };
 
             // Act
             const selectProviderQuestion = wrapper.findComponent('#selectProviderQuestion');
@@ -188,6 +226,8 @@ describe('TPA search page', () => {
             expect(selectProviderQuestion.props().textPosition).toBe('text-start');
             expect(selectProviderQuestion.props().isRequired).toBeTruthy();
             expect(selectProviderQuestion.props().validationRules).toBe(globalRules.OPTION_REQUIRED);
+            expect(selectProviderQuestion.props().answers).toEqual(expectedAnswers);
+            expect(selectProviderQuestion.props().additionalButtonData).toEqual(expectedAdditionalButtonData);
         });
         test.each([[], null, undefined])(
             'no network providers alert when providers length is 0, undefined, or null',
@@ -447,11 +487,142 @@ describe('TPA search page', () => {
                 expect(result).toEqual(expected);
             });
         });
+        describe('providerAddresses', () => {
+            test.each([null, undefined, []])(
+                'returns empty list when providers empty',
+                async (providers) => {
+                    // Arrange
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    await wrapper.setData({ providers });
+
+                    // Act
+                    const result = wrapper.vm.providerAddresses;
+
+                    // Assert
+                    expect(result).toEqual([]);
+                }
+            );
+            test('returns expected when providers not empty', async () => {
+                // Arrange
+                const wrapper = shallowMount(tpaSearch, getMountOptions());
+                await wrapper.setData({
+                    providers: [
+                        {
+                            name: 'Shop Auto Glass',
+                            phoneNumber: '740-555-1234',
+                            distanceInMiles: 1.2345,
+                            providerNumber: '232209',
+                            address: {
+                                streetAddress: '123 Lane Ave',
+                                city: 'New York',
+                                state: 'NY',
+                                zipCode: '99230'
+                            }
+                        },
+                        {
+                            name: 'Safelite AutoGlass',
+                            phoneNumber: '676-555-0099',
+                            distanceInMiles: 123.9452,
+                            providerNumber: '123456',
+                            address: {
+                                streetAddress: '2003 Coral Ln',
+                                city: 'Birmingham',
+                                state: 'AL',
+                                zipCode: '43001'
+                            }
+                        }
+                    ]
+                });
+                const expectedResult = [
+                    '123 Lane Ave, New York, NY 99230',
+                    '2003 Coral Ln, Birmingham, AL 43001'
+                ];
+
+                // Act
+                const result = wrapper.vm.providerAddresses;
+
+                // Assert
+                expect(result).toEqual(expectedResult);
+            });
+        });
+        describe('providerButtonData', () => {
+            test.each([null, undefined, []])(
+                'returns empty list when providers empty',
+                async (providers) => {
+                    // Arrange
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    await wrapper.setData({ providers });
+
+                    // Act
+                    const result = wrapper.vm.providerButtonData;
+
+                    // Assert
+                    expect(result).toEqual([]);
+                }
+            );
+            test('returns expected when providers not empty', async () => {
+                // Arrange
+                const wrapper = shallowMount(tpaSearch, getMountOptions());
+                await wrapper.setData({
+                    providers: [
+                        {
+                            name: 'Shop Auto Glass',
+                            phoneNumber: '740-555-1234',
+                            distanceInMiles: 1.2345,
+                            providerNumber: '232209',
+                            address: {
+                                streetAddress: '123 Lane Ave',
+                                city: 'New York',
+                                state: 'NY',
+                                zipCode: '99230'
+                            }
+                        },
+                        {
+                            name: 'Safelite AutoGlass',
+                            phoneNumber: '676-555-0099',
+                            distanceInMiles: 123.9452,
+                            providerNumber: '123456',
+                            address: {
+                                streetAddress: '2003 Coral Ln',
+                                city: 'Birmingham',
+                                state: 'AL',
+                                zipCode: '43001'
+                            }
+                        }
+                    ]
+                });
+                const expectedResult = [
+                    {
+                        buttonLabel: 'Shop Auto Glass',
+                        buttonLabelSubCopy: '1.2 mi',
+                        buttonBodyCopy: '123 Lane Ave, New York, NY 99230<br>740-555-1234',
+                        value: '232209'
+                    },
+                    {
+                        buttonLabel: 'Safelite AutoGlass',
+                        buttonLabelSubCopy: '123.9 mi',
+                        buttonBodyCopy: '2003 Coral Ln, Birmingham, AL 43001<br>676-555-0099',
+                        value: '123456'
+                    }
+                ];
+
+                // Act
+                const result = wrapper.vm.providerButtonData;
+
+                // Assert
+                expect(result).toEqual(expectedResult);
+            });
+        });
     });
     describe('watch', () => {
         test('on filter calls getTpaProviders and sets providers', async () => {
             // Arrange
-            const { wrapper } = getMountedComponent();
+            const zipCode = '78220';
+            const initialMapZipCode = '88800';
+            const { wrapper } = getMountedComponent({}, {
+                zipCode,
+                mapZipCode: initialMapZipCode
+            });
             const providers = { data: { shopProviders: ['some data', 'some more data']} };
             useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers));
             const newFilter = 'new filter';
@@ -462,6 +633,7 @@ describe('TPA search page', () => {
             // Assert
             expect(useMainStore().getTpaProviders).toBeCalled();
             expect(wrapper.vm.providers).toEqual(providers.data.shopProviders);
+            expect(wrapper.vm.mapZipCode).toBe(zipCode);
         });
         describe('on providers', () => {
             test.each([null, undefined, []])(
@@ -503,6 +675,34 @@ describe('TPA search page', () => {
         });
     });
     describe('method', () => {
+        test.each([
+            ['address', 'city', 'ST', 'zip', 'address, city, ST zip'],
+            ['address', null, 'ST', 'zip', 'address, ST zip'],
+            ['address', 'city', null, 'zip', 'address, city zip'],
+            ['address', 'city', 'ST', null, 'address, city, ST'],
+            [null, null, null, null, '']
+        ])(
+            'getProviderAddress returns expected',
+            (streetAddress, city, state, zipCode, expected) => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders));
+                const provider = {
+                    address: {
+                        streetAddress,
+                        city,
+                        state,
+                        zipCode
+                    }
+                };
+
+                // Act
+                const result = wrapper.vm.getProviderAddress(provider);
+
+                // Assert
+                expect(result).toEqual(expected);
+            }
+        );
         describe('getProviderButtonData', () => {
             test.each([null, undefined, {}])(
                 'returns empty list when getTpaProviders returns no data',
@@ -550,7 +750,12 @@ describe('TPA search page', () => {
                 'sets providers to empty list when no data returned from getProviders',
                 async (newProviders) => {
                     // Arrange
-                    const { wrapper } = getMountedComponent();
+                    const zipCode = '28331';
+                    const initialMapZipCode = '10022';
+                    const { wrapper } = getMountedComponent({}, {
+                        zipCode,
+                        mapZipCode: initialMapZipCode
+                    });
                     useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders));
 
                     // Act
@@ -558,11 +763,17 @@ describe('TPA search page', () => {
 
                     // Assert
                     expect(wrapper.vm.providers).toEqual([]);
+                    expect(wrapper.vm.mapZipCode).toEqual(zipCode);
                 }
             );
             test('returns value from getProviders', async () => {
                 // Arrange
-                const { wrapper } = getMountedComponent();
+                const zipCode = '12990';
+                const initialMapZipCode = '00981';
+                const { wrapper } = getMountedComponent({}, {
+                    zipCode,
+                    mapZipCode: initialMapZipCode
+                });
                 const shopProviders = [{ name: 'foo' }];
                 useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => ({
                     data: { shopProviders }
@@ -573,6 +784,7 @@ describe('TPA search page', () => {
 
                 // Assert
                 expect(wrapper.vm.providers).toEqual(shopProviders);
+                expect(wrapper.vm.mapZipCode).toEqual(zipCode);
             });
         });
         test('backButtonAction invokes navigate method', () => {
@@ -619,6 +831,162 @@ describe('TPA search page', () => {
                 expect(result).toBeNull();
             });
         });
+        describe('getShopButtonDataFromProvider', () => {
+            test.each([null, undefined, {}])(
+                'returns empty list given parameter with no provider',
+                (provider) => {
+                    // Arrange
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    const expectedResult = {
+                        buttonLabel: '',
+                        buttonLabelSubCopy: '',
+                        buttonBodyCopy: '<br>',
+                        value: ''
+                    };
+
+                    // Act
+                    const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                    // Assert
+                    expect(result).toEqual(expectedResult);
+                }
+            );
+            test('returns expected given provider', () => {
+                // Arrange
+                const wrapper = shallowMount(tpaSearch, getMountOptions());
+                const provider = {
+                    name: 'Shop Auto Glass',
+                    phoneNumber: '740-555-1234',
+                    distanceInMiles: 1.2345,
+                    providerNumber: '232209',
+                    address: {
+                        streetAddress: '123 Lane Ave',
+                        city: 'New York',
+                        state: 'NY',
+                        zipCode: '99230'
+                    }
+                };
+                const expectedResult = {
+                    buttonLabel: 'Shop Auto Glass',
+                    buttonLabelSubCopy: '1.2 mi',
+                    buttonBodyCopy: '123 Lane Ave, New York, NY 99230<br>740-555-1234',
+                    value: '232209'
+                };
+
+                // Act
+                const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                // Assert
+                expect(result).toEqual(expectedResult);
+            });
+            describe('returns result with button label', () => {
+                test.each(['', undefined, null])(
+                    'equal to empty string when name is empty',
+                    (name) => {
+                        // Arrange
+                        const wrapper = shallowMount(tpaSearch, getMountOptions());
+                        const provider = { name };
+
+                        // Act
+                        const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                        // Assert
+                        expect(result.buttonLabel).toEqual('');
+                    }
+                );
+                test('returns provider name when exists', () => {
+                    // Arrange
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    const name = 'Some Shop Name';
+                    const provider = { name };
+
+                    // Act
+                    const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                    // Assert
+                    expect(result.buttonLabel).toEqual(name);
+                });
+            });
+            describe('returns result with button label sub copy', () => {
+                test.each([null, undefined, 'random string'])(
+                    'as empty string when distanceInMiles is not a number',
+                    (distanceInMiles) => {
+                        // Arrange
+                        const wrapper = shallowMount(tpaSearch, getMountOptions());
+                        const provider = { distanceInMiles };
+
+                        // Act
+                        const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                        // Assert
+                        expect(result.buttonLabelSubCopy).toEqual('');
+                    }
+                );
+                test.each([[0, 0], [0, 0.000], [-7.89, -7.9], [109, 109], [1.234, 1.2], [2.99, 3]])(
+                    'displays expected distance value',
+                    (distanceInMiles, displayedDistance) => {
+                        // Arrange
+                        const wrapper = shallowMount(tpaSearch, getMountOptions());
+                        const provider = { distanceInMiles };
+                        const expectedSubCopy = `${displayedDistance} mi`;
+
+                        // Act
+                        const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                        // Assert
+                        expect(result.buttonLabelSubCopy).toEqual(expectedSubCopy);
+                    }
+                );
+            });
+            test('returns result with button body copy showing expected address and phone number', () => {
+                // Arrange
+                const wrapper = shallowMount(tpaSearch, getMountOptions());
+                const provider = {
+                    phoneNumber: '123-555-0099',
+                    address: {
+                        streetAddress: '434 Up Down Blvd',
+                        city: 'San Francisco',
+                        state: 'CA',
+                        zipCode: '90887'
+                    }
+                };
+                const expected = '434 Up Down Blvd, San Francisco, CA 90887<br>123-555-0099';
+
+                // Act
+                const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                // Assert
+                expect(result.buttonBodyCopy).toEqual(expected);
+            });
+            describe('returns result with value', () => {
+                test.each(['', undefined, null])(
+                    'equal to empty string when providerNumber is empty',
+                    (providerNumber) => {
+                        // Arrange
+                        const wrapper = shallowMount(tpaSearch, getMountOptions());
+                        const provider = { providerNumber };
+
+                        // Act
+                        const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                        // Assert
+                        expect(result.value).toEqual('');
+                    }
+                );
+                test('returns provider number when exists', () => {
+                    // Arrange
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    const providerNumber = '123391';
+                    const provider = { providerNumber };
+
+                    // Act
+                    const result = wrapper.vm.getShopButtonDataFromProvider(provider);
+
+                    // Assert
+                    expect(result.value).toEqual(providerNumber);
+                });
+            });
+        });
     });
     describe('before route enter', () => {
         test('when providers exist at 25 mile radius, filter is set to "25 miles" and providers set to expected', async () => {

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

@@ -254,7 +254,10 @@ export default {
                 if (city) {
                     addressLine2 = city;
                     if (state || zipCode) {
-                        addressLine2 = ', ';
+                        if (state) {
+                            addressLine2 += ',';
+                        }
+                        addressLine2 += ' ';
                     }
                 }
                 if (state) {
@@ -288,7 +291,6 @@ export default {
                         providers = tpaProvidersRadius100;
                     }
                 }
-                console.log(`radius: ${radius}`);
                 this.filter = radius;
                 this.providers = providers?.data?.shopProviders ?? [];
             },
@@ -324,18 +326,17 @@ export default {
                 }
             },
             getShopButtonDataFromProvider(provider) {
-                const { phoneNumber } = provider;
+                const cellNumber = provider?.phoneNumber ?? '';
-
+                const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
-                const distance = provider?.distanceInMiles
                     ? +provider.distanceInMiles.toFixed(1)
                     : null;
 
                 return {
                     buttonLabel: provider?.name ?? '',
-                    buttonLabelSubCopy: distance == null
+                    buttonLabelSubCopy: distance === null
                         ? ''
                         : `${distance} mi`,
-                    buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${phoneNumber}`,
+                    buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${cellNumber ?? ''}`,
                     value: provider?.providerNumber ?? ''
                 };
             }