@wger-project/react-components 25.10.16

package/src/components/Nutrition/widgets/forms/MealForm.test.tsx

@@ -0,0 +1,85 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Meal } from "components/Nutrition/models/meal";
+import { useAddMealQuery, useEditMealQuery } from "components/Nutrition/queries";
+import { MealForm } from "components/Nutrition/widgets/forms/MealForm";
+import { TEST_MEAL_1 } from "tests/nutritionTestdata";
+
+jest.mock('components/Nutrition/queries');
+
+describe('Test the MealForm 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();
+
+        (useEditMealQuery as jest.Mock).mockImplementation(() => ({ mutate: mutateEditMock }));
+        (useAddMealQuery as jest.Mock).mockImplementation(() => ({ mutate: mutateAddMock }));
+    });
+
+    test('a new meal is correctly added', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MealForm planId={987} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+
+        const nameInput = screen.getByLabelText('description');
+        await user.clear(nameInput);
+        await user.type(nameInput, '2nd breakfast');
+
+        const submitButton = screen.getByRole('button', { name: 'submit' });
+        await user.click(submitButton);
+
+        // Assert
+        expect(mutateEditMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateAddMock).toHaveBeenCalledWith(new Meal({
+            name: '2nd breakfast',
+            planId: 987,
+            time: expect.any(Date),
+        }));
+    });
+
+    test('an existing meal is correctly edited', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MealForm planId={987} meal={TEST_MEAL_1} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+
+        const nameInput = screen.getByLabelText('description');
+        await user.clear(nameInput);
+        await user.type(nameInput, '2nd breakfast');
+
+        const submitButton = screen.getByRole('button', { name: 'submit' });
+        await user.click(submitButton);
+
+        // Assert
+        expect(mutateAddMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateEditMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 78,
+                name: '2nd breakfast',
+                order: 2,
+                planId: 123,
+                time: TEST_MEAL_1.time
+            })
+        );
+    });
+});

package/src/components/Nutrition/widgets/forms/MealForm.tsx

@@ -0,0 +1,105 @@
+import { Button, Stack, TextField } from "@mui/material";
+import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { Meal } from "components/Nutrition/models/meal";
+import { useAddMealQuery, useEditMealQuery } from "components/Nutrition/queries";
+import { Form, Formik } from "formik";
+import { DateTime } from "luxon";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import * as yup from "yup";
+
+interface MealFormProps {
+    planId: number,
+    meal?: Meal,
+    closeFn?: () => void,
+}
+
+export const MealForm = ({ meal, planId, closeFn }: MealFormProps) => {
+
+    const [t, i18n] = useTranslation();
+    const addMealQuery = useAddMealQuery(planId);
+    const editMealQuery = useEditMealQuery(planId);
+    const validationSchema = yup.object({
+        name: yup
+            .string()
+            .required()
+            .max(25, t('forms.maxLength', { chars: '25' }))
+            .min(3, t('forms.minLength', { chars: '3' })),
+        time: yup
+            .date()
+            .required()
+    });
+
+
+    return (
+        <Formik
+            initialValues={{
+                name: meal ? meal.name : "",
+                time: meal ? meal.time : new Date()
+            }}
+            validationSchema={validationSchema}
+            onSubmit={async (values) => {
+                if (!(values.time instanceof Date)) {
+                    // @ts-ignore - The result from the datepicker is a Luxon DateTime object, not a JS DateTime
+                    values.time = values.time.toJSDate();
+                }
+
+                if (meal) {
+                    // Edit
+                    const newMeal = Meal.clone(meal, { name: values.name, time: values.time });
+                    editMealQuery.mutate(newMeal);
+
+                } else {
+                    // Add
+                    addMealQuery.mutate(new Meal({
+                        planId: planId,
+                        name: values.name,
+                        time: values.time,
+                    }));
+                }
+
+                if (closeFn) {
+                    closeFn();
+                }
+            }}
+        >
+            {formik => (
+                <Form>
+                    <Stack spacing={2}>
+                        <TextField
+                            fullWidth
+                            id="name"
+                            label={t('description')}
+                            error={formik.touched.name && Boolean(formik.errors.name)}
+                            helperText={formik.touched.name && formik.errors.name}
+                            {...formik.getFieldProps('name')}
+                        />
+
+                        <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={i18n.language}>
+                            <TimePicker
+                                label={t('timeOfDay')}
+                                value={formik.values.time !== null ? DateTime.fromJSDate(formik.values.time) : null}
+                                onChange={(newValue) => formik.setFieldValue('time', newValue ? newValue.toJSDate() : null)}
+                            />
+                        </LocalizationProvider>
+                        <Stack direction="row" justifyContent="end" spacing={2}>
+                            {closeFn !== undefined
+                                && <Button color="primary" variant="outlined" onClick={() => closeFn()}>
+                                    {t('close')}
+                                </Button>}
+                            <Button
+                                disabled={addMealQuery.isPending || editMealQuery.isPending}
+                                color="primary"
+                                variant="contained"
+                                type="submit"
+                            >
+                                {t('submit')}
+                            </Button>
+                        </Stack>
+                    </Stack>
+                </Form>
+            )}
+        </Formik>
+    );
+};

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

