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 {