veza/apps/web/src/features/tracks/components/LikeButton.test.tsx

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LikeButton } from './LikeButton';
import {
import {
    likeTrack,
    unlikeTrack,
  } from '../services/interactionService';
getTrackLikes,
  TrackUploadError,
} from '../services/trackService';
import { useToast } from '@/hooks/useToast';

// Mock dependencies
vi.mock('../services/trackService');
vi.mock('@/hooks/useToast');

describe('LikeButton', () => {
  const mockToast = {
    success: vi.fn(),
    error: vi.fn(),
    warning: vi.fn(),
    info: vi.fn(),
    toast: vi.fn(),
  };

  beforeEach(() => {
    vi.clearAllMocks();
    vi.mocked(useToast).mockReturnValue(mockToast);
  });

  afterEach(() => {
    vi.restoreAllMocks();
  });

  it('should render like button', async () => {
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    expect(getTrackLikes).toHaveBeenCalledWith(1);
  });

  it('should display like count', async () => {
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 10,
      isLiked: false,
    });

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByText('10')).toBeInTheDocument();
    });
  });

  it('should not display count when count is 0', async () => {
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 0,
      isLiked: false,
    });

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    expect(screen.queryByText('0')).not.toBeInTheDocument();
  });

  it('should display filled heart when liked', async () => {
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: true,
    });

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      const button = screen.getByRole('button');
      expect(button).toHaveClass('text-red-500');
    });
  });

  it('should like track on click when not liked', async () => {
    const user = userEvent.setup();
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });
    vi.mocked(likeTrack).mockResolvedValue();

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    await waitFor(() => {
      expect(likeTrack).toHaveBeenCalledWith(1);
    });
  });

  it('should unlike track on click when liked', async () => {
    const user = userEvent.setup();
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: true,
    });
    vi.mocked(unlikeTrack).mockResolvedValue();

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    await waitFor(() => {
      expect(unlikeTrack).toHaveBeenCalledWith(1);
    });
  });

  it('should increment count when liking', async () => {
    const user = userEvent.setup();
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });
    vi.mocked(likeTrack).mockResolvedValue();

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByText('5')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    await waitFor(() => {
      expect(screen.getByText('6')).toBeInTheDocument();
    });
  });

  it('should decrement count when unliking', async () => {
    const user = userEvent.setup();
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: true,
    });
    vi.mocked(unlikeTrack).mockResolvedValue();

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByText('5')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    await waitFor(() => {
      expect(screen.getByText('4')).toBeInTheDocument();
    });
  });

  it('should not decrement below 0', async () => {
    const user = userEvent.setup();
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 0,
      isLiked: true,
    });
    vi.mocked(unlikeTrack).mockResolvedValue();

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    await waitFor(() => {
      expect(screen.queryByText('0')).not.toBeInTheDocument();
    });
  });

  it('should disable button while loading', async () => {
    const user = userEvent.setup();
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });
    vi.mocked(likeTrack).mockImplementation(
      () =>
        new Promise((resolve) => {
          setTimeout(() => resolve(), 100);
        }),
    );

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    expect(button).toBeDisabled();
  });

  it('should show error toast on like failure', async () => {
    const user = userEvent.setup();
    const error = new TrackUploadError('Failed to like track', 'SERVER', true);
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });
    vi.mocked(likeTrack).mockRejectedValue(error);

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    await waitFor(() => {
      expect(mockToast.error).toHaveBeenCalledWith('Failed to like track');
    });
  });

  it('should show error toast on unlike failure', async () => {
    const user = userEvent.setup();
    const error = new TrackUploadError(
      'Failed to unlike track',
      'SERVER',
      true,
    );
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: true,
    });
    vi.mocked(unlikeTrack).mockRejectedValue(error);

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    await waitFor(() => {
      expect(mockToast.error).toHaveBeenCalledWith('Failed to unlike track');
    });
  });

  it('should revert state on error', async () => {
    const user = userEvent.setup();
    const error = new TrackUploadError('Failed to like track', 'SERVER', true);
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });
    vi.mocked(likeTrack).mockRejectedValue(error);

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      expect(screen.getByText('5')).toBeInTheDocument();
    });

    const button = screen.getByRole('button');
    await user.click(button);

    // Should revert to original state
    await waitFor(() => {
      expect(screen.getByText('5')).toBeInTheDocument();
      expect(button).not.toHaveClass('text-red-500');
    });
  });

  it('should reload likes when trackId changes', async () => {
    const { rerender } = render(<LikeButton trackId={1} />);

    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });

    await waitFor(() => {
      expect(getTrackLikes).toHaveBeenCalledWith(1);
    });

    vi.clearAllMocks();
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 10,
      isLiked: true,
    });

    rerender(<LikeButton trackId={2} />);

    await waitFor(() => {
      expect(getTrackLikes).toHaveBeenCalledWith(2);
    });
  });

  it('should apply custom className', async () => {
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });

    render(<LikeButton trackId={1} className="custom-class" />);

    await waitFor(() => {
      const button = screen.getByRole('button');
      expect(button).toHaveClass('custom-class');
    });
  });

  it('should have correct aria-label when not liked', async () => {
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: false,
    });

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      const button = screen.getByRole('button');
      expect(button).toHaveAttribute('aria-label', 'Ajouter un like');
    });
  });

  it('should have correct aria-label when liked', async () => {
    vi.mocked(getTrackLikes).mockResolvedValue({
      count: 5,
      isLiked: true,
    });

    render(<LikeButton trackId={1} />);

    await waitFor(() => {
      const button = screen.getByRole('button');
      expect(button).toHaveAttribute('aria-label', 'Retirer le like');
    });
  });
});