Add test for the MealItemForm component

src/components/Nutrition/queries/index.ts

@@ -10,4 +10,6 @@ export { useAddDiaryEntryQuery, useDeleteDiaryEntryQuery, useEditDiaryEntryQuery
 
 export { useEditMealQuery, useAddMealQuery, useDeleteMealQuery } from './meal';
 
+export { useEditMealItemQuery, useAddMealItemQuery, useDeleteMealItemQuery } from './mealItem';
+
 export { useFetchIngredientQuery } from './ingredient' ;

src/components/Nutrition/widgets/forms/MealItemForm.test.tsx

@@ -0,0 +1,108 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UserEvent } from "@testing-library/user-event/setup/setup";
+import { useAddMealItemQuery, useEditMealItemQuery } from "components/Nutrition/queries";
+import { MealItemForm } from "components/Nutrition/widgets/forms/MealItemForm";
+import { searchIngredient } from "services";
+import { INGREDIENT_SEARCH } from "tests/api/ingredientSearch";
+import { TEST_MEAL_ITEM_1 } from "tests/nutritionTestdata";
+
+jest.mock('components/Nutrition/queries');
+jest.mock('services');
+
+async function fillInEntry(user: UserEvent) {
+    const autocomplete = screen.getByTestId('autocomplete');
+    const input = within(autocomplete).getByRole('combobox');
+    await user.click(autocomplete);
+    await user.type(input, 'Bagu');
+
+    // There's a bounce period of 200ms between the input and the search
+    await act(async () => {
+        await new Promise((r) => setTimeout(r, 250));
+    });
+
+    // Select first result
+    await user.click(input);
+    await user.keyboard('{ArrowDown}{Enter}');
+
+    const amountInput = screen.getByLabelText('amount');
+    await user.clear(amountInput);
+    await user.type(amountInput, '120');
+    const submitButton = screen.getByRole('button', { name: 'submit' });
+    await user.click(submitButton);
+}
+
+describe('Test the NutritionDiaryEntryForm component', () => {
+    const queryClient = new QueryClient();
+    let mutateAddMock = jest.fn();
+    let mutateEditMock = jest.fn();
+    let closeFnMock = jest.fn();
+
+    beforeEach(() => {
+        mutateAddMock = jest.fn();
+        mutateEditMock = jest.fn();
+        closeFnMock = jest.fn();
+
+        // @ts-ignore
+        useEditMealItemQuery.mockImplementation(() => ({ mutate: mutateEditMock }));
+
+        // @ts-ignore
+        useAddMealItemQuery.mockImplementation(() => ({ mutate: mutateAddMock }));
+
+        // @ts-ignore
+        searchIngredient.mockImplementation(() => Promise.resolve(INGREDIENT_SEARCH));
+    });
+
+    test('A new entry should be added', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MealItemForm mealId={123} planId={987} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+        await fillInEntry(user);
+
+        // Assert
+        expect(screen.getByDisplayValue('Baguette with cheese')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('120')).toBeInTheDocument();
+        expect(mutateEditMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toBeCalled();
+        expect(mutateAddMock).toHaveBeenCalledWith({
+            amount: "120",
+            ingredient: 1234,
+            meal: 123,
+            // eslint-disable-next-line camelcase
+            weight_unit: null,
+        });
+    });
+    test('An existing entry should be updated', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MealItemForm mealId={123} planId={987} item={TEST_MEAL_ITEM_1} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+        await fillInEntry(user);
+
+        // Assert
+        expect(screen.getByDisplayValue('Baguette with cheese')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('120')).toBeInTheDocument();
+        expect(mutateAddMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toBeCalled();
+        expect(mutateEditMock).toHaveBeenCalledWith({
+            id: 42,
+            amount: "120",
+            ingredient: 1234,
+            meal: 123,
+            // eslint-disable-next-line camelcase
+            weight_unit: null,
+        });
+    });
+});

src/components/Nutrition/widgets/forms/MealItemForm.tsx

@@ -1,6 +1,6 @@
 import { Button, Stack, TextField } from "@mui/material";
 import { MealItem } from "components/Nutrition/models/mealItem";
-import { useAddMealItemQuery, useEditMealItemQuery } from "components/Nutrition/queries/mealItem";
+import { useAddMealItemQuery, useEditMealItemQuery } from "components/Nutrition/queries";
 import { IngredientAutocompleter } from "components/Nutrition/widgets/IngredientAutcompleter";
 import { Form, Formik } from "formik";
 import { useTranslation } from "react-i18next";
@@ -43,7 +43,6 @@ export const MealItemForm = ({ planId, item, mealId, closeFn }: MealItemFormProp
                 const data = {
                     ...values,
                     meal: mealId,
-                    item: item?.id,
                     // eslint-disable-next-line camelcase
                     weight_unit: null
                 };

src/components/Nutrition/widgets/forms/NutritionDiaryEntryForm.test.tsx

@@ -2,7 +2,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, render, screen, within } from '@testing-library/react';
 import userEvent from "@testing-library/user-event";
 import { UserEvent } from "@testing-library/user-event/setup/setup";
-
 import { useAddDiaryEntryQuery, useEditDiaryEntryQuery } from "components/Nutrition/queries";
 import { NutritionDiaryEntryForm } from "components/Nutrition/widgets/forms/NutritionDiaryEntryForm";
 import React from 'react';