@wger-project/react-components 25.10.16

package/src/components/WorkoutRoutines/Detail/RoutineDetailsTable.tsx

@@ -0,0 +1,371 @@
+import FlagCircleIcon from '@mui/icons-material/FlagCircle';
+import NorthEastIcon from "@mui/icons-material/NorthEast";
+import SouthEastIcon from "@mui/icons-material/SouthEast";
+import {
+    Container,
+    FormControlLabel,
+    Stack,
+    Switch,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography,
+    useTheme
+} from "@mui/material";
+import { styled } from '@mui/material/styles';
+import { WgerContainerFullWidth } from "components/Core/Widgets/Container";
+import { RenderLoadingQuery } from "components/Core/Widgets/RenderLoadingQuery";
+import { Language } from "components/Exercises/models/language";
+import { useLanguageQuery } from "components/Exercises/queries";
+import { Day } from "components/WorkoutRoutines/models/Day";
+import { Routine } from "components/WorkoutRoutines/models/Routine";
+import { RoutineLogData } from "components/WorkoutRoutines/models/RoutineLogData";
+import { SetConfigData } from "components/WorkoutRoutines/models/SetConfigData";
+import { SlotEntry } from "components/WorkoutRoutines/models/SlotEntry";
+import { WorkoutLog } from "components/WorkoutRoutines/models/WorkoutLog";
+import { useRoutineDetailQuery, useRoutineLogData } from "components/WorkoutRoutines/queries";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { getLanguageByShortName } from "services";
+import { makeLink, WgerLink } from "utils/url";
+
+
+const PREFIX = 'RoutineDetailsTable';
+
+const classes = {
+    stickyColumn: `${PREFIX}-stickyColumn`,
+    stickyHeader: `${PREFIX}-stickyHeader`,
+    whiteBg: `${PREFIX}-whiteBg`
+};
+
+const StyledContainer = styled(Container)({
+    [`& .${classes.stickyColumn}`]: {
+        position: 'sticky',
+        left: 0,
+        // background: 'white',
+        zIndex: 1,
+    },
+    [`& .${classes.stickyHeader}`]: {
+        position: 'sticky',
+        top: 0,
+        zIndex: 2,
+        background: 'white',
+    },
+
+    [`& .${classes.whiteBg}`]: {
+        backgroundColor: 'white',
+    }
+});
+
+
+export const RoutineDetailsTable = () => {
+    const { t, i18n } = useTranslation();
+    const params = useParams<{ routineId: string }>();
+    const routineId = params.routineId ? parseInt(params.routineId) : 0;
+    const routineQuery = useRoutineDetailQuery(routineId);
+    const routineLogDataQuery = useRoutineLogData(routineId);
+    const [showLogs, setShowLogs] = React.useState(false);
+
+    return <RenderLoadingQuery
+        query={routineQuery}
+        child={routineQuery.isSuccess
+            && <WgerContainerFullWidth
+                title={routineQuery.data!.name}
+                backToUrl={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: routineId })}
+                maxWidth={false}
+            >
+                <Stack>
+                    <FormControlLabel
+                        control={<Switch checked={showLogs}
+                                         onChange={(event, checked) => setShowLogs(checked)} />}
+                        label={t('routines.alsoShowLogs')} />
+                    <RoutineTable
+                        routine={routineQuery.data!}
+                        showLogs={showLogs}
+                        logData={routineLogDataQuery.data!}
+                    />
+                </Stack>
+            </WgerContainerFullWidth>
+        } />;
+};
+
+
+export function compareValue(value: number | null | undefined, from: number | null | undefined, to: number | null | undefined): 'lower' | 'higher' | 'match' | null {
+    if (value === null || value === undefined) {
+        return null;
+    }
+
+    if (from !== null && from !== undefined && to !== null && to !== undefined) {
+        if (value < from) {
+            return 'lower';
+        } else if (value > to) {
+            return 'higher';
+        } else {
+            return 'match';
+        }
+    } else if (from !== null && from !== undefined) {
+        if (value < from) {
+            return 'lower';
+        } else if (value > from) {
+            return 'higher';
+        } else {
+            return 'match';
+        }
+    }
+
+    return null;
+}
+
+export const RoutineTable = (props: {
+    routine: Routine,
+    showLogs?: boolean,
+    logData?: RoutineLogData[]
+}) => {
+    const { t, i18n } = useTranslation();
+    const theme = useTheme();
+
+    const languageQuery = useLanguageQuery();
+    const showLogs = props.showLogs ?? false;
+    const routineLogData = props.logData ?? [];
+
+    let language: Language | undefined = undefined;
+    if (languageQuery.isSuccess) {
+        language = getLanguageByShortName(
+            i18n.language,
+            languageQuery.data!
+        );
+    }
+
+    const groupedLogs: { [key: number]: WorkoutLog[] } = {};
+    for (const logData of routineLogData) {
+        for (const log of logData.logs) {
+            if (log.iteration === null) {
+                continue;
+            }
+
+            if (!groupedLogs[log.iteration]) {
+                groupedLogs[log.iteration] = [];
+            }
+            groupedLogs[log.iteration].push(log);
+        }
+    }
+
+    const iterations = Object.keys(props.routine.groupedDayDataByIteration).map((iteration) => parseInt(iteration));
+
+    function getTableRowHeader() {
+        return <TableRow>
+            {iterations.map((iteration) => {
+
+                const out = iteration === 1
+                    ? <TableCell className={classes.stickyColumn}></TableCell>
+                    : null;
+
+                return <React.Fragment key={`header-${iteration}`}>
+                    {out}
+                    <TableCell align={'center'}>{t('routines.sets')}</TableCell>
+                    <TableCell align={'center'} sx={{ minWidth: 40 }}>{t('routines.reps')}</TableCell>
+                    <TableCell align={'center'} sx={{ minWidth: 40 }}>{t('weight')}</TableCell>
+                    <TableCell align={'center'} sx={{ minWidth: 60 }}>{t('routines.restTime')}</TableCell>
+                    <TableCell align={'center'} sx={{ minWidth: 40 }}>{t('routines.rir')}</TableCell>
+                </React.Fragment>;
+            })}
+        </TableRow>;
+    }
+
+    function getTableRowWeekTitle() {
+        return <TableRow>
+            {iterations.map((iteration) => {
+                const placeholder = iteration === 1
+                    ? <TableCell className={classes.stickyColumn}></TableCell>
+                    : null;
+
+                return <React.Fragment key={`header-iteration-${iteration}`}>
+                    {placeholder}
+                    <TableCell colSpan={5}>
+                        <Typography variant={'h6'}>
+                            {t('routines.weekNr', { number: iteration })}
+                        </Typography>
+                    </TableCell>
+                </React.Fragment>;
+            })}
+        </TableRow>;
+    }
+
+    function getTableRowPlanned(slotEntry: SlotEntry, day: Day) {
+        const sx = { borderBottomWidth: showLogs ? 0 : null, minWidth: 40 };
+
+        function formatContent(setConfig: SetConfigData | null, value: number | undefined | null, maxValue: number | undefined | null) {
+            return <>
+                {setConfig === null || value === null ? '-/-' : value}
+                {setConfig !== null && maxValue !== null && <> - {maxValue}</>}
+            </>;
+        }
+
+        return <TableRow>
+            <TableCell className={classes.stickyColumn} sx={{
+                minWidth: 150,
+                backgroundColor: "white",
+                borderBottomWidth: showLogs ? 0 : null
+            }}>{slotEntry.exercise?.getTranslation(language).name}</TableCell>
+            {iterations.map((iteration) => {
+                const setConfig = props.routine.getSetConfigData(day.id, iteration, slotEntry.id);
+
+                return <React.Fragment key={iteration}>
+                    <TableCell align={'center'} sx={sx}>
+                        {formatContent(setConfig, setConfig?.nrOfSets, setConfig?.maxNrOfSets)}
+                    </TableCell>
+                    <TableCell align={'center'} sx={sx}>
+                        {formatContent(setConfig, setConfig?.repetitions, setConfig?.maxRepetitions)}
+                    </TableCell>
+                    <TableCell align={'center'} sx={sx}>
+                        {formatContent(setConfig, setConfig?.weight, setConfig?.maxWeight)}
+                    </TableCell>
+                    <TableCell align={'center'} sx={sx}>
+                        {formatContent(setConfig, setConfig?.restTime, setConfig?.maxRestTime)}
+                    </TableCell>
+                    <TableCell align={'center'} sx={sx}>
+                        {formatContent(setConfig, setConfig?.rir, setConfig?.maxRir)}
+                    </TableCell>
+                </React.Fragment>;
+            })}
+        </TableRow>;
+    }
+
+    function getComparisonIcon(loggedValue: number | null, plannedValue: number | null | undefined, maxPlannedValue: number | null | undefined, higherIsBetter?: boolean) {
+
+        const comparison = compareValue(loggedValue, plannedValue, maxPlannedValue);
+        if (loggedValue === 105) {
+            console.log(loggedValue, plannedValue, maxPlannedValue, higherIsBetter, comparison);
+        }
+
+        const fontSize = 17;
+
+        // Switch the comparison color since e.g. for RiR lower is better
+        higherIsBetter = higherIsBetter ?? true;
+
+        if (comparison === null) {
+            return null;
+        }
+
+
+        if (comparison === 'lower') {
+            return <SouthEastIcon sx={{ fontSize: fontSize }} color={higherIsBetter ? "error" : "success"} />;
+        }
+        if (comparison === 'higher') {
+            return <NorthEastIcon sx={{ fontSize: fontSize }} color={higherIsBetter ? "success" : "error"} />;
+        }
+        return <FlagCircleIcon sx={{ fontSize: fontSize }} color={"success"} />;
+
+    }
+
+    function getTableRowLogged(slotEntry: SlotEntry, day: Day) {
+        return <TableRow>
+            <TableCell sx={{ verticalAlign: "top", backgroundColor: "white" }} className={classes.stickyColumn}>
+                <small>{t('nutrition.logged')}</small>
+            </TableCell>
+            {iterations.map((iteration) => {
+                const setConfig = props.routine.getSetConfigData(day.id, iteration, slotEntry.id);
+                const iterationLogs = groupedLogs[iteration] ?? [];
+
+                const logs = iterationLogs.filter((log) => log.slotEntryId === slotEntry.id);
+
+                return <React.Fragment key={iteration}>
+                    <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
+                    </TableCell>
+                    <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
+                        {logs.map((log, index) =>
+                            <Stack key={index}>
+                                <span>
+                                    {log.repetitions ?? '-/-'}
+                                    {getComparisonIcon(log.repetitions, setConfig?.repetitions, setConfig?.maxRepetitions)}
+                                </span>
+                            </Stack>
+                        )}
+                    </TableCell>
+                    <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
+                        {logs.map((log, index) =>
+                            <Stack key={index}>
+                                <span>
+                                    {log.weight ?? '-/-'}
+                                    {getComparisonIcon(log.weight, setConfig?.weight, setConfig?.maxWeight)}
+                                </span>
+                            </Stack>
+                        )}
+                    </TableCell>
+                    <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
+                        {logs.map((log, index) =>
+                            <Stack key={index}>
+                                <span>
+                                    {log.restTime ?? '-/-'}
+                                    {getComparisonIcon(log.restTime, setConfig?.restTime, setConfig?.maxRestTime)}
+                                </span>
+                            </Stack>
+                        )}
+                    </TableCell>
+                    <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
+                        {logs.map((log, index) =>
+                            <Stack key={index}>
+                                <span>
+                                    {log.rir ?? '-/-'}
+                                    {getComparisonIcon(log.rir, setConfig?.rir, setConfig?.maxRir, false)}
+                                </span>
+                            </Stack>
+                        )}
+                    </TableCell>
+                </React.Fragment>;
+            })}
+        </TableRow>;
+    }
+
+    function getTableContent() {
+        return <>
+            {props.routine.days.map((day) => {
+                return <React.Fragment key={day.id}>
+                    <TableRow>
+                        <TableCell
+                            sx={{ backgroundColor: theme.palette.action.hover }}
+                            className={classes.stickyColumn}
+                        >
+                            <b>{day.getDisplayName()}</b>
+                        </TableCell>
+                        <TableCell sx={{ backgroundColor: theme.palette.action.hover }} colSpan={5 * iterations.length}>
+                        </TableCell>
+                    </TableRow>
+
+                    {day.slots.map((slot, slotIndex) => {
+                        return <React.Fragment key={slotIndex}>
+                            {slot.entries.map((slotEntry, configIndex) => {
+                                return <React.Fragment key={configIndex}>
+                                    {getTableRowPlanned(slotEntry, day)}
+                                    {showLogs && getTableRowLogged(slotEntry, day)}
+                                </React.Fragment>;
+                            })}
+                        </React.Fragment>;
+                    })}
+                </React.Fragment>;
+            })}
+        </>;
+    }
+
+
+    return (
+        <StyledContainer maxWidth={false} sx={{ overflowX: 'scroll', display: 'flex', height: "80vh" }}>
+            <TableContainer>
+                <Table size="small">
+                    <TableHead className={classes.stickyHeader}>
+                        {getTableRowWeekTitle()}
+                        {getTableRowHeader()}
+                    </TableHead>
+                    <TableBody>
+                        {getTableContent()}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </StyledContainer>
+    );
+};
+

