Updating tpa-search tests

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

@@ -6,8 +6,10 @@ Object {
     "displayAvailabilityIndicators": false,
   },
   "filter": "",
+  "initialLoading": false,
   "mapZipCode": "12663",
   "providers": Array [],
+  "reloadProviders": false,
   "rules": Object {
     "filter": "option-required",
     "provider": "option-required",
@@ -89,14 +91,25 @@ Object {
         "setup": [Function],
       },
       "loader": Object {
+        "computed": Object {
+          "cssProps": [Function],
+        },
         "name": "loader",
         "props": Object {
+          "height": Object {
+            "default": 1,
+            "type": [Function],
+          },
           "loaderColor": Object {
             "type": [Function],
           },
           "loaderPosition": Object {
             "type": [Function],
           },
+          "width": Object {
+            "default": 1,
+            "type": [Function],
+          },
         },
         "render": [Function],
       },

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

@@ -10,6 +10,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import globalRules from '@/constants/global-rules.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
+import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 
 // Mock fetchCmsContentForPage
 jest.mock('@/helpers/cms-content-helper', () => ({
@@ -149,7 +150,18 @@ describe('TPA search page', () => {
             // Assert
             expect(providerSelectionForm.exists()).toBeTruthy();
         });
-        test('map', async () => {
+        test('map loader when initialLoading is true', async () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+            await wrapper.setData({ initialLoading: true });
+
+            // Act
+            const mapLoader = wrapper.findComponent('#mapLoader');
+
+            // Assert
+            expect(mapLoader.exists()).toBeTruthy();
+        });
+        test('map when initialLoading is false', async () => {
             // Arrange
             const zipCode = '12345';
             const { wrapper } = getMountedComponent();
@@ -162,7 +174,8 @@ describe('TPA search page', () => {
                         zipCode: '99230'
                     }
                 }],
-                mapZipCode: zipCode
+                mapZipCode: zipCode,
+                initialLoading: false
             });
             const expectedAddresses = ['123 Lane Ave, New York, NY 99230'];
 
@@ -175,9 +188,10 @@ describe('TPA search page', () => {
             expect(map.props().addresses).toEqual(expectedAddresses);
             expect(map.props().zipCode).toBe(zipCode);
         });
-        test('search radius filter', () => {
+        test('search radius filter when initialLoading is false', async () => {
             // Arrange
             const wrapper = shallowMount(tpaSearch, getMountOptions());
+            await wrapper.setData({ initialLoading: false });
             const expectedWidgetName = 'FilterByQuestion';
 
             // Act
@@ -188,12 +202,23 @@ describe('TPA search page', () => {
             expect(searchRadiusFilter.props().cmsWidgetName).toBe(expectedWidgetName);
             expect(searchRadiusFilter.props().validationRules).toBe(globalRules.OPTION_REQUIRED);
         });
-        test('select provider question', async () => {
+        test('providers loader when initialLoading is false and reloadProviders is true', async () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+            await wrapper.setData({ initialLoading: false, reloadProviders: true });
+
+            // Act
+            const providersLoader = wrapper.findComponent('#providersLoader');
+
+            // Assert
+            expect(providersLoader.exists()).toBeTruthy();
+        });
+        test('select provider question when initialLoading and reloadProviders are false', async () => {
             // Arrange
             const wrapper = shallowMount(tpaSearch, getMountOptions());
             await wrapper.setData({
                 providers: [{
-                    name: 'Shop Auto Glass',
+                    companyName: 'Shop Auto Glass',
                     phoneNumber: '740-555-1234',
                     distanceInMiles: 1.2345,
                     providerNumber: '232209',
@@ -203,7 +228,9 @@ describe('TPA search page', () => {
                         state: 'NY',
                         zipCode: '99230'
                     }
-                }]
+                }],
+                initialLoading: false,
+                reloadProviders: false
             });
             const expectedAnswers = [{
                 buttonLabel: 'Shop Auto Glass',
@@ -230,13 +257,17 @@ describe('TPA search page', () => {
             expect(selectProviderQuestion.props().additionalButtonData).toEqual(expectedAdditionalButtonData);
         });
         test.each([[], null, undefined])(
-            'no network providers alert when providers length is 0, undefined, or null',
+            'no network providers alert when providers length is 0, undefined, or null and initialLoading and reloadProviders are false',
-            (providers) => {
+            async (providers) => {
                 // Arrange
                 const initialData = {
                     providers
                 };
                 const wrapper = shallowMount(tpaSearch, getMountOptions({}, initialData));
+                await wrapper.setData({
+                    initialLoading: false,
+                    reloadProviders: false
+                });
 
                 // Act
                 const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders');
@@ -248,9 +279,13 @@ describe('TPA search page', () => {
                 expect(noNetworkProvidersAlert.props().isDismissible).toBeFalsy();
             }
         );
-        test('preferred shop not listed link', () => {
+        test('preferred shop not listed link when initialLoading and reloadProviders are false', async () => {
             // Arrange
             const wrapper = shallowMount(tpaSearch, getMountOptions());
+            await wrapper.setData({
+                initialLoading: false,
+                reloadProviders: false
+            });
 
             // Act
             const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink');
@@ -272,7 +307,66 @@ describe('TPA search page', () => {
             expect(footer.props().cmsWidgetName).toBe('SiteFooterWidget');
         });
     });
-    test('should not render no network providers alert when providers length is not 0', async () => {
+    describe('should not render', () => {
+        test('map loader when initialLoading is false', async () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+            await wrapper.setData({ initialLoading: false });
+
+            // Act
+            const mapLoader = wrapper.findComponent('#mapLoader');
+
+            // Assert
+            expect(mapLoader.exists()).toBeFalsy();
+        });
+        test('map when initialLoading is true', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            await wrapper.setData({ initialLoading: true });
+
+            // Act
+            const map = wrapper.findComponent('#map');
+
+            // Assert
+            expect(map.exists()).toBeFalsy();
+        });
+        test('search radius filter when initialLoading is true', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            await wrapper.setData({ initialLoading: true });
+
+            // Act
+            const searchRadiusFilter = wrapper.findComponent('#searchRadiusFilter');
+
+            // Assert
+            expect(searchRadiusFilter.exists()).toBeFalsy();
+        });
+        describe('select provider question', () => {
+            test('when initialLoading is true', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                await wrapper.setData({ initialLoading: true });
+
+                // Act
+                const selectProviderQuestion = wrapper.findComponent('#selectProviderQuestion');
+
+                // Assert
+                expect(selectProviderQuestion.exists()).toBeFalsy();
+            });
+            test('when reloadProviders is true', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                await wrapper.setData({ reloadProviders: true });
+
+                // Act
+                const selectProviderQuestion = wrapper.findComponent('#selectProviderQuestion');
+
+                // Assert
+                expect(selectProviderQuestion.exists()).toBeFalsy();
+            });
+        });
+        describe('no network providers alert', () => {
+            test('when providers length is not 0', async () => {
                 // Arrange
                 const wrapper = shallowMount(tpaSearch, getMountOptions());
                 await wrapper.setData({ providers: ['p1', 'p2'] });
@@ -283,6 +377,54 @@ describe('TPA search page', () => {
                 // Assert
                 expect(noNetworkProvidersAlert.exists()).toBeFalsy();
             });
+            test('when initialLoading is true', async () => {
+                // Arrange
+                const wrapper = shallowMount(tpaSearch, getMountOptions());
+                await wrapper.setData({ providers: [], initialLoading: true });
+
+                // Act
+                const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders');
+
+                // Assert
+                expect(noNetworkProvidersAlert.exists()).toBeFalsy();
+            });
+            test('when reloadProviders is true', async () => {
+                // Arrange
+                const wrapper = shallowMount(tpaSearch, getMountOptions());
+                await wrapper.setData({ providers: [], reloadProviders: true });
+
+                // Act
+                const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders');
+
+                // Assert
+                expect(noNetworkProvidersAlert.exists()).toBeFalsy();
+            });
+        });
+        describe('preferred shop not listed link', () => {
+            test('when initialLoading is true', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                await wrapper.setData({ initialLoading: true });
+
+                // Act
+                const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink');
+
+                // Assert
+                expect(preferredShopNotListedLink.exists()).toBeFalsy();
+            });
+            test('when reloadProviders is true', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                await wrapper.setData({ reloadProviders: true });
+
+                // Act
+                const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink');
+
+                // Assert
+                expect(preferredShopNotListedLink.exists()).toBeFalsy();
+            });
+        });
+    });
     describe('computed', () => {
         describe('filterOptions', () => {
             test.each([[], null, undefined])(
@@ -330,7 +472,7 @@ describe('TPA search page', () => {
             });
         });
         test.each([null, undefined, '', 'non empty string'])(
-            'tpaSearchQuestionLabel returns value from getCmsContent',
+            'tpaSearchQuestionLabel returns "%p" from getCmsContent',
             (cmsContent) => {
                 // Arrange
                 const mountOptions = getMountOptions();
@@ -352,7 +494,7 @@ describe('TPA search page', () => {
             }
         );
         test.each([null, undefined, '', 'non empty string'])(
-            'searchInstructionsText returns value from getCmsContent',
+            'searchInstructionsText returns "%p" from getCmsContent',
             (cmsContent) => {
                 // Arrange
                 const mountOptions = getMountOptions();
@@ -374,7 +516,7 @@ describe('TPA search page', () => {
             }
         );
         test.each([null, undefined, '', 'non empty string'])(
-            'shopNotListedModalLink returns value from getCmsContent',
+            'shopNotListedModalLink returns "%p" from getCmsContent',
             (cmsContent) => {
                 // Arrange
                 const mountOptions = getMountOptions();
@@ -508,7 +650,7 @@ describe('TPA search page', () => {
                 await wrapper.setData({
                     providers: [
                         {
-                            name: 'Shop Auto Glass',
+                            companyName: 'Shop Auto Glass',
                             phoneNumber: '740-555-1234',
                             distanceInMiles: 1.2345,
                             providerNumber: '232209',
@@ -520,7 +662,7 @@ describe('TPA search page', () => {
                             }
                         },
                         {
-                            name: 'Safelite AutoGlass',
+                            companyName: 'Safelite AutoGlass',
                             phoneNumber: '676-555-0099',
                             distanceInMiles: 123.9452,
                             providerNumber: '123456',
@@ -547,7 +689,7 @@ describe('TPA search page', () => {
         });
         describe('providerButtonData', () => {
             test.each([null, undefined, []])(
-                'returns empty list when providers empty',
+                'returns empty list when providers equals "%p"',
                 async (providers) => {
                     // Arrange
                     const wrapper = shallowMount(tpaSearch, getMountOptions());
@@ -566,7 +708,7 @@ describe('TPA search page', () => {
                 await wrapper.setData({
                     providers: [
                         {
-                            name: 'Shop Auto Glass',
+                            companyName: 'Shop Auto Glass',
                             phoneNumber: '740-555-1234',
                             distanceInMiles: 1.2345,
                             providerNumber: '232209',
@@ -578,7 +720,7 @@ describe('TPA search page', () => {
                             }
                         },
                         {
-                            name: 'Safelite AutoGlass',
+                            companyName: 'Safelite AutoGlass',
                             phoneNumber: '676-555-0099',
                             distanceInMiles: 123.9452,
                             providerNumber: '123456',
@@ -613,8 +755,86 @@ describe('TPA search page', () => {
                 expect(result).toEqual(expectedResult);
             });
         });
+        describe('selectedProviderIsSafeliteShop', () => {
+            test('no issue when provider in providers with no provider number', async () => {
+                // Arrange
+                const selectedProviderNumber = '10099';
+                const providers = [
+                    { isSafeliteShop: false },
+                    { isSafeliteShop: true }
+                ];
+                const wrapper = shallowMount(tpaSearch, getMountOptions());
+                await wrapper.setData({ selectedProviderNumber, providers });
+
+                // Act
+                const result = wrapper.vm.selectedProviderIsSafeliteShop;
+
+                // Assert
+                expect(result).toEqual(false);
+            });
+            test.each([null, undefined, []])(
+                'returns false when providers %s',
+                async (providers) => {
+                    // Arrange
+                    const selectedProviderNumber = '10099';
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    await wrapper.setData({ selectedProviderNumber, providers });
+
+                    // Act
+                    const result = wrapper.vm.selectedProviderIsSafeliteShop;
+
+                    // Assert
+                    expect(result).toEqual(false);
+                }
+            );
+            test.each([[true, true], [false, false]])(
+                'returns %p when first instance of multiple matching providerNumbers has isSafeliteShop value %p',
+                async (expectedOutput, isSafeliteShop) => {
+                    // Arrange
+                    const selectedProviderNumber = '29987';
+                    const providers = [
+                        {
+                            providerNumber: selectedProviderNumber,
+                            isSafeliteShop
+                        },
+                        {
+                            providerNumber: selectedProviderNumber,
+                            isSafeliteShop: !isSafeliteShop
+                        }
+                    ];
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    await wrapper.setData({ selectedProviderNumber, providers });
+
+                    // Act
+                    const result = wrapper.vm.selectedProviderIsSafeliteShop;
+
+                    // Assert
+                    expect(result).toEqual(expectedOutput);
+                }
+            );
+            test.each([[false, false], [true, true]])(
+                'returns %p when providerNumber match has isSafeliteShop equal to %p',
+                async (expectedOutput, isSafeliteShop) => {
+                    // Arrange
+                    const selectedProviderNumber = '19274';
+                    const providers = [{
+                        providerNumber: selectedProviderNumber,
+                        isSafeliteShop
+                    }];
+                    const wrapper = shallowMount(tpaSearch, getMountOptions());
+                    await wrapper.setData({ selectedProviderNumber, providers });
+
+                    // Act
+                    const result = wrapper.vm.selectedProviderIsSafeliteShop;
+
+                    // Assert
+                    expect(result).toEqual(expectedOutput);
+                }
+            );
+        });
     });
     describe('watch', () => {
+        // TODO update/add to filter watch tests
         test('on filter calls getTpaProviders and sets providers', async () => {
             // Arrange
             const zipCode = '78220';
@@ -635,6 +855,7 @@ describe('TPA search page', () => {
             expect(wrapper.vm.providers).toEqual(providers.data.shopProviders);
             expect(wrapper.vm.mapZipCode).toBe(zipCode);
         });
+        // TODO confirm tests appropriate. Also should this method be async?
         describe('on providers', () => {
             test.each([null, undefined, []])(
                 'sets selected provider number to "" when there are no providers',
@@ -686,7 +907,6 @@ describe('TPA search page', () => {
             (streetAddress, city, state, zipCode, expected) => {
                 // Arrange
                 const { wrapper } = getMountedComponent();
-                useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders));
                 const provider = {
                     address: {
                         streetAddress,
@@ -723,7 +943,7 @@ describe('TPA search page', () => {
                 const { wrapper } = getMountedComponent();
                 const providers = {
                     data: {
-                        shopProviders: [{ name: 'foo' }]
+                        shopProviders: [{ companyName: 'foo' }]
                     }
                 };
                 useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers));
@@ -774,7 +994,7 @@ describe('TPA search page', () => {
                     zipCode,
                     mapZipCode: initialMapZipCode
                 });
-                const shopProviders = [{ name: 'foo' }];
+                const shopProviders = [{ companyName: 'foo' }];
                 useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => ({
                     data: { shopProviders }
                 }));
@@ -797,15 +1017,46 @@ describe('TPA search page', () => {
             // Assert
             expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
         });
-        test('forwardButtonAction invokes navigate method', () => {
+        describe('forwardButtonAction', () => {
+            test('invokes navigate method with safelite shop scenario when selectedProviderIsSafeliteShop true', async () => {
                 // Arrange
                 const { wrapper } = getMountedComponent();
+                const providerNumber = '1109';
+                await wrapper.setData({
+                    selectedProviderNumber: providerNumber,
+                    providers: [{
+                        providerNumber,
+                        isSafeliteShop: true
+                    }]
+                });
 
                 // Act
-            wrapper.vm.backButtonAction();
+                wrapper.vm.forwardButtonAction();
 
                 // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP, undefined);
+            });
+            test('invokes navigate method with non safelite shop scenario when selectedProviderIsSafeliteShop false', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const providerNumber = '928';
+                await wrapper.setData({
+                    selectedProviderNumber: providerNumber,
+                    providers: [{
+                        providerNumber,
+                        isSafeliteShop: false
+                    }]
+                });
+
+                // Act
+                wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+                    navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
+                    undefined
+                );
+            });
         });
         describe('getCustomValueFromString', () => {
             test('returns radius in miles value if "radiusInMiles"', () => {
@@ -855,7 +1106,7 @@ describe('TPA search page', () => {
                 // Arrange
                 const wrapper = shallowMount(tpaSearch, getMountOptions());
                 const provider = {
-                    name: 'Shop Auto Glass',
+                    companyName: 'Shop Auto Glass',
                     phoneNumber: '740-555-1234',
                     distanceInMiles: 1.2345,
                     providerNumber: '232209',
@@ -882,10 +1133,10 @@ describe('TPA search page', () => {
             describe('returns result with button label', () => {
                 test.each(['', undefined, null])(
                     'equal to empty string when name is empty',
-                    (name) => {
+                    (companyName) => {
                         // Arrange
                         const wrapper = shallowMount(tpaSearch, getMountOptions());
-                        const provider = { name };
+                        const provider = { companyName };
 
                         // Act
                         const result = wrapper.vm.getShopButtonDataFromProvider(provider);
@@ -897,14 +1148,14 @@ describe('TPA search page', () => {
                 test('returns provider name when exists', () => {
                     // Arrange
                     const wrapper = shallowMount(tpaSearch, getMountOptions());
-                    const name = 'Some Shop Name';
+                    const companyName = 'Some Shop Name';
-                    const provider = { name };
+                    const provider = { companyName };
 
                     // Act
                     const result = wrapper.vm.getShopButtonDataFromProvider(provider);
 
                     // Assert
-                    expect(result.buttonLabel).toEqual(name);
+                    expect(result.buttonLabel).toEqual(companyName);
                 });
             });
             describe('returns result with button label sub copy', () => {
@@ -994,7 +1245,7 @@ describe('TPA search page', () => {
             const { wrapper } = getMountedComponent();
             const zipCode = '18394';
             useMainStore().order.customer.address.zipCode = zipCode;
-            const providers = [{ name: 'provider' }];
+            const providers = [{ companyName: 'provider' }];
             useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
                 ({ data: { shopProviders: radius === 25 ? providers : [] } }));
             const expectedFilter = '25 miles';
@@ -1019,7 +1270,7 @@ describe('TPA search page', () => {
             const { wrapper } = getMountedComponent();
             const zipCode = '18394';
             useMainStore().order.customer.address.zipCode = zipCode;
-            const providers = [{ name: 'provider' }];
+            const providers = [{ companyName: 'provider' }];
             useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
                 ({ data: { shopProviders: radius === 50 ? providers : [] } }));
             const expectedFilter = '50 miles';
@@ -1046,7 +1297,7 @@ describe('TPA search page', () => {
                 const { wrapper } = getMountedComponent();
                 const zipCode = '18394';
                 useMainStore().order.customer.address.zipCode = zipCode;
-                const providers = [{ name: 'provider' }];
+                const providers = [{ companyName: 'provider' }];
                 useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
                     ({ data: { shopProviders: radius === 100 ? providers : [] } }));
                 const expectedFilter = '100 miles';

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

@@ -39,12 +39,11 @@
             </Form>
             <loader
                 v-if="initialLoading"
-                ref="providersLoader"
+                id="mapLoader"
                 loaderPosition="center"
                 loaderColor="blue"
                 :width="4"
-                :height="4"
+                :height="4" />
-                class="loader" />
             <div v-else>
                 <googleMap
                     id="map"
@@ -66,10 +65,9 @@
                                 :options="filterOptions"
                                 disableAutoFill
                                 :validationRules="rules.filter" />
-
                             <loader
                                 v-if="reloadProviders"
-                                ref="providersLoader"
+                                id="providersLoader"
                                 loaderPosition="center"
                                 loaderColor="blue"
                                 :width="4"
@@ -259,7 +257,7 @@ export default {
             return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? [];
         },
         selectedProviderIsSafeliteShop() {
-            return this.providers.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
+            return this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
         }
     },
     watch: {
@@ -385,7 +383,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .search-question {
     font-size: $h5-font-size;
 }