tessera-ctl/apps/web/src/components/dashboard/widgets/clock-widget.test.tsx

import { cleanup, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';

// Mock next-intl
vi.mock('next-intl', () => ({
  useTranslations: (ns: string) => (key: string) => {
    const map: Record<string, Record<string, string>> = {
      widgets: {
        'clock.name': 'Clock',
        'clock.description': 'Shows the current time',
        'clock.dateHint': 'Show date',
      },
    };
    return map[ns]?.[key] ?? key;
  },
}));

afterEach(() => {
  cleanup();
  vi.useRealTimers();
});

describe('ClockWidget', () => {
  it('renders a time string with timezone config', async () => {
    vi.useFakeTimers();
    vi.setSystemTime(new Date('2026-06-24T12:30:00Z'));

    const { ClockWidget } = await import('./clock-widget');
    render(
      <ClockWidget
        instanceId="clock-1"
        config={{ timezone: 'Europe/Berlin', showDate: true }}
        isEditMode={false}
      />,
    );

    // Should render a time element
    const timeEl = screen.getByRole('time');
    expect(timeEl).toBeInTheDocument();
    // Time text should be non-empty
    expect(timeEl.textContent).toBeTruthy();

    // Should render a date element when showDate is true
    const dateEl = screen.getByTestId('clock-date');
    expect(dateEl).toBeInTheDocument();
    expect(dateEl.textContent).toBeTruthy();

    vi.useRealTimers();
  });

  it('does not render date element when showDate is false', async () => {
    vi.useFakeTimers();
    vi.setSystemTime(new Date('2026-06-24T12:30:00Z'));

    const { ClockWidget } = await import('./clock-widget');
    render(
      <ClockWidget
        instanceId="clock-2"
        config={{ timezone: 'Europe/Berlin', showDate: false }}
        isEditMode={false}
      />,
    );

    expect(screen.queryByTestId('clock-date')).not.toBeInTheDocument();

    vi.useRealTimers();
  });
});