Merge pull request #105 from Safelite/CSR-222_updates

CSR-222 updates

src/common-components/funnel-sub-header/funnel-sub-header.spec.js

@@ -14,4 +14,19 @@ describe("FunnelSubHeader.vue", () => {
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
+  it("Should render the button inside of header if backButtonAction provided", () => {
+    // Act
+    const testFn = () => {}
+    const wrapper = shallowMount(FunnelSubHeader, {
+      propsData: {
+        text: "FunnelSubHeader Content",
+        hasBackButton: true,
+        backButtonAction: testFn,
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("h2").find("button").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
+  });
 });

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">
+        <button v-if="hasBackButton && backButtonAction" @click="backButtonAction">
+          {{ text }}
+        </button>
+        <span v-else>
+          {{ text }}
+        </span>
+      </h2>
       <buttonBack
         v-if="hasBackButton"
         :backButtonAccessibleText="backButtonAccessibleText"
@@ -32,6 +39,12 @@ export default {
 <style lang="scss">
   h2 {
     color: $gray-550;
+
+    button {
+      border: none;
+      background: none;
+      color: inherit;
+    }
   }
   .back-button-wrapper {
     margin-left: .25rem;

src/ux-components/button-back/button-back.spec.js

@@ -3,39 +3,20 @@ import buttonBack from "./button-back";
 
 describe("back button", () => {
 
-  test("renders a link", () => {
+  test("renders a button", () => {
     // Arrange
+    const myFunction = () => {};
 
     // Act
     const wrapper = shallowMount(buttonBack, {
       propsData: {
-        backButtonUrl: "#",
+        backButtonAction: myFunction,
         backButtonAccessibleText: "something",
       },
     });
     
     // Assert
-    expect(wrapper.find("a").exists()).toBe(true);
-    wrapper.unmount();
-  });
-
-  test("should execute handleClick function if it is clicked on", async () => {
-    // Arrange
-    const myFunction = () => {};
-    
-    // Act
-    const wrapper = shallowMount(buttonBack, {
-        propsData: {
-            backButtonAction: myFunction,
-            backButtonAccessibleText: "something",
-        },
-    });
-    const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
-
-    await wrapper.find("a").trigger("click");
-    
-    // Assert
-    expect(handleClickMethod).toHaveBeenCalled();
+    expect(wrapper.find("button").exists()).toBe(true);
     wrapper.unmount();
   });
 

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

@@ -1,8 +1,7 @@
 <template>
-  <a 
-    v-if="backButtonUrl || backButtonAction" 
-    :href="backButtonUrl || '#'" 
-    @click="handleClick($event)" 
+  <button 
+    v-if="backButtonAction" 
+    @click="backButtonAction" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
   >
@@ -10,34 +9,23 @@
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-  </a>
+  </button>
 </template>
 
 <script>
 export default {
   name: "buttonBack",
   props: {
-    backButtonUrl: {
-      type: String,
-      default: "",
-    },
     backButtonAccessibleText: {
       type: String,
       required: true,
+      default: "",
     },
     backButtonAction: {
       type: Function,
       default: null,
     }
   },
-  methods: {
-    handleClick: function (event) {
-      if (this.backButtonAction) {
-        event.preventDefault();
-        this.backButtonAction();
-      }
-    },
-  },
 };
 </script>