Merge pull request #100 from Safelite/feature/CSR-222

Feature/csr 222

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

@@ -1,12 +1,12 @@
 import { shallowMount } from "@vue/test-utils";
-import siteHeader from "./site-header";
+import funnelHeader from "./funnel-header";
 
-describe("siteHeader", () => {
+describe("funnelHeader", () => {
   test("renders the logo image", () => {
     // Arrange
 
     // Act
-    const wrapper = shallowMount(siteHeader, {
+    const wrapper = shallowMount(funnelHeader, {
       propsData: {
         imageSrc: "image_url",
       },

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

@@ -9,11 +9,12 @@
 
 <script>
 export default {
-  name: "site-header",
+  name: "funnel-header",
   props: {
     imageSrc: {
       type: String,
       required: true,
+      default: "",
     },
   },
 };

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

@@ -0,0 +1,17 @@
+import { shallowMount } from "@vue/test-utils";
+import FunnelSubHeader from "./funnel-sub-header";
+
+describe("FunnelSubHeader.vue", () => {
+  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
+    // Act
+    const wrapper = shallowMount(FunnelSubHeader, {
+      propsData: {
+        text: "FunnelSubHeader Content",
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
+  });
+});

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

@@ -0,0 +1,39 @@
+<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>
+      <buttonBack
+        v-if="hasBackButton"
+        :backButtonAccessibleText="backButtonAccessibleText"
+        :backButtonAction="backButtonAction"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import buttonBack from "@/ux-components/button-back/button-back";
+
+export default {
+  name: "FunnelSubHeader",
+  props: {
+    text: String,
+    hasBackButton: Boolean,
+    backButtonUrl: String,
+    backButtonAccessibleText: String,
+    backButtonAction: Function,
+  },
+  components: {
+    buttonBack,
+  }
+};
+</script>
+
+<style lang="scss">
+  h2 {
+    color: $gray-550;
+  }
+  .back-button-wrapper {
+    margin-left: .25rem;
+  }
+</style>

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -15,6 +15,7 @@ export default {
     vehicleImageSrc: {
       type: String,
       required: true,
+      default: "",
     },
   },
 };

src/layouts/component-test/component-test.vue

@@ -52,7 +52,10 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack/>
+        <buttonBack 
+          backButtonUrl="#"
+          backButtonAccessibleText="Back button label"
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -566,7 +569,7 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <siteHeader
+        <funnelHeader
           imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
         />
       </div>
@@ -594,7 +597,7 @@ import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 import alert from "@/ux-components/alert/alert";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 export default {
   name: "App",
@@ -607,7 +610,7 @@ export default {
     alert,
     vehicleBanner,
     listButtonHorizontal,
-    siteHeader,
+    funnelHeader,
   },
   data() {
     return {

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>
     </div>
@@ -14,9 +14,9 @@
 <script>
 // Components
 import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -69,9 +69,9 @@ export default {
 
   components: {
     makeQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
+            :text="pageHeaderWidgets.HeaderText" 
+            class="Header" 
+        />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>
@@ -14,14 +17,12 @@
 <script>
 // Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 export default {
   name: "vehicle-year",
@@ -73,9 +74,9 @@ export default {
 
   components: {
     yearQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>

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

@@ -1 +1,42 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import buttonBack from "./button-back";
+
+describe("back button", () => {
+
+  test("renders a link", () => {
+    // Arrange
+
+    // Act
+    const wrapper = shallowMount(buttonBack, {
+      propsData: {
+        backButtonUrl: "#",
+        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();
+    wrapper.unmount();
+  });
+
+});

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

@@ -1,15 +1,43 @@
 <template>
-  <button class="back-button-wrapper d-flex p-0">
+  <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>
     </div>
-  </button>
+  </a>
 </template>
 
 <script>
 export default {
-  name: "buttonBack"
+  name: "buttonBack",
+  props: {
+    backButtonUrl: {
+      type: String,
+      default: "",
+    },
+    backButtonAccessibleText: {
+      type: String,
+      required: true,
+    },
+    backButtonAction: {
+      type: Function,
+      default: null,
+    }
+  },
+  methods: {
+    handleClick: function (event) {
+      if (this.backButtonAction) {
+        event.preventDefault();
+        this.backButtonAction();
+      }
+    },
+  },
 };
 </script>
 
@@ -17,6 +45,9 @@ export default {
 .back-button-wrapper {
   border: none;
   background: transparent;
+  text-decoration: none;
+  border-bottom: none;
+
   .button-back {
     display: inline-flex;
     position: relative;

src/ux-components/header/header.spec.js

@@ -1,16 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import Header from "./header";
-
-describe("Header.vue", () => {
-  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
-    // Act
-    const wrapper = shallowMount(Header, {
-      propsData: {
-        text: "Header Content",
-      },
-    });
-
-    // Assert
-    expect(wrapper.find("h2").text()).toContain("Header Content");
-  });
-});

src/ux-components/header/header.vue

@@ -1,22 +0,0 @@
-<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>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Header",
-  props: {
-    text: String,
-  },
-};
-</script>
-
-<style lang="scss">
-  h2 {
-    color: $gray-550;
-  }
-</style>