Merge branch 'develop' into feature/CSR-120_vehicle-banner-2

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   verbose: true,
-  coverageReporters: ["html", "text", "jest-junit"],
+  coverageReporters: ["html", "text", "jest-junit", "cobertura"],
+  testResultsProcessor: "jest-junit",
   preset: "@vue/cli-plugin-unit-jest",
   transform: { "^.+\\.vue$": "vue-jest" },
   moduleFileExtensions: ["js", "vue"],

package-lock.json

@@ -14,6 +14,7 @@
         "canvas-confetti": "^1.4.0",
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
+        "jest-junit": "^13.0.0",
         "vue": "^3.0.0",
         "vue-router": "^4.0.11",
         "vuex": "^4.0.2",
@@ -31,7 +32,6 @@
         "eslint": "^6.7.2",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^7.0.0",
-        "jest-junit": "^13.0.0",
         "prettier": "^2.2.1",
         "sass": "^1.26.5",
         "sass-loader": "^8.0.2",
@@ -445,9 +445,7 @@
       "version": "7.15.6",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz",
       "integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==",
-      "bin": {
+      "bin": "./bin/babel-parser.js",
-        "parser": "bin/babel-parser.js"
-      },
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2727,6 +2725,7 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
+        "vue-loader-v16": "npm:vue-loader@^16.1.0",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -2776,15 +2775,13 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "funding": "https://github.com/chalk/ansi-styles?sponsor=1",
       "optional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/@vue/cli-service/node_modules/chalk": {
@@ -2792,6 +2789,7 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "funding": "https://github.com/chalk/chalk?sponsor=1",
       "optional": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -2799,9 +2797,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/@vue/cli-service/node_modules/color-convert": {
@@ -3032,6 +3027,7 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
+        "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -3062,7 +3058,7 @@
       "dev": true,
       "optional": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "./bin-prettier.js"
       },
       "engines": {
         "node": ">=4"
@@ -3511,14 +3507,12 @@
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "type-fest": "^0.21.3"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/ansi-escapes/node_modules/type-fest": {
@@ -3526,11 +3520,9 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/ansi-html": {
@@ -3542,7 +3534,7 @@
         "node >= 0.8.0"
       ],
       "bin": {
-        "ansi-html": "bin/ansi-html"
+        "ansi-html": "./bin/ansi-html"
       }
     },
     "node_modules/ansi-regex": {
@@ -4267,7 +4259,7 @@
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
       "dev": true,
       "bin": {
-        "babylon": "bin/babylon.js"
+        "babylon": "./bin/babylon.js"
       }
     },
     "node_modules/balanced-match": {
@@ -4897,11 +4889,9 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/caniuse-api": {
@@ -4996,6 +4986,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -5254,14 +5245,12 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "funding": "https://github.com/chalk/ansi-styles?sponsor=1",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/cli-highlight/node_modules/chalk": {
@@ -5269,15 +5258,13 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "funding": "https://github.com/chalk/chalk?sponsor=1",
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/cli-highlight/node_modules/color-convert": {
@@ -5324,11 +5311,9 @@
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
       "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cli-width": {
@@ -5940,7 +5925,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/copy-webpack-plugin/node_modules/slash": {
@@ -6071,7 +6056,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/crypto-browserify": {
@@ -6575,14 +6560,12 @@
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "pump": "^3.0.0"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/default-gateway/node_modules/is-stream": {
@@ -6590,11 +6573,9 @@
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/default-gateway/node_modules/mimic-fn": {
@@ -6623,14 +6604,12 @@
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/default-gateway/node_modules/p-finally": {
@@ -6681,7 +6660,7 @@
         "isexe": "^2.0.0"
       },
       "bin": {
-        "node-which": "bin/node-which"
+        "node-which": "./bin/node-which"
       },
       "engines": {
         "node": ">= 8"
@@ -6902,13 +6881,11 @@
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
       "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
       "dev": true,
+      "funding": "https://github.com/cheeriojs/dom-serializer?sponsor=1",
       "dependencies": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.2.0",
         "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
     "node_modules/domain-browser": {
@@ -7072,7 +7049,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/editorconfig/node_modules/yallist": {
@@ -7189,9 +7166,7 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true,
-      "funding": {
+      "funding": "https://github.com/fb55/entities?sponsor=1"
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
     },
     "node_modules/errno": {
       "version": "0.1.8",
@@ -7305,7 +7280,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -7333,6 +7309,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
       "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
       "dev": true,
+      "funding": "https://opencollective.com/eslint",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "ajv": "^6.10.0",
@@ -7373,13 +7350,10 @@
         "v8-compile-cache": "^2.0.3"
       },
       "bin": {
-        "eslint": "bin/eslint.js"
+        "eslint": "./bin/eslint.js"
       },
       "engines": {
         "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/eslint-config-prettier": {
@@ -7459,14 +7433,12 @@
       "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
       "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/mysticatea",
       "dependencies": {
         "eslint-visitor-keys": "^1.1.0"
       },
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
       }
     },
     "node_modules/eslint-scope": {
@@ -7533,14 +7505,12 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
       "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "type-fest": "^0.8.1"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/eslint/node_modules/import-fresh": {
@@ -7548,15 +7518,13 @@
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
       },
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/eslint/node_modules/resolve-from": {
@@ -7597,8 +7565,8 @@
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true,
       "bin": {
-        "esparse": "bin/esparse.js",
+        "esparse": "./bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
+        "esvalidate": "./bin/esvalidate.js"
       },
       "engines": {
         "node": ">=4"
@@ -8156,14 +8124,12 @@
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
       "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "escape-string-regexp": "^1.0.5"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/file-entry-cache": {
@@ -8314,6 +8280,7 @@
       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
       "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
       "dev": true,
+      "funding": "https://github.com/avajs/find-cache-dir?sponsor=1",
       "dependencies": {
         "commondir": "^1.0.1",
         "make-dir": "^3.0.2",
@@ -8321,9 +8288,6 @@
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
     "node_modules/find-up": {
@@ -8362,7 +8326,7 @@
         "glob": "^7.1.3"
       },
       "bin": {
-        "rimraf": "bin.js"
+        "rimraf": "./bin.js"
       }
     },
     "node_modules/flatted": {
@@ -9047,7 +9011,7 @@
         "uglify-js": "3.4.x"
       },
       "bin": {
-        "html-minifier": "cli.js"
+        "html-minifier": "./cli.js"
       },
       "engines": {
         "node": ">=4"
@@ -9282,7 +9246,8 @@
     "node_modules/http-status-codes": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.1.4.tgz",
-      "integrity": "sha512-MZVIsLKGVOVE1KEnldppe6Ij+vmemMuApDfjhVSLzyYP+td0bREEYyAoIw9yFePoBXManCuBqmiNP5FqJS5Xkg=="
+      "integrity": "sha512-MZVIsLKGVOVE1KEnldppe6Ij+vmemMuApDfjhVSLzyYP+td0bREEYyAoIw9yFePoBXManCuBqmiNP5FqJS5Xkg==",
+      "license": "MIT"
     },
     "node_modules/https-browserify": {
       "version": "1.0.0",
@@ -9556,14 +9521,12 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "funding": "https://github.com/chalk/ansi-styles?sponsor=1",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/inquirer/node_modules/chalk": {
@@ -9571,15 +9534,13 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "funding": "https://github.com/chalk/chalk?sponsor=1",
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/inquirer/node_modules/cli-cursor": {
@@ -9644,14 +9605,12 @@
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/inquirer/node_modules/restore-cursor": {
@@ -9972,14 +9931,12 @@
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
       "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "bin": {
         "is-docker": "cli.js"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-extendable": {
@@ -10131,11 +10088,9 @@
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
       "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-plain-object": {
@@ -10334,7 +10289,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/istanbul-lib-report/node_modules/supports-color": {
@@ -10384,7 +10339,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
@@ -10424,7 +10379,7 @@
         "jest-cli": "^24.9.0"
       },
       "bin": {
-        "jest": "bin/jest.js"
+        "jest": "./bin/jest.js"
       },
       "engines": {
         "node": ">= 6"
@@ -10465,7 +10420,7 @@
         "yargs": "^13.3.0"
       },
       "bin": {
-        "jest": "bin/jest.js"
+        "jest": "./bin/jest.js"
       },
       "engines": {
         "node": ">= 6"
@@ -10874,6 +10829,7 @@
         "@jest/types": "^24.9.0",
         "anymatch": "^2.0.0",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^1.2.7",
         "graceful-fs": "^4.1.15",
         "invariant": "^2.2.4",
         "jest-serializer": "^24.9.0",
@@ -10962,7 +10918,6 @@
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
       "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
-      "dev": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
         "strip-ansi": "^6.0.1",
@@ -10977,7 +10932,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10986,7 +10940,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "dev": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -10998,7 +10951,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11010,7 +10962,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -11191,7 +11142,7 @@
         "yargs": "^13.3.0"
       },
       "bin": {
-        "jest-runtime": "bin/jest-runtime.js"
+        "jest-runtime": "./bin/jest-runtime.js"
       },
       "engines": {
         "node": ">= 6"
@@ -11748,6 +11699,9 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.6"
+      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -12103,14 +12057,12 @@
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "semver": "^6.0.0"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/make-error": {
@@ -12708,7 +12660,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/node-releases": {
@@ -12750,7 +12702,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/normalize-path": {
@@ -13227,14 +13179,12 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "p-try": "^2.0.0"
       },
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/p-locate": {
@@ -13505,11 +13455,9 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
       "dev": true,
+      "funding": "https://github.com/sponsors/jonschlinkert",
       "engines": {
         "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/pify": {
@@ -14818,6 +14766,7 @@
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -14826,9 +14775,6 @@
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/readable-stream": {
@@ -15231,7 +15177,7 @@
         "glob": "^7.1.3"
       },
       "bin": {
-        "rimraf": "bin.js"
+        "rimraf": "./bin.js"
       }
     },
     "node_modules/ripemd160": {
@@ -15322,7 +15268,7 @@
         "walker": "~1.0.5"
       },
       "bin": {
-        "sane": "src/cli.js"
+        "sane": "./src/cli.js"
       },
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -15459,7 +15405,7 @@
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver.js"
+        "semver": "./bin/semver.js"
       }
     },
     "node_modules/send": {
@@ -15667,7 +15613,7 @@
         "safe-buffer": "^5.0.1"
       },
       "bin": {
-        "sha.js": "bin.js"
+        "sha.js": "./bin.js"
       }
     },
     "node_modules/shallow-clone": {
@@ -16589,11 +16535,9 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
+      "funding": "https://github.com/sponsors/sindresorhus",
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/stylehacks": {
@@ -16664,7 +16608,7 @@
         "util.promisify": "~1.0.0"
       },
       "bin": {
-        "svgo": "bin/svgo"
+        "svgo": "./bin/svgo"
       },
       "engines": {
         "node": ">=4.0.0"
@@ -16687,11 +16631,9 @@
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
       "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
       "dev": true,
+      "funding": "https://github.com/sponsors/fb55",
       "engines": {
         "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
       }
     },
     "node_modules/svgo/node_modules/dom-serializer": {
@@ -16933,7 +16875,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/terser-webpack-plugin/node_modules/source-map": {
@@ -17234,7 +17176,7 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "bin": {
-        "semver": "bin/semver"
+        "semver": "./bin/semver"
       }
     },
     "node_modules/ts-jest/node_modules/yargs-parser": {
@@ -17719,7 +17661,7 @@
       "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
       "dev": true,
       "bin": {
-        "uuid": "bin/uuid"
+        "uuid": "./bin/uuid"
       }
     },
     "node_modules/v8-compile-cache": {
@@ -17798,6 +17740,7 @@
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
       "integrity": "sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==",
       "dev": true,
+      "funding": "https://github.com/sponsors/mysticatea",
       "dependencies": {
         "debug": "^4.1.1",
         "eslint-scope": "^5.1.1",
@@ -17810,9 +17753,6 @@
       "engines": {
         "node": ">=8.10"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      },
       "peerDependencies": {
         "eslint": ">=5.0.0"
       }
@@ -18005,8 +17945,10 @@
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dev": true,
       "dependencies": {
+        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -18068,6 +18010,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -18380,6 +18323,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -18807,7 +18751,7 @@
         "isexe": "^2.0.0"
       },
       "bin": {
-        "which": "bin/which"
+        "which": "./bin/which"
       }
     },
     "node_modules/which-boxed-primitive": {
@@ -18878,14 +18822,12 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "funding": "https://github.com/chalk/ansi-styles?sponsor=1",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/wrap-ansi/node_modules/color-convert": {
@@ -18982,8 +18924,7 @@
     "node_modules/xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
-      "dev": true
     },
     "node_modules/xml-name-validator": {
       "version": "3.0.0",
@@ -19059,14 +19000,12 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
+      "funding": "https://github.com/chalk/ansi-styles?sponsor=1",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/yargs/node_modules/cliui": {
@@ -19138,6 +19077,7 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
+      "funding": "https://github.com/chalk/wrap-ansi?sponsor=1",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -19145,9 +19085,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/yargs/node_modules/y18n": {
@@ -27873,7 +27810,6 @@
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
       "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
-      "dev": true,
       "requires": {
         "mkdirp": "^1.0.4",
         "strip-ansi": "^6.0.1",
@@ -27884,20 +27820,17 @@
         "ansi-regex": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-          "dev": true
         },
         "mkdirp": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
-          "dev": true
         },
         "strip-ansi": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
           "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
           "requires": {
             "ansi-regex": "^5.0.1"
           }
@@ -27905,8 +27838,7 @@
         "uuid": {
           "version": "8.3.2",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-          "dev": true
         }
       }
     },
@@ -34460,8 +34392,7 @@
     "xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
-      "dev": true
     },
     "xml-name-validator": {
       "version": "3.0.0",

package.json

@@ -15,6 +15,7 @@
     "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
+    "jest-junit": "^13.0.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",
@@ -32,7 +33,6 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
-    "jest-junit": "^13.0.0",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",

src/common-components/radio-question/radio-question.vue

@@ -16,6 +16,7 @@
             sizeInRem="1.5"
             data-test="radio"
             groupName="radio-list"
+            textPosition="text-start"
           />
       </div>
     </div>

src/constants/store-actions.js

@@ -7,7 +7,7 @@ const storeActions = {
   GET_VEHICLE_STYLES: "getVehicleStyles",
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
-  LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin"
+  LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
 };
 
 export { storeActions };

src/constants/store-mutations.js

@@ -0,0 +1,5 @@
+const storeMutations = {
+    UPDATE_YEAR: "updateYear",
+}
+
+export { storeMutations };

src/helpers/unit-test-helper.js

@@ -1,5 +1,5 @@
 import { storeActions } from "@/constants/store-actions";
-import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -18,12 +18,16 @@ export function getMountOptions(mockData) {
     }
   });
 
-  // Mock store actions from js file
+  // Mock const files
   mocks.storeActions = storeActions;
+  mocks.storeMutations = storeMutations;
+
+  // Mock $store and $router when accessing this.$store/$router
+  mocks.$store = mockData.store;
+  mocks.$router = mockData.router;
 
   const global = {
     mocks: mocks,
-    plugins: [store]
   };
 
   return { global };

src/layouts/component-test/component-test.vue

@@ -69,7 +69,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group - Single-Line</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
       </div>
     </div>
     <div class="row">
@@ -108,7 +108,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group - Multi-Line</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
       </div>
     </div>
     <div class="row">
@@ -148,11 +148,16 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
+      </div>
+    </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
       <div role="radiogroup" aria-labelledby="demo-3-radio-group" class="col my-3 d-flex align-items-center flex-column">
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="demo-3-radio-group">Select Vehicle Year</h3>
+        <h3 class="visually-hidden" id="demo-3-radio-group">Multi-Line Centered</h3>
         <radio
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
@@ -185,6 +190,54 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
+      </div>
+    </div>
+    <div class="row px-3">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <div role="radiogroup" aria-labelledby="demo-4-radio-group" class="d-flex flex-row p-0">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="visually-hidden" id="demo-4-radio-group">Select Vehicle Year</h3>
+        <radioHorizontal
+        groupName="demo-4"
+        ariaLabelBy="vehicle-model"
+        radioID="1"
+        radioLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="1"
+        />
+        <radioHorizontal
+        groupName="demo-4"
+        ariaLabelBy="vehicle-model"
+        radioID="2"
+        radioLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="2"
+        />
+        <radioHorizontal
+        groupName="demo-4"
+        ariaLabelBy="vehicle-model"
+        radioID="3"
+        radioLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="3"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
@@ -328,6 +381,7 @@
   import radio from "@/ux-components/radio/radio";
   import alert from "@/ux-components/alert/alert";
   import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
   export default {
     name: "App",
     components: {
@@ -337,7 +391,8 @@
       listButton,
       radio,
       alert,
-      vehicleBanner
+      vehicleBanner,
+      radioHorizontal
     },
     data() {
       return {

src/layouts/vehicle-year/vehicle-year.vue

@@ -13,13 +13,11 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
-
 export default {
   name: "vehicle-year",
   data() {
@@ -72,7 +70,6 @@ export default {
 <style lang="scss">
     .select-car {
         height: calc(100vh - 1rem);
-
         .car_list {
         // Height will be determined by overall height of content above list
         height: calc(100% - 255px);

src/layouts/vehicle-year/year-question/year-question.spec.js

@@ -1 +1,36 @@
-test.todo("some test to be written in the future");
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "../../../helpers/unit-test-helper";
+
+describe('year-question.vue', () => {
+    test('year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.', async () => {
+        // Arrange
+        const mockData = {
+            store: {
+                commit: jest.fn(),
+                year: null
+            },
+            router: {
+                push: jest.fn()
+            }
+        }
+        mockData.store.commit.mockImplementation((method, year) => {
+            mockData.store.year = year;
+        });
+
+        const mountOptions = getMountOptions(mockData);
+        // Act
+        const wrapper = shallowMount(yearQuestion, mountOptions);
+        await wrapper.setProps({
+            questionText: 'What year is your vehicle?',
+            years: ['2023', '2022', '2021']
+        });
+        wrapper.vm.selectYear(2020);
+
+        // Assert
+        const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'});
+        expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?");
+        expect(radioQuestion.attributes('answers')).toBe("2023,2022,2021");
+        expect(mockData.store.year).toBe(2020);
+    });
+});

src/layouts/vehicle-year/year-question/year-question.vue

@@ -1,5 +1,9 @@
 <template>
-<radioQuestion class="radioQuestion" :questionText="questionText" :answers="years" />
+<radioQuestion class="radioQuestion" 
+    :questionText="questionText" 
+    :answers="years"
+    :chooseAnswer="selectYear"
+ />
 </template>
 
 <script>
@@ -17,6 +21,10 @@ export default {
         radioQuestion,
     },
     methods: {
+        selectYear(year){
+            this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+            this.$router.push('?fmgPage=vehicle-make');
+        } 
     },
 };
 </script>

src/mixins/base-mixin.js

@@ -1,4 +1,5 @@
 import { storeActions } from "@/constants/store-actions.js";
+import { storeMutations } from "@/constants/store-mutations.js";
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
@@ -28,6 +29,9 @@ export default {
     storeActions() {
       return storeActions;
     },
+    storeMutations() {
+      return storeMutations;
+    },
     widgetNames() {
       return widgetNames;
     },

src/store/index.js

@@ -27,7 +27,6 @@ export default createStore({
         evoxImageId: null,
         hasSplitWindshieldOption: null,
         hasBackglassSliderOption: null,
-        imageSrc: '',
         registration: {
           rawAddress: null,
           zipCode: null,
@@ -40,28 +39,19 @@ export default createStore({
           isReplacement: null,
           numberOfChips: null,
           glassToReplace: null,
-          problemGlassQuestions: null,
+          problemGlassQuestionAnswers: null,
-          problemMoldingQuestions: null,
+          problemMoldingQuestionAnswers: null,
-          problemPropertyQuestions: null,
+          problemPropertyQuestionAnswers: null,
         },
-        items: null,
+        lineItems: null,
         customer: {
           emailAddress: null,
-          firstName: null,
-          lastName: null,
-          phoneNumber: {
-            isMobile: null,
-            optInSms: null,
-          }
         },
         payment: {
           isInsurance: null,
           isCash: null,
         },
-        referral: {
+        referralSeqNum: null,
-          referralSeqNum: null,
-          workOrderId: null
-        }
       }
     },
     applicationUser: {
@@ -71,8 +61,8 @@ export default createStore({
   // See IMPORTANT note at top of "state" declaration.
 
   mutations: {
-    updateVehicleImage(state, data) {
+    updateYear(state, year){
-      state.order.vehicle.imageSrc = data.imgSrc;
+      state.order.vehicle.year = year;
     },
   },
   actions: {
@@ -145,6 +135,6 @@ export default createStore({
         endpoint: relativeUrl,
         payload: {},
       });
-    },
+    }
   },
 });

src/store/store.spec.js

@@ -14,7 +14,6 @@ describe("Actions", () => {
         await store.dispatch('getVehicleYears')
         .then( (response) => {
             years = response.data;
-            console.log(response);
         });
 
         // Assert
@@ -109,4 +108,14 @@ describe("Actions", () => {
         // Assert
         expect(pageData).toBe('Page Info Data');
     });
-})
+})
+
+describe("Mutations", () => {
+    it("Should update the year property in the store", () => {
+        // Act
+        store.commit('updateYear', 2020);
+
+        // Assert
+        expect(store.state.order.vehicle.year).toBe(2020);
+    });
+});

src/styles/common-styles.scss

@@ -1,24 +1,29 @@
 // Common/Global Styles
 // Use this file for global styles that don't or won't have their own stylesheet
 body {
-    font-size: 16px;
+  font-size: 16px;
-    background-color: #fff;
+  background-color: #fff;
-    padding: .5rem;
+  padding: .5rem;
-      .container-fluid {
+  .container-fluid {
-        max-width: 576px;//Remove once desktop app is complete
+    max-width: 576px;//Remove once desktop app is complete
-        &.container-shadow {
+    &.container-shadow {
-          box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper
+      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper
-        }
-      }
-    a {
-      color: $blue;
-      text-decoration: none;
-      border-bottom: 1px solid $blue;
-      &:hover {
-        color: $blue-400;
-      }
-    }
-    .pointer {
-      cursor: pointer;
     }
   }
+  a {
+    color: $blue;
+    text-decoration: none;
+    border-bottom: 1px solid $blue;
+    &:hover {
+      color: $blue-400;
+    }
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .container,
+  .container-fluid {
+    overflow-x: hidden;
+  }
+}
+// Hide horizontal scrollbar

src/ux-components/button-primary/button-primary.vue

@@ -24,7 +24,7 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: Number
+    sizeInRem: [Number,String]
   },
   data() {
     return {

src/ux-components/button-secondary/button-secondary.vue

@@ -24,7 +24,7 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: Number
+    sizeInRem: [Number,String]
   },
   data() {
     return {

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

@@ -11,6 +11,6 @@ describe("Header.vue", () => {
     });
 
     // Assert
-    expect(wrapper.find("span").text()).toContain("Header Content");
+    expect(wrapper.find("h2").text()).toContain("Header Content");
   });
 });

src/ux-components/header/header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <span class="text-center text-dark fs-5 d-block">{{ text }}</span>
+      <h2 class="text-center text-dark fs-5 d-block fw-normal mb-0">{{ text }}</h2>
     </div>
   </div>
 </template>

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

@@ -4,7 +4,6 @@
     class="btn list-button d-flex align-items-center justify-content-between py-3 px-4"
     @click='displayComponent'
     v-bind:class="[
-    this.isLoading ? 'button-loader' : 'not-loading',
     this.isError ? 'error' : '',
     ]"
     >
@@ -28,7 +27,7 @@ export default {
     errorText: String,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: Number
+    sizeInRem: [Number,String]
   },
   data() {
     return {

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

@@ -0,0 +1,48 @@
+import { shallowMount } from "@vue/test-utils";
+import radioHorizontal from "./radio-horizontal";
+
+describe("radio.vue", () => {
+  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
+    // Act
+    const wrapper = shallowMount(radioHorizontal, {
+      propsData: {
+        radioID: "2023",
+        groupName: "TestGroup",
+        loaderColor: "blue",
+        loaderPosition: "right",
+        sizeInRem: "1.5",
+        errorMessage: 'null'
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+    const label = wrapper.find("label");
+    const paragraph = wrapper.find("span");
+
+    await label.trigger('click');
+
+    expect(input.attributes()).toEqual({
+      id: "2023",
+      type: "radio",
+      value: "2023",
+      name: "TestGroup",
+      "aria-required": "true"
+    });
+
+    expect(label.attributes()).toEqual({
+      role: "radio",
+      tabindex: "-1",
+      for: "2023",
+      class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
+      "aria-checked": "false"
+    });
+
+    expect(label.text()).toEqual('2023');
+
+    expect(paragraph.text()).toEqual('2023');
+
+    expect(wrapper.vm.display).toBe(true);
+
+  });
+});

src/ux-components/radio-horizontal/radio-horizontal.vue

@@ -0,0 +1,115 @@
+<!-- See the component-test.vue page for example implementation -->
+<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+<!-- Example: -->
+<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
+<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
+<!-- Example -->
+<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
+<template>
+  <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
+  <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true"/>
+    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
+      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
+      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+    </label>
+    <p class="small">{{errorMessage}}</p>
+  </div>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+export default {
+  name: "radioHorizontal",
+  props: {
+    groupName: String, /* Required, unique for each radio button GROUP */
+    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
+    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    errorMessage: String, /* Optional, if there is an error message to be displayed */
+    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
+    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
+    totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
+    positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
+  },
+  data() {
+    return {
+      isError: false,
+      display: false
+    };
+  },
+  methods: {
+    displayComponent() {
+      this.display = true;
+    }
+  },
+  components: {
+    loader,
+  },
+  computed: {
+    isFirstOrLastButton() {
+      let className = '';
+      if(this.positionInGroup == this.totalInGroup) {
+        className = 'last-item'
+      } else if(this.positionInGroup == 1) {
+          className = 'first-item'
+      }
+      return className;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.radio-horizontal {
+  input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
+    &:focus-visible + label {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus + label {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:checked + label {
+      background: $blue-100;
+      box-shadow: 0 0 0 1px $blue;
+    }
+    &:checked + label p:first-child {
+      font-weight: 500;
+    }
+  }
+  label {
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border: 1px solid $gray-500;
+    width: 100%;
+    &:hover {
+      box-shadow: 0 0 0 4px $blue-100;
+      cursor: pointer;
+      z-index: 2;
+    }
+    + p {
+      display: none;
+    }
+    &.error {
+      border: 1px solid $danger;
+      + p {
+        display: flex;
+        color: $danger;
+      }
+    }
+    &.first-item {
+      border-bottom-left-radius: .5rem;
+      border-top-left-radius: .5rem;
+    }
+    &.last-item {
+      border-bottom-right-radius: .5rem;
+      border-top-right-radius: .5rem;
+    }
+  }
+}
+</style>

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

@@ -27,11 +27,12 @@ describe("radio.vue", () => {
       type: "radio",
       value: "2023",
       name: "TestGroup",
+      "aria-required": "true"
     });
 
     expect(label.attributes()).toEqual({
       role: "radio",
-      tabindex: "0",
+      tabindex: "-1",
       for: "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4",
       "aria-checked": "false"

src/ux-components/radio/radio.vue

@@ -7,8 +7,8 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID">
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true">
-    <label role="radio" tabindex="0" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
+    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
     <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
@@ -21,16 +21,16 @@
 import loader from "@/ux-components/loader/loader";
 export default {
   name: "radioList",
-  props: [
+  props: {
-    "groupName", /* Required, unique for each radio button GROUP */
+    groupName: String, /* Required, unique for each radio button GROUP */
-    "radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
+    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    "radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
+    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
-    "textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    "errorMessage", /* Optional */
+    errorMessage: String, /* Optional, if there is an error message to be displayed */
-    "loaderColor", /* Optional */
+    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
-    "loaderPosition", /* Optional */
+    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
-    "sizeInRem" /* Optional */
+    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-  ],
+  },
   data() {
     return {
       isError: false,