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