@wger-project/react-components 25.10.16

package/src/components/WorkoutRoutines/widgets/forms/DayForm.test.tsx

@@ -0,0 +1,86 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { useProfileQuery } from "components/User/queries/profile";
+import { DayForm } from "components/WorkoutRoutines/widgets/forms/DayForm";
+import { editDay } from "services";
+import { testQueryClient } from "tests/queryClient";
+import { testProfileDataVerified } from "tests/userTestdata";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+
+jest.mock("services");
+jest.mock("components/User/queries/profile");
+const mockEditDay = editDay as jest.Mock;
+const mockUseProfileQuery = useProfileQuery as jest.Mock;
+
+
+describe('Tests for the DayForm', () => {
+
+    let user: ReturnType<typeof userEvent.setup>;
+
+    beforeEach(() => {
+        user = userEvent.setup();
+        mockEditDay.mockClear();
+
+        mockUseProfileQuery.mockImplementation(() => (
+            { isLoading: false, data: testProfileDataVerified }
+        ));
+    });
+
+    function renderWidget() {
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <DayForm
+                    day={testRoutine1.days[0]}
+                    routineId={1}
+                    setSelectedDayIndex={jest.fn()}
+                />
+            </QueryClientProvider>
+        );
+    }
+
+
+    test('smoke test - just render the form', async () => {
+
+        // Act
+        renderWidget();
+
+        // Assert
+        expect(screen.getByRole('textbox', { name: /name/i })).toHaveValue('Every day is leg day 🦵🏻');
+        expect(screen.getByRole('switch', { name: /routines\.restday/i })).not.toBeChecked();
+        expect(screen.getByRole('switch', { name: /routines\.needslogstoadvance/i })).not.toBeChecked();
+        expect(screen.getByRole('textbox', { name: /description/i })).toHaveValue('');
+    });
+
+
+    test('correct data sent to the server', async () => {
+
+        // Act
+        renderWidget();
+
+        const nameInput = screen.getByRole('textbox', { name: /name/i });
+        await user.clear(nameInput);
+        await user.type(nameInput, 'New name');
+
+        const descriptionInput = screen.getByRole('textbox', { name: /description/i });
+        await user.clear(descriptionInput);
+        await user.type(descriptionInput, 'New description');
+
+        await user.click(screen.getByRole('button', { name: /save/i }));
+
+        // Assert
+        expect(mockEditDay).toHaveBeenCalledTimes(1);
+        expect(mockEditDay).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 5,
+                routineId: 1,
+                order: 1,
+                name: 'New name',
+                description: 'New description',
+                isRest: false,
+                needLogsToAdvance: false
+            })
+        );
+    });
+});

package/src/components/WorkoutRoutines/widgets/forms/DayForm.tsx

