CSR-343 Fix tests

src/common-components/button-question/button-question.spec.js

@@ -10,6 +10,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         isOverflowScrollable: true,
+        groupName: "group-name"
       }
     });
 
@@ -25,6 +26,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         buttonType: "listCard",
+        groupName: "group-name"
       }
     });
     // Assert
@@ -39,6 +41,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         buttonType: "listButtonHorizontal",
+        groupName: "group-name"
       }
     });
     // Assert
@@ -53,6 +56,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         buttonType: "radio",
+        groupName: "group-name"
       }
     });
     // Assert
@@ -77,7 +81,8 @@ describe("buttonQuestion.vue", () => {
     // Act
     const localThis = {
       isWide: false,
-      answers: ['a', 'b']
+      answers: ['a', 'b'],
+      groupName: "group-name"
     }
 
     expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("");
@@ -109,7 +114,7 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should trigger event modelValue change to new value on when radio button selected", async () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, setupMocks({}));
+    const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}}));
     await wrapper.setProps({
       answers: ["2022", "2021", "2020"],
       isMultiSelect: false,
@@ -129,6 +134,7 @@ describe("buttonQuestion.vue", () => {
       propsData: {
         modelValue: ["2022", "2021", "2020"],
         isMultiSelect: true,
+        groupName: "group-name"
       }
     }));
     const val = { checkValue: true, value: "2019", }
@@ -144,7 +150,8 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
         isMultiSelect: true,
-        modelValue: ['a', 'b']
+        modelValue: ['a', 'b'],
+        groupName: "group-name"
       }
     }));
     const val = { checkValue: true, value: "2021", }
@@ -161,7 +168,8 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
         isMultiSelect: true,
-        modelValue: ['a', 'b']
+        modelValue: ['a', 'b'],
+        groupName: "group-name"
       }
     }));
 
@@ -173,24 +181,6 @@ describe("buttonQuestion.vue", () => {
   });
 });
 
-
-describe("buttonQuestion.vue", () => {
-  it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => {
-    // Act
-    const wrapper = shallowMount(buttonQuestion, setupMocks({
-      propsData: {
-        isMultiSelect: true,
-        modelValue: 'a',
-      }
-    }));
-    const val = { checkValue: true, value: "c", }
-    wrapper.vm.handleCheckedChanged(val);
-
-    // Assert
-    expect(wrapper.vm.selectedValues).toEqual("a");
-  });
-});
-
 function setupMocks(mountOptionsMockData = {}) {
   const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
   const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));

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

@@ -69,24 +69,25 @@ describe("glass-part-question.vue", () => {
     });
 
     test("Should emit updateModelValue, and have correct attributes", async () => {
-
         //Arrange
-
         const { wrapper } = setupMocks(featureListData);
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}]}] });
 
         //Act
         await wrapper.vm.$nextTick();
         const listCard = await wrapper.findComponent({
-            name: "listCard",
+            name: "buttonQuestion",
         });
 
-        wrapper.setValue({ selectedTint: 'Green Tint' });
+        await wrapper.setData({ selectedTint: 'Green Tint' });
+        // to trigger the computed setter
+        wrapper.vm.selectedPartNumber = "DB12209GTYN";
 
         //Assert
-        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedTint: 'Green Tint' }]);
+        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ partNumber: "DB12209GTYN", color: "Green Tint"}]);
-        expect(listCard.attributes("buttonid")).toBe("Rear-Stationary-Green Tint");
         expect(listCard.attributes("groupname")).toBe("Rear-Stationary");
-        expect(listCard.attributes("isradio")).toBe("true");
+        expect(listCard.attributes("validationrules")).toBe("Rear-Stationary-tint-required");
     });
 
     test("ResetTintAndPartSelections, should reset data elements ", async () => {
@@ -96,21 +97,23 @@ describe("glass-part-question.vue", () => {
 
         //Act
         await wrapper.vm.$nextTick();
-        wrapper.setData({ selectedTint: { "Rear-Stationary": 'Green Tint' } });
+        await wrapper.setData({ selectedTint: 'Green Tint', selectedPartNumber: "test" });
        
-        expect(wrapper.vm.selectedTint).toStrictEqual({ "Rear-Stationary": 'Green Tint' });
+        expect(wrapper.vm.selectedTint).toEqual('Green Tint');
+        expect(wrapper.vm.selectedPartNumber).toEqual('test');
 
         await wrapper.vm.ResetTintAndPartSelections();
-        expect(wrapper.vm.selectedTint).toStrictEqual({});
+        
+        expect(wrapper.vm.selectedTint).toEqual("Green Tint");
+        expect(wrapper.vm.selectedPartNumber).toEqual(null);
     });
 
 });
 
 
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
-
     //Mock store
