From 6005424f9ad3bc0d1ce06c8aed9d37dda27ad70f Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Tue, 14 Nov 2023 11:48:14 -0500 Subject: [PATCH] Fixing existing tests --- .../__snapshots__/google-map.spec.js.snap | 8 ++ .../google-map/google-map.spec.js | 27 +++++++ .../__snapshots__/tpa-search.spec.js.snap | 1 + src/layouts/tpa-search/tpa-search.spec.js | 79 +++++++++---------- src/layouts/tpa-search/tpa-search.vue | 40 ++++++++-- 5 files changed, 106 insertions(+), 49 deletions(-) create mode 100644 src/iss-components/google-map/__snapshots__/google-map.spec.js.snap diff --git a/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap b/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap new file mode 100644 index 00000000..b4ee066e --- /dev/null +++ b/src/iss-components/google-map/__snapshots__/google-map.spec.js.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Google Maps should render expected initial data 1`] = ` +Object { + "country": "USA", + "geocoder": null, +} +`; diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js index e69de29b..fbaee73a 100644 --- a/src/iss-components/google-map/google-map.spec.js +++ b/src/iss-components/google-map/google-map.spec.js @@ -0,0 +1,27 @@ +import { shallowMount } from '@vue/test-utils'; +import googleMap from '@/iss-components/google-map/google-map.vue'; + +describe('Google Maps', () => { + describe('should render', () => { + test('expected initial data', async () => { + // Arrange + const wrapper = shallowMount(googleMap, {}); + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.$data).toMatchSnapshot(); + }); + test('map', () => { + // Arrange + const mapReference = '#map'; + const wrapper = shallowMount(googleMap, {}); + // await wrapper.vm.$nextTick(); + + // Act + const map = wrapper.find(mapReference); + + // Assert + expect(map.exists()).toBeTruthy(); + }); + }); +}); 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 f0824765..b8e194a6 100644 --- a/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap +++ b/src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap @@ -6,6 +6,7 @@ Object { "displayAvailabilityIndicators": false, }, "filter": "", + "mapZipCode": "12663", "providers": Array [], "rules": Object { "filter": "option-required", diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js index cae0aaf1..5be0e59b 100644 --- a/src/layouts/tpa-search/tpa-search.spec.js +++ b/src/layouts/tpa-search/tpa-search.spec.js @@ -44,7 +44,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); const wrapper = shallowMount(tpaSearch, mountOptions); - wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => cmsContent); + wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {}); wrapper.vm.setCmsContent = jest.fn(); return { wrapper }; } @@ -452,7 +452,7 @@ describe('TPA search page', () => { test('on filter calls getTpaProviders and sets providers', async () => { // Arrange const { wrapper } = getMountedComponent(); - const providers = { data: ['some data', 'some more data'] }; + const providers = { data: { shopProviders: ['some data', 'some more data']} }; useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers)); const newFilter = 'new filter'; @@ -461,7 +461,7 @@ describe('TPA search page', () => { // Assert expect(useMainStore().getTpaProviders).toBeCalled(); - expect(wrapper.vm.providers).toEqual(providers.data); + expect(wrapper.vm.providers).toEqual(providers.data.shopProviders); }); describe('on providers', () => { test.each([null, undefined, []])( @@ -481,7 +481,7 @@ describe('TPA search page', () => { // Arrange const { wrapper } = getMountedComponent(); const value = 'some value'; - const newProviders = [{ value }]; + const newProviders = [{ providerNumber: value }]; // Act wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders); @@ -503,7 +503,7 @@ describe('TPA search page', () => { }); }); describe('method', () => { - describe('getProviders', () => { + describe('getProviderButtonData', () => { test.each([null, undefined, {}])( 'returns empty list when getTpaProviders returns no data', async (newProviders) => { @@ -521,14 +521,18 @@ describe('TPA search page', () => { test('returns expected when getTpaProviders returns data', async () => { // Arrange const { wrapper } = getMountedComponent(); - const providers = { data: [{ name: 'foo' }] }; + const providers = { + data: { + shopProviders: [{ name: 'foo' }] + } + }; useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (providers)); // Act const result = await wrapper.vm.getProviderButtonData(); // Assert - expect(result).toEqual(providers.data); + expect(result).toEqual(providers.data.shopProviders); }); }); test('doNotSeeMyShopLinkClick invokes navigate method', () => { @@ -559,14 +563,16 @@ describe('TPA search page', () => { test('returns value from getProviders', async () => { // Arrange const { wrapper } = getMountedComponent(); - const newProviders = { data: [{ name: 'foo' }] }; - useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => (newProviders)); + const shopProviders = [{ name: 'foo' }]; + useMainStore().getTpaProviders = jest.fn().mockImplementationOnce(() => ({ + data: { shopProviders } + })); // Act await wrapper.vm.searchClick(); // Assert - expect(wrapper.vm.providers).toEqual(newProviders.data); + expect(wrapper.vm.providers).toEqual(shopProviders); }); }); test('backButtonAction invokes navigate method', () => { @@ -613,32 +619,6 @@ describe('TPA search page', () => { expect(result).toBeNull(); }); }); - test.each([undefined, null, 'some value', ''])( - 'setFilter sets value of filter', - (filter) => { - // Arrange - const { wrapper } = getMountedComponent(); - - // Act - wrapper.vm.setFilter(filter); - - // Assert - expect(wrapper.vm.filter).toEqual(filter); - } - ); - test.each([undefined, null, ['some value'], []])( - 'setProviders sets value of providers', - (providers) => { - // Arrange - const { wrapper } = getMountedComponent(); - - // Act - wrapper.vm.setProviders(providers); - - // Assert - expect(wrapper.vm.providers).toEqual(providers); - } - ); }); describe('before route enter', () => { test('when providers exist at 25 mile radius, filter is set to "25 miles" and providers set to expected', async () => { @@ -646,8 +626,9 @@ describe('TPA search page', () => { const { wrapper } = getMountedComponent(); const zipCode = '18394'; useMainStore().order.customer.address.zipCode = zipCode; - const providers = { data: [{ name: 'provider' }] }; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => (radius === 25 ? providers : [])); + const providers = [{ name: 'provider' }]; + useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => + ({ data: { shopProviders: radius === 25 ? providers : [] } })); const expectedFilter = '25 miles'; // Act @@ -658,6 +639,9 @@ describe('TPA search page', () => { (c) => c(wrapper.vm) ); + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + // Assert expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual(providers); @@ -667,8 +651,9 @@ describe('TPA search page', () => { const { wrapper } = getMountedComponent(); const zipCode = '18394'; useMainStore().order.customer.address.zipCode = zipCode; - const providers = { data: [{ name: 'provider' }] }; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => (radius === 50 ? providers : [])); + const providers = [{ name: 'provider' }]; + useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => + ({ data: { shopProviders: radius === 50 ? providers : [] } })); const expectedFilter = '50 miles'; // Act @@ -679,6 +664,9 @@ describe('TPA search page', () => { (c) => c(wrapper.vm) ); + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + // Assert expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual(providers); @@ -690,8 +678,9 @@ describe('TPA search page', () => { const { wrapper } = getMountedComponent(); const zipCode = '18394'; useMainStore().order.customer.address.zipCode = zipCode; - const providers = { data: [{ name: 'provider' }] }; - useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => (radius === 100 ? providers : [])); + const providers = [{ name: 'provider' }]; + useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) => + ({ data: { shopProviders: radius === 100 ? providers : [] } })); const expectedFilter = '100 miles'; // Act @@ -702,6 +691,9 @@ describe('TPA search page', () => { (c) => c(wrapper.vm) ); + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + // Assert expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual(providers); @@ -725,6 +717,9 @@ describe('TPA search page', () => { (c) => c(wrapper.vm) ); + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + // Assert expect(wrapper.vm.filter).toBe(expectedFilter); expect(wrapper.vm.providers).toEqual([]); diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index 4f457cd5..a456d29f 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -247,8 +247,28 @@ export default { methods: { getProviderAddress(provider) { - const addressLine2 = `${provider.address.city}, ${provider.address.state} ${provider.address.zipCode}`; - return `${provider.address.streetAddress}, ${addressLine2}`; + const city = provider?.address?.city ?? ''; + const state = provider?.address?.state ?? ''; + const zipCode = provider?.address?.zipCode ?? ''; + let addressLine2 = ''; + if (city) { + addressLine2 = city; + if (state || zipCode) { + addressLine2 = ', '; + } + } + if (state) { + addressLine2 += `${state}`; + if (zipCode) { + addressLine2 += ' '; + } + } + if (zipCode) { + addressLine2 += `${zipCode}`; + } + return provider?.address?.streetAddress + ? `${provider.address.streetAddress}, ${addressLine2}` + : addressLine2; }, async setInitialFilterAndProviders() { const radiusOptions = [25, 50, 100]; @@ -268,8 +288,9 @@ export default { providers = tpaProvidersRadius100; } } + console.log(`radius: ${radius}`); this.filter = radius; - this.providers = providers.data.shopProviders; + this.providers = providers?.data?.shopProviders ?? []; }, async getProviderButtonData() { const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles); @@ -304,13 +325,18 @@ export default { }, getShopButtonDataFromProvider(provider) { const { phoneNumber } = provider; - const distance = +provider.distanceInMiles.toFixed(1); + + const distance = provider?.distanceInMiles + ? +provider.distanceInMiles.toFixed(1) + : null; return { - buttonLabel: provider.name, - buttonLabelSubCopy: `${distance} mi`, + buttonLabel: provider?.name ?? '', + buttonLabelSubCopy: distance == null + ? '' + : `${distance} mi`, buttonBodyCopy: `${this.getProviderAddress(provider)}
${phoneNumber}`, - value: provider.providerNumber + value: provider?.providerNumber ?? '' }; } }