CSR-319: rearrange form markup location / move submit fns into mixin

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

@@ -782,41 +782,6 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
-describe("vehicle-damage.vue", () => {
-  test("when onInvalidSubmit is triggered with errors focus will be put on the first element with an error", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-    const mockedValidationPayload = {
-      values: {},
-      errors: {
-        driverSideOptions: 'Please select window', 
-        passengerSideOptions: 'Please select window'
-      },
-      results: {},
-    }
-    const newObj = document.createElement('input');
-    newObj.setAttribute("id", "testInput");
-    newObj.setAttribute("data-focus-target", "driverSideOptions");
-    document.body.appendChild(newObj);
-    const testInputElement = document.getElementById("testInput");
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-    wrapper.vm.onInvalidSubmit(mockedValidationPayload);
-    await nextTick();
-    const focusedEl = document.activeElement;
-
-    //Assert
-    expect(testInputElement).toBe(focusedEl);
-  });
-});
-
 // THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
 //    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
 // 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -1,15 +1,15 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+    <Form
+      @submit="onSubmit"
+      @invalid-submit="onInvalidSubmit"
+      ref="theForm"
+      v-slot="{ meta }"
+      class="vehicle-damage-formZZZ"
+    >
+      <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
-        <Form
-          @submit="onSubmit"
-          @invalid-submit="onInvalidSubmit"
-          ref="theForm"
-          v-slot="{ meta }"
-          class="vehicle-damage-form"
-        >
           <damageLocationQuestion
             ref="damageLocation"
             v-model="selectedDamageLocations"
@@ -50,8 +50,8 @@
             @back-clicked="backButtonAction"
             @ForwardClicked="forwardButtonAction"
           />
-        </Form>
+      </div>
-    </div>
+    </Form>
 </template>
 
 <script>
@@ -161,19 +161,6 @@ export default {
         this.$route
       );
     },
-    onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior
-    onInvalidSubmit({ values, errors, results }) {
-      // identify the first error field and put focus on it
-      // get error names array
-      const errorNames = errors ? Object.keys(errors) : [];
-      const firstErrorEl = errorNames[0];
-      if (firstErrorEl) {
-        const qsString = "[data-focus-target='" + firstErrorEl + "']";
-        const el = document.querySelector(qsString);
-        el && el.focus();
-      }
-    },
-
     getDamageLocationsFromStore() {
       var glassSelections = [];
 

src/mixins/base-mixin.js

@@ -20,7 +20,26 @@ export default {
     },
     savePageDataToStore(page, data){
       store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
-    }
+    },
+    onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior
+    onInvalidSubmit({ values, errors, results }) {
+      console.log('errors: ', errors)
+      // {DamageLocationQuestion: 'Please select damage location'}
+      // {driverSideOptions: 'Please select window', passengerSideOptions: 'Please select window'}
+
+
+      // identify the first error field and put focus on it
+      // get error names array
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
+      if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl)
+        const qsString = "[data-focus-target='" + firstErrorEl + "']";
+        const el = document.querySelector(qsString);
+        console.log('el is: ', el)
+        el && el.focus();
+      }
+    },
   },
   computed: {
     storeActions() {

src/mixins/base-mixin.spec.js

@@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import store from "@/store";
 
 describe("baseMixin.js", () => {
@@ -77,6 +78,36 @@ describe("baseMixin.js", () => {
     // Assert
     expect(widgetNamesForTest).toEqual(widgetNames);
   });
+
+  test("computed: vehicleCategories should be equal to import object", () => {
+    // Arrange
+    const mixIn = getMixInInstance({});
+
+    // Act
+    let vehicleCategoriesForTest = mixIn.computed.vehicleCategories();
+
+    // Assert
+    expect(vehicleCategoriesForTest).toEqual(vehicleCategories);
+  });
+
+  test("onInvalidSubmit: puts focus on first error", () => {
+    // Arrange
+    const mixIn = getMixInInstance({});
+    const validationData = {
+      errors: {
+        fieldOne: 'error message 1', 
+        fieldTwo: 'error message 2',
+      }
+    };
+
+    global.document.querySelector = jest.fn();
+
+    // Act
+    mixIn.methods.onInvalidSubmit(validationData);
+
+    // Assert
+    expect(global.document.querySelector).toBeCalledWith("[data-focus-target='fieldOne']");
+  });
 });
 
 function getMixInInstance({ isDispatchSuccess = true }) {
@@ -101,6 +132,7 @@ function getMixInInstance({ isDispatchSuccess = true }) {
   baseMixIn.methods.$route = route;
   baseMixIn.methods.storeActions = storeActions;
   baseMixIn.methods.widgetNames = widgetNames;
+  baseMixIn.methods.vehicleCategories = vehicleCategories;
 
   store.dispatch = storeDispatch;
   store.commit = jest.fn();