@@ -0,0 +1,106 @@
+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 { TEST_INGREDIENT_1, TEST_INGREDIENT_2 } from "tests/ingredientTestdata";
+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 the 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();
+
+        (useEditMealItemQuery as jest.Mock).mockImplementation(() => ({ mutate: mutateEditMock }));
+        (useAddMealItemQuery as jest.Mock).mockImplementation(() => ({ mutate: mutateAddMock }));
+        (searchIngredient as jest.Mock).mockImplementation(() => Promise.resolve([TEST_INGREDIENT_1, TEST_INGREDIENT_2]));
+    });
+
+    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('0% fat Greek style yogurt')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('120')).toBeInTheDocument();
+        expect(mutateEditMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateAddMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                mealId: 123,
+                amount: 120,
+                ingredientId: 101,
+                weightUnitId: null,
+            })
+        );
+    });
+    test('An existing entry should be updated', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MealItemForm planId={987} item={TEST_MEAL_ITEM_1} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+        await fillInEntry(user);
+
+        // Assert
+        expect(screen.getByDisplayValue('1001 Nacht Haferbrei')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('120')).toBeInTheDocument();
+        expect(mutateAddMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateEditMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 42,
+                mealId: 1001,
+                amount: 120,
+                order: 3,
+                ingredientId: 101,
+                weightUnitId: null,
+            })
+        );
+    });
+});

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

@@ -0,0 +1,118 @@
+import { Button, InputAdornment, Stack, TextField } from "@mui/material";
+import { Ingredient } from "components/Nutrition/models/Ingredient";
+import { MealItem } from "components/Nutrition/models/mealItem";
+import { useAddMealItemQuery, useDeleteMealItemQuery, useEditMealItemQuery } from "components/Nutrition/queries";
+import { IngredientAutocompleter } from "components/Nutrition/widgets/IngredientAutcompleter";
+import { Form, Formik } from "formik";
+import { useTranslation } from "react-i18next";
+import * as yup from "yup";
+
+type MealItemFormProps =
+    | { planId: number; item: MealItem; closeFn?: () => void; mealId?: number }
+    | { planId: number; mealId: number; item?: undefined; closeFn?: () => void };
+
+export const MealItemForm = ({ planId, item, mealId, closeFn }: MealItemFormProps) => {
+
+    const [t] = useTranslation();
+    const addMealItemQuery = useAddMealItemQuery(planId);
+    const editMealItemQuery = useEditMealItemQuery(planId);
+    const deleteMealItemQuery = useDeleteMealItemQuery(planId);
+
+    const handleDelete = () => {
+        if (item) {
+            deleteMealItemQuery.mutate(item.id!);
+        }
+
+        if (closeFn) {
+            closeFn();
+        }
+    };
+
+    const validationSchema = yup.object({
+        amount: yup
+            .number()
+            .required(t('forms.fieldRequired'))
+            .max(1000, t('forms.maxValue', { value: '1000' }))
+            .min(1, t('forms.minValue', { value: '1' })),
+        ingredient: yup
+            .number()
+            .required(t('forms.fieldRequired')),
+    });
+
+
+    return (
+        <Formik
+            initialValues={{
+                amount: item ? item.amount : 0,
+                ingredient: item ? item.ingredientId : 0,
+            }}
+            validationSchema={validationSchema}
+            onSubmit={async (values) => {
+
+                // Just to make sure we get a number
+                const newAmount = Math.round(values.amount);
+
+                if (item) {
+                    // Edit
+                    const newMealItem = MealItem.clone(item, {
+                        amount: newAmount,
+                        ingredientId: values.ingredient,
+                        weightUnitId: null,
+                    });
+                    editMealItemQuery.mutate(newMealItem);
+                } else {
+                    // Add
+                    addMealItemQuery.mutate(new MealItem({
+                        mealId: mealId,
+                        amount: newAmount,
+                        ingredientId: values.ingredient,
+                        order: 1,
+                    }));
+                }
+
+                if (closeFn) {
+                    closeFn();
+                }
+            }}
+        >
+            {formik => (
+                <Form>
+                    <Stack spacing={2}>
+                        <IngredientAutocompleter
+                            callback={(value: Ingredient | null) => formik.setFieldValue('ingredient', value ? value.id : null)}
+                            initialIngredient={item ? item.ingredient : null}
+                        />
+                        <TextField
+                            fullWidth
+                            id="amount"
+                            label={'amount'}
+                            InputProps={{
+                                endAdornment: <InputAdornment position="end">{t('nutrition.gramShort')}</InputAdornment>
+                            }}
+
+                            error={formik.touched.amount && Boolean(formik.errors.amount)}
+                            helperText={formik.touched.amount && formik.errors.amount}
+                            {...formik.getFieldProps('amount')}
+                        />
+
+                        <Stack direction="row" justifyContent="end" spacing={2}>
+                            {(closeFn !== undefined && item !== undefined)
+                                && <Button color="error" variant="outlined" onClick={handleDelete}>
+                                    {t('delete')}
+                                </Button>}
+
+                            {closeFn !== undefined
+                                && <Button color="primary" variant="outlined" onClick={() => closeFn()}>
+                                    {t('close')}
+                                </Button>}
+
+                            <Button color="primary" variant="contained" type="submit">
+                                {t('submit')}
+                            </Button>
+                        </Stack>
+                    </Stack>
+                </Form>
+            )}
+        </Formik>
+    );
+};

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