package/src/components/WorkoutRoutines/Detail/RoutineEdit.test.tsx

@@ -0,0 +1,51 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from '@testing-library/react';
+import { RoutineEdit } from "components/WorkoutRoutines/Detail/RoutineEdit";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getLanguages, getProfile, getRoutine } from "services";
+import { testLanguages } from "tests/exerciseTestdata";
+import { testQueryClient } from "tests/queryClient";
+import { testProfileDataVerified } from "tests/userTestdata";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the RoutineDetailsTable component", () => {
+
+    beforeEach(() => {
+        (getRoutine as jest.Mock).mockResolvedValue(testRoutine1);
+        (getProfile as jest.Mock).mockResolvedValue(testProfileDataVerified);
+        (getLanguages as jest.Mock).mockResolvedValue(testLanguages);
+    });
+
+    test('renders the form', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <MemoryRouter initialEntries={['/test/101']}>
+                    <Routes>
+                        <Route path="/test/:routineId" element={<RoutineEdit />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        await waitFor(() => {
+            expect(getRoutine).toHaveBeenCalled();
+            expect(getLanguages).toHaveBeenCalledTimes(1);
+        });
+        expect(screen.getByText('editName')).toBeInTheDocument();
+        expect(screen.queryAllByText('Every day is leg day 🦵🏻')).toHaveLength(3);
+        expect(screen.getByText('durationWeeksDays')).toBeInTheDocument();
+        expect(screen.queryAllByText('routines.restDay')).toHaveLength(3);
+        expect(screen.queryAllByText('Pull day')).toHaveLength(2);
+        expect(screen.queryAllByText('Full body routine')).toHaveLength(2);
+        expect(screen.getByText('routines.addDay')).toBeInTheDocument();
+        expect(screen.getByText('routines.resultingRoutine')).toBeInTheDocument();
+        expect(screen.queryAllByText('Squats')).toHaveLength(3);
+        expect(screen.getByText('4 Sets, 5 x 20 @ 2Rir')).toBeInTheDocument();
+    });
+});