-    store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: {}});
+    store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: []}] });
     store.getters.lineItems = { glassParts: {} }
 
     const mountOptions = getMountOptions({

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

@@ -64,7 +64,7 @@ export default {
         glassLocation: String,
         colorAnswers: Array,
         modelValue: Object,
-        alreadyPopulatedPartsData: Object
+        alreadyPopulatedPartsData: Array
     },
     mounted() {
         this.LoadPreselectedValues();
@@ -151,7 +151,7 @@ export default {
         },
 
         PartDataFromApi() {
-            return this.$store.getters.pageData(this.$route.query.fmgPage);
+            return this.$store.getters.pageData(this.$route.query.fmgPage) ?? {};
         },
     },
     methods: {
@@ -197,7 +197,7 @@ export default {
             this.$nextTick(() => {
                 if (this.modelValue !== undefined) {
                     // Populate button-question model-value if parts data already exists in VueX
-                    this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0].color;
+                    this.selectedTint = this.alreadyPopulatedPartsData?.filter(part => part.partNumber === this.selectedPartNumber)[0].color;
                 }
             });
         },

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

@@ -65,7 +65,7 @@ describe("vehicle-parts.vue", () => {
     test("Set cms content called on load", async (done) => {
         //Arrange
         store.getters.pageData.mockReturnValue(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -104,7 +104,7 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValue(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
@@ -141,7 +141,7 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
-        store.getters.lineItems = { glassParts: { 0: { partNumber: 'DB12209YPYNOEM'} } }
+        store.getters.lineItems = { glassParts: [{ partNumber: 'DB12209YPYNOEM'} ] }
 
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
@@ -170,14 +170,21 @@ describe("vehicle-parts.vue", () => {
         await nextTick();
 
         //Assert
-        expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } });
+        expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": {
+            partNumber: "DB12209YPYNOEM",
+            description: "heated glass, solar, 1 hole",
+            color: "Gray Tint Privacy",
+            requiresRecalibration: false,
+            requiresCapabilityQuestions: false,
+            childParts: null
+        }});
     });
 
     test("BackButtonAction triggers a router.navigate change", async () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
@@ -215,7 +222,7 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
 
         store.commit = jest.fn();
@@ -238,7 +245,7 @@ describe("vehicle-parts.vue", () => {
             }
         });
 
-        wrapper.setData({ glassParts: { "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } } });
+        wrapper.setData({ glassParts: {"Rear-Stationary": { partNumber: 'DB12209GTYN'}}});
 
         //Act
         vehicleParts.beforeRouteEnter.call(
@@ -285,13 +292,14 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
     settleAllPromises.mockImplementation(() => apiPromise);
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
-    const mountOptions = getMountOptions(mountOptionsMockData,);
+    const mountOptions = getMountOptions(mountOptionsMockData);
     const wrapper = shallowMount(vehicleParts, mountOptions);
 
     const partQuestionRearWrapper = wrapper.findComponent({ name: "glassPartQuestion", });
     partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent;
 
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
 
     return { wrapper, apiPromise };
 }

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -183,10 +183,10 @@ methods: {
     store.commit(storeMutations.UPDATE_GLASS_PARTS, this.matchedParts);
 
     // Navigate to the next page.
-    // this.$router.navigateAfterSave(
+    this.$router.navigateAfterSave(
-    //   this.navigationScenarios.SELECTED_PARTS,
+      this.navigationScenarios.SELECTED_PARTS,
-    //   this.$route
+      this.$route
-    // );
+    );
   },
 
   resetDependentState() {
@@ -195,7 +195,6 @@ methods: {
 
   LoadInitialPartsData() {
     this.alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts ?? [];
-
     const savedPartNumbers = this.alreadyPopulatedPartsData.map(part => part.partNumber)
     this.PartsFromApi.partsOrQuestions.forEach(glass => {
       const savedPart = glass.parts.filter(part => savedPartNumbers.includes(part.partNumber))[0];

src/ux-components/list-card/list-card.spec.js

@@ -205,7 +205,7 @@ describe("list-card.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: [Boolean, String], buttonId: 'list-card-id'}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: "List Card Checkbox", buttonId: 'list-card-id'}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {

src/ux-components/list-card/list-card.vue

@@ -95,7 +95,7 @@ export default {
   },
   data() {
     return {
-      checkValue: [Boolean, String],
+      checkValue: null,
     }
   },
   created() {
@@ -104,6 +104,11 @@ export default {
         ? this.selectedValues.includes(this.value)
         : this.selectedValues[0];
     }
+    else if (Array.isArray(this.modelValue)) {
+      this.checkValue = this.isMultiSelect
+        ? this.modelValue.includes(this.value)
+        : this.modelValue[0];
+    }
     else {
       this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
     }

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

@@ -92,7 +92,7 @@ describe("radio.vue", () => {
         isRequired: true,
         modelValue: ["List Card Checkbox"],
         value: "Car-Front",
-        selectedValues: ["Car-Front"]
+        selectedValues: "Car-Front"
       },
     });
     // Assert

src/ux-components/radio/radio.vue

@@ -38,7 +38,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
-    selectedValues: [Array, String],
+    selectedValues: String,
     hasError: Boolean,
     validationRules: String
   },