@@ -0,0 +1,202 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FormControlLabel,
+    IconButton,
+    Switch,
+    Tooltip
+} from "@mui/material";
+import LoadingButton from "@mui/material/Button";
+import Grid from '@mui/material/Grid';
+import { WgerTextField } from "components/Common/forms/WgerTextField";
+import { DeleteConfirmationModal } from "components/Core/Modals/DeleteConfirmationModal";
+import { Day } from "components/WorkoutRoutines/models/Day";
+import { useDeleteDayQuery, useEditDayQuery } from "components/WorkoutRoutines/queries";
+import { DefaultRoundingMenu } from "components/WorkoutRoutines/widgets/forms/RoutineForm";
+import { Form, Formik } from "formik";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import * as Yup from 'yup';
+
+export const DayForm = (props: {
+    day: Day,
+    routineId: number,
+    setSelectedDayIndex: (day: number | null) => void
+}) => {
+    const { t } = useTranslation();
+    const editDayQuery = useEditDayQuery(props.routineId);
+    const deleteDayQuery = useDeleteDayQuery(props.routineId);
+
+    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+    const [openDialog, setOpenDialog] = useState(false);
+    const [isRestDay, setIsRestDay] = useState(props.day.isRest);
+
+    const handleRestDayChange = () => {
+        if (isRestDay) {
+            setIsRestDay(false);
+            handleSubmit({ isRest: false });
+        } else {
+            setOpenDialog(true);
+        }
+    };
+    const handleDialogClose = () => setOpenDialog(false);
+    const handleConfirmRestChange = () => {
+        setIsRestDay(true);
+        handleSubmit({ isRest: true });
+        setOpenDialog(false);
+    };
+
+    const handleDeleteDay = () => setOpenDeleteDialog(true);
+
+    const handleConfirmDeleteDay = () => {
+        props.setSelectedDayIndex(null);
+        deleteDayQuery.mutate(props.day.id!);
+        setOpenDeleteDialog(false);
+    };
+
+    const handleCancelDeleteDay = () => setOpenDeleteDialog(false);
+
+
+    const nameMinLength = 3;
+    const nameMaxLength = 20;
+    const descriptionMaxLength = 1000;
+
+    const validationSchema = Yup.object().shape({
+        name: Yup.string()
+            .max(nameMaxLength, t('forms.maxLength', { chars: nameMaxLength }))
+            .min(nameMinLength, t('forms.minLength', { chars: nameMinLength }))
+            .required('Name is required'),
+        description: Yup.string()
+            .max(descriptionMaxLength, t('forms.maxLength', { chars: descriptionMaxLength })),
+        isRest: Yup.boolean(),
+        needsLogsToAdvance: Yup.boolean()
+    });
+
+    const handleSubmit = (values: Partial<{
+        name: string,
+        description: string,
+        isRest: boolean,
+        needsLogsToAdvance: boolean
+    }>) => editDayQuery.mutate(Day.clone(
+        props.day,
+        {
+            ...(values.name !== undefined && { name: values.name }),
+            ...(values.description !== undefined && { description: values.description }),
+            ...({ isRest: values.isRest }),
+            ...(values.needsLogsToAdvance !== undefined && { needLogsToAdvance: values.needsLogsToAdvance }),
+        })
+    );
+
+    return <>
+        <Formik
+            initialValues={{
+                name: props.day.name,
+                description: props.day.description,
+                isRest: props.day.isRest,
+                needsLogsToAdvance: props.day.needLogsToAdvance
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, { setSubmitting }) => {
+                handleSubmit(values);
+                setSubmitting(false);
+            }}
+            initialTouched={{ name: true, description: true, isRest: true, needsLogsToAdvance: true }}
+        >
+            {(formik) => (
+                <Form>
+                    <Grid container spacing={2}>
+                        <Grid size={{ xs: 12, sm: 6 }}>
+                            <WgerTextField
+                                fieldName="name"
+                                title="Name"
+                                fieldProps={{ disabled: isRestDay }}
+                            />
+                        </Grid>
+                        <Grid size={{ xs: 6, sm: 2 }}>
+                            <FormControlLabel
+                                control={<Switch checked={isRestDay} onChange={handleRestDayChange} />}
+                                label={t('routines.restDay')} />
+                        </Grid>
+                        <Grid size={{ xs: 6, sm: 4 }}>
+                            <FormControlLabel
+                                disabled={isRestDay}
+                                control={<Switch
+                                    checked={formik.values.needsLogsToAdvance}
+                                    {...formik.getFieldProps('needsLogsToAdvance')}
+                                />}
+                                label={t('routines.needsLogsToAdvance')} />
+                            <Tooltip title={t('routines.needsLogsToAdvanceHelpText')}>
+                                <IconButton onClick={() => {
+                                }}>
+                                    <HelpOutlineIcon fontSize="small" />
+                                </IconButton>
+                            </Tooltip>
+                        </Grid>
+                        <Grid size={12}>
+                            <WgerTextField
+                                fieldName="description"
+                                title="Description"
+                                fieldProps={{ multiline: true, rows: 4, disabled: isRestDay }}
+                            />
+                        </Grid>
+
+                        <Grid size={8}>
+                            {editDayQuery.isPending
+                                ? <LoadingButton loading variant="contained" color="primary">
+                                    {t('save')}
+                                </LoadingButton>
+                                : <Button
+                                    variant="contained"
+                                    color="primary"
+                                    type="submit"
+                                    disabled={isRestDay}
+                                >
+                                    {t('save')}
+                                </Button>
+                            }
+
+                            &nbsp;
+
+                            <Button
+                                variant="outlined"
+                                startIcon={<DeleteIcon />}
+                                onClick={handleDeleteDay}
+                                disabled={editDayQuery.isPending}
+                            >
+                                {t('delete')}
+                            </Button>
+                        </Grid>
+                        <Grid size={4} sx={{ display: "flex", justifyContent: "flex-end" }}>
+                            <DefaultRoundingMenu routineId={props.routineId} />
+                        </Grid>
+                    </Grid>
+
+                    <Dialog open={openDialog} onClose={handleDialogClose}>
+                        <DialogTitle>{t('routines.confirmRestDay')}</DialogTitle>
+                        <DialogContent>
+                            {t('routines.confirmRestDayHelpText')}
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={handleDialogClose}>{t('cancel')}</Button>
+                            <Button onClick={handleConfirmRestChange}>{t('continue')}</Button>
+                        </DialogActions>
+                    </Dialog>
+
+                    <DeleteConfirmationModal
+                        title={t('deleteConfirmation', { name: props.day.getDisplayName() })}
+                        message={t('routines.deleteDayConfirmation')}
+                        isOpen={openDeleteDialog}
+                        closeFn={handleCancelDeleteDay}
+                        deleteFn={handleConfirmDeleteDay}
+                    />
+                </Form>
+            )}
+        </Formik>
+    </>;
+};
+

package/src/components/WorkoutRoutines/widgets/forms/ProgressionForm.test.tsx