package/src/components/WorkoutRoutines/Detail/RoutineEdit.tsx

@@ -0,0 +1,95 @@
+import { Box, Divider, Stack, Typography, useTheme } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerFullWidth } from "components/Core/Widgets/Container";
+import { useProfileQuery } from "components/User/queries/profile";
+import { RoutineTable } from "components/WorkoutRoutines/Detail/RoutineDetailsTable";
+import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
+import { DayDetails, DayDragAndDropGrid } from "components/WorkoutRoutines/widgets/DayDetails";
+import { RoutineForm } from "components/WorkoutRoutines/widgets/forms/RoutineForm";
+import { RoutineTemplateForm } from "components/WorkoutRoutines/widgets/forms/RoutineTemplateForm";
+import { RoutineDetailsCard } from "components/WorkoutRoutines/widgets/RoutineDetailsCard";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { makeLink, WgerLink } from "utils/url";
+
+export const RoutineEdit = () => {
+
+    const { t, i18n } = useTranslation();
+    const theme = useTheme();
+
+    const profileQuery = useProfileQuery();
+    const params = useParams<{ routineId: string }>();
+    const routineId = params.routineId ? parseInt(params.routineId) : 0;
+    const routineQuery = useRoutineDetailQuery(routineId);
+    const [selectedDayIndex, setSelectedDayIndex] = useState<number | null>(null);
+
+    if (routineQuery.isLoading || profileQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (routineQuery.isError) {
+        return <p>Error: {routineQuery.error.message}</p>;
+    }
+
+    const routine = routineQuery.data!;
+
+    if (selectedDayIndex === null && routine.days.length > 0) {
+        setSelectedDayIndex(0);
+    }
+
+
+    return <WgerContainerFullWidth
+        title={t('editName', { name: routine.name })}
+        backToUrl={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: routineId })}
+    >
+        <Grid container spacing={2}>
+
+            <Grid size={routine.isTemplate ? 8 : 12}>
+                <RoutineForm existingRoutine={routine} />
+            </Grid>
+            {routine.isTemplate && <Grid size={4}>
+                <Box height={20} />
+                <RoutineTemplateForm routine={routine} />
+            </Grid>}
+
+            <Grid size={12}>
+                <Box height={20} />
+                <DayDragAndDropGrid
+                    routineId={routineId}
+                    selectedDayIndex={selectedDayIndex}
+                    setSelectedDayIndex={setSelectedDayIndex}
+                />
+            </Grid>
+            {selectedDayIndex !== null && <>
+                <Grid size={12} sx={{ backgroundColor: theme.palette.grey[100], padding: 1 }}>
+                    <Box>
+                        <DayDetails
+                            day={routine.days[selectedDayIndex]}
+                            routineId={routineId}
+                            setSelectedDayIndex={setSelectedDayIndex}
+                        />
+                    </Box>
+                </Grid>
+            </>}
+        </Grid>
+
+
+        {routineQuery.data!.days.length > 0 && <Stack spacing={2} sx={{ mt: 2 }}>
+            <Box height={40} />
+            <Typography variant={"h4"}>
+                {t('routines.resultingRoutine')}
+            </Typography>
+            <Divider />
+
+            <Box>
+                <RoutineDetailsCard />
+                <Box height={20} />
+                <RoutineTable routine={routineQuery.data!} />
+            </Box>
+        </Stack>}
+    </WgerContainerFullWidth>;
+};
+
+

