Unit tests

src/helpers/unit-test-helper.js

@@ -10,19 +10,20 @@ export function getMountOptions(mockData) {
   const mocks = {};
 
   //this is mocking if you use the mixin directly(baseMixin.methods.dispatchNonBlockingStoreAction) vs this.dispatchNonBlockingStoreAction
-  baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
-  baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
-    let actionFilterResult = mockData.actionList.filter(
-      (x) => x.actionName == actionName
-    );
-
-    if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
-      return Promise.resolve({
-        data: actionFilterResult[0].data,
-      });
-    }
-  });
+  if (mockData.actionList !== undefined) {
+    baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+    baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
+      let actionFilterResult = mockData.actionList.filter(
+        (x) => x.actionName == actionName
+      );
 
+      if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
+        return Promise.resolve({
+          data: actionFilterResult[0].data,
+        });
+      }
+    });
+  }
   mocks.dispatchNonBlockingStoreAction = jest.fn();
   mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
     let actionFilterResult = mockData.actionList.filter(

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

@@ -2,82 +2,83 @@ import { shallowMount } from "@vue/test-utils";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
-jest.mock("@/store", () => { return {}; }, {virtual: true});
+jest.mock("@/store", () => { return {}; }, { virtual: true });
 
 describe("damage-location-question.vue", () => {
-    test("Selected location option is emitted upon selection.", async () => {
-  
-      //Arrange
-      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
-      const locationToSelect = ["Backseat"];
-  
-      //Act
-      wrapper.setValue({ modelValue: locationToSelect });
-      await wrapper.vm.$nextTick();
-  
-      //Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+  test("Selected location option is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+    const locationToSelect = ["Backseat"];
+
+    //Act
+    wrapper.setValue({ modelValue: locationToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Backseat"] }]);
+  });
+});
+
+describe("damage-location-question.vue", () => {
+  test("Answers to display filtered by data from api.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent, damageOptions } = setupMocks({
+      dataFromStoreApi: {
+        driverSideOptions: {
+          availableReplacementOptions: ['Quarter', 'Front']
+        },
+        windshieldOptions: {
+          availableReplacementOptions: ['Single']
+        },
+        backGlassOptions: {
+          availableReplacementOptions: []
+        }
+      }
     });
+
+    //Act
+    damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
+
+    //Assert
+    expect(wrapper.vm.answersToDisplay).toStrictEqual([{ Name: 'Windshield' }, { Name: 'SideDoor' }])
+  });
+});
+
+function setupMocks({
+  modelValueProp = ["Windshield", "SideDoor"],
+  isMultiSelect = false,
+  groupName = "damageQuestion",
+  cmsQuestionText = "CMS text goes here",
+  cmsAnswers = [{ Name: "car-Windshield" }, { Name: "car-SideDoor" }, { Name: "car-RearWindow" }],
+  dataFromStoreApi = [],
+}) {
+
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: { year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR' } };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
   });
 
-  describe("damage-location-question.vue", () => {
-    test("Answers to display filtered by data from api.", async () => {
-  
-      //Arrange
-      const { wrapper, cmsContent, damageOptions } = setupMocks({ dataFromStoreApi: {
-                driverSideOptions: {
-                    availableReplacementOptions: ['Quarter', 'Front']
-                },
-                windshieldOptions: {
-                    availableReplacementOptions: ['Single']
-                },
-                backGlassOptions: {
-                    availableReplacementOptions: []
-                }
-            }
-        });
-  
-      //Act
-      damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
-  
-      //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'SideDoor' } ])
-    });
-  });
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+    isMultiSelect: isMultiSelect,
+  };
 
-  function setupMocks({
-    modelValueProp = ["Windshield", "SideDoor"],
-    isMultiSelect = false,
-    groupName = "damageQuestion",
-    cmsQuestionText = "CMS text goes here",
-    cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-SideDoor"}, {Name: "car-RearWindow"}],
-    dataFromStoreApi = [],
-  }) {
-    
-    //Mock store
-    store.dispatch = jest.fn(() => dataFromStoreApi);
-    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
-    const mountOptions = getMountOptions({
-      store: {
-        dispatch: store.dispatch,
-        getters: store.getters,
-      },
-    });
-  
-    //Mock props
-    mountOptions.propsData = {
-      modelValue: modelValueProp,
-      isMultiSelect: isMultiSelect,
-    };
-   
-    const wrapper = shallowMount(damageLocationQuestion, mountOptions);
-  
-    //Mock CMS content
-    const cmsContent = {
-      groupName: groupName,
-      QuestionText: cmsQuestionText,
-      Answers: cmsAnswers,
-    };
-    const damageOptions = dataFromStoreApi;
-    return { wrapper, cmsContent, damageOptions };
-  }
+  const wrapper = shallowMount(damageLocationQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    groupName: groupName,
+    QuestionText: cmsQuestionText,
+    Answers: cmsAnswers,
+  };
+  const damageOptions = dataFromStoreApi;
+  return { wrapper, cmsContent, damageOptions };
+}

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

@@ -163,7 +163,7 @@ describe("vehicle-damage.vue", () => {
     wrapper.vm.resetDependentState();
 
     //Assert
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE)
 
   });
 });

