Merge branch 'develop' into feature/Digital/SSR-122

src/common-components/site-header/menu-modal/menu-modal.vue

@@ -8,6 +8,19 @@
     </div>
     <!-- Modal -->
     <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+      <div class="menu-modal-container">
+            <button
+                class="menu-button"
+                type="button"
+                :class="[isActive ? 'active' : '']"
+                data-bs-toggle="modal"
+                data-bs-target="#footerModal"
+                aria-label="Hamburger Menu (modal window)">
+                <div class="bar1"></div>
+                <div class="bar2"></div>
+                <div class="bar3"></div>
+            </button>
+      </div>
       <div class="modal-dialog modal-fullscreen">
         <div class="modal-content">
           <div class="modal-header visually-hidden">
@@ -74,7 +87,7 @@
         justify-content: center;
         align-items: center;
         padding: 0;//Required to prevent 'squish' on iPhone
-        z-index: 1056;
+        z-index: 1050;
         .bar1,  
         .bar2,
         .bar3 {
@@ -106,7 +119,7 @@
       .modal-body {
         padding: 2rem;
       }
-        .modal-fullscreen {
+      .modal-fullscreen {
           width: 100vw;
           max-width: 576px;
       }
@@ -117,7 +130,47 @@
         border-top: none;
         padding: 2rem;
       }
-
+      .menu-modal-container {
+            position: absolute;
+            padding: 1.47rem 1rem 1.47rem 1.47rem;
+            right: 0;
+            top: -4.0rem;
+            button {
+                border: none;
+                &.menu-button {
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    border-radius: 50%;
+                    box-shadow: none;
+                    background-color: $white;
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0; //Required to prevent 'squish' on iPhone
+                    z-index: 1056;
+                    .bar1,
+                    .bar2,
+                    .bar3 {
+                        width: 14px;
+                        height: 2px;
+                        background-color: $blue;
+                        margin: 1px 0;
+                        transition: 0.25s;
+                    }
+                    &.active .bar1 {
+                        transform: rotate(-45deg) translate(-3px, 3px);
+                    }
+                    &.active .bar2 {
+                        opacity: 0;
+                    }
+                    &.active .bar3 {
+                        transform: rotate(45deg) translate(-3px, -3px);
+                    }
+                }
+            }
+        }
       //.modal-backdrop styles are in common-styles.scss
     }
   }

src/layouts/vehicle-make/vehicle-make.spec.js

@@ -85,7 +85,7 @@ describe("vehicle-make.vue", () => {
 
   });
 
-  test("Year set, arePagePrerequisitesValid should be true ", async () => {
+  test("Year set, arePagePrerequisitesValid should be true ", () => {
     //Arrange
     const { wrapper } = setupMocks({});
     useMainStore().order.vehicle.year = 2001;

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

@@ -7,6 +7,7 @@
           <siteSubHeader 
             cmsWidgetName="SiteSubHeaderWidget" 
             :hasBackButton="true"
+            :backButtonAccessibleText="backButtonAccessibleText"
             @click-event="backButtonAction"
           />
           <div class="fade-on-route-transition">
@@ -97,5 +98,11 @@
             );
           },
         },
+        computed: {
+          backButtonAccessibleText()
+            {
+              return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
+            },
+        },
     };
 </script>

src/layouts/vehicle-model/vehicle-model.spec.js

