added a more readable check for responses

src/Resources/src/api/api.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { ref } from "vue";
+import { Ref, ref } from "vue";
 
 const instance = axios.create({
     baseURL: window.location.origin,

src/Resources/src/api/isResponseOkay.ts

@@ -0,0 +1,9 @@
+import { Ref } from "vue";
+
+export function isResponseOkay<T>(error: Ref<boolean>, response: Ref<T>) {
+    return (
+        error.value === false &&
+        response.value !== null &&
+        response.value !== undefined
+    );
+}

src/Resources/src/stores/categoriesStore.ts

@@ -1,9 +1,10 @@
-import { reactive, readonly } from "vue";
+import { reactive, readonly, watch } from "vue";
 import getCategoriesData from "@/api/getCategoriesData";
 import deleteCategory from "@/api/deleteCategory";
 import postCreateCategory from "@/api/postCreateCategory";
 import putCategoryUpdate from "@/api/putCategoryUpdate";
 import { isMessage } from "@/interfaces/IMessage";
+import { isResponseOkay } from "@/api/isResponseOkay";
 
 export interface Category {
     id: number,
@@ -26,6 +27,11 @@ const CategoriesState = reactive<CategoriesState>({
     error: ''
 });
 
+watch(
+    () => CategoriesState.error,
+    () => console.log(`Error in Cat: ${CategoriesState.error}`)
+)
+
 export function useCategories() {
 
     /**
@@ -43,7 +49,8 @@ export function useCategories() {
      */
     async function getCategories() {
         const { categories, error } = await getCategoriesData();
-        if (!error.value && categories.value) {
+
+        if (isResponseOkay<Category[]>(error, categories)) {
             CategoriesState.categories = categories.value;
             CategoriesState.error = '';
         } else {
@@ -91,7 +98,7 @@ export function useCategories() {
     async function editCategory(index: number, titleDe: string, titleEn: string) {
         const { error, response } = await putCategoryUpdate(CategoriesState.categories[index].slug, titleDe, titleEn);
 
-        if (!error.value && response.value) {
+        if (isResponseOkay<Category>(error, response)) {
             updateCategoryState(index, response.value);
         } else {
             CategoriesState.error = 'Error on updating category';
@@ -130,7 +137,7 @@ export function useCategories() {
 
     function getCategoryTitleById(id: number, locale = 'en') {
         const category = getCategoryById(id);
-        if(category) {
+        if(category !== undefined && category !== null) {
             return locale === 'en' ? category.titleEn : category.titleDe;
         }
         return '';

src/Resources/src/stores/dishesStore.ts

@@ -8,6 +8,7 @@ import deleteDishVariation from "@/api/deleteDishVariation";
 import putDishVariationUpdate from "@/api/putDishVariationUpdate";
 import { useCategories } from "./categoriesStore";
 import { isMessage } from "@/interfaces/IMessage";
+import { isResponseOkay } from "@/api/isResponseOkay";
 
 export interface Dish {
     id: number,
@@ -73,7 +74,7 @@ export function useDishes() {
         DishesState.isLoading = true;
 
         const { dishes, error } = await getDishes();
-        if (!error.value && dishes.value) {
+        if (isResponseOkay<Dish[]>(error, dishes)) {
             DishesState.dishes = dishes.value;
             DishesState.error = '';
         } else {
@@ -153,7 +154,7 @@ export function useDishes() {
     async function updateDishVariation(slug: string, variation: CreateDishVariationDTO) {
         const { error, response } = await putDishVariationUpdate(slug, variation);
 
-        if (!error.value && response.value && response.value.parentId) {
+        if (isResponseOkay<Dish>(error, response) && response.value.parentId) {
             updateDishVariationInState(response.value.parentId, response.value);
         } else {
             DishesState.error = 'Error on updating dishVariation';
@@ -168,7 +169,7 @@ export function useDishes() {
     async function updateDish(id: number, dish: CreateDishDTO) {
         const { error, response } = await putDishUpdate(getDishById(id).slug, dish);
 
-        if (!error.value && response.value) {
+        if (isResponseOkay<Dish>(error, response)) {
             updateDishesState(response.value);
         } else {
             DishesState.error = 'Error on updating a dish';

src/Resources/src/stores/timeSlotStore.ts

@@ -1,10 +1,11 @@
 import { Dictionary } from "types/types";
 import { reactive, readonly } from "vue";
-import { useTimeSlotData } from "@/api/getTimeSlotData";
+import { TimeSlots, useTimeSlotData } from "@/api/getTimeSlotData";
 import { useUpdateSlot } from "@/api/putSlotUpdate";
 import postCreateSlot from "@/api/postCreateSlot";
 import deleteSlot from "@/api/deleteSlot";
 import { isMessage } from "@/interfaces/IMessage";
+import { isResponseOkay } from "@/api/isResponseOkay";
 
 interface ITimeSlotState {
     timeSlots: Dictionary<TimeSlot>,
@@ -46,7 +47,7 @@ export function useTimeSlots() {
      */
     async function getTimeSlots() {
         const { timeslots, error } = await useTimeSlotData();
-        if (!error.value && timeslots.value) {
+        if (isResponseOkay<TimeSlots>(error, timeslots)) {
             TimeSlotState.timeSlots = timeslots.value;
             TimeSlotState.error = '';
         } else {
@@ -65,7 +66,7 @@ export function useTimeSlots() {
 
         const { error, response } = await updateSlotEnabled(TimeSlotState.timeSlots[id].slug, state);
 
-        if (!error.value && response.value && response.value.enabled !== undefined) {
+        if (isResponseOkay<TimeSlot>(error, response) && response.value.enabled !== undefined) {
             updateTimeSlotEnabled(response.value, id);
         } else {
             TimeSlotState.error = 'Error on changing the slot state';
@@ -86,7 +87,7 @@ export function useTimeSlots() {
 
         const { error, response } = await updateTimeSlot(slot);
 
-        if (!error.value && response.value) {
+        if (isResponseOkay<TimeSlot>(error, response)) {
             updateTimeSlotState(response.value, id);
         } else {
             TimeSlotState.error = 'Error on changing the slot state';

src/Resources/src/stores/weeksStore.ts

@@ -7,6 +7,7 @@ import { DayDTO, WeekDTO } from "@/interfaces/DayDTO";
 import { Dictionary } from "types/types";
 import { reactive, readonly } from "vue";
 import { isMessage } from "@/interfaces/IMessage";
+import { isResponseOkay } from "@/api/isResponseOkay";
 
 export interface Week {
     id: number,
@@ -67,7 +68,7 @@ export function useWeeks() {
 
     async function getWeeks() {
         const { weeks, error } = await getWeeksData();
-        if (!error.value && weeks.value) {
+        if (isResponseOkay<Week[]>(error, weeks)) {
             WeeksState.weeks = weeks.value;
             WeeksState.error = '';
         } else {

src/Resources/tests/unit/api/responseOkayTest.spec.ts

@@ -0,0 +1,38 @@
+import { isResponseOkay } from "@/api/isResponseOkay";
+import { ref } from "vue";
+
+describe('Test isResponseOkay', () => {
+    it('should return true if the response is defined, not null and there are no errors', () => {
+        const response = ref({
+            test: 'test'
+        });
+        const error = ref(false);
+        expect(isResponseOkay(error, response)).toBeTruthy();
+    });
+
+    it('should return false if there is an error', () => {
+        const response = ref({
+            test: 'test'
+        });
+        const error = ref(true);
+        expect(isResponseOkay(error, response)).toBeFalsy();
+    });
+
+    it('should return false if respose is null', () => {
+        const response = ref(null);
+        const error = ref(false);
+        expect(isResponseOkay(error, response)).toBeFalsy();
+    });
+
+    it('should be false if response is undefined', () => {
+        const response = ref(undefined);
+        const error = ref(false);
+        expect(isResponseOkay(error, response)).toBeFalsy();
+    });
+
+    it('should be false if respose is undefined and error is true', () => {
+        const response = ref(undefined);
+        const error = ref(true);
+        expect(isResponseOkay(error, response)).toBeFalsy();
+    });
+});

src/Resources/tests/unit/dishes/DishesCreationPanel.spec.ts

@@ -41,7 +41,18 @@ describe('Test DishesCreationPanel', () => {
     });
 
     it('should contain a CategoriesDropDown with all categories', async () => {
-        const wrapper = mount(DishesCreationPanel);
+        const wrapper = mount(DishesCreationPanel, {
+            props: {
+                titleDe: Dishes[0].titleDe,
+                titleEn: Dishes[0].titleEn,
+                descriptionDe: Dishes[0].descriptionDe,
+                descriptionEn: Dishes[0].descriptionEn,
+                categoryId: Dishes[0].categoryId,
+                oneSizeServing: Dishes[0].oneServingSize,
+                dishId: Dishes[0].id,
+                edit: true
+            }
+        });
 
         expect(wrapper.findComponent(CategoriesDropDown).exists()).toBe(true);
 
@@ -77,7 +88,18 @@ describe('Test DishesCreationPanel', () => {
     });
 
     it('should not call createDish or updateDish if titles are empty', async () => {
-        const wrapper = mount(DishesCreationPanel);
+        const wrapper = mount(DishesCreationPanel, {
+            props: {
+                titleDe: '',
+                titleEn: '',
+                descriptionDe: Dishes[0].descriptionDe,
+                descriptionEn: Dishes[0].descriptionEn,
+                categoryId: Dishes[0].categoryId,
+                oneSizeServing: Dishes[0].oneServingSize,
+                dishId: Dishes[0].id,
+                edit: true
+            }
+        });
 
         await wrapper.trigger('submit.prevent');
 
@@ -90,6 +112,11 @@ describe('Test DishesCreationPanel', () => {
             props: {
                 titleDe: Dishes[0].titleDe,
                 titleEn: Dishes[0].titleEn,
+                descriptionDe: Dishes[0].descriptionDe,
+                descriptionEn: Dishes[0].descriptionEn,
+                categoryId: Dishes[0].categoryId,
+                oneSizeServing: Dishes[0].oneServingSize,
+                dishId: Dishes[0].id
             }
         });
 
@@ -104,6 +131,11 @@ describe('Test DishesCreationPanel', () => {
             props: {
                 titleDe: Dishes[0].titleDe,
                 titleEn: Dishes[0].titleEn,
+                descriptionDe: Dishes[0].descriptionDe,
+                descriptionEn: Dishes[0].descriptionEn,
+                categoryId: Dishes[0].categoryId,
+                oneSizeServing: Dishes[0].oneServingSize,
+                dishId: Dishes[0].id,
                 edit: true
             }
         });

src/Resources/tests/unit/menu/MenuHeader.spec.ts

@@ -1,6 +1,6 @@
 import MenuHeader from "@/components/menu/MenuHeader.vue";
 import { WeekDTO } from "@/interfaces/DayDTO";
-import { mount } from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
 
 const testWeek: WeekDTO = {
     id: 0,
@@ -11,7 +11,7 @@ const testWeek: WeekDTO = {
 
 describe('Test MenuHeader', () => {
     it('should contain the correct text', () => {
-        const wrapper = mount(MenuHeader, {
+        const wrapper = shallowMount(MenuHeader, {
             props: {
                 week: testWeek,
                 dateRange: ['2023-07-03T12:00:00.000+02:00', '2023-07-07T12:00:00.000+02:00'],

src/Resources/tests/unit/stores/categoriesStore.spec.ts

@@ -13,7 +13,7 @@ const getMockedResponses = (method: string, url: string) => {
         return {
             response: ref(Categories),
             request: asyncFunc,
-            error: false
+            error: ref(false)
         }
     } else if (url.includes('api/categories') && (method === 'POST' || method === 'DELETE')) {
         return {

src/Resources/tests/unit/stores/dishesStore.spec.ts

@@ -33,13 +33,13 @@ const getMockedResponses = (method: string, url: string) => {
         return {
             response: ref(Categories),
             request: asyncFunc,
-            error: false
+            error: ref(false)
         }
     } else if (url.includes('api/dishes') && method === 'GET') {
         return {
             response: ref(Dishes),
             request: asyncFunc,
-            error: false
+            error: ref(false)
         }
     } else if (url.includes('api/dishes') && (method === 'POST' || method === 'DELETE')) {
         return {

src/Resources/tests/unit/stores/timeSlotStore.spec.ts

@@ -14,7 +14,7 @@ const getMockedResponses = (method: string, url: string) => {
         return {
             response: ref(timeSlots.response),
             request: asyncFunc,
-            error: false
+            error: ref(false)
         }
     } else if (url.includes('api/slot') && (method === 'POST' || method === 'DELETE')) {
         return {

src/Resources/tests/unit/stores/weeksStore.spec.ts

@@ -13,13 +13,13 @@ const getMockedResponses = (method: string, url: string) => {
         return {
             response: ref(Weeks),
             request: asyncFunc,
-            error: false
+            error: ref(false)
         }
     } else if (url.includes('api/meals/count') && method === 'GET') {
         return {
             response: ref(DishesCount),
             request: asyncFunc,
-            error: false
+            error: ref(false)
         }
     } else if (url.includes('api/weeks/') && (method === 'POST')) {
         return {