chore: frontend testing setup (#1739)

* add vitest

* initialize lib w/ tests

* move to dev dep

* run tests in CI

* update file names

* move api folder to lib

* move api and api types to same folder

* update generator outpath

* rm husky

* i guess i _did_ need those types

* reorg types

* extract validators into testable components

* (WIP) start composable testing

* fix import type

* fix linter complaint

* simplify icon type def

* fix linter errors (maybe?)

* rename client file for sorting

frontend/pages/admin/analytics.vue

@@ -43,7 +43,7 @@
 import { defineComponent, reactive, useAsync } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { useAsyncKey } from "~/composables/use-utils";
-import { MealieAnalytics } from "~/types/api-types/analytics";
+import { MealieAnalytics } from "~/lib/api/types/analytics";
 
 type DisplayData = {
   text: string;

frontend/pages/admin/background-tasks.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
-import { ServerTask } from "~/types/api-types/server";
+import { ServerTask } from "~/lib/api/types/server";
 import { useAdminApi } from "~/composables/api";
 
 export default defineComponent({

frontend/pages/admin/backups.vue

@@ -117,7 +117,7 @@
 import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
 import { onMounted } from "vue-demi";
 import { useAdminApi } from "~/composables/api";
-import { AllBackups } from "~/types/api-types/admin";
+import { AllBackups } from "~/lib/api/types/admin";
 
 export default defineComponent({
   layout: "admin",

frontend/pages/admin/maintenance/index.vue

@@ -75,7 +75,7 @@
 <script lang="ts">
 import { computed, ref, defineComponent, reactive } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
-import { MaintenanceStorageDetails, MaintenanceSummary } from "~/types/api-types/admin";
+import { MaintenanceStorageDetails, MaintenanceSummary } from "~/lib/api/types/admin";
 
 export default defineComponent({
   layout: "admin",

frontend/pages/admin/manage/groups/_id.vue

@@ -28,7 +28,7 @@ import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-a
 import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
 import { useAdminApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
-import { GroupInDB } from "~/types/api-types/user";
+import { GroupInDB } from "~/lib/api/types/user";
 import { VForm } from "~/types/vuetify";
 
 export default defineComponent({

frontend/pages/admin/manage/groups/index.vue

@@ -73,7 +73,7 @@
 import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
 import { fieldTypes } from "~/composables/forms";
 import { useGroups } from "~/composables/use-groups";
-import { GroupInDB } from "~/types/api-types/user";
+import { GroupInDB } from "~/lib/api/types/user";
 
 export default defineComponent({
   layout: "admin",

frontend/pages/admin/manage/users/_id.vue

@@ -45,7 +45,7 @@ import { alert } from "~/composables/use-toast";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
 import { VForm } from "~/types/vuetify";
-import { UserOut } from "~/types/api-types/user";
+import { UserOut } from "~/lib/api/types/user";
 
 export default defineComponent({
   layout: "admin",

frontend/pages/admin/manage/users/index.vue

@@ -69,7 +69,7 @@ import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@
 import { useAdminApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useUser, useAllUsers } from "~/composables/use-user";
-import { UserOut } from "~/types/api-types/user";
+import { UserOut } from "~/lib/api/types/user";
 
 export default defineComponent({
   layout: "admin",

frontend/pages/admin/parser.vue

@@ -68,9 +68,9 @@
 
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
-import { Parser } from "~/api/class-interfaces/recipes/recipe";
-import { IngredientConfidence } from "~/types/api-types/recipe";
+import { IngredientConfidence } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
+import { Parser } from "~/lib/api/user/recipes/recipe";
 
 type ConfidenceAttribute = "average" | "comment" | "name" | "unit" | "quantity" | "food";
 
@@ -90,8 +90,7 @@ export default defineComponent({
 
     function getColor(attribute: ConfidenceAttribute) {
       const percentage = getConfidence(attribute);
-      if (percentage === undefined)
-        return;
+      if (percentage === undefined) return;
 
       const p_as_num = parseFloat(percentage.replace("%", ""));
 
@@ -142,8 +141,7 @@ export default defineComponent({
       if (data) {
         state.results = true;
 
-        if (data.confidence)
-          confidence.value = data.confidence;
+        if (data.confidence) confidence.value = data.confidence;
 
         // TODO: Remove ts-ignore
         // ts-ignore because data will likely change significantly once I figure out how to return results
@@ -153,7 +151,7 @@ export default defineComponent({
         properties.unit.value = data.ingredient?.unit?.name || "";
         properties.food.value = data.ingredient?.food?.name || "";
 
-        (["comment", "quantity", "unit", "food"] as ConfidenceAttribute[]).forEach(property => {
+        (["comment", "quantity", "unit", "food"] as ConfidenceAttribute[]).forEach((property) => {
           const color = getColor(property);
           const confidence = getConfidence(property);
           if (color) {
@@ -218,5 +216,4 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

frontend/pages/admin/site-settings.vue

@@ -179,7 +179,7 @@ import {
 import { useAdminApi, useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
 import { useAsyncKey } from "~/composables/use-utils";
-import { CheckAppConfig } from "~/types/api-types/admin";
+import { CheckAppConfig } from "~/lib/api/types/admin";
 
 enum DockerVolumeState {
   Unknown = "unknown",
@@ -259,7 +259,7 @@ export default defineComponent({
       const { data } = await adminApi.about.checkApp();
 
       if (data) {
-        appConfig.value = { ...data, isSiteSecure: false};
+        appConfig.value = { ...data, isSiteSecure: false };
       }
 
       appConfig.value.isSiteSecure = isLocalHostOrHttps();

frontend/pages/group/data/foods.vue

@@ -159,7 +159,7 @@ import { computed } from "vue-demi";
 import type { LocaleObject } from "@nuxtjs/i18n";
 import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
-import { CreateIngredientFood, IngredientFood } from "~/types/api-types/recipe";
+import { CreateIngredientFood, IngredientFood } from "~/lib/api/types/recipe";
 import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
 import { useLocales } from "~/composables/use-locales";
 import { useFoodStore, useLabelStore } from "~/composables/store";

frontend/pages/group/data/labels.vue

@@ -116,7 +116,7 @@ import type { LocaleObject } from "@nuxtjs/i18n";
 import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
 import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
-import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
+import { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
 import { useLocales } from "~/composables/use-locales";
 import { useLabelData, useLabelStore } from "~/composables/store";
 

frontend/pages/group/data/recipes.vue

@@ -162,9 +162,9 @@ import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
 import { useUserApi } from "~/composables/api";
 import { useRecipes, allRecipes } from "~/composables/recipes";
-import { Recipe, RecipeSettings } from "~/types/api-types/recipe";
+import { Recipe, RecipeSettings } from "~/lib/api/types/recipe";
 import GroupExportData from "~/components/Domain/Group/GroupExportData.vue";
-import { GroupDataExport } from "~/types/api-types/group";
+import { GroupDataExport } from "~/lib/api/types/group";
 import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 import RecipeSettingsSwitches from "~/components/Domain/Recipe/RecipeSettingsSwitches.vue";
 

frontend/pages/group/data/units.vue

@@ -159,7 +159,7 @@ import { computed, defineComponent, onMounted, ref } from "@nuxtjs/composition-a
 import type { LocaleObject } from "@nuxtjs/i18n";
 import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
-import { CreateIngredientUnit, IngredientUnit } from "~/types/api-types/recipe";
+import { CreateIngredientUnit, IngredientUnit } from "~/lib/api/types/recipe";
 import { useLocales } from "~/composables/use-locales";
 import { useUnitStore } from "~/composables/store";
 import { VForm } from "~/types/vuetify";

frontend/pages/group/mealplan/planner.vue

@@ -271,7 +271,7 @@ import { useRecipes, allRecipes } from "~/composables/recipes";
 import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
 import RecipeCard from "~/components/Domain/Recipe/RecipeCard.vue";
 import RecipeContextMenu from "~/components/Domain/Recipe/RecipeContextMenu.vue";
-import { PlanEntryType } from "~/types/api-types/meal-plan";
+import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useUserApi } from "~/composables/api";
 
 export default defineComponent({

frontend/pages/group/mealplan/settings.vue

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

frontend/pages/group/members.vue

@@ -66,7 +66,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
-import { UserOut } from "~/types/api-types/user";
+import { UserOut } from "~/lib/api/types/user";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
 export default defineComponent({

frontend/pages/group/migrations.vue

@@ -66,10 +66,10 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, useContext, computed, onMounted } from "@nuxtjs/composition-api";
-import { ReportSummary } from "~/types/api-types/reports";
+import { ReportSummary } from "~/lib/api/types/reports";
 import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 import { useUserApi } from "~/composables/api";
-import { SupportedMigrations } from "~/types/api-types/group";
+import { SupportedMigrations } from "~/lib/api/types/group";
 
 const MIGRATIONS = {
   nextcloud: "nextcloud",
@@ -302,5 +302,4 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

frontend/pages/group/notifiers.vue

@@ -106,7 +106,7 @@
 import { defineComponent, useAsync, reactive, useContext, toRefs } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { useAsyncKey } from "~/composables/use-utils";
-import { GroupEventNotifierCreate, GroupEventNotifierOut } from "~/types/api-types/group";
+import { GroupEventNotifierCreate, GroupEventNotifierOut } from "~/lib/api/types/group";
 
 interface OptionKey {
   text: string;

frontend/pages/group/reports/_id.vue

@@ -31,7 +31,7 @@
 <script lang="ts">
 import { defineComponent, useRoute, ref, onMounted } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
-import { ReportOut } from "~/types/api-types/reports";
+import { ReportOut } from "~/lib/api/types/reports";
 
 export default defineComponent({
   setup() {

frontend/pages/recipe/_slug/ingredient-parser.vue

@@ -88,19 +88,19 @@
 <script lang="ts">
 import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { invoke, until } from "@vueuse/core";
-import { Parser } from "~/api/class-interfaces/recipes/recipe";
 import {
   CreateIngredientFood,
   CreateIngredientUnit,
   IngredientFood,
   IngredientUnit,
   ParsedIngredient,
-} from "~/types/api-types/recipe";
+} from "~/lib/api/types/recipe";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import { useUserApi } from "~/composables/api";
 import { useRecipe } from "~/composables/recipes";
-import { RecipeIngredient } from "~/types/api-types/admin";
+import { RecipeIngredient } from "~/lib/api/types/admin";
 import { useFoodData, useFoodStore, useUnitStore } from "~/composables/store";
+import { Parser } from "~/lib/api/user/recipes/recipe";
 
 interface Error {
   ingredientIndex: number;

frontend/pages/recipe/_slug/old.vue

@@ -488,7 +488,7 @@ import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientE
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
 import RecipeTools from "~/components/Domain/Recipe/RecipeTools.vue";
 import RecipeComments from "~/components/Domain/Recipe/RecipeComments.vue";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe } from "~/lib/api/types/recipe";
 import { uuid4, deepCopy } from "~/composables/use-utils";
 import { useRouteQuery } from "~/composables/use-router";
 import { useToolStore } from "~/composables/store";

frontend/pages/recipe/create/bulk.vue

@@ -107,7 +107,7 @@ import { whenever } from "@vueuse/shared";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
-import { ReportSummary } from "~/types/api-types/reports";
+import { ReportSummary } from "~/lib/api/types/reports";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 
 export default defineComponent({

frontend/pages/recipe/create/debug.vue

@@ -55,7 +55,7 @@
 import { defineComponent, reactive, toRefs, ref, useRouter, computed, useRoute } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   setup() {

frontend/pages/register/register.vue

@@ -262,7 +262,7 @@ import { useRouteQuery } from "~/composables/use-router";
 import { validators, useAsyncValidator } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
-import { CreateUserRegistration } from "~/types/api-types/user";
+import { CreateUserRegistration } from "~/lib/api/types/user";
 import { VForm } from "~/types/vuetify";
 import { usePasswordField } from "~/composables/use-passwords";
 import { usePublicApi } from "~/composables/api/api-client";

frontend/pages/search.vue

@@ -117,9 +117,9 @@ import RecipeSearchFilterSelector from "~/components/Domain/Recipe/RecipeSearchF
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useRecipes, allRecipes } from "~/composables/recipes";
-import { RecipeSummary } from "~/types/api-types/recipe";
+import { RecipeSummary } from "~/lib/api/types/recipe";
 import { useRouteQuery } from "~/composables/use-router";
-import { RecipeTag } from "~/types/api-types/user";
+import { RecipeTag } from "~/lib/api/types/user";
 import { useFoodStore } from "~/composables/store";
 
 interface GenericFilter {

frontend/pages/shopping-lists/_id.vue

@@ -193,7 +193,7 @@ import { useCopyList } from "~/composables/use-copy";
 import { useUserApi } from "~/composables/api";
 import { useAsyncKey } from "~/composables/use-utils";
 import ShoppingListItem from "~/components/Domain/ShoppingList/ShoppingListItem.vue";
-import { ShoppingListItemCreate, ShoppingListItemOut } from "~/types/api-types/group";
+import { ShoppingListItemCreate, ShoppingListItemOut } from "~/lib/api/types/group";
 import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
 import ShoppingListItemEditor from "~/components/Domain/ShoppingList/ShoppingListItemEditor.vue";
 import { getDisplayText } from "~/composables/use-display-text";

frontend/pages/user/profile/edit.vue

@@ -126,7 +126,7 @@ import { ref, reactive, defineComponent, computed, useContext, watch, toRefs } f
 import { useUserApi } from "~/composables/api";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import { VForm } from "~/types/vuetify";
-import { UserOut } from "~/types/api-types/user";
+import { UserOut } from "~/lib/api/types/user";
 import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
 import { validators } from "~/composables/use-validators";