@@ -0,0 +1,165 @@
+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 { DiaryEntry } from "components/Nutrition/models/diaryEntry";
+import { useAddDiaryEntryQuery, useEditDiaryEntryQuery } from "components/Nutrition/queries";
+import { NutritionDiaryEntryForm } from "components/Nutrition/widgets/forms/NutritionDiaryEntryForm";
+import React from 'react';
+import { searchIngredient } from "services";
+import { TEST_INGREDIENT_1, TEST_INGREDIENT_2 } from "tests/ingredientTestdata";
+import { TEST_DIARY_ENTRY_1 } from "tests/nutritionDiaryTestdata";
+
+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 200 ms between the input and the search
+    await act(async () => {
+        await new Promise((r) => setTimeout(r, 250));
+    });
+
+    // Select the 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();
+
+        (useEditDiaryEntryQuery as jest.Mock).mockImplementation(() => ({ mutate: mutateEditMock }));
+        (useAddDiaryEntryQuery as jest.Mock).mockImplementation(() => ({ mutate: mutateAddMock }));
+        (searchIngredient as jest.Mock).mockImplementation(() => Promise.resolve([TEST_INGREDIENT_1, TEST_INGREDIENT_2]));
+    });
+
+
+    test('A new entry should be added - no meal', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <NutritionDiaryEntryForm planId={123} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+        await fillInEntry(user);
+
+        // Assert
+        expect(screen.getByDisplayValue('0% fat Greek style yogurt')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('120')).toBeInTheDocument();
+        expect(mutateEditMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateAddMock).toHaveBeenCalledWith(
+            new DiaryEntry({
+                amount: 120,
+                datetime: expect.any(Date),
+                ingredientId: 101,
+                planId: 123,
+                mealId: null,
+                weightUnitId: null,
+            })
+        );
+    });
+    test('A new entry should be added - passing meal ID', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <NutritionDiaryEntryForm planId={123} mealId={456} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+        await fillInEntry(user);
+
+        // Assert
+        expect(screen.getByDisplayValue('0% fat Greek style yogurt')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('120')).toBeInTheDocument();
+        expect(mutateEditMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateAddMock).toHaveBeenCalledWith(
+            new DiaryEntry({
+                amount: 120,
+                datetime: expect.any(Date),
+                ingredientId: 101,
+                planId: 123,
+                mealId: 456,
+                weightUnitId: null,
+
+            })
+        );
+    });
+
+    test('An existing diary entry should be edited', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <NutritionDiaryEntryForm planId={123} entry={TEST_DIARY_ENTRY_1} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+        await fillInEntry(user);
+
+        // Assert
+        expect(mutateAddMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateEditMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 42,
+                amount: 120,
+                mealId: 78,
+                planId: 123,
+                ingredientId: 101,
+            })
+        );
+    });
+
+    test('An existing diary entry should be edited - passing a meal Id', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <NutritionDiaryEntryForm planId={123} mealId={456} entry={TEST_DIARY_ENTRY_1} closeFn={closeFnMock} />
+            </QueryClientProvider>
+        );
+        await fillInEntry(user);
+
+        // Assert
+        expect(mutateAddMock).not.toHaveBeenCalled();
+        expect(closeFnMock).toHaveBeenCalled();
+        expect(mutateEditMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 42,
+                planId: 123,
+                mealId: 456,
+                amount: 120,
+                ingredientId: 101,
+                weightUnitId: null,
+            })
+        );
+    });
+});