Merge pull request #1433 from Safelite/CSR-1712-add-copy-to-vehicle-page

CSR-1712 add copy to vehicle page.

src/layouts/vehicle/vehicle.spec.js

@@ -5,12 +5,19 @@ import vehicle from "@/layouts/vehicle/vehicle.vue";
 import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "../../mixins/base-mixin";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
 }));
 
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
 describe("vehicle.vue", () => {
     test("arePagePrerequisitesValid should be true ", async () => {
         //Arrange
@@ -40,17 +47,24 @@ describe("vehicle.vue", () => {
 });
 
 function setupMocks() {
-    const wrapper = shallowMount(
+    const mountOptions = getMountOptions({
-        vehicle,
+        router: {
-        getMountOptions({
+            navigate: jest.fn(),
-            router: {
+            navigate: jest.fn(),
-                navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
-                navigate: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
-                navigateWithSaving: jest.fn(),
+        },
-                navigateWithoutSaving: jest.fn(),
+    });
-            },
+
-        })
+    //Mock props
-    );
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn(),
+        },
+    };
+
+    mountOptions.mixins = [mockMixin];
+    const wrapper = shallowMount(vehicle, mountOptions);
 
     return { wrapper };
 }

src/layouts/vehicle/vehicle.vue

@@ -9,6 +9,10 @@
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
+                    <div
+                        cmsWidgetName="FindYourVehicleCopyWidget"
+                        v-html="this.findYourVehicleCopy"
+                        class="mt-2 mb-4 small"></div>
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
                         v-model="selectedYear"
@@ -294,6 +298,9 @@ export default {
             else if (this.imageUrl == null && this.carId !== null) return false;
             else return true;
         },
+        findYourVehicleCopy() {
+            return this.getCmsContent("FindYourVehicleCopyWidget", "QuestionText");
+        },
     },
     methods: {
         getVehicle(year, make, model, style) {
@@ -430,6 +437,6 @@ export default {
 }
 .siteSubHeader {
     margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+    margin-bottom: 0;
 }
 </style>

src/ux-components/alert/alert.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="alert fade show text-center mb-0 py-2 px-4"
+        class="alert fade show text-center mb-0 py-2 px-4 border-0"
         role="alert"
         :class="[
             isDismissible ? 'alert-dismissible' : '',