CSR-2185 | Update app to Node 20.17.0 compatability

package.json

@@ -11,22 +11,22 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@popperjs/core": "^2.10.2",
+    "@popperjs/core": "^2.11.8",
     "axios": "^0.23.0",
-    "bootstrap": "^5.1.1",
+    "bootstrap": "^5.3.3",
-    "canvas-confetti": "^1.4.0",
+    "canvas-confetti": "^1.9.3",
-    "core-js": "^3.6.5",
+    "core-js": "^3.38.1",
-    "http-status-codes": "^2.1.4",
+    "http-status-codes": "^2.3.0",
-    "iframe-resizer": "^4.3.7",
+    "iframe-resizer": "^4.4.5",
-    "jest-junit": "^13.0.0",
+    "jest-junit": "^13.2.0",
     "jquery": "^3.7.1",
-    "jquery-ui": "^1.13.2",
+    "jquery-ui": "^1.14.0",
-    "maska": "^1.5.0",
+    "maska": "^1.5.2",
-    "vee-validate": "^4.5.7",
+    "vee-validate": "^4.13.2",
     "vue": "^3.0.0",
-    "vue-plugin-load-script": "^2.1.0",
+    "vue-plugin-load-script": "^2.1.1",
-    "vue-router": "^4.0.11",
+    "vue-router": "^4.4.3",
-    "vuex": "^4.0.2",
+    "vuex": "^4.1.0",
     "vuex-persistedstate": "^4.1.0",
     "yup": "^0.32.11"
   },
@@ -37,13 +37,13 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^2.0.0-0",
+    "@vue/test-utils": "^2.4.6",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "^7.20.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.8.8",
-    "sass": "^1.26.5",
+    "sass": "^1.77.8",
     "sass-loader": "^8.0.2",
     "typescript": "~3.9.3",
     "vue-jest": "^5.0.0-0"

src/digital-components/base-input-button/base-input-button.vue

@@ -17,6 +17,7 @@
             :aria-required="isRequired"
             :value="value"
             :checked="isChecked"
+            v-validate="''"
             @keypress.space="handleEventAction(eventTypes.SPACE, $event)"
             @keypress.enter="handleEventAction(eventTypes.ENTER, $event)"
             @change="handleEventAction(eventTypes.CHANGE, $event)" />

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

@@ -1147,7 +1147,13 @@ function setupMocks(mountOptionsMockData = {}) {
     const baseMountOptions = getMountOptions(
         Object.assign(defaultMountOptions, mountOptionsMockData)
     );
+
+
     const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+    // Add in group name to avoid vee-validate failures
+    if (!allMountOptions.propsData.groupName) {
+        allMountOptions.propsData.groupName = "group-name";
+    }
 
     return allMountOptions;
 }

src/layouts/capability-questions/capability-questions.spec.js

@@ -174,6 +174,7 @@ describe("capabilityQuestions.vue", () => {
         test("Should trigger handleCompletedQuestionChainAnswers if watched data changes", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
+            wrapper.vm.handleCompletedQuestionChainAnswers = jest.fn();
             const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers");
 
             // Act

src/layouts/molding-questions/molding-questions.spec.js

@@ -178,6 +178,7 @@ describe("moldingQuestions.vue", () => {
         test("Should trigger handleCompletedQuestionChainAnswers if watched data changes", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
+            wrapper.vm.handleCompletedQuestionChainAnswers = jest.fn();
             const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers");
 
             // Act
@@ -268,6 +269,7 @@ describe("moldingQuestions.vue", () => {
                     },
                 };
             });
+
             const spy = jest.spyOn(wrapper.vm, "dispatchStoreAction");
 
             // Act

src/layouts/part-questions/part-questions.spec.js

@@ -164,6 +164,7 @@ describe("partQuestions.vue...", () => {
                 order: {},
             };
             const { wrapper } = setupMocks({});
+            wrapper.vm.handleCompletedQuestionChainAnswers = jest.fn();
             const spy = jest.spyOn(wrapper.vm, "handleCompletedQuestionChainAnswers");
 
             // Act

src/layouts/quote/service-package-question/service-package-question.spec.js

@@ -384,6 +384,7 @@ describe("service-package-question.vue", () => {
                 },
             ],
         });
+        wrapper.vm.selectDefaultPackage = jest.fn();
         const selectDefaultPackageMock = jest.spyOn(wrapper.vm, "selectDefaultPackage");
         await nextTick();
 

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.spec.js

@@ -101,6 +101,7 @@ describe("service-package-radio.vue", () => {
 });
 
 const mockProps = {
+    groupName: 'group-name',
     buttonLabel: "buttonLabel test copy",
     buttonLabelAuxillaryCopy: "buttonLabelAuxillaryCopy test copy",
     buttonLabelSubCopy: "buttonLabelSubCopy test copy",

src/layouts/service-zip/service-zip.spec.js

@@ -309,7 +309,7 @@ describe("service-zip.vue", () => {
 
                 // Act
                 const wrapper = setupMocks({});
-
+                wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
                 jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
 
                 await wrapper.vm.forwardButtonAction();
@@ -329,7 +329,7 @@ describe("service-zip.vue", () => {
 
                 // Act
                 const wrapper = setupMocks({});
-
+                wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
                 jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
 
                 await wrapper.vm.forwardButtonAction();
@@ -396,7 +396,8 @@ describe("service-zip.vue", () => {
 
             wrapper.vm.displayInvalidZipAlert = true;
             wrapper.vm.displayNonServiceableZipAlert = true;
-
+            
+            wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
             jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
 
             await wrapper.vm.forwardButtonAction();

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

@@ -27,6 +27,7 @@ describe("checkbox.vue", () => {
         let { wrapper } = setupMocks({
             mountOptionsMockData: {
                 propsData: {
+                    groupName: "checkbox-button-test",
                     buttonLabel: "label text",
                     value: "test value",
                 },
@@ -42,7 +43,13 @@ describe("checkbox.vue", () => {
 
     it("Should have correct screenreader-only text", async () => {
         // Act
-        let { wrapper } = setupMocks({});
+        let { wrapper } = setupMocks({mountOptionsMockData: {
+            propsData: {
+                groupName: "checkbox-button-test",
+                buttonLabel: "label text",
+                value: "test value",
+            },
+        },});
 
         // Arrange
         await wrapper.setProps({

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

@@ -295,6 +295,12 @@ describe("list-button.vue", () => {
 });
 
 function setupMocks({ mockData }) {
+    // Add in group name to avoid vee-validate failures
+    if (!mockData.propsData) {
+        mockData.propsData = {groupName : "group-name"};
+    } else if (!mockData.propsData.groupName) {
+        mockData.propsData.groupName = "group-name";
+    }
     const wrapper = mount(listButton, {
         ...mockData,
         mixins: [inputButtonWrapperMixin],

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

@@ -57,6 +57,12 @@ describe("radio.vue", () => {
 });
 
 function setupMocks({ mountOptionsMockData = {} }) {
+    // Add in group name to avoid vee-validate failures
+    if (!mountOptionsMockData.propsData) {
+        mountOptionsMockData.propsData = {groupName : "group-name"};
+    } else if (!mountOptionsMockData.propsData.groupName) {
+        mountOptionsMockData.propsData.groupName = "group-name";
+    }
     const wrapper = mount(radio, {
         ...mountOptionsMockData,
         mixins: [inputButtonWrapperMixin],