veza/apps/web/src/components/ui/WaveformVisualizer.test.tsx

import { render, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { WaveformVisualizer } from './WaveformVisualizer';

describe('WaveformVisualizer Component', () => {
  const mockOnSeek = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders canvas', () => {
    const { container } = render(<WaveformVisualizer progress={50} onSeek={mockOnSeek} />);

    const canvas = container.querySelector('canvas');
    expect(canvas).toBeInTheDocument();
  });

  it('calls onSeek when canvas is clicked', () => {
    const { container } = render(<WaveformVisualizer progress={50} onSeek={mockOnSeek} />);

    const canvas = container.querySelector('canvas')!;

    // Mock getBoundingClientRect
    const mockRect = {
      left: 0,
      top: 0,
      width: 100,
      height: 64,
    };
    canvas.getBoundingClientRect = vi.fn(() => mockRect as DOMRect);

    fireEvent.click(canvas, { clientX: 50 });

    expect(mockOnSeek).toHaveBeenCalled();
  });

  it('uses waveformData when provided', () => {
    const waveformData = [0.5, 0.7, 0.3, 0.9];

    const { container } = render(
      <WaveformVisualizer
        waveformData={waveformData}
        progress={50}
        onSeek={mockOnSeek}
      />,
    );

    const canvas = container.querySelector('canvas');
    expect(canvas).toBeInTheDocument();
  });

  it('generates mock data when waveformData is not provided', () => {
    const { container } = render(<WaveformVisualizer progress={50} onSeek={mockOnSeek} />);

    const canvas = container.querySelector('canvas');
    expect(canvas).toBeInTheDocument();
  });

  it('applies custom height', () => {
    const { container } = render(
      <WaveformVisualizer progress={50} onSeek={mockOnSeek} height={100} />,
    );

    const canvas = container.querySelector('canvas');
    expect(canvas).toHaveStyle({ height: '100px' });
  });

  it('clamps seek percentage between 0 and 100', () => {
    const { container } = render(<WaveformVisualizer progress={50} onSeek={mockOnSeek} />);

    const canvas = container.querySelector('canvas')!;
    const mockRect = {
      left: 0,
      top: 0,
      width: 100,
      height: 64,
    };
    canvas.getBoundingClientRect = vi.fn(() => mockRect as DOMRect);

    // Click outside bounds (negative)
    fireEvent.click(canvas, { clientX: -10 });
    expect(mockOnSeek).toHaveBeenCalledWith(0);

    // Click outside bounds (too large)
    fireEvent.click(canvas, { clientX: 200 });
    expect(mockOnSeek).toHaveBeenCalledWith(100);
  });
});