Merge pull request #104 from Safelite/feature/CSR-222_implementation

Feature/CSR-222 implementation

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;

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,37 @@ 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()
+        },
+      },
+    });
+    
+    //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 +111,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;

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);

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;