Files
babymonitor/frontend/tests/unit/StatusBanner.test.tsx
T

86 lines
2.5 KiB
TypeScript

import { describe, it, expect, vi } from 'vitest';
import '@testing-library/jest-dom';
import { render, screen, waitFor, act } from '@testing-library/react';
import StatusBanner from '../../src/components/tracker/StatusBanner';
import { useSleepSession } from '../../src/hooks/useSleepSession';
// Mock the hook
vi.mock('../../src/hooks/useSleepSession', () => ({
useSleepSession: vi.fn(),
}));
describe('StatusBanner', () => {
beforeEach(() => {
vi.useFakeTimers();
});
afterEach(() => {
vi.restoreAllMocks();
vi.useRealTimers();
});
it('renders loading state when isLoading is true', () => {
vi.mocked(useSleepSession).mockReturnValue({
activeSession: null,
isLoading: true,
} as any);
render(<StatusBanner />);
expect(screen.getByText('Loading...')).toBeInTheDocument();
});
it('renders sleeping state when an active session exists', () => {
const startTime = '2026-06-10T10:00:00Z';
// Set "now" to 1 hour and 30 minutes after start_time
const now = new Date('2026-06-10T11:30:00Z');
vi.setSystemTime(now);
vi.mocked(useSleepSession).mockReturnValue({
activeSession: { start_time: startTime },
isLoading: false,
} as any);
render(<StatusBanner />);
expect(screen.getByText('Baby is sleeping')).toBeInTheDocument();
expect(screen.getByText(/😴/)).toBeInTheDocument();
// formatElapsedTime logic: diff is 90m -> "1h 30m"
expect(screen.getByText('(1h 30m)')).toBeInTheDocument();
});
it('updates elapsed time as time passes', async () => {
const startTime = '2026-06-10T10:00:00Z';
// Start at 5 minutes after
const now = new Date('2026-06-10T10:05:00Z');
vi.setSystemTime(now);
vi.mocked(useSleepSession).mockReturnValue({
activeSession: { start_time: startTime },
isLoading: false,
} as any);
render(<StatusBanner />);
expect(screen.getByText('(5m)')).toBeInTheDocument();
// Advance time by 10 minutes
await act(async () => {
vi.advanceTimersByTime(10 * 60 * 1000);
});
// Now it should be 15m
expect(screen.getByText('(15m)')).toBeInTheDocument();
});
it('renders awake state when no active session and not loading', () => {
vi.mocked(useSleepSession).mockReturnValue({
activeSession: null,
isLoading: false,
} as any);
render(<StatusBanner />);
expect(screen.getByText('Baby is awake')).toBeInTheDocument();
expect(screen.getByText(/👶/)).toBeInTheDocument();
});
});