jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updating tpa-search tests

Browse source
This commit is contained in:
Michaela Brydon 2023-11-28 16:16:54 -05:00
parent 509fee2fa9
commit 7a9edc3e8a
3 changed files with 312 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap
View file

@ -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],
},

339
src/layouts/tpa-search/tpa-search.spec.js
View file

@ -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';

11
src/layouts/tpa-search/tpa-search.vue
View file

@ -39,12 +39,11 @@
</Form>
<loader
v-if="initialLoading"
ref="providersLoader"
id="mapLoader"
loaderPosition="center"
loaderColor="blue"
:width="4"
:height="4"
class="loader" />
:height="4" />
<div v-else>
<googleMap
id="map"
@ -66,10 +65,9 @@
:options="filterOptions"
disableAutoFill
:validationRules="rules.filter" />
<loader
v-if="reloadProviders"
ref="providersLoader"
id="providersLoader"
loaderPosition="center"
loaderColor="blue"
:width="4"
@ -259,7 +257,7 @@ export default {
return this.providers?.map((provider) => 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 {
</script>
<style lang="scss" scoped>
.search-question {
font-size: $h5-font-size;
}