Add frontend vue.js component tests (#1306)

Author: rwood-moz

frontend/package-lock.json

@@ -38,9 +38,11 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@pinia/testing": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^8.28.0",
     "@typescript-eslint/parser": "^8.28.0",
     "@vue/eslint-config-typescript": "^14.0.0",
+    "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.12",
     "eslint": "^9.23.0",
     "eslint-import-resolver-typescript": "^4.3.1",

frontend/package.json

@@ -37,9 +37,9 @@ const activate = (key: string) => {
             'hover:bg-gray-100 dark:hover:bg-gray-700': item != active && !disabled,
           }"
           @click="!disabled ? activate(key) : null"
-          :data-testid="'booking-' + key + '-btn'"
+          :data-testid="'booking-' + item + '-btn'"
         >
-          {{ t('label.' + key) }}
+          {{ t('label.' + item) }}
         </li>
       </ul>
     </nav>