A try of overhauling the frontend tests, bailed after 24h+

frontend/src/components/stats/SessionList.tsx

@@ -75,8 +75,9 @@ export function SessionList() {
               <div className="flex flex-col space-y-3 py-1">
                 <div className="grid grid-cols-1 gap-3 text-xs text-gray-500">
                   <div className="flex flex-col gap-1">
-                    <span className="font-medium text-gray-700">Start Time</span>
+                    <label htmlFor={`start-${s.id}`} className="font-medium text-gray-700">Start Time</label>
                     <input
+                      id={`start-${s.id}`}
                       type="datetime-local"
                       className="border rounded px-2 py-1.5 text-sm text-black w-full focus:ring-2 focus:ring-blue-500 outline-none"
                       value={editStart}
@@ -84,8 +85,9 @@ export function SessionList() {
                     />
                   </div>
                   <div className="flex flex-col gap-1">
-                    <span className="font-medium text-gray-700">End Time</span>
+                    <label htmlFor={`end-${s.id}`} className="font-medium text-gray-700">End Time</label>
                     <input
+                      id={`end-${s.id}`}
                       type="datetime-local"
                       className="border rounded px-2 py-1.5 text-sm text-black w-full focus:ring-2 focus:ring-blue-500 outline-none"
                       value={editEnd}
@@ -116,6 +118,7 @@ export function SessionList() {
               <div 
                 className="flex flex-col sm:flex-row sm:justify-between sm:items-center cursor-pointer hover:bg-gray-50 transition-colors rounded-lg px-2"
                 onClick={() => startEditing(s)}
+                data-testid="session-row"
               >
                 <div className="flex flex-col sm:flex-row sm:items-baseline sm:gap-3">
                   <div className="flex flex-col sm:flex-row sm:items-baseline sm:gap-2">
@@ -161,6 +164,6 @@ export function SessionList() {
           onPageChange={setCurrentPage} 
         />
       )}
-    </div >
+    </div>
   );
 }

frontend/src/components/tracker/TimeAdjuster.tsx

@@ -34,6 +34,7 @@ const TimeAdjuster: React.FC<TimeAdjusterProps> = ({ onTimeChange, defaultValue
           type="datetime-local"
           value={value}
           onChange={(e) => setValue(e.target.value)}
+          aria-label="Time"
           className="w-full p-4 bg-gray-50 border border-gray-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-lg font-medium transition-all outline-none"
         />
       </div>
@@ -47,4 +48,4 @@ const TimeAdjuster: React.FC<TimeAdjusterProps> = ({ onTimeChange, defaultValue
   );
 };
 
-export default TimeAdjuster;
+export default TimeAdjuster;

frontend/src/hooks/useSettings.ts

@@ -1,6 +1,8 @@
 import { useContext } from 'react';
 import { SettingsContext } from './SettingsProvider';
 
+console.log('useSettings.ts loaded');
+
 export function useSettings() {
   const context = useContext(SettingsContext);
   if (context === undefined) {

frontend/src/hooks/useSleepSession.ts

@@ -12,7 +12,7 @@ export function useSleepSession() {
   });
 
   const createMutation = useMutation({
-    mutationFn: createSession,
+    mutationFn: (args) => createSession(args),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['activeSession'] });
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
@@ -20,8 +20,7 @@ export function useSleepSession() {
   });
 
   const endMutation = useMutation({
-    mutationFn: ({ sessionId, endTime }: { sessionId: number; endTime: string }) =>
-      endSession(sessionId, { end_time: endTime }),
+    mutationFn: (args) => endSession(args.sessionId, { end_time: args.endTime }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['activeSession'] });
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
@@ -48,19 +47,19 @@ export function useSessions() {
   });
 
   const deleteMutation = useMutation({
-    mutationFn: deleteSession,
+    mutationFn: (id) => deleteSession(id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
     },
   });
 
-   const updateMutation = useMutation({
-     mutationFn: ({ sessionId, payload }: { sessionId: number; payload: import('../types').SleepSessionUpdate }) => 
-       updateSession(sessionId, payload),
-     onSuccess: () => {
-       queryClient.invalidateQueries({ queryKey: ['sessions'] });
-     },
-   });
+  const updateMutation = useMutation({
+    mutationFn: ({ sessionId, payload }: { sessionId: number; payload: import('../types').SleepSessionUpdate }) => 
+      updateSession(sessionId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['sessions'] });
+    },
+  });
 
   return {
     sessions: sessionsQuery.data?.sessions || [],
@@ -71,3 +70,5 @@ export function useSessions() {
     updateSession: updateMutation.mutateAsync,
   };
 }
+
+

frontend/src/hooks/useStats.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { fetchDailySummary, fetchTimetable, fetchWakeSleepTimes, fetchSummary } from '../api/client';
 import type { DailySummaryResponse, TimetableResponse, WakeupBedtimeResponse, SummaryResponse } from '../types';
@@ -38,5 +39,12 @@ export function useStats(
     timetable: timetableQuery.data,
     wakeupBedtime: wakeupBedtimeQuery.data,
     isLoading: dailySummaryQuery.isLoading || timetableQuery.isLoading || wakeupBedtimeQuery.isLoading,
+    error: dailySummaryQuery.error || timetableQuery.error || wakeupBedtimeQuery.error,
+    transformedDailySummary: dailySummaryQuery.data?.days ? dailySummaryQuery.data.days.map(day => ({
+      date: day.date,
+      daySleep: day.day_minutes / 60,
+      nightSleep: day.night_minutes / 60,
+      total: day.total_minutes / 60,
+    })) : null,
   };
 }