Merge pull request #16 from Safelite/feature/Digital/SSR-81

Feature/digital/ssr 81

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

@@ -0,0 +1,27 @@
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+import { shallowMount } from "@vue/test-utils";
+
+describe("site sub header", () => {
+
+    const subHeaderText = "<p>let's fix your glass</p>";
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn().mockImplementation(()=> {
+            return subHeaderText;
+            })
+        }
+    }
+
+    it("should contain the cms content", () => {
+        const wrapper = shallowMount(siteSubHeader, {
+            mixins: [mockMixin]
+        });
+      
+        wrapper.getCmsContent = jest.fn();
+        const actual = wrapper.find("p");
+
+        expect(actual.html()).toBe(subHeaderText);
+    })
+
+});
+

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

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div id="subHeader" v-html="content"></div>
+    </div>
+</template>
+
+<script>
+    export default ({
+        name: "siteSubHeader",
+        props: {
+            cmsWidgetName: String,
+        },
+        computed: {
+            content()
+            {
+                return this.getCmsContent(this.cmsWidgetName, "SubHeaderText")
+            }
+        }
+    })
+</script>
+
+<style lang="scss" scoped>
+    #subHeader{
+        margin: 16px auto;
+        text-align: center;
+    }
+</style>

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

@@ -18,9 +18,9 @@
 <script>
     import navButton from '@/common-components/nav-button/nav-button';
     import siteHeader from '@/common-components/site-header/site-header';
+    import textboxQuestion from "@/common-components/textbox-question/textbox-question";
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
     import { settleAllPromises } from "@/helpers/layout-helper";
-    import textboxQuestion from "@/common-components/textbox-question/textbox-question";
     import { defineRule } from "vee-validate";
     import { required } from "@/helpers/validation-rules";
     import { regex } from "@/helpers/validation-rules";
@@ -76,7 +76,7 @@
         components: { 
             navButton,
             textboxQuestion,
-            siteHeader
+            siteHeader,
          },
     }
 </script>

src/layouts/welcome-page/welcome-page.vue

@@ -2,6 +2,7 @@
 <div>
     <div class="fade-on-route-transition">
         <siteHeader cmsWidgetName="Header"/>
+        <siteSubHeader cmsWidgetName="SubHeader"/>
         <p>Welcome Page Placeholder</p>
         <br />
         <div class="col">
@@ -24,6 +25,7 @@
 <script>
     import navButton from "@/common-components/nav-button/nav-button";
     import siteHeader from '@/common-components/site-header/site-header';
+    import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
     import { settleAllPromises } from "@/helpers/layout-helper";
     import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
@@ -46,7 +48,7 @@
 		    },
 		    validationRules: String,       
 	    }, 
-        components: { navButton, siteHeader, dropdownQuestion },
+        components: { navButton, siteHeader, dropdownQuestion, siteSubHeader },
         async beforeRouteEnter(to, from, next) 
         {
             // Call APIs