package/src/components/WorkoutRoutines/Detail/SessionAdd.test.tsx

@@ -0,0 +1,43 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from '@testing-library/react';
+import { SessionAdd } from "components/WorkoutRoutines/Detail/SessionAdd";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getLanguages, getRoutine, searchSession } from "services";
+import { testLanguages } from "tests/exerciseTestdata";
+import { testQueryClient } from "tests/queryClient";
+import { testWorkoutSession } from "tests/workoutLogsRoutinesTestData";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the SessionAdd component", () => {
+
+    beforeEach(() => {
+        (getRoutine as jest.Mock).mockResolvedValue(testRoutine1);
+        (getLanguages as jest.Mock).mockResolvedValue(testLanguages);
+        (searchSession as jest.Mock).mockResolvedValue(testWorkoutSession);
+    });
+
+    test('renders the form page', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <MemoryRouter initialEntries={['/test/101/5']}>
+                    <Routes>
+                        <Route path="/test/:routineId/:dayId" element={<SessionAdd />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        await waitFor(() => {
+            expect(getRoutine).toHaveBeenCalled();
+            expect(getLanguages).toHaveBeenCalled();
+            expect(searchSession).toHaveBeenCalled();
+        });
+        expect(screen.getByText('routines.addWeightLog')).toBeInTheDocument();
+    });
+});

