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

Merge pull request #405 from Safelite/feature/CSR-520

Browse source 
Feature/csr 520
This commit is contained in:
CarlNation 2022-05-10 06:29:29 -04:00 committed by GitHub
commit 98ac53eebf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/common-components/loading-modal/loading-modal.spec.js
View file

@ -17,7 +17,7 @@ jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
describe("loadingModal", () => {
test("showModal sets modal visible", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: false });
const { wrapper } = setupMocks();
wrapper.vm.isModalVisible = false;
//Act
@ -30,54 +30,7 @@ describe("loadingModal", () => {
});
describe("loadingModal", () => {
test("closeModal sets modal not visible", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: false });
wrapper.vm.isModalVisible = true;
//Act
wrapper.vm.closeModal();
// Assert
expect(wrapper.vm.isModalVisible).toEqual(false);
wrapper.unmount();
});
});
describe("loadingModal", () => {
test("canClose calls closeModal", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: true });
wrapper.vm.isModalVisible = true;
//Act
wrapper.vm.canClose();
// Assert
expect(wrapper.vm.isModalVisible).toEqual(false);
wrapper.unmount();
});
});
describe("loadingModal", () => {
test("canClose does not call closeModal", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: false });
wrapper.vm.isModalVisible = true;
//Act
wrapper.vm.canClose();
// Assert
expect(wrapper.vm.isModalVisible).toEqual(true);
wrapper.unmount();
});
});
function setupMocks({
clickOutCloses
}) {
function setupMocks() {
//Mock store
store.dispatch = jest.fn(() => {});
@ -89,9 +42,6 @@ function setupMocks({
},
});
//Mock props
mountOptions.propsData = { clickOutCloses: clickOutCloses };
const wrapper = shallowMount(loadingModal, mountOptions);
return { wrapper };
}
}

35
src/common-components/loading-modal/loading-modal.vue
View file

@ -1,21 +1,16 @@
<template>
<div v-show="isModalVisible" class="loading-modal-backdrop" v-on:click="canClose" @close="closeModal">
<div v-show="isModalVisible" class="loading-modal-backdrop">
<div class="loading-modal">
<button v-if="showCloseButton" type="button" class="loading-modal-close" @click="closeModal">x</button>
<section class="loading-modal-body">
<div class="modal-icon-container text-center">
<img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif">
<img class="modal-icon" alt="" src="@/assets/img/windshield.png">
</div>
<div class="text-center fw-bold fs-5 loading-modal-text">
<slot name="body">
Default text
</slot>
Please wait...
</div>
<div class="text-center fs-5 loading-modal-text">
<slot name="subtext">
Default subtext
</slot>
This process can take up 20 seconds.
</div>
</section>
</div>
@ -30,20 +25,10 @@
isModalVisible: false,
};
},
props: {
showCloseButton: {type: Boolean, default: false},
clickOutCloses: {type: Boolean, default: false},
},
methods: {
showModal() {
this.isModalVisible = true;
},
closeModal() {
this.isModalVisible = false;
},
canClose() {
this.clickOutCloses ? this.closeModal() : null;
}
},
};
</script>
@ -88,20 +73,6 @@
padding: 0 24px 0 24px;
}
.loading-modal-close {
position: absolute;
top: 0;
right: 0;
border: none;
font-size: 20px;
padding: 10px;
cursor: pointer;
font-weight: bold;
color: $blue;
background: transparent;
z-index: 999;
}
.modal-icon-container {
position: relative;
width: 75px;

9
src/layouts/address-lookup/address-lookup.vue
View file

@ -6,14 +6,7 @@
v-slot="{ meta }"
autocomplete="off" >
<div class="page-container-grouped-styles">
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
<template v-slot:body>
Please wait...
</template>
<template v-slot:subtext>
This process can take up 20 seconds.
</template>
</loadingModal>
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />

9
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -1,14 +1,7 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
<template v-slot:body>
Please wait...
</template>
<template v-slot:subtext>
This process can take up 20 seconds.
</template>
</loadingModal>
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

9
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -6,14 +6,7 @@
v-slot="{ meta }"
>
<div class="page-container-grouped-styles">
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
<template v-slot:body>
Please wait...
</template>
<template v-slot:subtext>
This process can take up 20 seconds.
</template>
</loadingModal>
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"