diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js index f1a885dfd..791cd0961 100644 --- a/src/common-components/funnel-footer/funnel-footer.spec.js +++ b/src/common-components/funnel-footer/funnel-footer.spec.js @@ -5,9 +5,17 @@ describe("funnel-footer.vue", () => { it("Should return footer-link class", async () => { // Act - try { + + const r = { + test:"testing", + clientHeight: 10, + classList: { + add: jest.fn(() => ''), + remove: jest.fn() + }, + }; global.document.getElementById = jest.fn().mockImplementation(()=> { - return {} + return r; }); const wrapper = mount(funnelFooter, { @@ -22,9 +30,8 @@ describe("funnel-footer.vue", () => { // Expect expect(link.attributes('class')).toContain("footer-link"); expect(global.document.getElementById).toBeCalled(); - } catch(error) { - console.log(error); - } + expect(r.classList.add).toBeCalledWith("justify-content-end"); + expect(r.classList.remove).toBeCalledWith("justify-content-start"); }); @@ -57,4 +64,32 @@ describe("funnel-footer.vue", () => { expect(input.attributes("class")).toContain("btn-primary"); }); + it("Should return class justify-content-end if paddingHeight < 80px", async () => { + + global.document.getElementById = jest.fn().mockImplementation(()=> { + return { + test:"testing", + clientHeight: 10, + classList: { + add: jest.fn(), + remove: jest.fn() + } + } + }); + + // Act + const wrapper = mount(funnelFooter, { + propsData: { + footer: true + }, + }); + const infoBox = document.getElementById('infoBox'); + // Assert + const stacked = wrapper.find("#stacked"); + wrapper.vm.paddingHeight = 100; + + // Expect + expect(stacked.attributes('class')).toContain("justify-content-end"); + }); + }); diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 05c184b5c..485259088 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -26,15 +26,16 @@
-
-
+
+
+
+
80) { + wrapper2.classList.add("justify-content-start"); + wrapper2.classList.remove("justify-content-end"); + } else { + wrapper2.classList.add("justify-content-end"); + wrapper2.classList.remove("justify-content-start"); + } } } }; + + diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 2fd05b516..ed8318673 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -76,7 +76,7 @@
Functioning as Checkbox Checkbox no Description Functioning as Radio Button Radio Button no Description Horizontal Radio Button Radio Button no Description a { color: $blue; - text-decoration: none; - border-bottom: 1px solid $blue; + text-underline-offset: 0.5em; line-height: 26px; padding: 0 0 4px 0; font-weight: 500; @@ -45,7 +44,6 @@ a { } &.navigation-link { color: $black; - border-bottom: 1px solid $black; line-height: 26px; display: inline-flex; text-transform: capitalize; @@ -54,14 +52,13 @@ a { &.footer-link { color: $gray-600; text-decoration: none; - border-bottom: 1px solid transparent; line-height: 20px; padding: 0 0 2px 0; font-weight: 400; font-size: 0.75rem; &:hover { - border-bottom: 1px solid $gray-500; padding: 0 0 2px 0; + text-decoration: underline; } } }