package/src/components/WorkoutRoutines/Detail/SessionAdd.tsx

@@ -0,0 +1,50 @@
+import { Stack, Typography } from "@mui/material";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { SessionForm } from "components/WorkoutRoutines/widgets/forms/SessionForm";
+import { SessionLogsForm } from "components/WorkoutRoutines/widgets/forms/SessionLogsForm";
+import { DateTime } from "luxon";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { makeLink, WgerLink } from "utils/url";
+
+export const SessionAdd = () => {
+    const params = useParams<{ routineId: string, dayId: string }>();
+    const { t, i18n } = useTranslation();
+    const [selectedDate, setSelectedDate] = useState<DateTime>(DateTime.now());
+
+    const routineId = parseInt(params.routineId ?? '');
+    if (Number.isNaN(routineId)) {
+        return <p>Please pass an integer as the routine id.</p>;
+    }
+
+    const dayId = parseInt(params.dayId ?? '');
+    if (Number.isNaN(dayId)) {
+        return <p>Please pass an integer as the day id.</p>;
+    }
+
+    return <WgerContainerRightSidebar
+        title={t('routines.addWeightLog')}
+        backToUrl={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: routineId })}
+        mainContent={
+            <Stack>
+                <SessionForm
+                    routineId={routineId}
+                    dayId={dayId}
+                    selectedDate={selectedDate}
+                    setSelectedDate={setSelectedDate}
+                />
+
+                <Typography variant={"h5"}>{t('exercises.exercises')}</Typography>
+                <Typography variant={"body2"}>
+                    {t('routines.impressionHelpText')}
+                </Typography>
+                <SessionLogsForm
+                    routineId={routineId}
+                    dayId={dayId}
+                    selectedDate={selectedDate}
+                />
+            </Stack>
+        }
+    />;
+};

package/src/components/WorkoutRoutines/Detail/SlotProgressionEdit.test.tsx

@@ -0,0 +1,41 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from '@testing-library/react';
+import { SlotProgressionEdit } from "components/WorkoutRoutines/Detail/SlotProgressionEdit";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getLanguages, getRoutine } from "services";
+import { testLanguages } from "tests/exerciseTestdata";
+import { getTestQueryClient } from "tests/queryClient";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the SlotProgressionEdit component", () => {
+
+    beforeEach(() => {
+        (getRoutine as jest.Mock).mockResolvedValue(testRoutine1);
+        (getLanguages as jest.Mock).mockResolvedValue(testLanguages);
+    });
+
+    test('renders the progression page', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={getTestQueryClient()}>
+                <MemoryRouter initialEntries={['/test/101/2']}>
+                    <Routes>
+                        <Route path="/test/:routineId/:slotId" element={<SlotProgressionEdit />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(getRoutine).toHaveBeenCalledTimes(1);
+        await waitFor(() => {
+            expect(screen.getByText('routines.editProgression')).toBeInTheDocument();
+        });
+        expect(screen.getByText('routines.editProgression')).toBeInTheDocument();
+        expect(screen.getByText('Benchpress')).toBeInTheDocument();
+    });
+});