@@ -86,7 +86,7 @@ describe("vehicle-model.vue", () => {
 });
 
 describe("vehicle-model.vue", () => {
-  test("Make set, arePagePrerequisitesValid should be true ", async () => {
+  test("Make set, arePagePrerequisitesValid should be true ", () => {
     //Arrange
     const { wrapper } = setupMocks({});
     useMainStore().order.vehicle.make = "Honda";
@@ -100,7 +100,6 @@ describe("vehicle-model.vue", () => {
     );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-    await nextTick();
 
     //Assert
     expect(arePagePrerequisitesValid).toBe(true);

src/layouts/vehicle-model/vehicle-model.vue

@@ -7,6 +7,7 @@
           <siteSubHeader
             cmsWidgetName="SiteSubHeaderWidget"
             :hasBackButton="true"
+            :backButtonAccessibleText="backButtonAccessibleText"
             @click-event="backButtonAction"
           />
           <div class="fade-on-route-transition">
@@ -97,6 +98,13 @@
       siteSubHeader,
       vehicleBanner,
     },
+
+    computed: {
+      backButtonAccessibleText()
+            {
+              return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
+            }
+    },
   };
   </script>
   

src/layouts/vehicle-style/vehicle-style.spec.js

@@ -23,9 +23,6 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 }));
 
 describe("vehicle-style.vue", () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
 
     test("Style question component is initized with api data", async () => {
         //Arrange
@@ -87,25 +84,18 @@ describe("vehicle-style.vue", () => {
         });
     });
 
-    test("Model set, arePagePrerequisitesValid should be true ", async () => {
+    test("Model set, arePagePrerequisitesValid should be true ", () => {
         //Arrange
         const { wrapper } = setupMocks({});
         useMainStore().order.vehicle = { year: 2011, make: "ford", model: "mustang", style: null }
 
         //Act
-        vehicleStyle.beforeRouteEnter.call(
+        const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-            wrapper.vm,
-            { query: { issPage: "vehicle-style" } },
-            undefined,
-            (c) => c(wrapper.vm)
-        );
-
-        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-        await nextTick();
 
         //Assert
         expect(arePagePrerequisitesValid).toBe(true);
     });
+
 });
 
 function setupMocks({

src/layouts/vehicle-year/vehicle-year.spec.js

@@ -51,7 +51,7 @@ describe("vehicle-year.vue", () => {
 });
 
 describe("vehicle-year.vue", () => {
-  test("arePagePrerequisitesValid should be true ", async () => {
+  test("arePagePrerequisitesValid should be true ", () => {
     //Arrange
     const { wrapper } = setupMocks({});
 
@@ -64,7 +64,6 @@ describe("vehicle-year.vue", () => {
     );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-    await nextTick();
 
     //Assert
     expect(arePagePrerequisitesValid).toBe(true);

src/store/index.js

@@ -198,7 +198,7 @@ export const useMainStore = defineStore({
               payload: {},
           })
           .then((response) => {
-            updateVehicle(response.vehicle);
+            this.updateVehicle(response.data);
             return response;
           });
       },

src/store/store.spec.js

@@ -1,4 +1,4 @@
-import { useMainStore } from "./@store";
+import { useMainStore } from '@/store';
 import { createApp } from 'vue';
 import { createPinia } from "pinia";
 import globalMethods from "@/global-methods";

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

@@ -12,6 +12,7 @@ describe("alert.vue", () => {
                     isDismissible: true,
                     manualHeadline: "testHeader",
                     manualCopy: "testCopy",
+                    cmsWidgetName: "alert",
                 },
             })
         );
@@ -31,6 +32,7 @@ describe("alert.vue", () => {
                     alertClass: "warning",
                     manualHeadline: "testHeader",
                     manualCopy: "testCopy",
+                    cmsWidgetName: "alert",
                 },
             })
         );
@@ -57,6 +59,7 @@ describe("alert.vue", () => {
                 propsData: {
                     manualHeadline: "testHeader",
                     manualCopy: "testCopy with a {routerLink: testName, testLink} inside of it",
+                    cmsWidgetName: "alert",
                 },
                 stubs: ["router-link"],
             })
@@ -74,6 +77,7 @@ describe("alert.vue", () => {
                     manualHeadline: "testHeader",
                     manualCopy:
                         "<p>testCopy with a {routerLink: testName, testLink} inside of it</p><p>and two paragraphs</p>",
+                    cmsWidgetName: "alert",
                 },
                 stubs: ["router-link"],
             })