diff --git a/src/components/Routines/widgets/RoutineDetailsCard.test.tsx b/src/components/Routines/widgets/RoutineDetailsCard.test.tsx index f8c9b188..47b6d2ce 100644 --- a/src/components/Routines/widgets/RoutineDetailsCard.test.tsx +++ b/src/components/Routines/widgets/RoutineDetailsCard.test.tsx @@ -5,6 +5,7 @@ import { RoutineDetailsCard } from "@/components/Routines/widgets/RoutineDetails import React from 'react'; import { MemoryRouter, Route, Routes } from "react-router-dom"; import { testRoutine1 } from "@/tests/workoutRoutinesTestData"; +import { Routine } from "@/components/Routines/models/Routine"; import type { Mock } from 'vitest'; vi.mock("@/components/Exercises/api/language"); @@ -59,4 +60,34 @@ describe("Test the RoutineDetail component", () => { expect(screen.getByText('Pull day')).toBeInTheDocument(); expect(screen.getByText('routines.restDay')).toBeInTheDocument(); }); + + test.each([ + ['with sequence data', testRoutine1], + ['without sequence data', new Routine({ ...testRoutine1, dayData: [] })], + ])('links the exercises to their detail page (%s)', async (_, routine) => { + + // Arrange + (useRoutineDetailQuery as Mock).mockImplementation(() => ({ + isSuccess: true, + isLoading: false, + data: routine + })); + + // Act + render( + + + + } /> + + + + ); + + // Assert + expect(screen.getByRole('link', { name: 'Squats' })).toHaveAttribute( + 'href', + expect.stringMatching(/\/exercise\/345\/view\/squats$/) + ); + }); }); diff --git a/src/components/Routines/widgets/RoutineDetailsCard.tsx b/src/components/Routines/widgets/RoutineDetailsCard.tsx index aea8af05..b4a8faad 100644 --- a/src/components/Routines/widgets/RoutineDetailsCard.tsx +++ b/src/components/Routines/widgets/RoutineDetailsCard.tsx @@ -1,4 +1,4 @@ -import { ExerciseImageAvatar, getLanguageByShortName, Language, useLanguageQuery } from "@/components/Exercises"; +import { Exercise, ExerciseImageAvatar, getLanguageByShortName, Language, useLanguageQuery } from "@/components/Exercises"; import { Day, getDayName } from "@/components/Routines/models/Day"; import { RoutineDayData } from "@/components/Routines/models/RoutineDayData"; import { SetConfigData } from "@/components/Routines/models/SetConfigData"; @@ -19,6 +19,7 @@ import { Container, Divider, IconButton, + Link, Stack, Typography, useTheme @@ -61,6 +62,26 @@ export const RoutineDetailsCard = () => { }; +/* + * Name of an exercise, linking to its detail page + */ +function ExerciseNameLink(props: { exercise: Exercise, language?: Language }) { + const { i18n } = useTranslation(); + const translation = props.exercise.getTranslation(props.language); + + return + {translation.name} + ; +} + + export function SetConfigDataDetails(props: { setConfigData: SetConfigData, rowHeight?: undefined | string, @@ -91,7 +112,7 @@ export function SetConfigDataDetails(props: { {props.showExercise && (props.setConfigData.exercise - ? props.setConfigData.exercise.getTranslation(language).name + ? : t('routines.exerciseNotAvailable'))}
@@ -200,7 +221,7 @@ function SlotEntryList(props: { slot: Slot }) { {props.slot.entries.map((entry) => {entry.exercise - ? entry.exercise.getTranslation(language).name + ? : t('routines.exerciseNotAvailable')} )}