@@ -0,0 +1,176 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { BaseConfig } from "components/WorkoutRoutines/models/BaseConfig";
+import { ProgressionForm } from "components/WorkoutRoutines/widgets/forms/ProgressionForm";
+import { processBaseConfigs } from "services";
+import { testQueryClient } from "tests/queryClient";
+
+
+jest.mock("services");
+const mockProcessBaseConfigs = processBaseConfigs as jest.Mock;
+
+describe('Tests for the ProgressionForm', () => {
+
+    let user: ReturnType<typeof userEvent.setup>;
+
+    const testConfigs = [
+        new BaseConfig({
+            id: 123,
+            slotEntryId: 10,
+            iteration: 1,
+            value: 5,
+        }),
+        new BaseConfig({
+            id: 456,
+            slotEntryId: 10,
+            iteration: 2,
+            value: 1,
+            operation: '+',
+            repeat: true
+        })
+    ];
+
+    const testMaxConfigs = [
+        new BaseConfig({
+            id: 124,
+            slotEntryId: 10,
+            iteration: 1,
+            value: 6,
+        }),
+        new BaseConfig({
+            id: 457,
+            slotEntryId: 10,
+            iteration: 2,
+            value: 2,
+            operation: '+',
+            repeat: true
+        })
+    ];
+
+    beforeEach(() => {
+        user = userEvent.setup();
+        mockProcessBaseConfigs.mockClear();
+    });
+
+    function renderWidget() {
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <ProgressionForm
+                    configs={testConfigs}
+                    configsMax={testMaxConfigs}
+                    type={'weight'}
+                    slotEntryId={10}
+                    routineId={1}
+                    iterations={[1, 2]}
+                    cycleLength={7}
+                />
+            </QueryClientProvider>
+        );
+    }
+
+
+    test('smoke test - just render the form', async () => {
+
+        // Act
+        renderWidget();
+
+        // Assert
+        expect(screen.getByText('value')).toBeInTheDocument();
+        expect(screen.queryAllByText('routines.operation')).toHaveLength(3);
+        expect(screen.queryAllByText('routines.step')).toHaveLength(3);
+        expect(screen.getByText('routines.requirements')).toBeInTheDocument();
+        expect(screen.getByText('routines.repeat')).toBeInTheDocument();
+        expect(screen.queryAllByText('routines.weekNr')).toHaveLength(2);
+
+        const minFields = screen.getAllByLabelText('min');
+        expect(minFields[0]).toHaveValue('5');
+        expect(minFields[1]).toHaveValue('1');
+
+        const maxFields = screen.getAllByLabelText('max');
+        expect(maxFields[0]).toHaveValue('6');
+        expect(maxFields[1]).toHaveValue('2');
+
+    });
+
+    test('test that the save button is disabled till a value is changed', async () => {
+        // Act
+        renderWidget();
+
+        // Assert
+        const saveButton = screen.getByRole('button', { name: /save/i });
+        expect(saveButton).toBeDisabled();
+
+        const valueField = screen.getAllByLabelText('max')[0];
+        await user.clear(valueField);
+        await user.type(valueField, '14');
+        expect(saveButton).toBeEnabled();
+    });
+
+    test('test that the correct data is sent to the server - editing', async () => {
+        // Act
+        renderWidget();
+
+        // Assert
+        const saveButton = screen.getByRole('button', { name: /save/i });
+
+        const valueField = screen.getAllByLabelText('max')[0];
+        await user.clear(valueField);
+        await user.type(valueField, '7');
+        await user.click(saveButton);
+
+        expect(mockProcessBaseConfigs).toHaveBeenCalledTimes(1);
+        expect(mockProcessBaseConfigs).toHaveBeenNthCalledWith(1,
+            {
+                "maxValues": {
+                    "apiPath": "max-weight-config",
+                    "toAdd": [],
+                    "toDelete": [],
+                    "toEdit": [{
+                        "id": 124,
+                        "iteration": 1,
+                        "operation": "r",
+                        "repeat": false,
+                        "requirements": { "rules": [] },
+                        "slot_entry": 10,
+                        "step": "abs",
+                        "value": "7"
+                    }, {
+                        "id": 457,
+                        "iteration": 2,
+                        "operation": "+",
+                        "repeat": true,
+                        "requirements": { "rules": [] },
+                        "slot_entry": 10,
+                        "step": "abs",
+                        "value": "2"
+                    }]
+                },
+                "values": {
+                    "apiPath": "weight-config",
+                    "toAdd": [],
+                    "toDelete": [],
+                    "toEdit": [{
+                        "id": 123,
+                        "iteration": 1,
+                        "operation": "r",
+                        "repeat": false,
+                        "requirements": { "rules": [] },
+                        "slot_entry": 10,
+                        "step": "abs",
+                        "value": "5"
+                    }, {
+                        "id": 456,
+                        "iteration": 2,
+                        "operation": "+",
+                        "repeat": true,
+                        "requirements": { "rules": [] },
+                        "slot_entry": 10,
+                        "step": "abs",
+                        "value": "1"
+                    }]
+                }
+            }
+        );
+    });
+});