diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js index 393938b8..06e6f8e0 100644 --- a/src/layouts/tpa-search/tpa-search.spec.js +++ b/src/layouts/tpa-search/tpa-search.spec.js @@ -1,1031 +1,511 @@ +/* eslint-disable max-len */ // Components -import { shallowMount } from '@vue/test-utils'; -import { createTestingPinia } from '@pinia/testing'; import tpaSearch from '@/layouts/tpa-search/tpa-search.vue'; // Supporting Files -import baseMixin from '@/mixins/base-mixin'; +import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; -import { useMainStore } from '@/store'; -import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; +import { createTestingPinia } from '@pinia/testing'; +import navigationScenarios from '@/router/router-constants/navigation-scenarios.js'; import settleAllPromises from '@/helpers/layout-helper.js'; +import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; +import { useMainStore } from '@/store'; +import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js'; +import bailoutMessage from '@/constants/bailoutMessage'; 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', () => ({ - fetchCmsContentForPage: jest.fn(), - doesCopyContainRouterLink: jest.fn() -})); - -// Mock our module for promises. jest.mock('@/helpers/layout-helper.js', () => jest.fn()); -function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) { +jest.mock('@/helpers/cms-content-helper', () => ({ + fetchCmsContentForPage: jest.fn(), + setupModalLinks: jest.fn(), + processIfStatements: jest.fn() +})); + +jest.mock('@/helpers/text-helper', () => ({ + toTitleCase: jest.fn((text) => text?.toLowerCase()?.replace(/(^|\s|-)\S/g, (letter) => letter.toUpperCase()) ?? ''), + toDisplayPhoneNumber: jest.fn((phone) => phone ?? '') +})); + +const mockMixin = { + methods: { + getCmsContent: jest.fn().mockImplementation(() => ''), + setCmsContent: jest.fn(), + onSubmit: jest.fn(), + onInvalidSubmit: jest.fn(), + navigateBack: jest.fn(), + savePageDataToStore: jest.fn() + } +}; + +const footerStub = { + render: () => {}, + methods: { + updateButtonText: jest.fn() + } +}; + +const loaderStub = { + render: () => {}, + template: '
' +}; + +function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}) { const mountOptions = getMountOptions({ router: { navigate: jest.fn() + }, + route: { + query: { issPage: 'tpa-search' } } }); + mountOptions.global.stubs = { + ...mountOptions.global.stubs, + siteFooter: footerStub, + siteHeader: true, + textboxQuestion: true, + dropdownQuestion: true, + buttonQuestion: true, + textLink: true, + alert: true, + googleMap: true, + loader: loaderStub + }; + const testingPinia = createTestingPinia({ initialState: { - main: mainInitialState + main: { + order: { + customer: { + address: { + zipCode: '43215' + } + }, + serviceLocation: { + provider: { + providerNumber: '' + } + } + }, + ...mainInitialState + } } }); useMainStore(testingPinia); - methodToRunAfterInitializingStore(); + methodToRun(); mountOptions.global.plugins = [testingPinia]; - mountOptions.data = () => (initialData); + mountOptions.mixins = [mockMixin]; + mountOptions.data = () => ({ + dataLoaded: true, + ...initialData + }); - const apiResponses = { cmsContent: {} }; - - settleAllPromises.mockImplementation(() => apiResponses); + const apiResponses = { + cmsContent: {}, + providers: [] + }; + const apiPromise = Promise.resolve(apiResponses); + settleAllPromises.mockImplementation(() => apiPromise); fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); const wrapper = shallowMount(tpaSearch, mountOptions); - wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {}); - wrapper.vm.setCmsContent = jest.fn(); - wrapper.vm.$router.navigateWithSpinner = jest.fn(); - wrapper.vm.navigateBack = baseMixin.methods.navigateBack; - return { wrapper }; } -describe('TPA search page', () => { - test.skip('returns the initial data', () => { +describe('tpa-search.vue', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + test('returns the initial data', () => { // Arrange - const zipCode = '12663'; - const mainInitialState = { - order: { - customer: { - address: { zipCode } - } - } - }; - const { wrapper } = getMountedComponent(mainInitialState); + const { wrapper } = getMountedComponent(); // Assert expect(wrapper.vm.$data).toMatchSnapshot(); }); - describe('should render', () => { - test('site header', () => { + + describe('Rendering', () => { + test('Should render site header', () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const expectedWidgetName = 'SiteHeaderWidget'; + const { wrapper } = getMountedComponent(); // Act const siteHeader = wrapper.findComponent({ ref: 'siteHeader' }); // Assert - expect(siteHeader.exists()).toBeTruthy(); - expect(siteHeader.props().cmsWidgetName).toBe(expectedWidgetName); + expect(siteHeader.exists()).toBe(true); }); - test('search providers form', () => { + + test('Should render site footer', () => { // 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('fs-5'); - }); - 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('tpaSearchQuestionFieldInput'); - 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', async () => { - // Arrange - const zipCode = '12345'; const { wrapper } = getMountedComponent(); - await wrapper.setData({ - providers: [{ - address: { - streetAddress: '123 Lane Ave', - city: 'New York', - state: 'NY', - zipCode: '99230' - } - }], - mapZipCode: zipCode - }); - const expectedAddresses = ['123 Lane Ave, New York, NY 99230']; // Act - const map = wrapper.findComponent('#map'); + const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); // Assert - expect(map.exists()).toBeTruthy(); - expect(map.classes()).toContain('mb-4'); - expect(map.props().markers.map((p) => p.fullAddress)).toEqual(expectedAddresses); - expect(map.props().zipCode).toBe(zipCode); + expect(siteFooter.exists()).toBe(true); }); - test('search radius filter', async () => { + + test('Should render tpa search question label', () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const expectedWidgetName = 'FilterByQuestion'; + const { wrapper } = getMountedComponent(); // Act - const searchRadiusFilter = wrapper.findComponent('#searchRadiusFilter'); + const label = wrapper.find('#tpaSearchQuestionLabel'); // Assert - expect(searchRadiusFilter.exists()).toBeTruthy(); - expect(searchRadiusFilter.props().cmsWidgetName).toBe(expectedWidgetName); - expect(searchRadiusFilter.props().validationRules).toBe(globalRules.OPTION_REQUIRED); + expect(label.exists()).toBe(true); }); - test('providers loader when reloadingProviders is true', async () => { + + test('Should render search instructions label', () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ reloadingProviders: true }); + const { wrapper } = getMountedComponent(); // Act - const providersLoader = wrapper.findComponent('#providersLoader'); + const label = wrapper.find('#searchInstructions'); // Assert - expect(providersLoader.exists()).toBeTruthy(); + expect(label.exists()).toBe(true); }); - test('select provider question when reloadingProviders are false', async () => { + + test('Should render textbox question for TPA search', () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ - providers: [{ - companyName: 'Shop Auto Glass', - phoneNumber: '740-555-1234', - distanceInMiles: 1.2345, - providerNumber: '232209', - address: { - streetAddress: '123 Lane Ave', - city: 'New York', - state: 'NY', - zipCode: '99230' - } - }], + const { wrapper } = getMountedComponent(); + + // Act + const textbox = wrapper.find('#tpaSearchQuestionField'); + + // Assert + expect(textbox.exists()).toBe(true); + }); + + test('Should render dropdown for radius filter', () => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Act + const dropdown = wrapper.find('#searchRadiusFilter'); + + // Assert + expect(dropdown.exists()).toBe(true); + }); + + test('Should render google map', () => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Act + const map = wrapper.find('#map'); + + // Assert + expect(map.exists()).toBe(true); + }); + + test('Should show loader state when reloadingProviders is true', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { reloadingProviders: true }); + + // Assert + expect(wrapper.vm.reloadingProviders).toBe(true); + }); + + test('Should show provider selection when reloadingProviders is false', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { reloadingProviders: false }); + + // Assert + expect(wrapper.vm.reloadingProviders).toBe(false); + }); + + test('Should render no network shops alert when providers is empty', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { providers: [] }); + + // Act + const alert = wrapper.find('#alertNoNetworkProviders'); + + // Assert + expect(alert.exists()).toBe(true); + }); + + test('Should render preferred shop not listed link', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { reloadingProviders: false }); + + // Act + const link = wrapper.find('#preferredShopNotListedLink'); + + // Assert + expect(link.exists()).toBe(true); + }); + + test('Should have needHelpLinkText computed property', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { reloadingProviders: false }); - const expectedAnswers = [{ - buttonLabel: 'Shop Auto Glass', - buttonLabelSubCopy: '1.2 mi', - buttonBodyCopy: '123 Lane Ave, New York, NY 99230
740-555-1234', - value: '232209' - }]; - const expectedAdditionalButtonData = { - displayAvailabilityIndicators: false - }; - // 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); - expect(selectProviderQuestion.props().answers).toEqual(expectedAnswers); - expect(selectProviderQuestion.props().additionalButtonData).toEqual(expectedAdditionalButtonData); - }); - test.each([[], null, undefined])( - 'no network providers alert when providers length is 0, undefined, or null and reloadingProviders is false', - async (providers) => { - // Arrange - const initialData = { - providers - }; - const wrapper = shallowMount(tpaSearch, getMountOptions({}, initialData)); - await wrapper.setData({ reloadingProviders: false }); - - // 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 when reloadingProviders is false', async () => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ reloadingProviders: false }); - - // Act - const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink'); - - // Assert - expect(preferredShopNotListedLink.exists()).toBeTruthy(); - expect(preferredShopNotListedLink.props().linkType).toBe('navigation'); - // eslint-disable-next-line no-script-url - expect(preferredShopNotListedLink.props().href).toBe('javascript:void(0)'); - }); - 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'); + // Assert - needHelpLinkText computed exists and returns a value (empty string from mock) + expect(wrapper.vm.needHelpLinkText).toBeDefined(); }); }); - describe('should not render', () => { - test('select provider question when reloadingProviders is true', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - await wrapper.setData({ reloadingProviders: 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 () => { + describe('Computed', () => { + describe('radiusFilterOptions', () => { + test('returns empty object when no options', () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ providers: ['p1', 'p2'] }); + const { wrapper } = getMountedComponent(); // Act - const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders'); + const result = wrapper.vm.radiusFilterOptions; // Assert - expect(noNetworkProvidersAlert.exists()).toBeFalsy(); + expect(result).toEqual({}); }); - test('when reloadingProviders is true', async () => { + + test('returns formatted options when CMS content exists', () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ providers: [], reloadingProviders: true }); + const mockOptions = [ + { Name: '10', Text: '10 miles' }, + { Name: '25', Text: '25 miles' }, + { Name: '50', Text: '50 miles' } + ]; + const mountOptions = getMountOptions({ router: { navigate: jest.fn() } }); + mountOptions.global.stubs = { siteFooter: footerStub, siteHeader: true, loader: loaderStub }; + mountOptions.mixins = [{ + methods: { + getCmsContent: jest.fn().mockImplementation(() => mockOptions), + setCmsContent: jest.fn(), + onSubmit: jest.fn(), + onInvalidSubmit: jest.fn(), + navigateBack: jest.fn(), + savePageDataToStore: jest.fn() + } + }]; + mountOptions.data = () => ({ dataLoaded: true }); + const wrapper = shallowMount(tpaSearch, mountOptions); // Act - const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders'); + const result = wrapper.vm.radiusFilterOptions; // Assert - expect(noNetworkProvidersAlert.exists()).toBeFalsy(); + expect(result).toEqual({ + '10': '10 miles', + '25': '25 miles', + '50': '50 miles' + }); }); }); - test('preferred shop not listed link when reloadingProviders is true', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - await wrapper.setData({ reloadingProviders: true }); - // Act - const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink'); - - // Assert - expect(preferredShopNotListedLink.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', () => { + describe('radiusFilteredAndCappedProviders', () => { + test('filters providers by radius and caps at 5', () => { // 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' }; + const providers = [ + { providerNumber: '1', distanceInMiles: 5, companyName: 'Shop 1', address: {} }, + { providerNumber: '2', distanceInMiles: 15, companyName: 'Shop 2', address: {} }, + { providerNumber: '3', distanceInMiles: 20, companyName: 'Shop 3', address: {} }, + { providerNumber: '4', distanceInMiles: 30, companyName: 'Shop 4', address: {} }, + { providerNumber: '5', distanceInMiles: 35, companyName: 'Shop 5', address: {} }, + { providerNumber: '6', distanceInMiles: 40, companyName: 'Shop 6', address: {} }, + { providerNumber: '7', distanceInMiles: 45, companyName: 'Shop 7', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { providers, radiusFilter: 50 }); // Act - const result = wrapper.vm.filterOptions; + const result = wrapper.vm.radiusFilteredAndCappedProviders; // Assert - expect(result).toEqual(expected); + expect(result.length).toBe(5); + }); + + test('filters out providers beyond radius', () => { + // Arrange + const providers = [ + { providerNumber: '1', distanceInMiles: 5, companyName: 'Shop 1', address: {} }, + { providerNumber: '2', distanceInMiles: 15, companyName: 'Shop 2', address: {} }, + { providerNumber: '3', distanceInMiles: 30, companyName: 'Shop 3', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { providers, radiusFilter: 25 }); + + // Act + const result = wrapper.vm.radiusFilteredAndCappedProviders; + + // Assert + expect(result.length).toBe(2); + expect(result.map(p => p.providerNumber)).toEqual(['1', '2']); }); }); - test.each([null, undefined, '', 'non empty string'])( - 'tpaSearchQuestionLabel returns "%p" 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 "%p" 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 "%p" 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.each([ - [15, '15 miles'], - [25, '25 miles'], - [50, '50 miles'], - [100, '100 miles'] - ])( - 'returns %p when filter is "%p"', - async (expectedRadius, filter) => { - // Arrange - const { wrapper } = getMountedComponent(); - await wrapper.setData({ filter }); - - // Act - const result = wrapper.vm.radiusInMiles; - - // Assert - expect(result).toEqual(expectedRadius); - } - ); - test.each([null, undefined, 'some random string'])( - 'returns 0 when filter is "%p"', - 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('providerAddresses', () => { - test.each([null, undefined, []])( - 'returns empty list when providers empty', - async (providers) => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ providers }); - - // Act - const result = wrapper.vm.providerAddresses; - - // Assert - expect(result).toEqual([]); - } - ); - test('returns expected when providers not empty', async () => { + test('maps providers to address objects for google map', () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ - providers: [ - { - companyName: 'Shop Auto Glass', - phoneNumber: '740-555-1234', - distanceInMiles: 1.2345, - providerNumber: '232209', - address: { - streetAddress: '123 Lane Ave', - city: 'New York', - state: 'NY', - zipCode: '99230' - } - }, - { - companyName: 'Safelite AutoGlass', - phoneNumber: '676-555-0099', - distanceInMiles: 123.9452, - providerNumber: '123456', - address: { - streetAddress: '2003 Coral Ln', - city: 'Birmingham', - state: 'AL', - zipCode: '43001' - } - } - ] - }); - const expectedResult = [ - '123 Lane Ave, New York, NY 99230', - '2003 Coral Ln, Birmingham, AL 43001' - ]; - - // Act - const result = wrapper.vm.providerAddresses.map((pa) => pa.fullAddress); - - // Assert - expect(result).toEqual(expectedResult); - }); - }); - describe('providerButtonData', () => { - test.each([null, undefined, []])( - 'returns empty list when providers equals "%p"', - async (providers) => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ providers }); - - // Act - const result = wrapper.vm.providerButtonData; - - // Assert - expect(result).toEqual([]); - } - ); - test('returns expected when providers not empty', async () => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ - providers: [ - { - companyName: 'Shop Auto Glass', - phoneNumber: '740-555-1234', - distanceInMiles: 1.2345, - providerNumber: '232209', - address: { - streetAddress: '123 Lane Ave', - city: 'New York', - state: 'NY', - zipCode: '99230' - } - }, - { - companyName: 'Safelite AutoGlass', - phoneNumber: '676-555-0099', - distanceInMiles: 123.9452, - providerNumber: '123456', - address: { - streetAddress: '2003 Coral Ln', - city: 'Birmingham', - state: 'AL', - zipCode: '43001' - } - } - ] - }); - const expectedResult = [ + const providers = [ { - buttonLabel: 'Shop Auto Glass', - buttonLabelSubCopy: '1.2 mi', - buttonBodyCopy: '123 Lane Ave, New York, NY 99230
740-555-1234', - value: '232209' - }, - { - buttonLabel: 'Safelite AutoGlass', - buttonLabelSubCopy: '123.9 mi', - buttonBodyCopy: '2003 Coral Ln, Birmingham, AL 43001
676-555-0099', - value: '123456' + providerNumber: '1', + companyName: 'TEST SHOP', + distanceInMiles: 5, + address: { + streetAddress: '123 MAIN ST', + city: 'COLUMBUS', + state: 'OH', + zipCode: '43215' + } } ]; + const { wrapper } = getMountedComponent({}, { providers, radiusFilter: 25 }); + + // Act + const result = wrapper.vm.providerAddresses; + + // Assert + expect(result.length).toBe(1); + expect(result[0].title).toBe('test shop'); + expect(result[0].addressLines.length).toBe(2); + }); + + test('returns empty array when no providers', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { providers: [], radiusFilter: 25 }); + + // Act + const result = wrapper.vm.providerAddresses; + + // Assert + expect(result).toEqual([]); + }); + }); + + describe('providerButtonData', () => { + test('maps providers to button data format', () => { + // Arrange + const providers = [ + { + providerNumber: '12345', + companyName: 'AUTO GLASS SHOP', + distanceInMiles: 5.75, + phoneNumber: '6145551234', + address: { + streetAddress: '456 OAK AVE', + city: 'DUBLIN', + state: 'OH', + zipCode: '43017' + } + } + ]; + const { wrapper } = getMountedComponent({}, { providers, radiusFilter: 25 }); // Act const result = wrapper.vm.providerButtonData; // Assert - expect(result).toEqual(expectedResult); + expect(result.length).toBe(1); + expect(result[0].buttonLabel).toBe('auto glass shop'); + expect(result[0].buttonLabelSubCopy).toBe('5.8 mi'); + expect(result[0].value).toBe('12345'); }); }); + describe('selectedProviderIsSafeliteShop', () => { - test('no issue when provider in providers with no provider number', async () => { + test('returns true when selected provider is Safelite shop', () => { // Arrange - const selectedProviderNumber = '10099'; const providers = [ - { isSafeliteShop: false }, - { isSafeliteShop: true } + { providerNumber: '123', isSafeliteShop: true }, + { providerNumber: '456', isSafeliteShop: false } ]; - const wrapper = shallowMount(tpaSearch, getMountOptions()); - await wrapper.setData({ selectedProviderNumber, providers }); + const { wrapper } = getMountedComponent({}, { + providers, + selectedProviderNumber: '123', + radiusFilter: 25 + }); // Act const result = wrapper.vm.selectedProviderIsSafeliteShop; // Assert - expect(result).toEqual(false); + expect(result).toBe(true); }); - 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({ providers }); - await wrapper.setData({ selectedProviderNumber }); - - // 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'; - const initialMapZipCode = '88800'; - const { wrapper } = getMountedComponent({}, { - zipCode, - mapZipCode: initialMapZipCode, - dataLoaded: true - }); - const providers = { data: { shopProviders: ['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.shopProviders); - expect(wrapper.vm.mapZipCode).toBe(zipCode); - }); - describe('on filter', () => { - test('calls getTpaProviders once and sets providers when dataLoaded is true', async () => { + test('returns false when selected provider is not Safelite shop', () => { // Arrange - const zipCode = '78220'; - const initialMapZipCode = '88800'; + const providers = [ + { providerNumber: '123', isSafeliteShop: true }, + { providerNumber: '456', isSafeliteShop: false } + ]; const { wrapper } = getMountedComponent({}, { - zipCode, - mapZipCode: initialMapZipCode, - dataLoaded: true + providers, + selectedProviderNumber: '456', + radiusFilter: 25 }); - const providers = { data: { shopProviders: ['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); + const result = wrapper.vm.selectedProviderIsSafeliteShop; // Assert - expect(useMainStore().getTpaProviders).toBeCalled(); - expect(wrapper.vm.providers).toEqual(providers.data.shopProviders); - expect(wrapper.vm.mapZipCode).toBe(zipCode); + expect(result).toBe(false); }); - test('never calls getTpaProviders and does not set providers when dataLoaded is false', async () => { + + test('returns false when no provider is selected', () => { // Arrange - const zipCode = '78220'; - const initialMapZipCode = '88800'; + const providers = [ + { providerNumber: '123', isSafeliteShop: true } + ]; const { wrapper } = getMountedComponent({}, { - zipCode, - mapZipCode: initialMapZipCode, - dataLoaded: false + providers, + selectedProviderNumber: '', + radiusFilter: 25 }); - const providers = { data: { shopProviders: ['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); + const result = wrapper.vm.selectedProviderIsSafeliteShop; // Assert - expect(useMainStore().getTpaProviders).not.toBeCalled(); - expect(wrapper.vm.providers).not.toEqual(providers.data.shopProviders); - expect(wrapper.vm.mapZipCode).toBe(initialMapZipCode); + expect(result).toBe(false); }); }); - // TODO confirm tests appropriate. Also should this method be async? - describe('on providers', () => { - test('does not update provider number when dataLoaded false', () => { + + describe('noNetworkShopsAlertHeaderText', () => { + test('replaces radius placeholder with actual value', () => { // Arrange - const initialValue = 1234; - const { wrapper } = getMountedComponent({}, { - dataLoaded: false, - selectedProviderNumber: initialValue - }); - const value = 'some other value'; - const newProviders = [{ providerNumber: value }]; - - // Act - wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders); - - // Assert - expect(wrapper.vm.selectedProviderNumber).toBe(initialValue); - }); - test.each([null, undefined, []])( - 'sets selected provider number to "" when there are no providers', - (newProviders) => { - // Arrange - const { wrapper } = getMountedComponent({}, { - dataLoaded: true, - selectedProviderNumber: null - }); - - // 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({}, { - dataLoaded: true, - selectedProviderNumber: null - }); - const value = 'some value'; - const newProviders = [{ providerNumber: 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({}, { - dataLoaded: true, - selectedProviderNumber: null - }); - const newProviders = [{ value: 'val1' }, { value: 'val2' }]; - - // Act - wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders); - - // Assert - expect(wrapper.vm.selectedProviderNumber).toBe(''); - }); - }); - describe('selectedProviderNumber', () => { - describe('does not call updateServiceLocation when', () => { - test('dataLoaded is false', () => { - // Arrange - const providerNumber = 38447; - const { wrapper } = getMountedComponent({}, { - providers: [{ - providerNumber, - address: { - streetAddress: '143 Average Lane', - city: 'Cambridge', - state: 'OH', - zipCode: '72983', - zipCodeCtu: '0390' - }, - companyName: "Sally's Auto", - phoneNumber: '1234567890' - }], - dataLoaded: false - }); - - // Act - wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, providerNumber); - - // Assert - expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled(); - }); - test('providers list is null ', () => { - // Arrange - const { wrapper } = getMountedComponent({}, { - providers: null, - dataLoaded: true - }); - const newProviderNumber = 11235; - - // Act - wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber); - - // Assert - expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled(); - }); - test('providers list is empty ', () => { - // Arrange - const { wrapper } = getMountedComponent({}, { - providers: [], - dataLoaded: true - }); - const newProviderNumber = 11235; - - // Act - wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber); - - // Assert - expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled(); - }); - test('providers list does not contain match for provider number ', () => { - // Arrange - const { wrapper } = getMountedComponent({}, { - providers: [{ - providerNumber: 8374, - address: { - streetAddress: '143 Average Lane', - city: 'Cambridge', - state: 'OH', - zipCode: '72983', - zipCodeCtu: '0390' - }, - companyName: "Sally's Auto", - phoneNumber: '1234567890' - }], - dataLoaded: true - }); - const newProviderNumber = 11235; - - // Act - wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber); - - // Assert - expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled(); - }); - }); - test('Calls updateServiceLocation when matching provider found.', () => { - // Arrange - const newProviderNumber = 11235; - const streetAddress = '143 Average Lane'; - const city = 'Berlin'; - const state = 'MA'; - const zipCode = '12345'; - const zipCodeCtu = '0004'; - const companyName = "Sally's Auto"; - const phoneNumber = '3298479879'; - const provider = { - providerNumber: newProviderNumber, - address: { - streetAddress, - city, - state, - zipCode, - zipCodeCtu - }, - companyName, - phoneNumber - }; - const filter = '10 miles'; - const serviceZipCode = 10098; - const { wrapper } = getMountedComponent({}, { - providers: [ - provider, - { providerNumber: 328949832 } - ], - filter, - zipCode: serviceZipCode, - dataLoaded: true - }); - - // Act - wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber); - - // Assert - expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledTimes(1); - expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledWith({ - searchFilter: filter, - zipCode: serviceZipCode, - provider: { - providerNumber: newProviderNumber, - address: { - streetAddress, - city, - state, - zipCode, - zipCodeCtu - }, - companyName, - phoneNumber + const mountOptions = getMountOptions({ router: { navigate: jest.fn() } }); + mountOptions.global.stubs = { siteFooter: footerStub, siteHeader: true, loader: loaderStub }; + mountOptions.mixins = [{ + methods: { + getCmsContent: jest.fn().mockImplementation(() => 'No shops within {custom:radiusInMiles}'), + setCmsContent: jest.fn(), + onSubmit: jest.fn(), + onInvalidSubmit: jest.fn(), + navigateBack: jest.fn(), + savePageDataToStore: jest.fn() } - }); + }]; + mountOptions.data = () => ({ dataLoaded: true, radiusFilter: 25 }); + const wrapper = shallowMount(tpaSearch, mountOptions); + + // Act + const result = wrapper.vm.noNetworkShopsAlertHeaderText; + + // Assert + expect(result).toBe('No shops within 25 miles'); }); }); }); - describe('method', () => { - test.each([ - ['address', 'city', 'ST', 'zip', 'Address, City, ST zip'], - ['address', null, 'ST', 'zip', 'Address, ST zip'], - ['address', 'city', null, 'zip', 'Address, City zip'], - ['address', 'city', 'ST', null, 'Address, City, ST'], - [null, null, null, null, ''] - ])( - 'getFullProviderAddress returns expected', - (streetAddress, city, state, zipCode, expected) => { + + describe('Methods', () => { + describe('getFullProviderAddress', () => { + test('returns combined address lines', () => { // Arrange const { wrapper } = getMountedComponent(); const provider = { address: { - streetAddress, - city, - state, - zipCode + streetAddress: '123 MAIN ST', + city: 'COLUMBUS', + state: 'OH', + zipCode: '43215' } }; @@ -1033,26 +513,20 @@ describe('TPA search page', () => { const result = wrapper.vm.getFullProviderAddress(provider); // Assert - expect(result).toEqual(expected); - } - ); - test.each([ - ['address', 'city', 'ST', 'zip', 'Address'], - ['address', null, 'ST', 'zip', 'Address'], - ['address', 'city', null, 'zip', 'Address'], - ['address', 'city', 'ST', null, 'Address'], - [null, null, null, null, ''] - ])( - 'getProviderAddress returns expected', - (streetAddress, city, state, zipCode, expected) => { + expect(result).toContain('123 Main St'); + expect(result).toContain('Columbus'); + expect(result).toContain('OH'); + expect(result).toContain('43215'); + }); + }); + + describe('getProviderAddress', () => { + test('returns title cased street address', () => { // Arrange const { wrapper } = getMountedComponent(); const provider = { address: { - streetAddress, - city, - state, - zipCode + streetAddress: 'UPPERCASE STREET' } }; @@ -1060,26 +534,31 @@ describe('TPA search page', () => { const result = wrapper.vm.getProviderAddress(provider); // Assert - expect(result).toEqual(expected); - } - ); - test.each([ - ['address', 'city', 'ST', 'zip', 'City, ST zip'], - ['address', null, 'ST', 'zip', 'ST zip'], - ['address', 'city', null, 'zip', 'City zip'], - ['address', 'city', 'ST', null, 'City, ST'], - [null, null, null, null, ''] - ])( - 'getProviderCityZipState returns expected', - (streetAddress, city, state, zipCode, expected) => { + expect(toTitleCase).toHaveBeenCalledWith('UPPERCASE STREET'); + }); + + test('handles null address', () => { + // Arrange + const { wrapper } = getMountedComponent(); + const provider = { address: null }; + + // Act + const result = wrapper.vm.getProviderAddress(provider); + + // Assert + expect(result).toBe(''); + }); + }); + + describe('getProviderCityZipState', () => { + test('returns formatted city, state, zip', () => { // Arrange const { wrapper } = getMountedComponent(); const provider = { address: { - streetAddress, - city, - state, - zipCode + city: 'COLUMBUS', + state: 'OH', + zipCode: '43215' } }; @@ -1087,132 +566,174 @@ describe('TPA search page', () => { const result = wrapper.vm.getProviderCityZipState(provider); // Assert - expect(result).toEqual(expected); - } - ); - describe('getProviderButtonData', () => { - test.each([null, undefined, {}])( - 'returns empty list when getTpaProviders returns no data', - async (newProviders) => { - // Arrange - const { wrapper } = getMountedComponent(); - useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders)); + expect(result).toContain('OH'); + expect(result).toContain('43215'); + }); - // Act - const result = await wrapper.vm.getProviderButtonData(); - - // Assert - expect(result).toEqual([]); - } - ); - test('returns expected when getTpaProviders returns data', async () => { + test('handles missing city', () => { // Arrange const { wrapper } = getMountedComponent(); - const providers = { - data: { - shopProviders: [{ companyName: 'foo' }] + const provider = { + address: { + state: 'OH', + zipCode: '43215' } }; - useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers)); // Act - const result = await wrapper.vm.getProviderButtonData(); + const result = wrapper.vm.getProviderCityZipState(provider); // Assert - expect(result).toEqual(providers.data.shopProviders); + expect(result).toBe('OH 43215'); + }); + + test('handles missing state and zip', () => { + // Arrange + const { wrapper } = getMountedComponent(); + const provider = { + address: { + city: 'COLUMBUS' + } + }; + + // Act + const result = wrapper.vm.getProviderCityZipState(provider); + + // Assert + expect(result).toContain('Columbus'); }); }); - 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 zipCode = '28331'; - const initialMapZipCode = '10022'; - const { wrapper } = getMountedComponent({}, { - zipCode, - mapZipCode: initialMapZipCode - }); - useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders)); - - // Act - await wrapper.vm.searchClick(); - - // Assert - expect(wrapper.vm.providers).toEqual([]); - expect(wrapper.vm.mapZipCode).toEqual(zipCode); - } - ); - test('returns value from getProviders', async () => { + describe('getShopButtonDataFromProvider', () => { + test('returns formatted button data with distance', () => { // Arrange - const zipCode = '12990'; - const initialMapZipCode = '00981'; - const { wrapper } = getMountedComponent({}, { - zipCode, - mapZipCode: initialMapZipCode - }); - const shopProviders = [{ companyName: 'foo' }]; - useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => ({ - data: { shopProviders } - })); + const { wrapper } = getMountedComponent(); + const provider = { + providerNumber: '12345', + companyName: 'TEST SHOP', + distanceInMiles: 5.789, + phoneNumber: '6145551234', + address: { + streetAddress: '123 MAIN ST', + city: 'COLUMBUS', + state: 'OH', + zipCode: '43215' + } + }; + + // Act + const result = wrapper.vm.getShopButtonDataFromProvider(provider); + + // Assert + expect(result.buttonLabel).toBe('test shop'); + expect(result.buttonLabelSubCopy).toBe('5.8 mi'); + expect(result.value).toBe('12345'); + expect(result.buttonBodyCopy).toContain('
'); + }); + + test('returns empty distance when distanceInMiles is null', () => { + // Arrange + const { wrapper } = getMountedComponent(); + const provider = { + providerNumber: '12345', + companyName: 'TEST SHOP', + distanceInMiles: null, + phoneNumber: '6145551234', + address: {} + }; + + // Act + const result = wrapper.vm.getShopButtonDataFromProvider(provider); + + // Assert + expect(result.buttonLabelSubCopy).toBe(''); + }); + + test('returns empty distance when distanceInMiles is NaN', () => { + // Arrange + const { wrapper } = getMountedComponent(); + const provider = { + providerNumber: '12345', + companyName: 'TEST SHOP', + distanceInMiles: NaN, + phoneNumber: '6145551234', + address: {} + }; + + // Act + const result = wrapper.vm.getShopButtonDataFromProvider(provider); + + // Assert + expect(result.buttonLabelSubCopy).toBe(''); + }); + }); + + describe('searchClick', () => { + test('searches by shop name when input is not a zip code', async () => { + // Arrange + const { wrapper } = getMountedComponent(); + wrapper.vm.tpaSearchValue = 'Auto Glass Shop'; + wrapper.vm.getProviderButtonData = jest.fn().mockResolvedValue([]); // Act await wrapper.vm.searchClick(); // Assert - expect(wrapper.vm.providers).toEqual(shopProviders); - expect(wrapper.vm.mapZipCode).toEqual(zipCode); + expect(wrapper.vm.getProviderButtonData).toHaveBeenCalledWith('Auto Glass Shop'); }); - }); - test('backButtonAction invokes navigate method', () => { - // Arrange - const { wrapper } = getMountedComponent(); - // Act - wrapper.vm.navigateBack(); - - // Assert - expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled(); - }); - describe('forwardButtonAction', () => { - test('invokes navigate method with safelite shop scenario when selectedProviderIsSafeliteShop true', async () => { + test('updates mapZipCode when input is a zip code', async () => { // Arrange const { wrapper } = getMountedComponent(); - const providerNumber = '1109'; - await wrapper.setData({ - selectedProviderNumber: providerNumber, - providers: [{ - providerNumber, - isSafeliteShop: true - }] + wrapper.vm.tpaSearchValue = '43215'; + wrapper.vm.mapZipCode = '12345'; + wrapper.vm.getProviderButtonData = jest.fn().mockResolvedValue([]); + + // Act + await wrapper.vm.searchClick(); + + // Assert + expect(wrapper.vm.mapZipCode).toBe('43215'); + expect(wrapper.vm.getProviderButtonData).toHaveBeenCalledWith(); + }); + }); + + describe('forwardButtonAction', () => { + test('navigates with SAFELITE_SHOP scenario when provider is Safelite', () => { + // Arrange + const providers = [ + { providerNumber: '123', isSafeliteShop: true, distanceInMiles: 5, companyName: 'Safelite', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { + providers, + selectedProviderNumber: '123', + radiusFilter: 25, + tpaSearchValue: 'test', + mapZipCode: '43215' }); // Act wrapper.vm.forwardButtonAction(); // Assert - expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP, undefined); + expect(wrapper.vm.mainStore.updateIsSafeliteProvider).toHaveBeenCalledWith(true); + expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( + navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP, + expect.anything() + ); }); - test('invokes navigate method with non safelite shop scenario when selectedProviderIsSafeliteShop false', async () => { + + test('navigates with NON_SAFELITE_SHOP scenario when provider is not Safelite', () => { // Arrange - const { wrapper } = getMountedComponent(); - const providerNumber = '928'; - await wrapper.setData({ - selectedProviderNumber: providerNumber, - providers: [{ - providerNumber, - isSafeliteShop: false - }] + const providers = [ + { providerNumber: '456', isSafeliteShop: false, distanceInMiles: 5, companyName: 'Other Shop', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { + providers, + selectedProviderNumber: '456', + radiusFilter: 25, + tpaSearchValue: 'test', + mapZipCode: '43215' }); // Act @@ -1221,421 +742,335 @@ describe('TPA search page', () => { // Assert expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, - undefined + expect.anything() + ); + }); + + test('saves empty tpaSearchValue when it equals mapZipCode', () => { + // Arrange + const providers = [ + { providerNumber: '123', isSafeliteShop: false, distanceInMiles: 5, companyName: 'Test Shop', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { + providers, + selectedProviderNumber: '123', + radiusFilter: 25, + tpaSearchValue: '43215', + mapZipCode: '43215' + }); + const savePageDataSpy = jest.spyOn(wrapper.vm, 'savePageDataToStore'); + + // Act + wrapper.vm.forwardButtonAction(); + + // Assert + expect(savePageDataSpy).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ tpaSearchValue: '' }) + ); + }); + + test('saves tpaSearchValue when different from mapZipCode', () => { + // Arrange + const providers = [ + { providerNumber: '123', isSafeliteShop: false, distanceInMiles: 5, companyName: 'Auto Shop', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { + providers, + selectedProviderNumber: '123', + radiusFilter: 25, + tpaSearchValue: 'Auto Shop', + mapZipCode: '43215' + }); + const savePageDataSpy = jest.spyOn(wrapper.vm, 'savePageDataToStore'); + + // Act + wrapper.vm.forwardButtonAction(); + + // Assert + expect(savePageDataSpy).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ tpaSearchValue: 'Auto Shop' }) ); }); }); - describe('getCustomValueFromString', () => { - test('returns radius in miles value if "radiusInMiles"', () => { + + describe('needHelpLinkClick', () => { + test('sets bailout and navigates', () => { // Arrange const { wrapper } = getMountedComponent(); - const str = 'radiusInMiles'; // Act - const result = wrapper.vm.getCustomValueFromString(str); + wrapper.vm.needHelpLinkClick(); // 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(); + expect(wrapper.vm.mainStore.setBailout).toHaveBeenCalled(); + expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( + navigationScenarios.CLICKED_NEED_HELP, + expect.anything() + ); }); }); - describe('getShopButtonDataFromProvider', () => { - test.each([null, undefined, {}])( - 'returns empty list given parameter with no provider', - (provider) => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const expectedResult = { - buttonLabel: '', - buttonLabelSubCopy: '', - buttonBodyCopy: '
', - value: '' - }; - // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); - - // Assert - expect(result).toEqual(expectedResult); - } - ); - test('returns expected given provider', () => { + describe('getProviderButtonData', () => { + test('sets reloadingProviders to true then false', async () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const provider = { - companyName: 'Shop Auto Glass', - phoneNumber: '740-555-1234', - distanceInMiles: 1.2345, - providerNumber: '232209', - address: { - streetAddress: '123 Lane Ave', - city: 'New York', - state: 'NY', - zipCode: '99230' - } - }; - const expectedResult = { - buttonLabel: 'Shop Auto Glass', - buttonLabelSubCopy: '1.2 mi', - buttonBodyCopy: '123 Lane Ave, New York, NY 99230
740-555-1234', - value: '232209' - }; + const { wrapper } = getMountedComponent(); + wrapper.vm.mainStore.getTpaAndSafeliteProviders = jest.fn().mockResolvedValue({ data: [] }); // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); + const promise = wrapper.vm.getProviderButtonData(); + expect(wrapper.vm.reloadingProviders).toBe(true); + await promise; // Assert - expect(result).toEqual(expectedResult); + expect(wrapper.vm.reloadingProviders).toBe(false); }); - describe('returns result with button label', () => { - test.each(['', undefined, null])( - 'equal to empty string when name is empty', - (companyName) => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const provider = { companyName }; - // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); - - // Assert - expect(result.buttonLabel).toEqual(''); - } - ); - test('returns provider name when exists', () => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const companyName = 'Some Shop Name'; - const provider = { companyName }; - - // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); - - // Assert - expect(result.buttonLabel).toEqual(companyName); - }); - }); - describe('returns result with button label sub copy', () => { - test.each([null, undefined, 'random string'])( - 'as empty string when distanceInMiles is not a number', - (distanceInMiles) => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const provider = { distanceInMiles }; - - // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); - - // Assert - expect(result.buttonLabelSubCopy).toEqual(''); - } - ); - test.each([[0, 0], [0, 0.000], [-7.89, -7.9], [109, 109], [1.234, 1.2], [2.99, 3]])( - 'displays expected distance value', - (distanceInMiles, displayedDistance) => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const provider = { distanceInMiles }; - const expectedSubCopy = `${displayedDistance} mi`; - - // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); - - // Assert - expect(result.buttonLabelSubCopy).toEqual(expectedSubCopy); - } - ); - }); - test('returns result with button body copy showing expected address and phone number', () => { + test('calls store method with zipCode and shopName', async () => { // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const provider = { - phoneNumber: '123-555-0099', - address: { - streetAddress: '434 Up Down Blvd', - city: 'San Francisco', - state: 'CA', - zipCode: '90887' - } - }; - const expected = '434 Up Down Blvd, San Francisco, CA 90887
123-555-0099'; + const { wrapper } = getMountedComponent(); + wrapper.vm.mapZipCode = '43215'; + wrapper.vm.mainStore.getTpaAndSafeliteProviders = jest.fn().mockResolvedValue({ data: [] }); // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); + await wrapper.vm.getProviderButtonData('Test Shop'); // Assert - expect(result.buttonBodyCopy).toEqual(expected); - }); - describe('returns result with value', () => { - test.each(['', undefined, null])( - 'equal to empty string when providerNumber is empty', - (providerNumber) => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const provider = { providerNumber }; - - // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); - - // Assert - expect(result.value).toEqual(''); - } - ); - test('returns provider number when exists', () => { - // Arrange - const wrapper = shallowMount(tpaSearch, getMountOptions()); - const providerNumber = '123391'; - const provider = { providerNumber }; - - // Act - const result = wrapper.vm.getShopButtonDataFromProvider(provider); - - // Assert - expect(result.value).toEqual(providerNumber); - }); + expect(wrapper.vm.mainStore.getTpaAndSafeliteProviders).toHaveBeenCalledWith('43215', 'Test Shop'); }); }); }); - describe('before route enter', () => { - test('when service location zipCode set in store, it is used', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - const customerZipCode = '18394'; - const serviceZipCode = '43982'; - useMainStore().order.customer.address.zipCode = customerZipCode; - useMainStore().order.serviceLocation.zipCode = serviceZipCode; - // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.zipCode).toBe(serviceZipCode); - }); - test('when service location zipCode not set in store, customer zipCode used', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - const customerZipCode = '18394'; - useMainStore().order.customer.address.zipCode = customerZipCode; - useMainStore().order.serviceLocation.zipCode = null; - - // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.zipCode).toBe(customerZipCode); - }); - test('when search filter set in store, expected filter and provider number returned', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - const customerZipCode = '18394'; - const searchFilter = '25 miles'; - const providerNumber = 749321; - useMainStore().order.customer.address.zipCode = customerZipCode; - useMainStore().order.serviceLocation.zipCode = null; - useMainStore().order.serviceLocation.searchFilter = searchFilter; - useMainStore().order.serviceLocation.provider.providerNumber = providerNumber; - const providers = [{ companyName: 'some provider' }]; - const expectedRadius = 25; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => - ({ data: { shopProviders: radius === expectedRadius ? providers : [] } })); - - // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.filter).toBe(searchFilter); - expect(wrapper.vm.providers).toEqual(providers); - expect(wrapper.vm.selectedProviderNumber).toBe(providerNumber); - expect(useMainStore().getTpaProviders).toBeCalledTimes(1); - expect(useMainStore().getTpaProviders).toBeCalledWith(customerZipCode, expectedRadius); - }); - test('when providers exist at 15 mile radius, filter is set to "15 miles" and providers set to expected', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = '00001'; - useMainStore().order.serviceLocation.zipCode = zipCode; - useMainStore().order.serviceLocation.searchFilter = null; - const providers = [{ companyName: 'provider' }]; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => - ({ data: { shopProviders: radius === 15 ? providers : [] } })); - const expectedFilter = '15 miles'; - - // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.zipCode).toBe(zipCode); - expect(wrapper.vm.filter).toBe(expectedFilter); - expect(wrapper.vm.providers).toEqual(providers); - expect(wrapper.vm.selectedProviderNumber).toBeNull(); - expect(useMainStore().getTpaProviders).toBeCalledTimes(1); - }); - test('when providers exist at 25 mile radius, filter is set to "25 miles" and providers set to expected', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = '00001'; - useMainStore().order.serviceLocation.zipCode = zipCode; - useMainStore().order.serviceLocation.searchFilter = null; - const providers = [{ companyName: 'provider' }]; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => - ({ data: { shopProviders: radius === 25 ? providers : [] } })); - const expectedFilter = '25 miles'; - - // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.zipCode).toBe(zipCode); - expect(wrapper.vm.filter).toBe(expectedFilter); - expect(wrapper.vm.providers).toEqual(providers); - expect(wrapper.vm.selectedProviderNumber).toBeNull(); - expect(useMainStore().getTpaProviders).toBeCalledTimes(2); - }); - test('when providers exist at 50 mile radius but not 25, filter is set to "50 miles" and providers set to expected', async () => { - // Arrange - const { wrapper } = getMountedComponent(); - const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = '00001'; - useMainStore().order.serviceLocation.zipCode = zipCode; - useMainStore().order.serviceLocation.searchFilter = null; - const providers = [{ companyName: 'provider' }]; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => - ({ data: { shopProviders: radius === 50 ? providers : [] } })); - const expectedFilter = '50 miles'; - - // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.vm.zipCode).toBe(zipCode); - expect(wrapper.vm.filter).toBe(expectedFilter); - expect(wrapper.vm.providers).toEqual(providers); - expect(wrapper.vm.selectedProviderNumber).toBeNull(); - expect(useMainStore().getTpaProviders).toBeCalledTimes(3); - }); - test( - 'when providers exist at 100 mile radius but not 50 or 25, filter is set to "100 miles" and providers set to expected', - async () => { + describe('Watchers', () => { + describe('providers watcher', () => { + test('auto-selects provider when only one provider exists', async () => { // Arrange - const { wrapper } = getMountedComponent(); - const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = zipCode; - useMainStore().order.serviceLocation.zipCode = null; - useMainStore().order.serviceLocation.searchFilter = null; - const providers = [{ companyName: 'provider' }]; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => - ({ data: { shopProviders: radius === 100 ? providers : [] } })); - const expectedFilter = '100 miles'; + const { wrapper } = getMountedComponent({}, { dataLoaded: true }); + wrapper.vm.selectedProviderNumber = ''; // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); + wrapper.vm.providers = [{ providerNumber: '12345', distanceInMiles: 5, companyName: 'Test Shop', address: {} }]; + await nextTick(); // Assert - expect(wrapper.vm.zipCode).toBe(zipCode); - expect(wrapper.vm.filter).toBe(expectedFilter); - expect(wrapper.vm.providers).toEqual(providers); - expect(wrapper.vm.selectedProviderNumber).toBeNull(); - expect(useMainStore().getTpaProviders).toBeCalledTimes(4); - } - ); - 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 () => { + expect(wrapper.vm.selectedProviderNumber).toBe('12345'); + }); + + test('clears selection when multiple providers exist', async () => { // Arrange - const { wrapper } = getMountedComponent(); - const zipCode = '18394'; - useMainStore().order.customer.address.zipCode = '00001'; - useMainStore().order.serviceLocation.zipCode = zipCode; - useMainStore().order.serviceLocation.searchFilter = null; - useMainStore().getTpaProviders = jest.fn().mockImplementation(() => ([])); - const expectedFilter = '100 miles'; + const { wrapper } = getMountedComponent({}, { dataLoaded: true }); + wrapper.vm.selectedProviderNumber = '12345'; // Act - await tpaSearch.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: 'tpa-search' } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); + wrapper.vm.providers = [ + { providerNumber: '12345', distanceInMiles: 5, companyName: 'Shop 1', address: {} }, + { providerNumber: '67890', distanceInMiles: 10, companyName: 'Shop 2', address: {} } + ]; + await nextTick(); // Assert - expect(wrapper.vm.zipCode).toBe(zipCode); - expect(wrapper.vm.filter).toBe(expectedFilter); - expect(wrapper.vm.providers).toEqual([]); - expect(wrapper.vm.selectedProviderNumber).toBeNull(); - expect(useMainStore().getTpaProviders).toBeCalledTimes(4); - } - ); + expect(wrapper.vm.selectedProviderNumber).toBe(''); + }); + + test('does not auto-select when dataLoaded is false', async () => { + // Arrange + const { wrapper } = getMountedComponent({}, { dataLoaded: false }); + wrapper.vm.selectedProviderNumber = ''; + + // Act + wrapper.vm.providers = [{ providerNumber: '12345', distanceInMiles: 5, companyName: 'Test', address: {} }]; + await nextTick(); + + // Assert + expect(wrapper.vm.selectedProviderNumber).toBe(''); + }); + }); + + describe('selectedProviderNumber watcher', () => { + test('updates service location in store when provider is selected', async () => { + // Arrange + const providers = [ + { + providerNumber: '12345', + companyName: 'Test Shop', + phoneNumber: '6145551234', + address: { + streetAddress: '123 Main St', + city: 'Columbus', + state: 'OH', + zipCode: '43215', + zipCodeCtu: '01234' + }, + distanceInMiles: 5 + } + ]; + const { wrapper } = getMountedComponent({}, { dataLoaded: true, providers, radiusFilter: 25 }); + + // Act + wrapper.vm.selectedProviderNumber = '12345'; + await nextTick(); + + // Assert + expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledWith( + expect.objectContaining({ + provider: expect.objectContaining({ + providerNumber: '12345', + companyName: 'Test Shop' + }) + }) + ); + }); + + test('does not update store when provider not found', async () => { + // Arrange + const providers = [ + { providerNumber: '12345', distanceInMiles: 5, companyName: 'Test', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { dataLoaded: true, providers, radiusFilter: 25 }); + wrapper.vm.mainStore.updateServiceLocation.mockClear(); + + // Act + wrapper.vm.selectedProviderNumber = '99999'; + await nextTick(); + + // Assert + expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled(); + }); + + test('does not update store when dataLoaded is false', async () => { + // Arrange + const providers = [ + { providerNumber: '12345', distanceInMiles: 5, companyName: 'Test', address: {} } + ]; + const { wrapper } = getMountedComponent({}, { dataLoaded: false, providers, radiusFilter: 25 }); + wrapper.vm.mainStore.updateServiceLocation.mockClear(); + + // Act + wrapper.vm.selectedProviderNumber = '12345'; + await nextTick(); + + // Assert + expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled(); + }); + }); + }); + + describe('beforeRouteEnter', () => { + test('fetches CMS content and providers on route enter', async () => { + // Arrange + const mockProviders = [ + { providerNumber: '123', distanceInMiles: 5 } + ]; + const { wrapper } = getMountedComponent(); + settleAllPromises.mockImplementation(() => ({ + cmsContent: {}, + providers: mockProviders + })); + + const to = { query: { issPage: 'tpa-search' } }; + const next = jest.fn((callback) => { + if (typeof callback === 'function') { + callback(wrapper.vm); + } + }); + + // Act + await tpaSearch.beforeRouteEnter(to, undefined, next); + + // Assert + expect(next).toHaveBeenCalled(); + }); + + test('restores page data from store if available', async () => { + // Arrange + const pageData = { + tpaSearchValue: 'Test Shop', + radiusFilter: 50 + }; + const { wrapper } = getMountedComponent(); + wrapper.vm.mainStore.pageData = jest.fn().mockReturnValue(pageData); + settleAllPromises.mockImplementation(() => ({ + cmsContent: {}, + providers: [] + })); + + const to = { query: { issPage: 'tpa-search' } }; + const next = jest.fn((callback) => { + if (typeof callback === 'function') { + callback(wrapper.vm); + } + }); + + // Act + await tpaSearch.beforeRouteEnter(to, undefined, next); + + // Assert + expect(next).toHaveBeenCalled(); + }); + }); + + describe('Data initialization', () => { + test('widget names are correctly defined', () => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Assert + expect(wrapper.vm.widget.siteHeader).toBe('SiteHeaderWidget'); + expect(wrapper.vm.widget.tpaSearchQuestion).toBe('TPASearchQuestion'); + expect(wrapper.vm.widget.filterByQuestion).toBe('FilterByQuestion'); + expect(wrapper.vm.widget.noNetworkShopsAlert).toBe('NoNetworkShopsAlertWidget'); + expect(wrapper.vm.widget.siteFooter).toBe('SiteFooterWidget'); + }); + + test('validation rules are correctly defined', () => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Assert + expect(wrapper.vm.rules.tpaSearch).toBe(globalRules.TPA_SEARCH_FORMAT); + expect(wrapper.vm.rules.filter).toBe(globalRules.OPTION_REQUIRED); + expect(wrapper.vm.rules.provider).toBe(globalRules.OPTION_REQUIRED); + }); + + test('additionalButtonData is correctly initialized', () => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Assert + expect(wrapper.vm.additionalButtonData).toEqual({ + displayAvailabilityIndicators: false + }); + }); + }); + + describe('dataLoaded flag', () => { + test('dataLoaded can be initialized as false', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { dataLoaded: false }); + + // Assert - verify initial state + expect(wrapper.vm.dataLoaded).toBe(false); + }); + + test('dataLoaded can be initialized as true', () => { + // Arrange + const { wrapper } = getMountedComponent({}, { dataLoaded: true }); + + // Assert + expect(wrapper.vm.dataLoaded).toBe(true); + }); + + test('dataLoaded affects provider watcher behavior', async () => { + // Arrange - with dataLoaded false, provider watcher should not auto-select + const { wrapper } = getMountedComponent({}, { dataLoaded: false, selectedProviderNumber: '' }); + + // Act - set providers (watcher should not auto-select because dataLoaded is false) + wrapper.vm.providers = [{ providerNumber: '12345', distanceInMiles: 5, companyName: 'Test', address: {} }]; + await nextTick(); + + // Assert - selectedProviderNumber should remain empty + expect(wrapper.vm.selectedProviderNumber).toBe(''); + }); }); });