diff --git a/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap b/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap new file mode 100644 index 00000000..f0824765 --- /dev/null +++ b/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", +} +`; diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js index 384dfdc7..11fbc8fb 100644 --- a/src/layouts/tpa-search/tpa-search.spec.js +++ b/src/layouts/tpa-search/tpa-search.spec.js @@ -1 +1,734 @@ -// TODO finish \ No newline at end of file +// 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([]); + } + ); + }); +}); diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index b9031248..30ca578f 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -4,26 +4,26 @@ ref="siteHeader" :cmsWidgetName="widget.siteHeader" />
-

+

Placeholder for Map

-
@@ -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() { - this.selectedProviderNumber = this.providers?.length === 1 ?? false - ? this.providers[0].value + providers(newProviders) { + this.selectedProviderNumber = newProviders?.length === 1 ?? false + ? newProviders[0].value : ''; } }, @@ -266,10 +269,7 @@ export default { doNotSeeMyShopLinkClick() { this.$router.navigate( this.navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK, - this.$route, - {}, - {}, - { [routerParams.NOT_SEEING_PREFERRED_SHOP]: true } + this.$route ); }, 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