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

SSR-1064 restored sitefooter

Browse source
This commit is contained in:
Matt Caimi 2024-02-02 14:18:43 -05:00
parent 462e4f9337
commit 0ffebaf17e
5 changed files with 18 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/iss-components/nav-bar/nav-bar.spec.js
View file

@ -1,59 +0,0 @@
import { mount } from '@vue/test-utils';
import navbar from './nav-bar';
const mockMixin = {
methods: {
getCmsContent: jest.fn(),
getFooterInfoBoxHeight: jest.fn(() => 80)
}
};
describe('nav-bar.vue', () => {
test('Should emit ForwardClicked on button click', async () => {
// Act
const wrapper = mount(navbar, {
mixins: [mockMixin]
});
wrapper.vm.buttonClick();
// Assert
expect(wrapper.emitted()['ForwardClicked'][0]).toHaveBeenCalled;
});
test('Should emit BackClicked on link click', async () => {
// Act
const wrapper = mount(navbar, {
mixins: [mockMixin]
});
wrapper.vm.linkClick();
// Assert
expect(wrapper.emitted()['BackClicked'][0]).toHaveBeenCalled;
});
test('Should change button text when update button text is called', async () => {
// Act
const wrapper = mount(navbar, {
mixins: [mockMixin]
});
wrapper.vm.updateButtonText('newText');
// Assert
expect(wrapper.componentVM.customButtontext).toBe('newText');
});
test('should run removeLoader fn on buttonMain and return false for onkeydown fn', async () => {
// Arrange
const wrapper = mount(navbar, {
mixins: [mockMixin]
});
// Act
wrapper.vm.$refs.buttonMain.removeLoader = jest.fn();
wrapper.vm.removeLoader();
const spy = jest.spyOn(document, 'onkeydown');
document.onkeydown();
// Assert
expect(wrapper.vm.$refs.buttonMain.removeLoader).toHaveBeenCalled();
expect(spy).toReturnWith(true);
});
});

162
src/iss-components/nav-bar/nav-bar.vue
View file

@ -1,162 +0,0 @@
<template>
<div class="row"></div>
<div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
<div
class="row d-flex justify-content-between vw-100"
:class="[
buttonSize
? 'flex-column align-items-stretch'
: 'flex-row-reverse align-items-center',
]">
<div
:class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
id="stacked">
<buttonMain
ref="buttonMain"
isPrimary
:buttonText="buttonText"
loaderColor="white"
:class="isForwardActionDisabled && 'form-test-invalid'"
:aria-disabled="isForwardActionDisabled"
:isDisabled="isForwardActionDisabled"
@click-event="buttonClick"
data-bs-target="#footerModal"
data-test-id="nav-bar-main-button"
data-bs-dismiss="modal"
v-if="!isSubmitHidden" />
</div>
<div
v-if="!isBackButtonHidden"
class="col-auto link-col py-1 text-break"
:class="[buttonSize ? 'back-centered-below mt-5' : '']">
<textLink
linkType="navigation"
:text="backLink"
useLoadingModal
@click-event="linkClick"
href="javascript:void(0)"
data-bs-target="#footerModal"
data-bs-dismiss="modal" />
</div>
</div>
</div>
</template>
<script>
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
export default {
name: 'navbar',
components: {
textLink,
buttonMain
},
props: {
isForwardActionDisabled: Boolean,
isBackButtonHidden: { type: Boolean, default: false },
cmsWidgetName: String,
buttonSize: { type: Boolean, default: false },
isSubmitHidden: { type: Boolean, default: false }
},
emits: ['BackClicked', 'ForwardClicked'], // <--- should remove oodles of warnings in dev tools
data() {
return {
customButtontext: ''
};
},
computed: {
backLink() {
return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
},
buttonText() {
return this.customButtontext
? this.customButtontext
: this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
}
},
unmounted() {
document.onkeydown = null;
},
methods: {
updateButtonText(newText) {
this.customButtontext = newText;
},
removeLoader() {
this.$refs.buttonMain.removeLoader();
document.onkeydown = function (e) {
return true;
};
},
buttonClick() {
// prevent keyboard input after button click
document.onkeydown = function (e) {
return false;
};
this.$emit('ForwardClicked');
},
linkClick() {
this.$emit('BackClicked');
}
}
};
</script>
<style lang="scss" scoped>
.nav-bar {
overflow: visible;
display: flex;
padding: 0;
a {
display: flex;
justify-content: center;
}
.col,
.col-auto,
.col button {
width: 100%;
}
.back-centered-below {
display: flex;
justify-content: center;
}
@media only screen and (min-width: 340px) {
.col,
.col-auto,
.col button {
width: auto;
justify-content: flex-end;
}
.back-centered-below {
display: flex;
justify-content: center;
}
.btn-primary {
width: auto;
}
a {
display: flex;
justify-content: flex-start;
}
}
& > .container-fluid {
overflow-x: visible; // needed to fix hidden footer on some iphones
}
.medium-button {
// Define styles for a medium button (default size)
justify-content: flex-end;
width: auto;
}
.large-button {
justify-content: center;
.btn-primary {
width: 100%;
justify-content: center;
}
}
}
</style>

