Update unit test.

src/common-components/funnel-footer/funnel-footer.spec.js

@@ -9,10 +9,7 @@ describe("funnel-footer.vue", () => {
       const r = {
         test:"testing",
         clientHeight: 10,
-        classList: {
-          add: jest.fn(() => ''),
-          remove: jest.fn()
-        },
+        offsetHeight: 24,
       };
 
       global.document.getElementById = jest.fn().mockImplementation(()=> {
@@ -27,10 +24,7 @@ describe("funnel-footer.vue", () => {
       console.log(wrapper.html());
 
       // Expect
-      expect(link.attributes('class')).toContain("footer-link");
-      expect(global.document.getElementById).toBeCalled();
-      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      expect(r.classList.remove).toBeCalledWith("justify-content-start");
+      expect(link.attributes('class')).toContain("footer");
 
   });
 
@@ -63,32 +57,4 @@ 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");
-  });
-
 });

src/common-components/funnel-footer/funnel-footer.vue

@@ -16,10 +16,10 @@
     </div>
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
-        <div class="col-auto d-flex justify-content-end" id="stacked">
+        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col py-1">
+        <div class="col-12 link-col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -63,15 +63,6 @@ export default {
     checkHeight() {
       const parentHeight = document.getElementById('infoBox').clientHeight;
       const wrapper2 = document.getElementById('stacked');
-      console.log(parentHeight);
-
-      if (parentHeight > 80) {
-        wrapper2.classList.add("justify-content-start","w-100");
-        wrapper2.classList.remove("justify-content-end","w-auto");
-      } else {
-        wrapper2.classList.add("justify-content-end");
-        wrapper2.classList.remove("justify-content-start");
-      }
     },
     initializeComponent(cmsContent) {
       this.backLink = cmsContent.BackButtonText;
@@ -91,9 +82,19 @@ export default {
 .footer {
   display: flex;
   margin-top: auto;
-  button {
-    min-width: 135px;
+  .button-col,
+  .link-col,
+  .btn-primary {
     width: 100%;
   }
+  @media only screen and (min-width: 340px) {
+    .button-col,
+    .link-col {
+      width: 50% !important;
+    }
+    .btn-primary {
+      width: auto;
+    }
+  }
 }
 </style>

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -1,6 +1,7 @@
 // Components
 import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -144,7 +145,7 @@ describe("vehicle-damage.vue", () => {
 
 describe("vehicle-damage.vue", () => {
   test("Call invalidation, ResetPartsAndDeps should be called", async () => {
-    
+
     //Arrange
     const { wrapper } = setupMocks({});
 
@@ -221,6 +222,10 @@ function setupMocks({
 
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
+  };
+
+  funnelFooter.methods = {
+    initializeComponent: jest.fn(),
   }
 
   const mountOptions = getMountOptions(mountOptionsMockData);
@@ -252,5 +257,11 @@ function setupMocks({
   damageLocationQuestionWrapper.vm.initializeComponent =
   damageLocationQuestion.methods.initializeComponent;
 
+  const funnelFooterWrapper = wrapper.findComponent({
+    name: "funnelFooter",
+  });
+
+  funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }

src/styles/common-styles.scss

@@ -6,7 +6,6 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
-    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }

src/ux-components/button-main/button-main.vue

@@ -1,5 +1,5 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-2" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"