From 42b1bbe031e3060bf14cbd4d734ebf1dbc81fe9d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 18:52:21 -0500
Subject: [PATCH 1/5] CSR-222: add back button to vehicle-make layout

---
 src/layouts/vehicle-make/vehicle-make.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index f4e5bc587..be5e925ea 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -4,7 +4,13 @@
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
+            :text="pageHeaderWidgets.HeaderText"
+            :hasBackButton="true"
+            backButtonAccessibleText="Change Vehicle Year"
+            :backButtonAction="backButtonAction"
+            class="Header" 
+        />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>
     </div>
@@ -60,6 +66,13 @@ export default {
     });
   },
 
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
   watch: {
     selectedMake(make) {
       this.$store.commit(this.storeMutations.UPDATE_MAKE, make);

From 9c44e3505825be5d068294f15c6a53c49f889fdf Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 18:56:14 -0500
Subject: [PATCH 2/5] CSR-222: updates to unit tests and helper

---
 src/helpers/unit-test-helper.js               |  2 ++
 src/layouts/vehicle-make/vehicle-make.spec.js | 34 +++++++++++++++++--
 src/layouts/vehicle-year/vehicle-year.spec.js |  7 ++--
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js
index 5b5deb521..268a8e524 100644
--- a/src/helpers/unit-test-helper.js
+++ b/src/helpers/unit-test-helper.js
@@ -1,5 +1,6 @@
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -21,6 +22,7 @@ export function getMountOptions(mockData) {
   // Mock const files
   mocks.storeActions = storeActions;
   mocks.storeMutations = storeMutations;
+  mocks.navigationScenarios = navigationScenarios;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 87df24e38..961345820 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 describe("vehicle-make.vue", () => {
   test("Make question component is initized with api data", async (done) => {
 
-    //Arange
+    //Arrange
     const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
     const makeQuestionInitialData = ["honda", "ford", "dodge"];
     const { wrapper, apiPromise } = setupMocks( { 
@@ -35,7 +35,7 @@ describe("vehicle-make.vue", () => {
 describe("vehicle-make.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
-    //Arange
+    //Arrange
     const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
 
     //Act
@@ -50,10 +50,38 @@ describe("vehicle-make.vue", () => {
   });
 });
 
+describe("vehicle-make.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a make to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    const backButtonActionMethod = jest.spyOn(wrapper.vm, "backButtonAction");
+    
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
 function setupMocks({
   radioQuestionCmsContent = {},
   makeQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
@@ -84,7 +112,7 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleMake, mountOptions);
   const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
   makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index ae3d44a6a..594630ba4 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 describe("vehicle-year.vue", () => {
   test("Year question component is initized with api data", async (done) => {
 
-    //Arange
+    //Arrange
     const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
     const yearQuestionInitialData = ["2023", "2022", "2021"];
     const { wrapper, apiPromise } = setupMocks( { 
@@ -35,7 +35,7 @@ describe("vehicle-year.vue", () => {
 describe("vehicle-year.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
-    //Arange
+    //Arrange
     const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
 
     //Act
@@ -54,6 +54,7 @@ function setupMocks({
   radioQuestionCmsContent = {},
   yearQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
@@ -84,7 +85,7 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleYear, mountOptions);
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
   yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;

From 875df38dd910039fbc92b11260ccb5fd21f1283a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 19:00:16 -0500
Subject: [PATCH 3/5] CSR-222: removed unneeded spy method

---
 src/layouts/vehicle-make/vehicle-make.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 961345820..120f8de4f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -62,7 +62,6 @@ describe("vehicle-make.vue", () => {
         },
       },
     });
-    const backButtonActionMethod = jest.spyOn(wrapper.vm, "backButtonAction");
     
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));

From 8de2948bcf429ea54c562646e66ed70a516caddf Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 12:25:16 -0500
Subject: [PATCH 4/5] CSR-222: revised button to be button markup, not link

---
 src/ux-components/button-back/button-back.spec.js |  9 +++++----
 src/ux-components/button-back/button-back.vue     | 15 +++++----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index b753f4376..7f6ff19e6 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -3,19 +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);
+    expect(wrapper.find("button").exists()).toBe(true);
     wrapper.unmount();
   });
 
@@ -32,7 +33,7 @@ describe("back button", () => {
     });
     const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
 
-    await wrapper.find("a").trigger("click");
+    await wrapper.find("button").trigger("click");
     
     // Assert
     expect(handleClickMethod).toHaveBeenCalled();
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 808c1f6cc..922ec29f8 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,6 @@
 <template>
-  <a 
-    v-if="backButtonUrl || backButtonAction" 
-    :href="backButtonUrl || '#'" 
+  <button 
+    v-if="backButtonAction" 
     @click="handleClick($event)" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
@@ -10,17 +9,13 @@
       <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,
@@ -28,12 +23,12 @@ export default {
     backButtonAction: {
       type: Function,
       default: null,
+      required: true,
     }
   },
   methods: {
-    handleClick: function (event) {
+    handleClick: function () {
       if (this.backButtonAction) {
-        event.preventDefault();
         this.backButtonAction();
       }
     },

From d393d12bec58708239dd6fb92bf9c66f20fcbac2 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 14:58:04 -0500
Subject: [PATCH 5/5] CSR-222: include header as link; updates

---
 .../funnel-sub-header.spec.js                 | 15 ++++++++++++++
 .../funnel-sub-header/funnel-sub-header.vue   | 15 +++++++++++++-
 .../button-back/button-back.spec.js           | 20 -------------------
 src/ux-components/button-back/button-back.vue | 11 ++--------
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index e2b5c4d28..417081350 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/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();
+  });
 });
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 5e3bcc7e3..d05a9ea4d 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/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;
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index 7f6ff19e6..b8bc3256d 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -20,24 +20,4 @@ describe("back button", () => {
     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("button").trigger("click");
-    
-    // Assert
-    expect(handleClickMethod).toHaveBeenCalled();
-    wrapper.unmount();
-  });
-
 });
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 922ec29f8..92145ac87 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,7 @@
 <template>
   <button 
     v-if="backButtonAction" 
-    @click="handleClick($event)" 
+    @click="backButtonAction" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
   >
@@ -19,20 +19,13 @@ export default {
     backButtonAccessibleText: {
       type: String,
       required: true,
+      default: "",
     },
     backButtonAction: {
       type: Function,
       default: null,
-      required: true,
     }
   },
-  methods: {
-    handleClick: function () {
-      if (this.backButtonAction) {
-        this.backButtonAction();
-      }
-    },
-  },
 };
 </script>