Merge branch 'develop' into feature/CSR-1383-add-product-tiles
This commit is contained in:
commit
f9fdd405d9
2 changed files with 0 additions and 183 deletions
|
|
@ -1,59 +0,0 @@
|
||||||
import { mount } from "@vue/test-utils";
|
|
||||||
import funnelFooter from "./funnel-footer";
|
|
||||||
|
|
||||||
describe("funnel-footer.vue", () => {
|
|
||||||
test("Should emit ForwardClicked on button click", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = mount(funnelFooter, {
|
|
||||||
mixins: [mockMixin],
|
|
||||||
});
|
|
||||||
wrapper.vm.buttonClick();
|
|
||||||
// Assert
|
|
||||||
expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled;
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Should emit BackClicked on link click", async () => {
|
|
||||||
// Act
|
|
||||||
const wrapper = mount(funnelFooter, {
|
|
||||||
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(funnelFooter, {
|
|
||||||
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(funnelFooter, {
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const mockMixin = {
|
|
||||||
methods: {
|
|
||||||
getCmsContent: jest.fn(),
|
|
||||||
getFooterInfoBoxHeight: jest.fn(() => 80),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="row"></div>
|
|
||||||
<footer class="footer container-fluid g-5 my-5 px-0" id="infoBox">
|
|
||||||
<div class="row d-flex flex-row-reverse align-items-center vw-100">
|
|
||||||
<div class="col button-col d-flex" 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="funnel-footer-main-button"
|
|
||||||
data-bs-dismiss="modal" />
|
|
||||||
</div>
|
|
||||||
<div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
|
|
||||||
<textLink
|
|
||||||
linkType="navigation"
|
|
||||||
:text="backLink"
|
|
||||||
useLoadingModal
|
|
||||||
@click-event="linkClick"
|
|
||||||
href="javascript:void(0)"
|
|
||||||
data-bs-target="#footerModal"
|
|
||||||
data-bs-dismiss="modal" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import textLink from "@/ux-components/text-link/text-link";
|
|
||||||
import buttonMain from "@/ux-components/button-main/button-main";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "funnelFooter",
|
|
||||||
emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
|
|
||||||
props: {
|
|
||||||
isForwardActionDisabled: Boolean,
|
|
||||||
isBackButtonHidden: { type: Boolean, default: false },
|
|
||||||
cmsWidgetName: String,
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
textLink,
|
|
||||||
buttonMain,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
customButtontext: "",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
unmounted() {
|
|
||||||
document.onkeydown = null;
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
backLink() {
|
|
||||||
return this.getCmsContent(this.cmsWidgetName, "BackButtonText");
|
|
||||||
},
|
|
||||||
buttonText() {
|
|
||||||
return this.customButtontext
|
|
||||||
? this.customButtontext
|
|
||||||
: this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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>
|
|
||||||
.footer {
|
|
||||||
overflow: visible;
|
|
||||||
display: flex;
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.col,
|
|
||||||
.col-auto,
|
|
||||||
.col button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@media only screen and (min-width: 340px) {
|
|
||||||
.col,
|
|
||||||
.col-auto,
|
|
||||||
.col button {
|
|
||||||
width: auto;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > .container-fluid {
|
|
||||||
overflow-x: visible; // needed to fix hidden footer on some iphones
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue