Adding tpa search tests

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

@@ -0,0 +1,193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TPA search page returns the initial data 1`] = `
+Object {
+  "additionalButtonData": Object {
+    "displayAvailabilityIndicators": false,
+  },
+  "filter": "",
+  "providers": Array [],
+  "rules": Object {
+    "filter": "option-required",
+    "provider": "option-required",
+    "zipCode": "zip-code-required|zip-code-search-format",
+  },
+  "selectedProviderNumber": "",
+  "shopListButton": Object {
+    "beforeMount": [Function],
+    "components": Object {
+      "baseInputButton": Object {
+        "computed": Object {
+          "buttonId": [Function],
+          "eventTypes": [Function],
+          "inputType": [Function],
+          "isChecked": [Function],
+          "isValueSelectedOnClick": [Function],
+        },
+        "data": [Function],
+        "emits": Array [
+          "update:modelValue",
+        ],
+        "methods": Object {
+          "handleBlur": [Function],
+          "handleClick": [Function],
+          "handleEventAction": [Function],
+          "handleFocus": [Function],
+          "handleSelectionChange": [Function],
+        },
+        "mounted": [Function],
+        "name": "base-input-button",
+        "props": Object {
+          "buttonWrapperClasses": Array [
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "groupName": Object {
+            "required": true,
+            "type": [Function],
+          },
+          "inputClasses": Array [
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "isMultiSelect": [Function],
+          "isRequired": Object {
+            "default": true,
+            "type": [Function],
+          },
+          "lastValuePushedToGa": Array [
+            [Function],
+            [Function],
+          ],
+          "modelValue": Object {
+            "required": true,
+            "validator": [Function],
+          },
+          "selectingInitiatesLoad": Object {
+            "default": false,
+            "type": [Function],
+          },
+          "setLastValuePushedToGa": [Function],
+          "suppressError": [Function],
+          "validationRules": Object {
+            "default": "",
+            "type": [Function],
+          },
+          "value": Object {
+            "required": true,
+            "type": Array [
+              [Function],
+              [Function],
+            ],
+          },
+          "valueToLogType": [Function],
+        },
+        "render": [Function],
+        "setup": [Function],
+      },
+      "loader": Object {
+        "name": "loader",
+        "props": Object {
+          "loaderColor": Object {
+            "type": [Function],
+          },
+          "loaderPosition": Object {
+            "type": [Function],
+          },
+        },
+        "render": [Function],
+      },
+    },
+    "computed": Object {
+      "availabilityRatingClass": [Function],
+      "badgeText": [Function],
+      "isLoaderDisplayed": [Function],
+    },
+    "data": [Function],
+    "mixins": Array [
+      Object {
+        "computed": Object {
+          "selectedValue": Object {
+            "get": [Function],
+            "set": [Function],
+          },
+        },
+        "model": Object {
+          "event": "change",
+          "prop": "modelValue",
+        },
+        "props": Object {
+          "additionalButtonData": [Function],
+          "additionalButtonStyling": [Function],
+          "altText": Object {
+            "default": "",
+            "type": [Function],
+          },
+          "buttonAuxiliaryCopy": [Function],
+          "buttonBodyCopy": [Function],
+          "buttonFooterCopy": [Function],
+          "buttonImage": [Function],
+          "buttonImageId": [Function],
+          "buttonLabel": Array [
+            [Function],
+            [Function],
+          ],
+          "buttonLabelSubCopy": [Function],
+          "groupName": Object {
+            "required": true,
+            "type": [Function],
+          },
+          "isMultiSelect": [Function],
+          "isRequired": Object {
+            "default": true,
+            "type": [Function],
+          },
+          "isWide": [Function],
+          "lastValuePushedToGa": Array [
+            [Function],
+            [Function],
+          ],
+          "modelValue": Object {
+            "required": true,
+            "validator": [Function],
+          },
+          "screenReaderOnlyText": [Function],
+          "selectingInitiatesLoad": Object {
+            "default": false,
+            "type": [Function],
+          },
+          "setLastValuePushedToGa": [Function],
+          "suppressError": [Function],
+          "textPosition": [Function],
+          "validationRules": Object {
+            "default": "",
+            "type": [Function],
+          },
+          "value": Object {
+            "required": true,
+            "type": Array [
+              [Function],
+              [Function],
+            ],
+          },
+          "valueToLogType": [Function],
+        },
+      },
+    ],
+    "name": "shop-list-button",
+    "render": [Function],
+  },
+  "widget": Object {
+    "filterByQuestion": "FilterByQuestion",
+    "noNetworkShopsAlert": "NoNetworkShopsAlertWidget",
+    "searchInstructions": "SearchInstructions",
+    "shopNotListedLink": "ShopNotListedLink",
+    "siteFooter": "SiteFooterWidget",
+    "siteHeader": "SiteHeaderWidget",
+    "tpaSearchQuestion": "TPASearchQuestion",
+  },
+  "zipCode": "12663",
+}
+`;

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

@@ -1 +1,734 @@
-// TODO finish
+// Components
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import tpaSearch from '@/layouts/tpa-search/tpa-search.vue';
+
+// Supporting Files
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store';
+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';
+
+// Mock fetchCmsContentForPage
+jest.mock('@/helpers/cms-content-helper', () => ({
+    fetchCmsContentForPage: jest.fn(),
+    doesCopyContainRouterLink: jest.fn()
+}));
+
+// Mock our module for promises.
+jest.mock('@/helpers/layout-helper.js', () => jest.fn());
+
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    });
+    useMainStore(testingPinia);
+    methodToRunAfterInitializingStore();
+
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.data = () => (initialData);
+
+    const apiResponses = { cmsContent: {} };
+
+    settleAllPromises.mockImplementation(() => apiResponses);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const wrapper = shallowMount(tpaSearch, mountOptions);
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => cmsContent);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
+
+describe('TPA search page', () => {
+    test('returns the initial data', () => {
+        // Arrange
+        const zipCode = '12663';
+        const mainInitialState = {
+            order: {
+                customer: {
+                    address: { zipCode }
+                }
+            }
+        };
+        const { wrapper } = getMountedComponent(mainInitialState);
+
+        // Assert
+        expect(wrapper.vm.$data).toMatchSnapshot();
+    });
+    describe('should render', () => {
+        test('site header', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+            const expectedWidgetName = 'SiteHeaderWidget';
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBeTruthy();
+            expect(siteHeader.props().cmsWidgetName).toBe(expectedWidgetName);
+        });
+        test('search providers form', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const searchProvidersForm = wrapper.findComponent('#searchProvidersForm');
+
+            // Assert
+            expect(searchProvidersForm.exists()).toBeTruthy();
+        });
+        test('search question label', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const searchQuestionLabel = wrapper.find('#tpaSearchQuestionLabel');
+
+            // Assert
+            expect(searchQuestionLabel.exists()).toBeTruthy();
+            expect(searchQuestionLabel.attributes().for).toBe('tpaSearchQuestionField');
+            expect(searchQuestionLabel.classes()).toContain('text-center');
+            expect(searchQuestionLabel.classes()).toContain('mt-5');
+            expect(searchQuestionLabel.classes()).toContain('mb-0');
+            expect(searchQuestionLabel.classes()).toContain('text-black');
+            expect(searchQuestionLabel.classes()).toContain('w-100');
+            expect(searchQuestionLabel.classes()).toContain('search-question');
+        });
+        test('search instructions', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const searchInstructions = wrapper.find('#searchInstructions');
+
+            // Assert
+            expect(searchInstructions.exists()).toBeTruthy();
+            expect(searchInstructions.attributes().for).toBe('tpaSearchQuestionField');
+            expect(searchInstructions.classes()).toContain('text-center');
+            expect(searchInstructions.classes()).toContain('small');
+            expect(searchInstructions.classes()).toContain('darker-gray');
+            expect(searchInstructions.classes()).toContain('w-100');
+            expect(searchInstructions.classes()).toContain('mb-4');
+        });
+        test('search question field', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+            const expectedWidgetName = 'TPASearchQuestion';
+
+            // Act
+            const searchQuestionField = wrapper.findComponent('#tpaSearchQuestionField');
+
+            // Assert
+            expect(searchQuestionField.exists()).toBeTruthy();
+            expect(searchQuestionField.props().inputId).toBe('tpaSearchQuestionField');
+            expect(searchQuestionField.props().isRequired).toBeTruthy();
+            expect(searchQuestionField.props().cmsWidgetName).toBe(expectedWidgetName);
+            expect(searchQuestionField.props().includeSearchIcon).toBeTruthy();
+            expect(searchQuestionField.props().displayQuestionText).toBeFalsy();
+            expect(searchQuestionField.props().validationRules)
+                .toBe(`${globalRules.ZIP_CODE_REQUIRED}|${globalRules.ZIP_CODE_SEARCH_FORMAT}`);
+        });
+        test('provider selection form', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const providerSelectionForm = wrapper.findComponent('#providerSelectionForm');
+
+            // Assert
+            expect(providerSelectionForm.exists()).toBeTruthy();
+        });
+        test('map', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const map = wrapper.find('#map');
+
+            // Assert
+            expect(map.exists()).toBeTruthy();
+            expect(map.classes()).toContain('mb-4');
+        });
+        test('search radius filter', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+            const expectedWidgetName = 'FilterByQuestion';
+
+            // Act
+            const searchRadiusFilter = wrapper.findComponent('#searchRadiusFilter');
+
+            // Assert
+            expect(searchRadiusFilter.exists()).toBeTruthy();
+            expect(searchRadiusFilter.props().cmsWidgetName).toBe(expectedWidgetName);
+            expect(searchRadiusFilter.props().validationRules).toBe(globalRules.OPTION_REQUIRED);
+        });
+        test('select provider question', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const selectProviderQuestion = wrapper.findComponent('#selectProviderQuestion');
+
+            // Assert
+            expect(selectProviderQuestion.exists()).toBeTruthy();
+            expect(selectProviderQuestion.props().buttonTypeString).toBe('shopListButton');
+            expect(selectProviderQuestion.classes()).toContain('radioQuestion');
+            expect(selectProviderQuestion.props().groupName).toBe('chooseShop');
+            expect(selectProviderQuestion.props().textPosition).toBe('text-start');
+            expect(selectProviderQuestion.props().isRequired).toBeTruthy();
+            expect(selectProviderQuestion.props().validationRules).toBe(globalRules.OPTION_REQUIRED);
+        });
+        test.each([[], null, undefined])(
+            'no network providers alert when providers length is 0, undefined, or null',
+            (providers) => {
+                // Arrange
+                const initialData = {
+                    providers
+                };
+                const wrapper = shallowMount(tpaSearch, getMountOptions({}, initialData));
+
+                // Act
+                const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders');
+
+                // Assert
+                expect(noNetworkProvidersAlert.exists()).toBeTruthy();
+                expect(noNetworkProvidersAlert.props().cmsWidgetName).toBeTruthy();
+                expect(noNetworkProvidersAlert.props().alertClass).toBe('alert-warning');
+                expect(noNetworkProvidersAlert.props().isDismissible).toBeFalsy();
+            }
+        );
+        test('preferred shop not listed link', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink');
+
+            // Assert
+            expect(preferredShopNotListedLink.exists()).toBeTruthy();
+            expect(preferredShopNotListedLink.props().linkType).toBe('navigation');
+            expect(preferredShopNotListedLink.props().href).toBe('#!');
+        });
+        test('site footer', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSearch, getMountOptions());
+
+            // Act
+            const footer = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(footer.exists()).toBeTruthy();
+            expect(footer.props().cmsWidgetName).toBe('SiteFooterWidget');
+        });
+    });
+    test('should not render no network providers alert when providers length is not 0', async () => {
+        // Arrange
+        const wrapper = shallowMount(tpaSearch, getMountOptions());
+        await wrapper.setData({ providers: ['p1', 'p2'] });
+
+        // Act
+        const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders');
+
+        // Assert
+        expect(noNetworkProvidersAlert.exists()).toBeFalsy();
+    });
+    describe('computed', () => {
+        describe('filterOptions', () => {
+            test.each([[], null, undefined])(
+                'returns empty object when cms content is empty, null or undefined',
+                (cmsContent) => {
+                    // Arrange
+                    const mountOptions = getMountOptions();
+                    mountOptions.mixins = [{
+                        methods: {
+                            getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                                (widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS 
+                                    ? cmsContent
+                                    : ''))
+                        }
+                    }];
+                    const wrapper = shallowMount(tpaSearch, mountOptions);
+
+                    // Act
+                    const result = wrapper.vm.filterOptions;
+
+                    // Assert
+                    expect(result).toEqual({});
+                }
+            );
+            test('returns expected when cms content is some non empty iterable', () => {
+                // Arrange
+                const mountOptions = getMountOptions();
+                const cmsContent = [{ Name: 'foo' }, { Name: 'bar' }];
+                mountOptions.mixins = [{
+                    methods: {
+                        getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                            (widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS 
+                                ? cmsContent
+                                : ''))
+                    }
+                }];
+                const wrapper = shallowMount(tpaSearch, mountOptions);
+                const expected = { foo: 'foo', bar: 'bar' };
+
+                // Act
+                const result = wrapper.vm.filterOptions;
+
+                // Assert
+                expect(result).toEqual(expected);
+            });
+        });
+        test.each([null, undefined, '', 'non empty string'])(
+            'tpaSearchQuestionLabel returns value from getCmsContent',
+            (cmsContent) => {
+                // Arrange
+                const mountOptions = getMountOptions();
+                mountOptions.mixins = [{
+                    methods: {
+                        getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                            (widget === 'TPASearchQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
+                                ? cmsContent
+                                : ''))
+                    }
+                }];
+                const wrapper = shallowMount(tpaSearch, mountOptions);
+
+                // Act
+                const result = wrapper.vm.tpaSearchQuestionLabel;
+
+                // Assert
+                expect(result).toEqual(cmsContent);
+            }
+        );
+        test.each([null, undefined, '', 'non empty string'])(
+            'searchInstructionsText returns value from getCmsContent',
+            (cmsContent) => {
+                // Arrange
+                const mountOptions = getMountOptions();
+                mountOptions.mixins = [{
+                    methods: {
+                        getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                            (widget === 'SearchInstructions' && field === widgetFields.TEXT_BLOCK_WIDGET.TEXT
+                                ? cmsContent
+                                : ''))
+                    }
+                }];
+                const wrapper = shallowMount(tpaSearch, mountOptions);
+
+                // Act
+                const result = wrapper.vm.searchInstructionsText;
+
+                // Assert
+                expect(result).toEqual(cmsContent);
+            }
+        );
+        test.each([null, undefined, '', 'non empty string'])(
+            'shopNotListedModalLink returns value from getCmsContent',
+            (cmsContent) => {
+                // Arrange
+                const mountOptions = getMountOptions();
+                mountOptions.mixins = [{
+                    methods: {
+                        getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                            (widget === 'ShopNotListedLink' && field === widgetFields.TEXT_BLOCK_WIDGET.TEXT
+                                ? cmsContent
+                                : ''))
+                    }
+                }];
+                const wrapper = shallowMount(tpaSearch, mountOptions);
+
+                // Act
+                const result = wrapper.vm.shopNotListedModalLink;
+
+                // Assert
+                expect(result).toEqual(cmsContent);
+            }
+        );
+        describe('radiusInMiles', () => {
+            test('returns 25 when filter is "25 miles"', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                await wrapper.setData({ filter: '25 miles' });
+
+                // Act
+                const result = wrapper.vm.radiusInMiles;
+
+                // Assert
+                expect(result).toEqual(25);
+            });
+            test('returns 50 when filter is "50 miles"', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                await wrapper.setData({ filter: '50 miles' });
+
+                // Act
+                const result = wrapper.vm.radiusInMiles;
+
+                // Assert
+                expect(result).toEqual(50);
+            });
+            test('returns 100 when filter is "100 miles"', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                await wrapper.setData({ filter: '100 miles' });
+
+                // Act
+                const result = wrapper.vm.radiusInMiles;
+
+                // Assert
+                expect(result).toEqual(100);
+            });
+            test.each([null, undefined, 'some random string'])(
+                'returns 0 when filter is not "25 miles", "50 miles", or "100 miles"',
+                async (filter) => {
+                    // Arrange
+                    const { wrapper } = getMountedComponent();
+                    await wrapper.setData({ filter });
+
+                    // Act
+                    const result = wrapper.vm.radiusInMiles;
+
+                    // Assert
+                    expect(result).toEqual(0);
+                }
+            );
+        });
+        describe('noNetworkShopsAlertHeaderText', () => {
+            test('returns exact cmsContent value when "{custom:radiusInMiles}" is not a substring', async () => {
+                // Arrange
+                const cmsContent = 'content returned from cms';
+                const mountOptions = getMountOptions();
+                mountOptions.mixins = [{
+                    methods: {
+                        getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                            (widget === 'NoNetworkShopsAlertWidget' && field === widgetFields.ALERT_WIDGET.HEADLINE_TEXT
+                                ? cmsContent
+                                : ''))
+                    }
+                }];
+                const wrapper = shallowMount(tpaSearch, mountOptions);
+
+                // Act
+                const result = wrapper.vm.noNetworkShopsAlertHeaderText;
+
+                // Assert
+                expect(result).toEqual(cmsContent);
+            });
+            test('returns cmsContent value with all instances of "{custom:radiusInMiles}" replaced with radiusInMiles', () => {
+                // Arrange
+                const cmsContent = '{custom:radiusInMiles} ret{custom:radiusInMiles}urned {custom:radiusInMiles}cms{custom:radiusInMiles}';
+                const mountOptions = getMountOptions();
+                mountOptions.mixins = [{
+                    methods: {
+                        getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                            (widget === 'NoNetworkShopsAlertWidget' && field === widgetFields.ALERT_WIDGET.HEADLINE_TEXT
+                                ? cmsContent
+                                : ''))
+                    }
+                }];
+                const wrapper = shallowMount(tpaSearch, mountOptions);
+                const expected = '0 ret0urned 0cms0';
+
+                // Act
+                const result = wrapper.vm.noNetworkShopsAlertHeaderText;
+
+                // Assert
+                expect(result).toEqual(expected);
+            });
+        });
+    });
+    describe('watch', () => {
+        test('on filter calls getTpaProviders and sets providers', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            const providers = { data: ['some data', 'some more data'] };
+            useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers));
+            const newFilter = 'new filter';
+
+            // Act
+            await wrapper.vm.$options.watch.filter.call(wrapper.vm, newFilter);
+
+            // Assert
+            expect(useMainStore().getTpaProviders).toBeCalled();
+            expect(wrapper.vm.providers).toEqual(providers.data);
+        });
+        describe('on providers', () => {
+            test.each([null, undefined, []])(
+                'sets selected provider number to "" when there are no providers',
+                (newProviders) => {
+                    // Arrange
+                    const { wrapper } = getMountedComponent();
+
+                    // Act
+                    wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders);
+
+                    // Assert
+                    expect(wrapper.vm.selectedProviderNumber).toBe('');
+                }
+            );
+            test('sets selected provider number to value of provider when there is one provider', () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const value = 'some value';
+                const newProviders = [{ value }];
+
+                // Act
+                wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders);
+
+                // Assert
+                expect(wrapper.vm.selectedProviderNumber).toBe(value);
+            });
+            test('sets selected provider number to "" when there are more than one provider', () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const newProviders = [{ value: 'val1' }, { value: 'val2' }];
+
+                // Act
+                wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders);
+
+                // Assert
+                expect(wrapper.vm.selectedProviderNumber).toBe('');
+            });
+        });
+    });
+    describe('method', () => {
+        describe('getProviders', () => {
+            test.each([null, undefined, {}])(
+                'returns empty list when getTpaProviders returns no data',
+                async (newProviders) => {
+                    // Arrange
+                    const { wrapper } = getMountedComponent();
+                    useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders));
+
+                    // Act
+                    const result = await wrapper.vm.getProviders();
+
+                    // Assert
+                    expect(result).toEqual([]);
+                }
+            );
+            test('returns expected when getTpaProviders returns data', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const providers = { data: [{ name: 'foo' }] };
+                useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers));
+
+                // Act
+                const result = await wrapper.vm.getProviders();
+
+                // Assert
+                expect(result).toEqual(providers.data);
+            });
+        });
+        test('doNotSeeMyShopLinkClick invokes navigate method', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+
+            // Act
+            wrapper.vm.doNotSeeMyShopLinkClick();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        });
+        describe('searchClick', () => {
+            test.each([null, undefined, {}])(
+                'sets providers to empty list when no data returned from getProviders',
+                async (newProviders) => {
+                    // Arrange
+                    const { wrapper } = getMountedComponent();
+                    useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders));
+
+                    // Act
+                    await wrapper.vm.searchClick();
+
+                    // Assert
+                    expect(wrapper.vm.providers).toEqual([]);
+                }
+            );
+            test('returns value from getProviders', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const newProviders = { data: [{ name: 'foo' }] };
+                useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders));
+
+                // Act
+                await wrapper.vm.searchClick();
+
+                // Assert
+                expect(wrapper.vm.providers).toEqual(newProviders.data);
+            });
+        });
+        test('backButtonAction invokes navigate method', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        });
+        test('forwardButtonAction invokes navigate method', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        });
+        describe('getCustomValueFromString', () => {
+            test('returns radius in miles value if "radiusInMiles"', () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const str = 'radiusInMiles';
+
+                // Act
+                const result = wrapper.vm.getCustomValueFromString(str);
+
+                // Assert
+                expect(result).toBe(0);
+            });
+            test('returns radius in miles value if not "radiusInMiles"', () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const str = 'some other string';
+
+                // Act
+                const result = wrapper.vm.getCustomValueFromString(str);
+
+                // Assert
+                expect(result).toBeNull();
+            });
+        });
+        test.each([undefined, null, 'some value', ''])(
+            'setFilter sets value of filter',
+            (filter) => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+
+                // Act
+                wrapper.vm.setFilter(filter);
+
+                // Assert
+                expect(wrapper.vm.filter).toEqual(filter);
+            }
+        );
+        test.each([undefined, null, ['some value'], []])(
+            'setProviders sets value of providers',
+            (providers) => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+
+                // Act
+                wrapper.vm.setProviders(providers);
+
+                // Assert
+                expect(wrapper.vm.providers).toEqual(providers);
+            }
+        );
+    });
+    describe('before route enter', () => {
+        test('when providers exist at 25 mile radius, filter is set to "25 miles" and providers set to expected', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            const zipCode = '18394';
+            useMainStore().order.customer.address.zipCode = zipCode;
+            const providers = { data: [{ name: 'provider' }] };
+            useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => (radius === 25 ? providers : []));
+            const expectedFilter = '25 miles';
+
+            // Act
+            await tpaSearch.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-search' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            // Assert
+            expect(wrapper.vm.filter).toBe(expectedFilter);
+            expect(wrapper.vm.providers).toEqual(providers);
+        });
+        test('when providers exist at 50 mile radius but not 25, filter is set to "50 miles" and providers set to expected', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            const zipCode = '18394';
+            useMainStore().order.customer.address.zipCode = zipCode;
+            const providers = { data: [{ name: 'provider' }] };
+            useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => (radius === 50 ? providers : []));
+            const expectedFilter = '50 miles';
+
+            // Act
+            await tpaSearch.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-search' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            // Assert
+            expect(wrapper.vm.filter).toBe(expectedFilter);
+            expect(wrapper.vm.providers).toEqual(providers);
+        });
+        test(
+            'when providers exist at 100 mile radius but not 50 or 25, filter is set to "100 miles" and providers set to expected',
+            async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const zipCode = '18394';
+                useMainStore().order.customer.address.zipCode = zipCode;
+                const providers = { data: [{ name: 'provider' }] };
+                useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => (radius === 100 ? providers : []));
+                const expectedFilter = '100 miles';
+
+                // Act
+                await tpaSearch.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-search' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.filter).toBe(expectedFilter);
+                expect(wrapper.vm.providers).toEqual(providers);
+            }
+        );
+        test(
+            'when no providers exist at 100, 50, or 25 mile radius, filter is set to "100 miles" and providers set to empty list',
+            async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const zipCode = '18394';
+                useMainStore().order.customer.address.zipCode = zipCode;
+                useMainStore().getTpaProviders = jest.fn().mockImplementation(() => ([]));
+                const expectedFilter = '100 miles';
+
+                // Act
+                await tpaSearch.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-search' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.filter).toBe(expectedFilter);
+                expect(wrapper.vm.providers).toEqual([]);
+            }
+        );
+    });
+});

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

@@ -4,26 +4,26 @@
             ref="siteHeader"
             :cmsWidgetName="widget.siteHeader" />
         <Form
-            ref="searchProvidersForm"
+            id="searchProvidersForm"
             @submit="onSubmit"
             @invalidSubmit="onInvalidSubmit">
             <div class="container-fluid pb-2">
                 <div class="mx-5">
                     <label
-                        ref="tpaSearchQuestionLabel"
+                        id="tpaSearchQuestionLabel"
                         for="tpaSearchQuestionField"
                         class="text-center mt-5 mb-0 text-black w-100 search-question">
                         {{ tpaSearchQuestionLabel }}
                     </label>
                     <label
-                        ref="searchInstructions"
+                        id="searchInstructions"
                         for="tpaSearchQuestionField"
                         class="text-center small darker-gray w-100 mb-4">
                         {{ searchInstructionsText }}
                     </label>
                     <div class="mb-5">
                         <textboxQuestion
-                            ref="tpaSearchQuestionField"
+                            id="tpaSearchQuestionField"
                             v-model="zipCode"
                             inputId="tpaSearchQuestionField"
                             :cmsWidgetName="widget.tpaSearchQuestion"
@@ -37,19 +37,20 @@
             </div>
         </Form>
         <Form
-            ref="providerSelectionForm"
+            id="providerSelectionForm"
             v-slot="{ meta }"
             @submit="onSubmit"
             @invalidSubmit="onInvalidSubmit">
             <div class="container-fluid pb-2">
-                <p class="mb-4">
+                <p
+                    id="map"
+                    class="mb-4">
                     Placeholder for Map
                 </p>
 
                 <div class="mx-5">
                     <dropdownQuestion
-                        id="filter"
+                        id="searchRadiusFilter"
-                        ref="filter"
                         v-model="filter"
                         :cmsWidgetName="widget.filterByQuestion"
                         inputId="filterByQuestionField"
@@ -59,7 +60,7 @@
 
                     <div class="my-4">
                         <buttonQuestion
-                            ref="providerQuestion"
+                            id="selectProviderQuestion"
                             v-model="selectedProviderNumber"
                             buttonTypeString="shopListButton"
                             :buttonTypeObject="shopListButton"
@@ -71,17 +72,17 @@
                             :validationRules="rules.provider"
                             :additionalButtonData="additionalButtonData" />
                         <alert
-                            v-if="providers.length === 0"
+                            v-if="providers?.length === 0 ?? true"
-                            ref="alertNoNetworkProviders"
+                            id="alertNoNetworkProviders"
                             :cmsWidgetName="widget.noNetworkShopsAlert"
                             alertClass="alert-warning"
                             :isDismissible="false"
                             :manualHeadline="noNetworkShopsAlertHeaderText" />
                     </div>
-
                     <div
                         class="text-center">
                         <textLink
+                            id="preferredShopNotListedLink"
                             linkType="navigation"
                             href="#!"
                             :text="shopNotListedModalLink"
@@ -90,7 +91,7 @@
                 </div>
                 <siteFooter
                     ref="siteFooter"
-                    cmsWidgetName="SiteFooterWidget"
+                    :cmsWidgetName="widget.siteFooter"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
                     @backClicked="backButtonAction" />
@@ -151,6 +152,9 @@ export default {
         const tpaProvidersRadius100 = await useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
         let radius = '25 miles';
 
+        console.log(`25: ${JSON.stringify(tpaProvidersRadius25)}`);
+        console.log(`100: ${JSON.stringify(tpaProvidersRadius100)}`);
+
         let providers = tpaProvidersRadius25;
         if ((tpaProvidersRadius25?.data ?? []).length === 0) {
             radius = '50 miles';
@@ -162,19 +166,23 @@ export default {
         }
 
         next((vm) => {
+            console.log('in next');
+            console.log(radius);
             vm.setCmsContent(resultMap.cmsContent);
             vm.setFilter(radius);
             vm.setProviders(providers);
         });
     },
     data() {
-        // TODO should we default to this or policy.policyZipCode instead?
         const { zipCode } = useMainStore().order.customer.address;
         return {
             zipCode,
-            filter: this.initialFilter,
+            filter: '',
             providers: [],
             selectedProviderNumber: '',
+            additionalButtonData: {
+                displayAvailabilityIndicators: false
+            },
             widget: {
                 siteHeader: 'SiteHeaderWidget',
                 tpaSearchQuestion: 'TPASearchQuestion',
@@ -222,11 +230,6 @@ export default {
                 widgetFields.TEXT_BLOCK_WIDGET.TEXT
             );
         },
-        additionalButtonData() {
-            return {
-                displayAvailabilityIndicators: false
-            };
-        },
         radiusInMiles() {
             switch (this.filter) {
                 case '25 miles':
@@ -251,9 +254,9 @@ export default {
             // TODO right now this results in getProviders being called once more than it needs to be
             this.providers = await this.getProviders();
         },
-        providers() {
+        providers(newProviders) {
-            this.selectedProviderNumber = this.providers?.length === 1 ?? false
+            this.selectedProviderNumber = newProviders?.length === 1 ?? false
-                ? this.providers[0].value
+                ? newProviders[0].value
                 : '';
         }
     },
@@ -266,10 +269,7 @@ export default {
             doNotSeeMyShopLinkClick() {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK,
-                    this.$route,
+                    this.$route
-                    {},
-                    {},
-                    { [routerParams.NOT_SEEING_PREFERRED_SHOP]: true }
                 );
             },
             async searchClick() {
@@ -279,9 +279,6 @@ export default {
                 this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
             forwardButtonAction() {
-                return this.navigateForward();
-            },
-            navigateForward() {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route