fix: eslint errors and failing tests (#2078)

* fix eslint errors

* fix failing tests

frontend/.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
   ],
   // Re-add once we use nuxt bridge
   // See https://v3.nuxtjs.org/getting-started/bridge#update-nuxtconfig
-  ignorePatterns: ["nuxt.config.js"],
+  ignorePatterns: ["nuxt.config.js", "lib/api/types/**/*.ts"],
   plugins: ["prettier"],
   // add your custom rules here
   rules: {

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -95,7 +95,6 @@ export default defineComponent({
     const domMadeThisForm = ref<VForm>();
     const newTimelineEvent = ref<RecipeTimelineEventIn>({
       // @ts-expect-error - TS doesn't like the $auth global user attribute
-      // eslint-disable-next-line
       subject: i18n.t("recipe.user-made-this", { user: $auth.user.fullName } as string),
       eventType: "comment",
       eventMessage: "",

frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue

@@ -455,10 +455,8 @@ export default defineComponent({
             correctedRect.startY - state.imagePosition.dy < element.top * state.imagePosition.scale &&
             correctedRect.startX - state.imagePosition.dx < element.left * state.imagePosition.scale &&
             correctedRect.startX + correctedRect.w >
-              // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
               (element.left + element.width) * state.imagePosition.scale + state.imagePosition.dx &&
             correctedRect.startY + correctedRect.h >
-              // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
               (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
         )
         .map((element, index, array) => {
@@ -470,7 +468,6 @@ export default defineComponent({
           ) {
             separator = "\n";
           }
-          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
           return element.text + separator;
         })
         .join("");

frontend/components/Domain/User/UserPasswordStrength.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRef } from "@nuxtjs/composition-api";
+import { defineComponent, toRef, useContext } from "@nuxtjs/composition-api";
 import { usePasswordStrength } from "~/composables/use-passwords";
 
 export default defineComponent({
@@ -25,8 +25,9 @@ export default defineComponent({
   },
   setup(props) {
     const asRef = toRef(props, "value");
+    const { i18n } = useContext();
 
-    const pwStrength = usePasswordStrength(asRef);
+    const pwStrength = usePasswordStrength(asRef, i18n);
 
     return {
       pwStrength,

frontend/composables/use-passwords.test.ts

@@ -1,20 +1,16 @@
 import { ref } from "@nuxtjs/composition-api";
 import { describe, expect, test } from "vitest";
 import { usePasswordStrength } from "./use-passwords";
+import { stubI18n } from "~/tests/utils";
 
-// test("test usePasswordField", () => {
-//   const { inputType, togglePasswordShow, passwordIcon } = usePasswordField();
-//   expect(inputType.value).toBe("password");
-//   expect(passwordIcon.value).toBe("mdi-eye");
-//   togglePasswordShow();
-//   expect(inputType.value).toBe("text");
-//   expect(passwordIcon.value).toBe("mdi-eye-off");
-// });
 
 describe("test usePasswordStrength", () => {
   test("weak password", () => {
-    const password = ref("123456");
-    const { score, strength, color } = usePasswordStrength(password);
+    const pw = ref("123456");
+
+    const result = usePasswordStrength(pw, stubI18n());
+    const { score, strength, color } = result
+
     expect(score.value).toBeGreaterThan(0);
     expect(score.value).toBeLessThan(40);
     expect(strength.value).toBe("Weak");
@@ -23,7 +19,7 @@ describe("test usePasswordStrength", () => {
 
   test("very strong password", () => {
     const password = ref("My~Secret~Not~So~Secret?123");
-    const { score, strength, color } = usePasswordStrength(password);
+    const { score, strength, color } = usePasswordStrength(password, stubI18n());
     expect(score.value).toBeGreaterThan(90);
     expect(score.value).toBe(100);
     expect(strength.value).toBe("Very Strong");

frontend/composables/use-passwords.ts

@@ -1,9 +1,9 @@
 import { computed, Ref, ref, useContext } from "@nuxtjs/composition-api";
+import VueI18n from "vue-i18n";
 import { scorePassword } from "~/lib/validators";
 
 export function usePasswordField() {
   const show = ref(false);
-
   const { $globals } = useContext();
 
   const passwordIcon = computed(() => {
@@ -22,14 +22,8 @@ export function usePasswordField() {
   };
 }
 
-export const usePasswordStrength = (password: Ref<string>) => {
-  const { i18n } = useContext();
-
-  const score = computed(() => {
-    return scorePassword(password.value);
-  });
-
-
+export const usePasswordStrength = (password: Ref<string>, i18n: VueI18n) => {
+  const score = computed(() => scorePassword(password.value));
   const strength = computed(() => {
     if (score.value < 50) {
       return i18n.tc("user.password-strength-values.weak");

frontend/pages/group/mealplan/planner.vue

@@ -265,7 +265,7 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs, watch } from "@nuxtjs/composition-api";
 import { isSameDay, addDays, subDays, parseISO, format } from "date-fns";
-import { SortableEvent } from "sortablejs"; // eslint-disable-line
+import { SortableEvent } from "sortablejs";
 import draggable from "vuedraggable";
 import { useMealplans, planTypeOptions } from "~/composables/use-group-mealplan";
 import { useRecipes, allRecipes } from "~/composables/recipes";

frontend/pages/group/mealplan/settings.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useAsync, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, ref, useAsync } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { PlanRulesCreate, PlanRulesOut } from "~/lib/api/types/meal-plan";
 import GroupMealPlanRuleForm from "~/components/Domain/Group/GroupMealPlanRuleForm.vue";

frontend/tests/utils.ts

@@ -0,0 +1,19 @@
+import VueI18n from "vue-i18n";
+import Vue from "vue";
+
+Vue.use(VueI18n)
+
+function loadEnLocales() {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  return require("../lang/messages/en-US.json") as Record<string, string>;
+}
+
+export function stubI18n() {
+  const i18n = new VueI18n({
+    locale: "en-US",
+    messages: {
+      "en-US": loadEnLocales(),
+    },
+  })
+  return i18n
+}