CSR-563 | Refactor for efficiency, correct failing test

This commit is contained in:
Scott Kiener 2022-05-16 16:58:37 -04:00
parent 6265cc5598
commit 9ebb3a1fe3
2 changed files with 8 additions and 5 deletions

View file

@ -62,6 +62,7 @@ describe("funnel-footer.vue", () => {
const mockMixin = {
methods: {
getCmsContent: jest.fn()
getCmsContent: jest.fn(),
getFooterInfoBoxHeight: jest.fn(()=>80)
}
}

View file

@ -90,19 +90,21 @@ export default {
// second split would return 'provide your VIN'
return copy.split(':')[1].split(',')[1];
},
isAlertInViewport() {
isAlertInViewport(footerHeight) {
const rect = this.$el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
// remove footerHeight from window height to avoid items being hidden behind footer
rect.bottom <= (window.innerHeight - footerHeight || document.documentElement.clientHeight - footerHeight)
);
},
},
updated() {
if (this.doesScrollToOnAppear && this.$el.style.display != 'none') {
if (!this.isAlertInViewport()) {
var footerHeight = this.getFooterInfoBoxHeight();
if (!this.isAlertInViewport(footerHeight)) {
// alert position on page + height of alert + footer height
var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + this.getFooterInfoBoxHeight();
var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
// find the div wrapped by the form element - this is the scrollable container
// should be a more future-proof selector in case of CSS class changes
var pageContainerScrollable = document.querySelector('form > div');