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

adding reloadingProviders flag toggle to getProviderButtonData

Browse source
This commit is contained in:
Michaela Brydon 2023-11-30 14:11:19 -05:00
parent db8a342986
commit e52046f7ab
3 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@ Object {
"filter": "", "filter": "",
"mapZipCode": "12663", "mapZipCode": "12663",
"providers": Array [], "providers": Array [],
"reloadProviders": false, "reloadingProviders": false,
"rules": Object { "rules": Object {
"filter": "option-required", "filter": "option-required",
"provider": "option-required", "provider": "option-required",

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

@ -189,10 +189,10 @@ describe('TPA search page', () => {
expect(searchRadiusFilter.props().cmsWidgetName).toBe(expectedWidgetName); expect(searchRadiusFilter.props().cmsWidgetName).toBe(expectedWidgetName);
expect(searchRadiusFilter.props().validationRules).toBe(globalRules.OPTION_REQUIRED); expect(searchRadiusFilter.props().validationRules).toBe(globalRules.OPTION_REQUIRED);
}); });
test('providers loader when reloadProviders is true', async () => { test('providers loader when reloadingProviders is true', async () => {
// Arrange // Arrange
const wrapper = shallowMount(tpaSearch, getMountOptions()); const wrapper = shallowMount(tpaSearch, getMountOptions());
await wrapper.setData({ reloadProviders: true }); await wrapper.setData({ reloadingProviders: true });
// Act // Act
const providersLoader = wrapper.findComponent('#providersLoader'); const providersLoader = wrapper.findComponent('#providersLoader');
@ -200,7 +200,7 @@ describe('TPA search page', () => {
// Assert // Assert
expect(providersLoader.exists()).toBeTruthy(); expect(providersLoader.exists()).toBeTruthy();
}); });
test('select provider question when reloadProviders are false', async () => { test('select provider question when reloadingProviders are false', async () => {
// Arrange // Arrange
const wrapper = shallowMount(tpaSearch, getMountOptions()); const wrapper = shallowMount(tpaSearch, getMountOptions());
await wrapper.setData({ await wrapper.setData({
@ -216,7 +216,7 @@ describe('TPA search page', () => {
zipCode: '99230' zipCode: '99230'
} }
}], }],
reloadProviders: false reloadingProviders: false
}); });
const expectedAnswers = [{ const expectedAnswers = [{
buttonLabel: 'Shop Auto Glass', buttonLabel: 'Shop Auto Glass',
@ -243,14 +243,14 @@ describe('TPA search page', () => {
expect(selectProviderQuestion.props().additionalButtonData).toEqual(expectedAdditionalButtonData); expect(selectProviderQuestion.props().additionalButtonData).toEqual(expectedAdditionalButtonData);
}); });
test.each([[], null, undefined])( test.each([[], null, undefined])(
'no network providers alert when providers length is 0, undefined, or null and reloadProviders is false', 'no network providers alert when providers length is 0, undefined, or null and reloadingProviders is false',
async (providers) => { async (providers) => {
// Arrange // Arrange
const initialData = { const initialData = {
providers providers
}; };
const wrapper = shallowMount(tpaSearch, getMountOptions({}, initialData)); const wrapper = shallowMount(tpaSearch, getMountOptions({}, initialData));
await wrapper.setData({ reloadProviders: false }); await wrapper.setData({ reloadingProviders: false });
// Act // Act
const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders'); const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders');
@ -262,10 +262,10 @@ describe('TPA search page', () => {
expect(noNetworkProvidersAlert.props().isDismissible).toBeFalsy(); expect(noNetworkProvidersAlert.props().isDismissible).toBeFalsy();
} }
); );
test('preferred shop not listed link when reloadProviders is false', async () => { test('preferred shop not listed link when reloadingProviders is false', async () => {
// Arrange // Arrange
const wrapper = shallowMount(tpaSearch, getMountOptions()); const wrapper = shallowMount(tpaSearch, getMountOptions());
await wrapper.setData({ reloadProviders: false }); await wrapper.setData({ reloadingProviders: false });
// Act // Act
const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink'); const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink');
@ -288,10 +288,10 @@ describe('TPA search page', () => {
}); });
}); });
describe('should not render', () => { describe('should not render', () => {
test('select provider question when reloadProviders is true', async () => { test('select provider question when reloadingProviders is true', async () => {
// Arrange // Arrange
const { wrapper } = getMountedComponent(); const { wrapper } = getMountedComponent();
await wrapper.setData({ reloadProviders: true }); await wrapper.setData({ reloadingProviders: true });
// Act // Act
const selectProviderQuestion = wrapper.findComponent('#selectProviderQuestion'); const selectProviderQuestion = wrapper.findComponent('#selectProviderQuestion');
@ -311,10 +311,10 @@ describe('TPA search page', () => {
// Assert // Assert
expect(noNetworkProvidersAlert.exists()).toBeFalsy(); expect(noNetworkProvidersAlert.exists()).toBeFalsy();
}); });
test('when reloadProviders is true', async () => { test('when reloadingProviders is true', async () => {
// Arrange // Arrange
const wrapper = shallowMount(tpaSearch, getMountOptions()); const wrapper = shallowMount(tpaSearch, getMountOptions());
await wrapper.setData({ providers: [], reloadProviders: true }); await wrapper.setData({ providers: [], reloadingProviders: true });
// Act // Act
const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders'); const noNetworkProvidersAlert = wrapper.findComponent('#alertNoNetworkProviders');
@ -323,10 +323,10 @@ describe('TPA search page', () => {
expect(noNetworkProvidersAlert.exists()).toBeFalsy(); expect(noNetworkProvidersAlert.exists()).toBeFalsy();
}); });
}); });
test('preferred shop not listed link when reloadProviders is true', async () => { test('preferred shop not listed link when reloadingProviders is true', async () => {
// Arrange // Arrange
const { wrapper } = getMountedComponent(); const { wrapper } = getMountedComponent();
await wrapper.setData({ reloadProviders: true }); await wrapper.setData({ reloadingProviders: true });
// Act // Act
const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink'); const preferredShopNotListedLink = wrapper.findComponent('#preferredShopNotListedLink');

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

@ -59,7 +59,7 @@
disableAutoFill disableAutoFill
:validationRules="rules.filter" /> :validationRules="rules.filter" />
<loader <loader
v-if="reloadProviders" v-if="reloadingProviders"
id="providersLoader" id="providersLoader"
loaderPosition="center" loaderPosition="center"
loaderColor="blue" loaderColor="blue"
@ -195,7 +195,7 @@ export default {
filter: '', filter: '',
providers: [], providers: [],
selectedProviderNumber: '', selectedProviderNumber: '',
reloadProviders: false, reloadingProviders: false,
additionalButtonData: { additionalButtonData: {
displayAvailabilityIndicators: false displayAvailabilityIndicators: false
}, },
@ -269,12 +269,10 @@ export default {
watch: { watch: {
async filter() { async filter() {
if (this.dataLoaded) { if (this.dataLoaded) {
this.reloadProviders = true;
await this.getProviderButtonData().then((providers) => { await this.getProviderButtonData().then((providers) => {
this.providers = providers; this.providers = providers;
}); });
this.mapZipCode = this.zipCode; this.mapZipCode = this.zipCode;
this.reloadProviders = false;
} }
}, },
providers(newProviders) { providers(newProviders) {
@ -319,7 +317,9 @@ export default {
return [addressLine1, addressLine2].join(joinString); return [addressLine1, addressLine2].join(joinString);
}, },
async getProviderButtonData() { async getProviderButtonData() {
this.reloadingProviders = true;
const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles); const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
this.reloadingProviders = false;
return getTpaProvidersResult?.data?.shopProviders ?? []; return getTpaProvidersResult?.data?.shopProviders ?? [];
}, },
doNotSeeMyShopLinkClick() { doNotSeeMyShopLinkClick() {
@ -329,10 +329,8 @@ export default {
); );
}, },
async searchClick() { async searchClick() {
this.reloadProviders = true;
this.providers = await this.getProviderButtonData(); this.providers = await this.getProviderButtonData();
this.mapZipCode = this.zipCode; this.mapZipCode = this.zipCode;
this.reloadProviders = false;
}, },
backButtonAction() { backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);