CSR-222: changes to navigation method of back button

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

@@ -12,5 +12,6 @@ describe("FunnelSubHeader.vue", () => {
 
     // Assert
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
   });
 });

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

@@ -4,8 +4,8 @@
       <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
       <buttonBack
         v-if="hasBackButton"
-        :backButtonUrl="backButtonUrl" 
         :backButtonAccessibleText="backButtonAccessibleText"
+        :backButtonAction="backButtonAction"
       />
     </div>
   </div>
@@ -21,6 +21,7 @@ export default {
     hasBackButton: Boolean,
     backButtonUrl: String,
     backButtonAccessibleText: String,
+    backButtonAction: Function,
   },
   components: {
     buttonBack,

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

@@ -2,6 +2,7 @@ import { shallowMount } from "@vue/test-utils";
 import buttonBack from "./button-back";
 
 describe("back button", () => {
+
   test("renders a link", () => {
     // Arrange
 
@@ -17,4 +18,25 @@ describe("back button", () => {
     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();
+    wrapper.unmount();
+  });
+
 });

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

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