diff --git a/frontend/src/components/stats/SleepTimetable.tsx b/frontend/src/components/stats/SleepTimetable.tsx index 7605f2e..9afedf9 100644 --- a/frontend/src/components/stats/SleepTimetable.tsx +++ b/frontend/src/components/stats/SleepTimetable.tsx @@ -9,15 +9,16 @@ interface TimetableProps { day_end: string; } -function getDayName(dateStr: string) { +export function getDayName(dateStr: string) { return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short' }); } -function formatDayLabel(dateStr: string) { +export function formatDayLabel(dateStr: string) { const date = new Date(dateStr + 'T00:00:00'); const weekday = date.toLocaleDateString('en-US', { weekday: 'short' }); const day = date.getDate(); - return `${weekday} ${day}`; + const month = date.getMonth() + 1; + return `${weekday} ${day}/${month}`; } function formatTimeLabel(mins: number) { @@ -176,7 +177,7 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
{/* Empty corner cell */} {visibleDays.map((day) => (
- {getDayName(day)} + {formatDayLabel(day)}
))}
diff --git a/frontend/src/components/stats/__tests__/SleepTimetableUtils.test.ts b/frontend/src/components/stats/__tests__/SleepTimetableUtils.test.ts new file mode 100644 index 0000000..15c4a78 --- /dev/null +++ b/frontend/src/components/stats/__tests__/SleepTimetableUtils.test.ts @@ -0,0 +1,9 @@ +import { describe, it, expect } from 'vitest'; +import { formatDayLabel } from '../SleepTimetable'; + +describe('formatDayLabel', () => { + it('formats date as "Weekday D/M"', () => { +expect(formatDayLabel('2025-06-09')).toBe('Mon 9/6'); +expect(formatDayLabel('2025-06-10')).toBe('Tue 10/6'); + }); +}); diff --git a/frontend/tests/unit/components/stats/SleepTimetable.test.tsx b/frontend/tests/unit/components/stats/SleepTimetable.test.tsx index 118b7ef..03c7384 100644 --- a/frontend/tests/unit/components/stats/SleepTimetable.test.tsx +++ b/frontend/tests/unit/components/stats/SleepTimetable.test.tsx @@ -56,9 +56,9 @@ describe('SleepTimetable', () => { }); render(); // Check if it renders the single day header - expect(screen.getByText(/18/i)).toBeInTheDocument(); + // Check if it renders the single day header with date format + expect(screen.getByText(/Fri 18\/4/i)).toBeInTheDocument(); }); - it('handles a large date range', () => { const largeRangeProps = { ...defaultProps, from_date: '2025-01-01', to_date: '2025-01-31' }; (useStats as any).mockReturnValue({ @@ -91,12 +91,11 @@ describe('SleepTimetable', () => { vi.stubGlobal('innerWidth', 1024); render(); - expect(screen.getByText(/18/i)).toBeInTheDocument(); - expect(screen.getByText(/19/i)).toBeInTheDocument(); - expect(screen.getByText(/20/i)).toBeInTheDocument(); - expect(screen.getByText(/21/i)).toBeInTheDocument(); + expect(screen.getByText(/Fri 18\/4/i)).toBeInTheDocument(); + expect(screen.getByText(/Sat 19\/4/i)).toBeInTheDocument(); + expect(screen.getByText(/Sun 20\/4/i)).toBeInTheDocument(); + expect(screen.getByText(/Mon 21\/4/i)).toBeInTheDocument(); }); - it('Medium Tier (400-768px): shows tab groups and updates on click', () => { (useStats as any).mockReturnValue({ timetable: mockTimetable, isLoading: false }); vi.stubGlobal('innerWidth', 500); @@ -134,17 +133,14 @@ describe('SleepTimetable', () => { }); expect(screen.getByRole('button', { name: /21/i })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: /20/i })).toBeInTheDocument(); - + expect(screen.getByRole('button', { name: /21\/4/i })).toBeInTheDocument(); act(() => { fireEvent.click(screen.getByRole('button', { name: /20/i })); }); - expect(container.querySelector('[data-testid^="cell-2025-04-20-"]')).toBeInTheDocument(); expect(container.querySelector('[data-testid^="cell-2025-04-21-"]')).not.toBeInTheDocument(); }); }); - describe('Grid Accuracy', () => { it('renders sleeping cells correctly', () => { const day = '2025-04-18'; diff --git a/todo.md b/todo.md index 266606d..018840b 100644 --- a/todo.md +++ b/todo.md @@ -2,8 +2,8 @@ - [/frontend start] Check so that all tests actually make sense, maybe some are now obsolete, and some are missing - [ ] Add a test coverage metric to both frontend and backend so that we can check how much of the code is tested. I would like >=90% -- [ ] Go over Claude's slop-cleanup-stuff -- [ ] Add dates on the sleep timetable days +- [/] Go over Claude's slop-cleanup-stuff +- [x] Add dates on the sleep timetable days - [x] Update the "Sleep Sessions" by adding a fake pagination view in the frontend so that I don't have to scroll so much. Instead, I want to simply click "next" and "previous" (with like numbers in between like a google search) - [x] Bug with gitea workflow: