Fix time duration and visuals

2026-04-24 22:43:45 +02:00
parent ee0bb780c1
commit 192432f8e5
14 changed files with 281 additions and 111 deletions
@@ -0,0 +1,81 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import StatusBanner from '../../src/components/tracker/StatusBanner';
+import { useSleepSession } from '../../src/hooks/useSleepSession';
+import { formatElapsedTime } from '../../src/utils/time';
+
+vi.mock('../../src/hooks/useSleepSession', () => ({
+  useSleepSession: vi.fn(),
+}));
+
+describe('StatusBanner - Timezone Fix', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  describe('formatElapsedTime', () => {
+    it('should show correct elapsed time for session started ~49 minutes ago', () => {
+      vi.setSystemTime(new Date('2026-04-24T08:51:00Z'));
+
+      const result = formatElapsedTime('2026-04-24T08:02:00');
+
+      expect(result).toBe('49m');
+    });
+
+    it('should show hours and minutes for longer sessions', () => {
+      vi.setSystemTime(new Date('2026-04-24T10:02:00Z'));
+
+      const result = formatElapsedTime('2026-04-24T08:02:00');
+
+      expect(result).toBe('2h 0m');
+    });
+
+    it('should show minutes only for sessions under an hour', () => {
+      vi.setSystemTime(new Date('2026-04-24T08:07:00Z'));
+
+      const result = formatElapsedTime('2026-04-24T08:02:00');
+
+      expect(result).toBe('5m');
+    });
+  });
+
+  describe('StatusBanner display', () => {
+    it('shows correct elapsed time for active session', () => {
+      vi.setSystemTime(new Date('2026-04-24T08:51:00Z'));
+
+      vi.mocked(useSleepSession).mockReturnValue({
+        activeSession: {
+          id: 4,
+          start_time: '2026-04-24T08:02:00',
+          end_time: null,
+          notes: null,
+          created_at: '2026-04-24T08:02:28.942902',
+          updated_at: '2026-04-24T08:02:28.942927',
+        },
+        isLoading: false,
+      } as any);
+
+      render(<StatusBanner />);
+
+      expect(screen.getByText(/Baby is sleeping/)).toBeInTheDocument();
+      expect(screen.getByText(/\(49m\)/)).toBeInTheDocument();
+    });
+
+    it('shows awake state when no active session', () => {
+      vi.mocked(useSleepSession).mockReturnValue({
+        activeSession: null,
+        isLoading: false,
+      } as any);
+
+      render(<StatusBanner />);
+
+      expect(screen.getByText(/Baby is awake/)).toBeInTheDocument();
+    });
+  });
+});