10
src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
View file

@ -17,15 +17,15 @@ const testConstants = {
content: {
withInline: 'Button text with {custom:inlineImage} inline.',
noInline: 'Button text with no inline'
},
}
};
let cmsContent;
function generateDefaultProps() {
return {
buttonLabel: testConstants.noInline,
altText: testConstants.noInline,
buttonLabel: testConstants.content.noInline,
altText: testConstants.content.noInline,
groupName: 'payment-method',
value: testConstants.names.A,
buttonImage: testConstants.images.A
@ -37,9 +37,7 @@ function setupMocks(customMountOptions) {
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
return cmsContent?.[widgetName]?.[cmsFieldName] ?? '';
})
getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
}
};

15
src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
View file

@ -24,9 +24,9 @@ const testConstants = {
imageId: 'idB',
image: 'imageB',
subWidget: 'subWidgetB'
},
},
},
}
}
}
};
let cmsContent;
@ -53,7 +53,6 @@ function setupMocks(customMountOptions) {
return { wrapper };
}
describe('Payment Method Question', () => {
beforeEach(() => {
cmsContent = {
@ -99,15 +98,15 @@ describe('Payment Method Question', () => {
altText: testConstants.cms.answers.optionA.text,
groupName: 'payment-method',
value: testConstants.cms.answers.optionA.name,
buttonImage: testConstants.cms.answers.optionA.image,
buttonImage: testConstants.cms.answers.optionA.image
},
{
buttonLabel: testConstants.cms.answers.optionB.text,
altText: testConstants.cms.answers.optionB.text,
groupName: 'payment-method',
value: testConstants.cms.answers.optionB.name,
buttonImage: testConstants.cms.answers.optionB.image,
},
buttonImage: testConstants.cms.answers.optionB.image
}
]);
});
@ -117,7 +116,7 @@ describe('Payment Method Question', () => {
const props = generateDefaultProps();
const { wrapper } = setupMocks({
propsData: props,
propsData: props
});
// Act

22
src/layouts/payment-method/payment-method.vue
View file

@ -4,9 +4,6 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<loadingModal
ref="loadingModal"
notFullScreen />
<div class="page-container-grouped-styles">
<siteHeader
ref="siteHeader"
@ -29,13 +26,13 @@
v-model="paymentMethodInternalModel"
validationRules="option-required" />
<div>Pia Disabled Placeholder</div>
<navbar
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
buttonSize
@backClicked="backButtonAction"
@backClicked="navigateBack"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
@ -45,11 +42,10 @@
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import navbar from '@/iss-components/nav-bar/nav-bar.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
// Supporting Items
import settleAllPromises from '@/helpers/layout-helper';
@ -72,10 +68,9 @@ export default {
Form,
siteHeader,
siteSubHeader,
navbar,
siteFooter,
reviewDropdown,
paymentMethodQuestion,
loadingModal
paymentMethodQuestion
},
async beforeRouteEnter(to, from, next) {
// Call APIs
@ -227,14 +222,11 @@ export default {
updateFooterButtonText(newValue) {
this.$refs.siteFooter.updateButtonText(newValue);
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
await useMainStore().savePaymentMethodChoice(this.paymentMethod);
if (this.paymentMethod === paymentMethods.LATER) {
this.$router.navigateWithoutSaving(
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
@ -248,7 +240,7 @@ export default {
// if we don't have a work order in delete substatus, set the flag and submit.
// we need a work order number for pia so we can pass it to safeliteHop.
this.$router.navigateWithoutSaving(
this.$router.navigate(
this.navigationScenarios.CLICKED_PAY_NOW,
this.$route
);