chore: frontend testing setup (mealie-recipes#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

.github/workflows/partial-frontend.yml

@@ -38,6 +38,10 @@ jobs:
         run: yarn lint
         working-directory: "frontend"
 
+      - name: Run tests 🧪
+        run: yarn test:ci
+        working-directory: "frontend"
+
   build:
     runs-on: ubuntu-latest
 

.gitignore

@@ -55,7 +55,6 @@ develop-eggs/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 !frontend/src/components/Recipe/Parts/

dev/code-generation/gen_ts_types.py

@@ -75,7 +75,7 @@ def path_to_module(path: Path):
         return str_path
 
     schema_path = PROJECT_DIR / "mealie" / "schema"
-    types_dir = PROJECT_DIR / "frontend" / "types" / "api-types"
+    types_dir = PROJECT_DIR / "frontend" / "lib" / "api" / "types"
 
     ignore_dirs = ["__pycache__", "static", "_mealie"]
 

frontend/components/Domain/Group/GroupExportData.vue

@@ -20,7 +20,7 @@
 <script lang="ts">
 import { defineComponent, useContext } from "@nuxtjs/composition-api";
 import { parseISO, formatDistanceToNow } from "date-fns";
-import { GroupDataExport } from "~/types/api-types/group";
+import { GroupDataExport } from "~/lib/api/types/group";
 export default defineComponent({
   props: {
     exports: {

frontend/components/Domain/Group/GroupMealPlanRuleForm.vue

@@ -17,7 +17,7 @@
 <script lang="ts">
 import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
-import { RecipeTag, RecipeCategory } from "~/types/api-types/group";
+import { RecipeTag, RecipeCategory } from "~/lib/api/types/group";
 
 export default defineComponent({
   components: {

frontend/components/Domain/Group/GroupWebhookEditor.vue

@@ -35,7 +35,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
-import { ReadWebhook } from "~/types/api-types/group";
+import { ReadWebhook } from "~/lib/api/types/group";
 import { timeLocalToUTC, timeUTCToLocal } from "~/composables/use-group-webhooks";
 
 export default defineComponent({

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -84,7 +84,7 @@
 import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe } from "~/lib/api/types/recipe";
 
 const SAVE_EVENT = "save";
 const DELETE_EVENT = "delete";

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -82,7 +82,7 @@ import { defineComponent, reactive, useContext } from "@nuxtjs/composition-api";
 import { useStaticRoutes, useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { detectServerBaseUrl } from "~/composables/use-utils";
-import { RecipeAsset } from "~/types/api-types/recipe";
+import { RecipeAsset } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   props: {

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -129,7 +129,7 @@ import RecipeCard from "./RecipeCard.vue";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import { useAsyncKey } from "~/composables/use-utils";
 import { useLazyRecipes } from "~/composables/recipes";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe } from "~/lib/api/types/recipe";
 import { useUserSortPreferences } from "~/composables/use-users/preferences";
 
 const REPLACE_RECIPES_EVENT = "replaceRecipes";
@@ -230,13 +230,13 @@ export default defineComponent({
         page.value,
 
         // we double-up the first call to avoid a bug with large screens that render the entire first page without scrolling, preventing additional loading
-        perPage.value*2,
+        perPage.value * 2,
         preferences.value.orderBy,
         preferences.value.orderDirection,
         cookbook.value,
         category.value,
         tag.value,
-        tool.value,
+        tool.value
       );
 
       // since we doubled the first call, we also need to advance the page
@@ -263,7 +263,7 @@ export default defineComponent({
           cookbook.value,
           category.value,
           tag.value,
-          tool.value,
+          tool.value
         );
         if (!newRecipes.length) {
           hasMore.value = false;
@@ -325,7 +325,7 @@ export default defineComponent({
           cookbook.value,
           category.value,
           tag.value,
-          tool.value,
+          tool.value
         );
         context.emit(REPLACE_RECIPES_EVENT, newRecipes);
 

frontend/components/Domain/Recipe/RecipeChips.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
-import { RecipeCategory, RecipeTag, RecipeTool } from "~/types/api-types/user";
+import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/user";
 
 export type UrlPrefixParam = "tags" | "categories" | "tools";
 

frontend/components/Domain/Recipe/RecipeComments.vue

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

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -101,8 +101,8 @@ import RecipeDialogShare from "./RecipeDialogShare.vue";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { planTypeOptions } from "~/composables/use-group-mealplan";
-import { ShoppingListSummary } from "~/types/api-types/group";
-import { PlanEntryType } from "~/types/api-types/meal-plan";
+import { ShoppingListSummary } from "~/lib/api/types/group";
+import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useAxiosDownloader } from "~/composables/api/use-axios-download";
 import { useCopy } from "~/composables/use-copy";
 

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -44,9 +44,9 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, useContext } from "@nuxtjs/composition-api";
 import RecipeChip from "./RecipeChips.vue";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
-import { UserOut } from "~/types/api-types/user";
+import { UserOut } from "~/lib/api/types/user";
 
 const INPUT_EVENT = "input";
 

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -57,7 +57,7 @@
 import { defineComponent, toRefs, reactive, ref, watch, useRoute } from "@nuxtjs/composition-api";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import { useRecipes, allRecipes, useRecipeSearch } from "~/composables/recipes";
-import { RecipeSummary } from "~/types/api-types/recipe";
+import { RecipeSummary } from "~/lib/api/types/recipe";
 const SELECTED_EVENT = "selected";
 export default defineComponent({
   components: {

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -58,7 +58,7 @@
 <script lang="ts">
 import { defineComponent, computed, toRefs, reactive, useContext } from "@nuxtjs/composition-api";
 import { useClipboard, useShare, whenever } from "@vueuse/core";
-import { RecipeShareToken } from "~/types/api-types/recipe";
+import { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -23,7 +23,7 @@
 <script lang="ts">
 import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
-import { UserOut } from "~/types/api-types/user";
+import { UserOut } from "~/lib/api/types/user";
 export default defineComponent({
   props: {
     slug: {

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -131,7 +131,7 @@
 import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
 import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
 import { validators } from "~/composables/use-validators";
-import { RecipeIngredient } from "~/types/api-types/recipe";
+import { RecipeIngredient } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   props: {

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -23,7 +23,7 @@
 import { computed, defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
 // @ts-ignore vue-markdown has no types
 import { parseIngredientText } from "~/composables/recipes";
-import { RecipeIngredient } from "~/types/api-types/recipe";
+import { RecipeIngredient } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   components: {},

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -230,7 +230,7 @@ import {
   useContext,
   computed,
 } from "@nuxtjs/composition-api";
-import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset } from "~/types/api-types/recipe";
+import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset } from "~/lib/api/types/recipe";
 import { parseIngredientText } from "~/composables/recipes";
 import { uuid4, detectServerBaseUrl } from "~/composables/use-utils";
 import { useUserApi, useStaticRoutes } from "~/composables/api";

frontend/components/Domain/Recipe/RecipeList.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
-import { RecipeSummary } from "~/types/api-types/recipe";
+import { RecipeSummary } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   props: {
@@ -30,4 +30,4 @@ export default defineComponent({
     return {};
   },
 });
-</script>
+</script>

frontend/components/Domain/Recipe/RecipeNotes.vue

@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
-import { RecipeNote } from "~/types/api-types/recipe";
+import { RecipeNote } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   props: {

frontend/components/Domain/Recipe/RecipeNutrition.vue

@@ -35,7 +35,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
-import { Nutrition } from "~/types/api-types/recipe";
+import { Nutrition } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   props: {

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

@@ -146,9 +146,9 @@ import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
 import draggable from "vuedraggable";
 import { useUserApi, useStaticRoutes } from "~/composables/api";
-import { OcrTsvResponse as NullableOcrTsvResponse } from "~/types/api-types/ocr";
+import { OcrTsvResponse as NullableOcrTsvResponse } from "~/lib/api/types/ocr";
 import { validators } from "~/composables/use-validators";
-import { Recipe, RecipeIngredient, RecipeStep } from "~/types/api-types/recipe";
+import { Recipe, RecipeIngredient, RecipeStep } from "~/lib/api/types/recipe";
 import { Paths, Leaves, SelectedRecipeLeaves } from "~/types/ocr-types";
 import BannerExperimental from "~/components/global/BannerExperimental.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
@@ -157,7 +157,7 @@ import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientE
 import RecipeOcrEditorPageCanvas from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue";
 import RecipeOcrEditorPageHelp from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue";
 import { uuid4 } from "~/composables/use-utils";
-import { NoUndefinedField } from "~/types/api";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
 
 // Temporary Shim until we have a better solution
 // https://github.com/phillipdupuis/pydantic-to-typescript/issues/28

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

@@ -41,8 +41,8 @@
 <script lang="ts">
 import { defineComponent, reactive, useContext, ref, toRefs, watch } from "@nuxtjs/composition-api";
 import { onMounted } from "vue-demi";
-import { NoUndefinedField } from "~/types/api";
-import { OcrTsvResponse as NullableOcrTsvResponse } from "~/types/api-types/ocr";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { OcrTsvResponse as NullableOcrTsvResponse } from "~/lib/api/types/ocr";
 import { CanvasModes, SelectedTextSplitModes, ImagePosition, Mouse, CanvasRect, ToolbarIcons } from "~/types/ocr-types";
 
 // Temporary Shim until we have a better solution

frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue

@@ -40,7 +40,7 @@
 import { computed, defineComponent, reactive, toRefs, useContext, watch } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store";
-import { RecipeOrganizer, Organizer } from "~/types/recipe/organizers";
+import { RecipeOrganizer, Organizer } from "~/lib/api/types/non-generated";
 
 const CREATED_ITEM_EVENT = "created-item";
 

frontend/components/Domain/Recipe/RecipeOrganizerPage.vue

@@ -50,7 +50,7 @@
 import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
 import { useContextPresets } from "~/composables/use-context-presents";
 import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
-import { RecipeOrganizer } from "~/types/recipe/organizers";
+import { RecipeOrganizer } from "~/lib/api/types/non-generated";
 
 interface GenericItem {
   id?: string;

frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -42,11 +42,11 @@
 import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import { computed, onMounted } from "vue-demi";
 import RecipeOrganizerDialog from "./RecipeOrganizerDialog.vue";
-import { RecipeCategory, RecipeTag } from "~/types/api-types/user";
-import { RecipeTool } from "~/types/api-types/admin";
+import { RecipeCategory, RecipeTag } from "~/lib/api/types/user";
+import { RecipeTool } from "~/lib/api/types/admin";
 import { useTagStore } from "~/composables/store/use-tag-store";
 import { useCategoryStore, useToolStore } from "~/composables/store";
-import { Organizer, RecipeOrganizer } from "~/types/recipe/organizers";
+import { Organizer, RecipeOrganizer } from "~/lib/api/types/non-generated";
 
 export default defineComponent({
   components: {

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -90,8 +90,8 @@ import RecipePageTitleContent from "./RecipePageParts/RecipePageTitleContent.vue
 import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
 import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
-import { NoUndefinedField } from "~/types/api";
-import { Recipe } from "~/types/api-types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { Recipe } from "~/lib/api/types/recipe";
 import { useRecipeMeta } from "~/composables/recipes";
 import { useRouteQuery } from "~/composables/use-router";
 import { useUserApi } from "~/composables/api";

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue

@@ -56,9 +56,9 @@
 <script lang="ts">
 import { defineComponent, ref, toRefs, onMounted, reactive } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
-import { Recipe, RecipeCommentOut } from "~/types/api-types/recipe";
+import { Recipe, RecipeCommentOut } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
-import { NoUndefinedField } from "~/types/api";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { usePageUser } from "~/composables/recipe-page/shared-state";
 
 export default defineComponent({

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue

@@ -13,8 +13,8 @@
 <script lang="ts">
 import { defineComponent, onUnmounted } from "@nuxtjs/composition-api";
 import { clearPageState, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
-import { NoUndefinedField } from "~/types/api";
-import { Recipe } from "~/types/api-types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { Recipe } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
 import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBtn.vue";
 import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue

@@ -57,8 +57,8 @@
 <script lang="ts">
 import { defineComponent, ref } from "@nuxtjs/composition-api";
 import { usePageState } from "~/composables/recipe-page/shared-state";
-import { NoUndefinedField } from "~/types/api";
-import { Recipe } from "~/types/api-types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { Recipe } from "~/lib/api/types/recipe";
 export default defineComponent({
   props: {
     recipe: {

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue

@@ -61,8 +61,8 @@ import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
 import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
 import { useStaticRoutes } from "~/composables/api";
-import { Recipe } from "~/types/api-types/recipe";
-import { NoUndefinedField } from "~/types/api";
+import { Recipe } from "~/lib/api/types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { usePageState, usePageUser, PageMode, EditorMode } from "~/composables/recipe-page/shared-state";
 export default defineComponent({
   components: {

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -55,8 +55,8 @@
 import draggable from "vuedraggable";
 import { computed, defineComponent, ref } from "@nuxtjs/composition-api";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
-import { NoUndefinedField } from "~/types/api";
-import { Recipe } from "~/types/api-types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { Recipe } from "~/lib/api/types/recipe";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 import { uuid4 } from "~/composables/use-utils";

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue

@@ -28,8 +28,8 @@
 import { defineComponent } from "@nuxtjs/composition-api";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
-import { NoUndefinedField } from "~/types/api";
-import { Recipe } from "~/types/api-types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { Recipe } from "~/lib/api/types/recipe";
 import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
 
 export default defineComponent({