src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js

@@ -0,0 +1,122 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, { virtual: true });
+
+const featureListData = {
+    colorAnswersProp: [
+        { ColorAnswerText: 'Green Tint', FeatureAnswers: [{ FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209GTYN" }] },
+        { ColorAnswerText: 'Gray Tint Privacy', FeatureAnswers: [{ FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209YPYN" }] }
+    ],
+    glassLocationProp: "Rear",
+    glassNameProp: "Stationary",
+    modelValueProp: {}
+}
+
+describe("glass-part-question.vue", () => {
+
+    test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => {
+
+        //Arrange
+        const { wrapper } = setupMocks(featureListData);
+
+        //Act
+        await wrapper.vm.$nextTick();
+
+        //Assert
+        expect(Object.keys(wrapper.vm.featureListData).length).toBe(2);
+        expect(wrapper.vm.featureListData['Green Tint'][0].Text).toBe("heated glass, solar, 1 hole");
+        expect(wrapper.vm.featureListData['Green Tint'][0].Name).toBe("DB12209GTYN");
+        expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Text).toBe("heated glass, solar, 1 hole");
+        expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Name).toBe("DB12209YPYN");
+
+    });
+
+    test("Tint mapper, should get tint image by glassLocation and tintColor", async () => {
+
+        //Arrange
+
+        const { wrapper } = setupMocks(featureListData);
+
+        //Act
+        await wrapper.vm.$nextTick();
+        const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Green Tint");
+
+        //Assert
+        expect(tintSourceImage).toBe("Glass-NoShade-GreenTint.svg");
+
+    });
+
+
+    test("Tint mapper, should return empty string if no tint map found", async () => {
+
+        //Arrange
+
+        const { wrapper } = setupMocks(featureListData);
+
+        //Act
+        await wrapper.vm.$nextTick();
+        const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Crazy Rainbow Tint");
+
+        //Assert
+        expect(tintSourceImage).toBe("");
+
+    });
+
+    test("Should emit updateModelValue, and have correct attributes", async () => {
+
+        //Arrange
+
+        const { wrapper } = setupMocks(featureListData);
+
+        //Act
+        await wrapper.vm.$nextTick();
+        const listCard = await wrapper.findComponent({
+            name: "listCard",
+        });
+
+        wrapper.setValue({ selectedTint: 'Green Tint' });
+
+        //Assert
+        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedTint: 'Green Tint' }]);
+        expect(listCard.attributes("buttonid")).toBe("Rear-Stationary-Green Tint");
+        expect(listCard.attributes("groupname")).toBe("Rear-Stationary");
+        expect(listCard.attributes("isradio")).toBe("true");
+    });
+
+    test("ResetTintAndPartSelections, should reset data elements ", async () => {
+
+        //Arrange
+        const { wrapper } = setupMocks(featureListData);
+
+        //Act
+        await wrapper.vm.$nextTick();
+        wrapper.setData({selectedTint:  {"Rear-Stationary" : 'Green Tint' } });
+
+        expect(wrapper.vm.selectedTint).toStrictEqual({"Rear-Stationary": 'Green Tint'});
+
+        await wrapper.vm.ResetTintAndPartSelections();
+        expect(wrapper.vm.selectedTint).toStrictEqual({});
+    });
+
+});
+
+
+function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
+
+    //Mock store
+    const mountOptions = getMountOptions({});
+
+    mountOptions.propsData = {
+        glassName: glassNameProp,
+        glassLocation: glassLocationProp,
+        colorAnswers: colorAnswersProp,
+        modelValue: modelValueProp
+    };
+
+    const wrapper = shallowMount(glassPartQuestion, mountOptions);
+
+    return { wrapper };
+}

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -98,7 +98,7 @@ export default {
 
                 return arr;
             }, {});
-
+            
             return tintMapByColor;
         }
     },

src/store/store.spec.js

@@ -100,7 +100,7 @@ describe("Mutations", () => {
     expect(storeState.applicationUser.eventBus).toEqual([{ EventOne: "ValueOne" }]);
   });
 
-  it("resetVehicleAndDependencies, should set fields to null", () => {
+  it("resetVehicleState, should set fields to null", () => {
     // Arrange
     const storeState = state;
 
@@ -120,7 +120,7 @@ describe("Mutations", () => {
     expect(storeState.order.vehicle.category).toEqual("CAR");
 
     // Act
-    mutations.resetVehicleAndDependencies(storeState);
+    mutations.resetVehicleState(storeState);
 
     // Expect
     expect(storeState.order.vehicle.year).toEqual(null);
@@ -132,7 +132,7 @@ describe("Mutations", () => {
 
   });
 
-  it("resetDamageAndDependencies, should set fields to null", () => {
+  it("resetDamageState, should set fields to null", () => {
     // Arrange
     const storeState = state;
 
@@ -154,7 +154,7 @@ describe("Mutations", () => {
     expect(storeState.order.damage.rearGlassToReplace).toEqual("Slider");
 
     // Act
-    mutations.resetDamageAndDependencies(storeState);
+    mutations.resetDamageState(storeState);
 
     // Expect
     expect(storeState.order.damage.isRepair).toEqual(null);